@kinetixui/ui 0.1.0 → 0.4.0

package/dist/index.js

@@ -27,13 +27,20 @@ var buttonVariants = cva(
     variants: {
       variant: {
         // bg primary / text on-primary; hover+active step down the blue ramp; disabled -> border grey
-        Primary: "bg-primary text-primary-foreground hover:bg-[--color-blue-600] active:bg-[--color-blue-700] disabled:bg-border disabled:text-muted-foreground",
-        // rest = secondaryContainer; hover/active promote to full secondary with on-secondary text
-        Secondary: "bg-secondary text-secondary-foreground hover:bg-[--color-green-500] hover:text-[--color-green-50] active:bg-[--color-green-600] active:text-[--color-green-50] focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
-        // 1px outline; hover fills with accent (LightBlue); active pins primary border+text
-        Outline: "border border-input bg-transparent text-foreground hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
+        // rest = --primary; hover/active dim it via opacity so it works in BOTH themes.
+        // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
+        //  where --primary is light, it inverted the button into the near-black background.)
+        Primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 disabled:bg-border disabled:text-muted-foreground",
+        // rest = --secondary; hover/active promote to the --secondary-foreground fill with
+        //  inverted text — theme-aware, unlike the previous hard-coded green primitives
+        Secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground/90 active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
+        // 1px outline; hover fills with accent + strengthens the edge to --ring so the
+        // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
+        Outline: "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
         Destructive: "bg-destructive text-destructive-foreground hover:brightness-95 active:brightness-90 disabled:bg-border disabled:text-muted-foreground",
-        Ghost: "bg-transparent text-foreground hover:bg-accent active:bg-accent active:text-primary disabled:text-muted-foreground disabled:bg-transparent",
+        // transparent rest; hover adds an inset --ring outline (the accent fill alone is
+        // <3:1 against the page on dark) plus the accent fill; active pins primary text
+        Ghost: "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-primary active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
         Link: "bg-transparent text-primary underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline"
       },
       size: {
@@ -63,13 +70,13 @@ var buttonVariants = cva(
     },
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
-      { variant: "Primary", state: "Hover", class: "bg-[--color-blue-600]" },
-      { variant: "Primary", state: "Active", class: "bg-[--color-blue-700]" },
-      { variant: "Secondary", state: "Hover", class: "bg-[--color-green-500] text-[--color-green-50]" },
-      { variant: "Secondary", state: "Active", class: "bg-[--color-green-600] text-[--color-green-50]" },
-      { variant: "Outline", state: "Hover", class: "bg-accent" },
+      { variant: "Primary", state: "Hover", class: "bg-primary/90" },
+      { variant: "Primary", state: "Active", class: "bg-primary/80" },
+      { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
+      { variant: "Secondary", state: "Active", class: "bg-secondary-foreground/90 text-secondary" },
+      { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
       { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
-      { variant: "Ghost", state: "Hover", class: "bg-accent" },
+      { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },
       { variant: "Ghost", state: "Active", class: "bg-accent text-primary" },
       { variant: "Link", state: "Hover", class: "underline text-foreground" },
       { variant: "Link", size: ["sm", "md", "lg"], class: "py-2 px-0 h-auto" }
@@ -596,7 +603,7 @@ var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var contentCls = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
-var itemCls = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var itemCls = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var DropdownMenuContent = React12.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Content, { ref, sideOffset, className: cn(contentCls, className), ...props }) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropdownMenuItem = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Item, { ref, className: cn(itemCls, inset && "pl-8", className), ...props }));
@@ -886,7 +893,7 @@ var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) =>
     ref,
     className: cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -1262,7 +1269,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva9 } from "class-variance-authority";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var toggleVariants = cva9(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -1729,7 +1736,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var itemCls2 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var itemCls2 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var contentCls2 = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
 var ContextMenuSubTrigger = React34.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
   ContextMenuPrimitive.SubTrigger,
@@ -2070,7 +2077,8 @@ var InputGroupButton = React39.forwardRef(({ className, type = "button", ...prop
     type,
     className: cn(
       "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
-      "outline-none transition-colors hover:bg-accent focus-visible:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+      // base is bg-muted and muted==accent on dark, so the fill is a no-op there — the ring carries it
+      "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
@@ -2157,7 +2165,7 @@ var MenubarGroup = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.Group, { ..
 var MenubarPortal = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.Portal, { ...props });
 var MenubarSub = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.Sub, { ...props });
 var MenubarRadioGroup = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.RadioGroup, { ...props });
-var itemCls3 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var itemCls3 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var contentCls3 = "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
 var Menubar = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   MenubarPrimitive.Root,
@@ -2173,7 +2181,7 @@ var MenubarTrigger = React42.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-ring",
       className
     ),
     ...props
@@ -3021,7 +3029,8 @@ var ListItem = React51.forwardRef(
         } : void 0,
         className: cn(
           "flex items-center gap-3 px-3 py-3 font-sans outline-none",
-          interactive && "cursor-pointer hover:bg-accent focus-visible:bg-accent",
+          // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
+          interactive && "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
           disabled && "pointer-events-none opacity-50",
           className
         ),
@@ -3199,7 +3208,7 @@ var NavigationBar = React55.forwardRef(
             type: "button",
             onClick: onBack,
             "aria-label": "Back",
-            className: "flex size-9 items-center justify-center rounded-full text-foreground outline-none transition-colors hover:bg-accent focus-visible:bg-accent",
+            className: "flex size-9 items-center justify-center rounded-full text-foreground outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
             children: /* @__PURE__ */ jsx61(ChevronLeft3, { className: "size-5" })
           }
         )) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -89,18 +89,26 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.1.0",
+    "@kinetixui/tokens": "0.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --external react --external react-dom",
     "lint": "eslint src",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/components/button.tsx

@@ -35,18 +35,25 @@ const buttonVariants = cva(
     variants: {
       variant: {
         // bg primary / text on-primary; hover+active step down the blue ramp; disabled -> border grey
+        // rest = --primary; hover/active dim it via opacity so it works in BOTH themes.
+        // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
+        //  where --primary is light, it inverted the button into the near-black background.)
         Primary:
-          "bg-primary text-primary-foreground hover:bg-[--color-blue-600] active:bg-[--color-blue-700] disabled:bg-border disabled:text-muted-foreground",
-        // rest = secondaryContainer; hover/active promote to full secondary with on-secondary text
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 disabled:bg-border disabled:text-muted-foreground",
+        // rest = --secondary; hover/active promote to the --secondary-foreground fill with
+        //  inverted text — theme-aware, unlike the previous hard-coded green primitives
         Secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[--color-green-500] hover:text-[--color-green-50] active:bg-[--color-green-600] active:text-[--color-green-50] focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
-        // 1px outline; hover fills with accent (LightBlue); active pins primary border+text
+          "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground/90 active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
+        // 1px outline; hover fills with accent + strengthens the edge to --ring so the
+        // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
         Outline:
-          "border border-input bg-transparent text-foreground hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
+          "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
         Destructive:
           "bg-destructive text-destructive-foreground hover:brightness-95 active:brightness-90 disabled:bg-border disabled:text-muted-foreground",
+        // transparent rest; hover adds an inset --ring outline (the accent fill alone is
+        // <3:1 against the page on dark) plus the accent fill; active pins primary text
         Ghost:
-          "bg-transparent text-foreground hover:bg-accent active:bg-accent active:text-primary disabled:text-muted-foreground disabled:bg-transparent",
+          "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-primary active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
         Link: "bg-transparent text-primary underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline",
       },
       size: {
@@ -76,13 +83,13 @@ const buttonVariants = cva(
     },
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
-      { variant: "Primary", state: "Hover", class: "bg-[--color-blue-600]" },
-      { variant: "Primary", state: "Active", class: "bg-[--color-blue-700]" },
-      { variant: "Secondary", state: "Hover", class: "bg-[--color-green-500] text-[--color-green-50]" },
-      { variant: "Secondary", state: "Active", class: "bg-[--color-green-600] text-[--color-green-50]" },
-      { variant: "Outline", state: "Hover", class: "bg-accent" },
+      { variant: "Primary", state: "Hover", class: "bg-primary/90" },
+      { variant: "Primary", state: "Active", class: "bg-primary/80" },
+      { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
+      { variant: "Secondary", state: "Active", class: "bg-secondary-foreground/90 text-secondary" },
+      { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
       { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
-      { variant: "Ghost", state: "Hover", class: "bg-accent" },
+      { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },
       { variant: "Ghost", state: "Active", class: "bg-accent text-primary" },
       { variant: "Link", state: "Hover", class: "underline text-foreground" },
       { variant: "Link", size: ["sm", "md", "lg"], class: "py-2 px-0 h-auto" },

package/src/components/context-menu.tsx

@@ -13,7 +13,7 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const itemCls =
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 const contentCls =
   "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
 

package/src/components/dropdown-menu.tsx

@@ -15,7 +15,7 @@ const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const contentCls =
   "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
 const itemCls =
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,

package/src/components/input-group.tsx

@@ -84,7 +84,8 @@ const InputGroupButton = React.forwardRef<
     type={type}
     className={cn(
       "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
-      "outline-none transition-colors hover:bg-accent focus-visible:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+      // base is bg-muted and muted==accent on dark, so the fill is a no-op there — the ring carries it
+      "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       className,
     )}

package/src/components/list.tsx

@@ -48,7 +48,9 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
         }
         className={cn(
           "flex items-center gap-3 px-3 py-3 font-sans outline-none",
-          interactive && "cursor-pointer hover:bg-accent focus-visible:bg-accent",
+          // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
+          interactive &&
+            "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
           disabled && "pointer-events-none opacity-50",
           className,
         )}

package/src/components/menubar.tsx

@@ -22,7 +22,7 @@ const MenubarRadioGroup = (props: React.ComponentProps<typeof MenubarPrimitive.R
 );
 
 const itemCls =
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 const contentCls =
   "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
 
@@ -45,7 +45,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-ring",
       className,
     )}
     {...props}

package/src/components/navigation-bar.tsx

@@ -30,7 +30,7 @@ const NavigationBar = React.forwardRef<HTMLElement, NavigationBarProps>(
               type="button"
               onClick={onBack}
               aria-label="Back"
-              className="flex size-9 items-center justify-center rounded-full text-foreground outline-none transition-colors hover:bg-accent focus-visible:bg-accent"
+              className="flex size-9 items-center justify-center rounded-full text-foreground outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"
             >
               <ChevronLeft className="size-5" />
             </button>

package/src/components/select.tsx

@@ -89,7 +89,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

package/src/components/toggle.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

package/src/components-behavior.test.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Badge } from "./components/badge";
+import { Button } from "./components/button";
+import { Input } from "./components/input";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./components/accordion";
+
+describe("Button", () => {
+  it("renders the label and forwards clicks", async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Save</Button>);
+    await userEvent.click(screen.getByRole("button", { name: "Save" }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("maps the design-source variant prop to a class", () => {
+    render(<Button variant="Destructive">x</Button>);
+    expect(screen.getByRole("button")).toHaveClass("bg-destructive");
+  });
+
+  it("renders as a child element with asChild", () => {
+    render(
+      <Button asChild>
+        <a href="/x">link</a>
+      </Button>,
+    );
+    expect(screen.getByRole("link", { name: "link" })).toHaveAttribute("href", "/x");
+  });
+});
+
+describe("Input", () => {
+  it("sets aria-invalid when state is Error", () => {
+    render(<Input state="Error" defaultValue="nope" />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("is not aria-invalid by default", () => {
+    render(<Input />);
+    expect(screen.getByRole("textbox")).not.toHaveAttribute("aria-invalid", "true");
+  });
+});
+
+describe("Badge", () => {
+  it("gives each variant a distinct class", () => {
+    const { rerender } = render(<Badge>tag</Badge>);
+    const def = screen.getByText("tag").className;
+    rerender(<Badge variant="secondary">tag</Badge>);
+    expect(screen.getByText("tag").className).not.toBe(def);
+    expect(screen.getByText("tag")).toHaveClass("text-secondary");
+  });
+});
+
+describe("Accordion", () => {
+  it("reveals content when a trigger is activated", async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>Question</AccordionTrigger>
+          <AccordionContent>Answer text</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    expect(screen.queryByText("Answer text")).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Question" }));
+    expect(screen.getByText("Answer text")).toBeVisible();
+  });
+});

package/src/components-smoke.test.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { render, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+/**
+ * Every Storybook story is a real composition of a shipped component. Render
+ * each one in jsdom and assert it mounts without throwing — a cheap regression
+ * net across the whole library.
+ */
+const stories = import.meta.glob("./stories/*.stories.tsx", { eager: true }) as Record<
+  string,
+  Record<string, unknown>
+>;
+
+// Stories that can't render meaningfully in jsdom (need real layout / canvas).
+const SKIP = new Set<string>([]);
+
+afterEach(cleanup);
+
+describe("component smoke", () => {
+  const entries = Object.entries(stories).sort(([a], [b]) => a.localeCompare(b));
+  expect(entries.length).toBeGreaterThan(60);
+
+  for (const [path, mod] of entries) {
+    const name = path.split("/").pop()!.replace(".stories.tsx", "");
+    const meta = mod.default as { component?: React.ComponentType<unknown>; args?: Record<string, unknown> };
+
+    const storyKey = ["Default", "Playground", "Variants", "States"].find(
+      (k) => mod[k] && typeof mod[k] === "object",
+    );
+    const story = storyKey ? (mod[storyKey] as { render?: (...a: unknown[]) => React.ReactNode; args?: Record<string, unknown> }) : undefined;
+
+    (SKIP.has(name) ? it.skip : it)(`${name} mounts`, () => {
+      const args = { ...meta?.args, ...story?.args };
+      const node =
+        typeof story?.render === "function"
+          ? story.render(args, { args } as never)
+          : meta?.component
+            ? React.createElement(meta.component, args)
+            : null;
+
+      expect(node, `${name}: no renderable story export`).not.toBeNull();
+      const { container } = render(node as React.ReactElement);
+      expect(container).toBeInTheDocument();
+    });
+  }
+});

package/src/stories/Accordion.stories.tsx

@@ -0,0 +1,49 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Accordion type="single" collapsible className="w-full max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It follows the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Is it themed?</AccordionTrigger>
+        <AccordionContent>Yes — entirely from the KinetixUI token contract.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+
+const meta = {
+  title: "Data Display/Accordion",
+  component: Accordion,
+  args: { type: "single", collapsible: true },
+  argTypes: {
+    type: { control: "inline-radio", options: ["single", "multiple"] },
+    collapsible: { control: "boolean" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Accordion type="single" collapsible>\n  <AccordionItem value="a">\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\n    <AccordionContent>Yes. It follows the WAI-ARIA design pattern.</AccordionContent>\n  </AccordionItem>\n</Accordion>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Accordion {...args} className="w-full max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It follows the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Is it themed?</AccordionTrigger>
+        <AccordionContent>Yes — entirely from the KinetixUI token contract.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Alert.stories.tsx

@@ -0,0 +1,38 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, AlertDescription, AlertTitle } from "@kinetixui/ui";
+import { Terminal } from "lucide-react";
+
+const Demo = () => (
+    <Alert className="max-w-md">
+      <Terminal className="size-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+    </Alert>
+  );
+
+const meta = {
+  title: "Feedback/Alert",
+  component: Alert,
+  args: { variant: "default" },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "destructive", "success", "warning", "info"] },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Alert>\n  <Terminal className="size-4" />\n  <AlertTitle>Heads up!</AlertTitle>\n  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>\n</Alert>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Alert {...args} className="max-w-md">
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+    </Alert>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/AlertDialog.stories.tsx

@@ -0,0 +1,35 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from "@kinetixui/ui";
+
+const Demo = () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="Outline">Delete account</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
+const meta = {
+  title: "Overlays/AlertDialog",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<AlertDialog>\n  <AlertDialogTrigger asChild><Button variant="Outline">Delete account</Button></AlertDialogTrigger>\n  <AlertDialogContent>…</AlertDialogContent>\n</AlertDialog>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/AspectRatio.stories.tsx

@@ -0,0 +1,32 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AspectRatio } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="w-[280px]">
+      <AspectRatio ratio={16 / 9} className="rounded-md bg-muted" />
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/AspectRatio",
+  component: AspectRatio,
+  args: { ratio: 1.7778 },
+  argTypes: { ratio: { control: { type: "number", step: 0.05 } } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<AspectRatio ratio={16 / 9} className="bg-muted rounded-md" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <div className="w-64">
+      <AspectRatio {...args} className="rounded-md bg-muted" />
+    </div>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };