feat: muted listbox button

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/ListItem/ListItem.tsx

@@ -4,7 +4,7 @@ import { classNames, variantClassNames } from "../../util/classes";
 
 export interface ListItemProps
   extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
-  variant?: "default" | "secondary" | "error";
+  variant?: "default" | "secondary" | "error" | "muted";
   disabled?: boolean;
   asChild?: boolean;
   className?: string;
@@ -35,6 +35,8 @@ export const ListItem: React.FC<ListItemProps> = ({
           secondary:
             "ink:bg-button-secondary ink:hover:bg-button-secondary-hover ink:active:bg-button-secondary-pressed ink:data-active:bg-button-secondary-pressed ink:text-button-secondary-text",
           error: "ink:text-status-error ink:hover:bg-status-error-bg",
+          muted:
+            "ink:bg-background-container ink:text-text-muted ink:border-1 ink:border-transparent ink:focus:border-text-on-secondary ink:transition-colors ink:transition-default-animation",
         }),
         "ink:data-disabled:text-text-muted ink:data-disabled:cursor-not-allowed",
         className

src/components/Listbox/Listbox.stories.tsx

@@ -159,3 +159,26 @@ export const WithManyOptions: Story = {
     );
   },
 };
+
+export const WithADifferentButtonVariant: Story = {
+  args: {
+    children: (
+      <ListboxOptions>
+        {[...defaultItems, ...moreItems].map((item) => (
+          <ListboxOption key={item.value} value={item}>
+            {item.label}
+          </ListboxOption>
+        ))}
+      </ListboxOptions>
+    ),
+  },
+  render: (args) => {
+    const [item, setValue] = useState<ListboxStoryItem>(defaultItems[0]);
+    return (
+      <Listbox value={item} onChange={setValue}>
+        <ListboxButton variant="muted">Selected: {item.label}</ListboxButton>
+        {args.children}
+      </Listbox>
+    );
+  },
+};

src/components/Listbox/Listbox.tsx

@@ -4,7 +4,6 @@ import { PropsWithChildren } from "react";
 export interface ListboxProps<T> extends PropsWithChildren {
   value: T;
   onChange: (value: T) => void;
-  className?: string;
   /** If you provide `multiple`, then `value` and `onChange` must use an array. */
   multiple?: boolean;
 }

src/components/Listbox/ListboxButton.tsx

@@ -2,19 +2,23 @@ import { ListboxButton as HeadlessListboxButton } from "@headlessui/react";
 import { forwardRef } from "react";
 import { InkIcon } from "../..";
 import { ListItem, ListItemProps } from "../ListItem";
+import { classNames } from "../../util/classes";
 
 interface ListboxButtonProps extends ListItemProps {
   className?: string;
 }
 
 export const ListboxButton = forwardRef<HTMLButtonElement, ListboxButtonProps>(
-  ({ className, children, ...props }, ref) => {
+  ({ className, children, variant = "secondary", ...props }, ref) => {
     return (
       <HeadlessListboxButton
-        className={className}
+        className={classNames(
+          className,
+          "ink:focus-visible:outline-none ink:data-active:border-text-on-secondary"
+        )}
         ref={ref}
         as={ListItem}
-        variant="secondary"
+        variant={variant}
         iconRight={<InkIcon.Chevron />}
         {...props}
       >

src/layout/InkLayout/InkLayout.tsx

@@ -81,7 +81,7 @@ export const InkLayout: React.FC<InkLayoutProps> = ({
           {sideNavigation && (
             <div
               className={classNames(
-                "ink:w-[260px] ink:px-4 ink:hidden ink:lg:block ink:shrink-0"
+                "ink:w-[244px] ink:px-4 ink:hidden ink:lg:block ink:shrink-0 ink:box-border"
               )}
             >
               {sideNavigation}