@kinetixui/ui 0.16.1 → 0.18.0

package/src/lib/utils.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { cn } from "./utils";
+
+describe("cn", () => {
+  it("keeps a type-scale class and a text colour together", () => {
+    expect(cn("text-primary-foreground", "text-label-sm")).toBe("text-primary-foreground text-label-sm");
+    expect(cn("text-label-sm", "text-primary-foreground")).toBe("text-label-sm text-primary-foreground");
+  });
+  it("still lets a later type-scale class override an earlier one", () => {
+    expect(cn("text-label-sm", "text-body-md")).toBe("text-body-md");
+  });
+});

package/src/lib/utils.ts

@@ -1,5 +1,26 @@
 import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// The Material type-scale utilities (`text-label-md`, `text-body-sm`, …) come
+// from `fontSize` in tailwind.config.ts. Without this, tailwind-merge reads them
+// as text *colours* and drops a real colour class (`text-primary-foreground`).
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-lg", "display-md", "display-sm",
+            "headline-lg", "headline-md", "headline-sm",
+            "title-lg", "title-md", "title-sm", "title-dialog",
+            "label-lg", "label-md", "label-sm",
+            "body-lg", "body-md", "body-sm",
+          ],
+        },
+      ],
+    },
+  },
+});
 
 /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
 export function cn(...inputs: ClassValue[]) {

package/src/stories/Checkbox.stories.tsx

@@ -24,6 +24,6 @@ const meta = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Checkbox {...args} /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Checkbox aria-label="Accept terms" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/CircularProgress.stories.tsx

@@ -12,9 +12,9 @@ const Demo = () => {
     }, []);
     return (
       <div className="flex items-center gap-6">
-        <CircularProgress value={v} showValue />
-        <CircularProgress value={v} size={64} strokeWidth={6} showValue />
-        <CircularProgress value={v} />
+        <CircularProgress value={v} showValue aria-label="Upload progress" />
+        <CircularProgress value={v} size={64} strokeWidth={6} showValue aria-label="Upload progress" />
+        <CircularProgress value={v} aria-label="Upload progress" />
       </div>
     );
   };
@@ -37,6 +37,6 @@ const meta = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <CircularProgress {...args} /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <CircularProgress aria-label="Upload progress" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/InputOTP.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@kinetixui/ui";
 
 const Demo = () => (
-    <InputOTP maxLength={6}>
+    <InputOTP maxLength={6} aria-label="One-time code">
       <InputOTPGroup>
         {Array.from({ length: 6 }).map((_, i) => (
           <InputOTPSlot key={i} index={i} />
@@ -18,7 +18,7 @@ const meta = {
   title: "Form Inputs/InputOTP",
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<InputOTP maxLength={6}>\\n  <InputOTPGroup>\\n    <InputOTPSlot index={0} />\\n    ...\\n    <InputOTPSlot index={5} />\\n  </InputOTPGroup>\\n</InputOTP>", language: "tsx" } },
+    docs: { source: { code: "<InputOTP maxLength={6} aria-label=\\\"One-time code\\\">\\n  <InputOTPGroup>\\n    <InputOTPSlot index={0} />\\n    ...\\n    <InputOTPSlot index={5} />\\n  </InputOTPGroup>\\n</InputOTP>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/List.stories.tsx

@@ -8,7 +8,7 @@ import { Bell, Settings, User } from "lucide-react";
 const Demo = () => (
     <List className="w-full max-w-sm rounded-md border">
       <ListItem leading={<User className="size-5 text-muted-foreground" />} title="Profile" description="Name, photo, and personal details" trailing={<Badge variant="outline">2</Badge>} onSelect={() => {}} />
-      <ListItem leading={<Bell className="size-5 text-muted-foreground" />} title="Notifications" description="Push, email and SMS preferences" trailing={<Switch />} />
+      <ListItem leading={<Bell className="size-5 text-muted-foreground" />} title="Notifications" description="Push, email and SMS preferences" trailing={<Switch aria-label="Notifications" />} />
       <ListItem leading={<Settings className="size-5 text-muted-foreground" />} title="Settings" onSelect={() => {}} />
     </List>
   );
@@ -17,7 +17,7 @@ const meta = {
   title: "Data Display/List",
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<List>\\n  <ListItem\\n    leading={<User />}\\n    title=\"Profile\"\\n    description=\"Name, photo, and personal details\"\\n    onSelect={() => router.push(\"/profile\")}\\n  />\\n  <ListItem leading={<Bell />} title=\"Notifications\" trailing={<Switch />} />\\n</List>", language: "tsx" } },
+    docs: { source: { code: "<List>\\n  <ListItem\\n    leading={<User />}\\n    title=\"Profile\"\\n    description=\"Name, photo, and personal details\"\\n    onSelect={() => router.push(\"/profile\")}\\n  />\\n  <ListItem leading={<Bell />} title=\"Notifications\" trailing={<Switch aria-label=\"Notifications\" />} />\\n</List>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/MarkdownEditor.stories.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
     const [text, setText] = React.useState(
       "## Release notes\n\nShipped **MarkdownEditor** — a toolbar over a plain textarea, not `contenteditable`.\n\n- Bold, italic, links\n- Bulleted and numbered lists\n- An optional preview pane",
     );
-    return <MarkdownEditor className="w-full" value={text} onChange={setText} rows={8} />;
+    return <MarkdownEditor aria-label="Release notes" className="w-full" value={text} onChange={setText} rows={8} />;
   };
 
 const meta = {

package/src/stories/MultiSelect.stories.tsx

@@ -8,6 +8,7 @@ const Demo = () => {
     const [value, setValue] = React.useState(["react", "swiftui"]);
     return (
       <MultiSelect
+        aria-label="Platforms"
         className="w-full max-w-sm"
         value={value}
         onValueChange={setValue}

package/src/stories/NativeSelect.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { NativeSelect, NativeSelectOptGroup, NativeSelectOption, Select } from "@kinetixui/ui";
 
 const Demo = () => (
-    <NativeSelect className="max-w-xs" defaultValue="">
+    <NativeSelect aria-label="Fruit" className="max-w-xs" defaultValue="">
       <NativeSelectOption value="" disabled>
         Select a fruit…
       </NativeSelectOption>

package/src/stories/NumberInput.stories.tsx

@@ -6,7 +6,7 @@ import { NumberInput } from "@kinetixui/ui";
 
 const Demo = () => {
     const [v, setV] = React.useState(2);
-    return <NumberInput value={v} onChange={setV} min={0} max={10} className="w-32" />;
+    return <NumberInput aria-label="Quantity" value={v} onChange={setV} min={0} max={10} className="w-32" />;
   };
 
 const meta = {
@@ -18,12 +18,12 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<NumberInput value={qty} onChange={setQty} min={0} max={10} />", language: "tsx" } },
+    docs: { source: { code: "<NumberInput aria-label=\\\"Quantity\\\" value={qty} onChange={setQty} min={0} max={10} />", language: "tsx" } },
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <NumberInput {...args} className="w-32" /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <NumberInput aria-label="Quantity" {...args} className="w-32" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Progress.stories.tsx

@@ -10,7 +10,7 @@ const Demo = () => {
       const t = setTimeout(() => setV(66), 600);
       return () => clearTimeout(t);
     }, []);
-    return <Progress value={v} className="w-[60%]" />;
+    return <Progress value={v} aria-label="Upload progress" className="w-[60%]" />;
   };
 
 const meta = {
@@ -20,12 +20,12 @@ const meta = {
   argTypes: { value: { control: { type: "range", min: 0, max: 100 } } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} />", language: "tsx" } },
+    docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} aria-label=\\\"Upload progress\\\" />", language: "tsx" } },
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress {...args} className="w-60" /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress aria-label="Upload progress" {...args} className="w-60" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Select.stories.tsx

@@ -6,7 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 
 const Demo = () => (
     <Select>
-      <SelectTrigger className="w-[220px]">
+      <SelectTrigger className="w-[220px]" aria-label="Fruit">
         <SelectValue placeholder="Select a fruit" />
       </SelectTrigger>
       <SelectContent>
@@ -32,7 +32,7 @@ export default meta;
 
 export const Playground: StoryObj<typeof meta> = { render: (args) => (
     <Select {...args}>
-      <SelectTrigger className="w-[220px]">
+      <SelectTrigger className="w-[220px]" aria-label="Fruit">
         <SelectValue placeholder="Select a fruit" />
       </SelectTrigger>
       <SelectContent>

package/src/stories/Slider.stories.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Slider } from "@kinetixui/ui";
 
-const Demo = () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
+const Demo = () => <Slider aria-label="Volume" defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
 
 const meta = {
   title: "Form Inputs/Slider",
@@ -13,12 +13,12 @@ const meta = {
   argTypes: { disabled: { control: "boolean" } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: "<Slider defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
+    docs: { source: { code: "<Slider aria-label=\"Volume\" defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider aria-label="Volume" {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Switch.stories.tsx

@@ -24,6 +24,6 @@ const meta = {
 
 export default meta;
 
-export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch {...args} /> };
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch aria-label="Airplane mode" {...args} /> };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/ToggleGroup.stories.tsx

@@ -7,9 +7,9 @@ import { Bold, Italic, Underline } from "lucide-react";
 
 const Demo = () => (
     <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="bold" aria-label="Bold"><Bold className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Italic"><Italic className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Underline"><Underline className="size-4" /></ToggleGroupItem>
     </ToggleGroup>
   );
 
@@ -28,9 +28,9 @@ export default meta;
 
 export const Playground: StoryObj<typeof meta> = { render: (args) => (
     <ToggleGroup {...args}>
-      <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
-      <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="bold" aria-label="Bold"><Bold className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Italic"><Italic className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Underline"><Underline className="size-4" /></ToggleGroupItem>
     </ToggleGroup>
   ) };
 

package/tailwind.config.ts

@@ -59,8 +59,27 @@ export default {
         destructive: { DEFAULT: c("--destructive"), foreground: c("--destructive-foreground") },
         success: { DEFAULT: c("--success"), foreground: c("--success-foreground") },
         warning: { DEFAULT: c("--warning"), foreground: c("--warning-foreground") },
-        info: { DEFAULT: c("--info"), foreground: c("--info-foreground") },
+        info: {
+          DEFAULT: c("--info"),
+          foreground: c("--info-foreground"),
+          // text on a tinted info surface (bg-info/10) — --info alone is 4.15:1 there
+          "on-container": c("--semantic-on-info-container"),
+        },
         tertiary: { DEFAULT: c("--tertiary"), foreground: c("--tertiary-foreground") },
+        // Role tokens layered over `primary` (which stays the shadcn-compatible source). `action`, `link`
+        // and `focus` default to it, so a theme that only sets `--primary` still works; override them
+        // individually to split the interactive colour, link colour and focus colour. `brand` is identity
+        // (logos, headers), not a control colour.
+        brand: { DEFAULT: c("--brand"), foreground: c("--brand-foreground") },
+        action: {
+          DEFAULT: c("--action"),
+          foreground: c("--action-foreground"),
+          // explicit states for native ports; on the web, hover/pressed derive from `action` (bg-action/90, /85)
+          hover: c("--action-hover"),
+          pressed: c("--action-pressed"),
+        },
+        link: c("--link"),
+        focus: c("--focus"),
         border: c("--border"),
         input: c("--input"),
         ring: c("--ring"),