@kinetixui/ui 0.23.2 → 0.24.0

package/src/stories/Table.stories.tsx

@@ -2,7 +2,7 @@
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@kinetixui/ui";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@kinetixui/ui";
 
 const Demo = () => (
     <Table>
@@ -40,3 +40,37 @@ const meta = {
 export default meta;
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const Overflowing: StoryObj<typeof meta> = { render: () => (
+    <div className="w-[22rem] max-w-full">
+      <Table>
+        <TableCaption>Settlement ledger, March</TableCaption>
+        <TableHeader>
+          <TableRow>
+            {["Reference", "Counterparty", "Instrument", "Booked", "Value date", "Currency", "Notional", "Status", "Desk"].map(
+              (h) => (
+                <TableHead key={h} className="whitespace-nowrap">
+                  {h}
+                </TableHead>
+              ),
+            )}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[
+            ["STL-4471", "Northwind Trading", "FX forward", "02 Mar", "04 Mar", "EUR", "1,250,000", "Settled", "Rates"],
+            ["STL-4472", "Halvorsen Capital", "Interest swap", "03 Mar", "05 Mar", "USD", "4,000,000", "Pending", "Rates"],
+            ["STL-4473", "Keystone Mutual", "Equity basket", "03 Mar", "06 Mar", "GBP", "860,500", "Failed", "Cash"],
+          ].map((row) => (
+            <TableRow key={row[0]}>
+              {row.map((cell) => (
+                <TableCell key={cell} className="whitespace-nowrap">
+                  {cell}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ) };

package/src/stories/Tabs.stories.tsx

@@ -2,7 +2,7 @@
    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-vite";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@kinetixui/ui";
+import { Card, CardContent, Tabs, TabsContent, TabsList, TabsTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
     <Tabs defaultValue="account" className="w-[360px]">
@@ -25,7 +25,7 @@ const meta = {
   args: { defaultValue: "account" },
   argTypes: { defaultValue: { control: "inline-radio", options: ["account", "password"] } },
   parameters: {
-    layout: "centered",
+    layout: "padded",
     docs: { source: { code: "<Tabs defaultValue=\"account\">\\n  <TabsList>\\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\\n  </TabsList>\\n  <TabsContent value=\"account\">…</TabsContent>\\n</Tabs>", language: "tsx" } },
   },
 } satisfies Meta;
@@ -48,3 +48,28 @@ export const Playground: StoryObj<typeof meta> = { render: (args) => (
   ) };
 
 export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
+
+export const States: StoryObj<typeof meta> = { render: () => (
+    <div className="grid w-[26rem] max-w-full gap-6">
+      {(["page", "card"] as const).map((where) => {
+        const tabs = (
+          <Tabs defaultValue="overview">
+            <TabsList data-kx-case={where} aria-label={where === "page" ? "Project" : "Workspace"}>
+              <TabsTrigger value="overview" data-kx-case="selected">Overview</TabsTrigger>
+              <TabsTrigger value="activity" data-kx-case="unselected">Activity</TabsTrigger>
+              <TabsTrigger value="billing" data-kx-case="disabled" disabled>Billing</TabsTrigger>
+            </TabsList>
+            <TabsContent value="overview" className="text-sm text-muted-foreground">Three deployments this week.</TabsContent>
+            <TabsContent value="activity" className="text-sm text-muted-foreground">No new activity.</TabsContent>
+          </Tabs>
+        );
+        return where === "page" ? (
+          <div key={where}>{tabs}</div>
+        ) : (
+          <Card key={where}>
+            <CardContent className="p-4">{tabs}</CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  ) };

package/src/stories/Textarea.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Textarea } from "../components/textarea";
+import { Card, CardContent } from "../components/card";
+import { Label } from "../components/label";
 
 const STATES = ["Default", "Focus", "Error", "Disabled"] as const;
 
@@ -47,6 +49,38 @@ export const States: Story = {
   ),
 };
 
+/**
+ * The text-entry state contract (TOKENS.md, "Text entry and navigation") as a real form produces it: empty
+ * with a placeholder, filled, invalid with its error text, read-only and disabled, side by side in a raised
+ * Card. Real states, not the `state` prop's pinned ones — `check:entry-visual` drives hover and focus on
+ * these with a real pointer and keyboard, and both axe passes read them.
+ */
+export const EntryStates: Story = {
+  render: () => (
+    <Card className="w-[22rem] max-w-full">
+      <CardContent className="grid gap-5 p-6">
+        {([
+          ["rest", "Bio", { placeholder: "A sentence or two about you" }],
+          ["filled", "Shipping notes", { defaultValue: "Leave at the side door." }],
+          ["invalid", "Reason for refund", { defaultValue: "No", "aria-invalid": true, "aria-describedby": "ta-invalid-error" }],
+          ["readonly", "Signed agreement", { readOnly: true, defaultValue: "Accepted on 2 October." }],
+          ["disabled", "Admin note", { disabled: true, defaultValue: "Only admins can edit this." }],
+        ] as const).map(([key, label, props]) => (
+          <div key={key} className="grid gap-2">
+            <Label htmlFor={`ta-${key}`}>{label}</Label>
+            <Textarea id={`ta-${key}`} data-kx-case={key} rows={3} {...props} />
+            {key === "invalid" ? (
+              <p id="ta-invalid-error" className="text-body-sm text-destructive">
+                Tell us a little more, at least 20 characters.
+              </p>
+            ) : null}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  ),
+};
+
 export const WithFieldChrome: Story = {
   render: (args) => (
     <div className="flex flex-col gap-6">

package/src/usage/icons.tsx

@@ -0,0 +1,60 @@
+/**
+ * The React icon examples /docs/icons shows. Each `kx-usage:<key>` region is extracted by `pnpm gen:usage`,
+ * so the snippet on the page is code `tsc` type-checks against the real props, and components-icons.test.tsx
+ * renders it. Not exported from the package: an example, not API.
+ */
+import * as React from "react";
+import { CircleX, Trash2 } from "lucide-react";
+import { Banner } from "../components/banner";
+import { Button } from "../components/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/tooltip";
+
+/** Stands in for an application's own icon component: any SVG, no lucide, no KinetixUI. */
+function CompanyCloseIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} {...props}>
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  );
+}
+
+export function IconsDismissIconExample({ onDismiss = () => {} }: { onDismiss?: () => void }) {
+  return (
+    <div className="flex flex-col gap-3">
+      {/* kx-usage:icons-dismiss-icon */}
+      {/* Default: lucide's X */}
+      <Banner onDismiss={onDismiss}>Changes saved.</Banner>
+
+      {/* Another lucide icon */}
+      <Banner onDismiss={onDismiss} dismissIcon={<CircleX />}>
+        Changes saved.
+      </Banner>
+
+      {/* Your own icon: sized to 14px, coloured by the banner, named "Dismiss" */}
+      <Banner onDismiss={onDismiss} dismissIcon={<CompanyCloseIcon />}>
+        Changes saved.
+      </Banner>
+      {/* kx-usage:end */}
+    </div>
+  );
+}
+
+export function IconsIconOnlyButtonExample({ onDelete = () => {} }: { onDelete?: () => void }) {
+  return (
+    <TooltipProvider>
+      {/* kx-usage:icons-icon-only-button */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          {/* size="icon" keeps the svg visible and turns the text into the button's
+              screen-reader-only name: "Delete draft, button" */}
+          <Button size="icon" variant="Ghost" onClick={onDelete}>
+            <Trash2 />
+            <span>Delete draft</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Delete draft</TooltipContent>
+      </Tooltip>
+      {/* kx-usage:end */}
+    </TooltipProvider>
+  );
+}

package/tailwind.config.ts

@@ -17,23 +17,35 @@ export default {
       fontFamily: { sans: "var(--font-sans)" },
       // Material-3 type scale — `text-body-md`, `text-headline-lg`, … each carries
       // its line-height, tracking and weight. Mirrors tokens/semantic/typography.json.
+      //
+      // Sizes and line-heights are rem so that text follows the reader's browser font-size setting;
+      // the numbers are the canonical scale divided by the 16px root, so every step renders at exactly
+      // its old pixel size at the default setting (14px -> 0.875rem) and grows from there. They are not
+      // hand-maintained against the tokens any more: `check:type-scale` derives this table from
+      // tokens/semantic/typography.json and fails if the two disagree, which is how the px values here
+      // went on silently outliving the ones in globals.css.
+      //
+      // Letter-spacing stays in px deliberately. It is an optical constant of the typeface at a
+      // reference size rather than a size a reader asked to change, the primitive tokens are shared
+      // across steps so there is no one font size to make it relative to, and at 0.1-0.5px it is far
+      // below the threshold where scaling it would be legible.
       fontSize: {
-        "display-lg": ["57px", { lineHeight: "64px", letterSpacing: "-0.25px", fontWeight: "500" }],
-        "display-md": ["45px", { lineHeight: "52px", letterSpacing: "0", fontWeight: "500" }],
-        "display-sm": ["36px", { lineHeight: "44px", letterSpacing: "0", fontWeight: "400" }],
-        "headline-lg": ["32px", { lineHeight: "40px", letterSpacing: "0", fontWeight: "600" }],
-        "headline-md": ["28px", { lineHeight: "36px", letterSpacing: "0", fontWeight: "400" }],
-        "headline-sm": ["24px", { lineHeight: "32px", letterSpacing: "0", fontWeight: "400" }],
-        "title-lg": ["22px", { lineHeight: "28px", letterSpacing: "0", fontWeight: "400" }],
-        "title-md": ["16px", { lineHeight: "24px", letterSpacing: "0.15px", fontWeight: "500" }],
-        "title-sm": ["14px", { lineHeight: "20px", letterSpacing: "0.1px", fontWeight: "500" }],
-        "title-dialog": ["18px", { lineHeight: "24px", letterSpacing: "0", fontWeight: "600" }],
-        "label-lg": ["14px", { lineHeight: "20px", letterSpacing: "0.1px", fontWeight: "500" }],
-        "label-md": ["12px", { lineHeight: "16px", letterSpacing: "0.5px", fontWeight: "500" }],
-        "label-sm": ["11px", { lineHeight: "16px", letterSpacing: "0.5px", fontWeight: "500" }],
-        "body-lg": ["16px", { lineHeight: "24px", letterSpacing: "0.5px", fontWeight: "400" }],
-        "body-md": ["14px", { lineHeight: "20px", letterSpacing: "0.25px", fontWeight: "400" }],
-        "body-sm": ["12px", { lineHeight: "16px", letterSpacing: "0", fontWeight: "400" }],
+        "display-lg": ["3.5625rem", { lineHeight: "4rem", letterSpacing: "-0.25px", fontWeight: "500" }],
+        "display-md": ["2.8125rem", { lineHeight: "3.25rem", letterSpacing: "0", fontWeight: "500" }],
+        "display-sm": ["2.25rem", { lineHeight: "2.75rem", letterSpacing: "0", fontWeight: "400" }],
+        "headline-lg": ["2rem", { lineHeight: "2.5rem", letterSpacing: "0", fontWeight: "600" }],
+        "headline-md": ["1.75rem", { lineHeight: "2.25rem", letterSpacing: "0", fontWeight: "400" }],
+        "headline-sm": ["1.5rem", { lineHeight: "2rem", letterSpacing: "0", fontWeight: "400" }],
+        "title-lg": ["1.375rem", { lineHeight: "1.75rem", letterSpacing: "0", fontWeight: "400" }],
+        "title-md": ["1rem", { lineHeight: "1.5rem", letterSpacing: "0.15px", fontWeight: "500" }],
+        "title-sm": ["0.875rem", { lineHeight: "1.25rem", letterSpacing: "0.1px", fontWeight: "500" }],
+        "title-dialog": ["1.125rem", { lineHeight: "1.5rem", letterSpacing: "0", fontWeight: "600" }],
+        "label-lg": ["0.875rem", { lineHeight: "1.25rem", letterSpacing: "0.1px", fontWeight: "500" }],
+        "label-md": ["0.75rem", { lineHeight: "1rem", letterSpacing: "0.5px", fontWeight: "500" }],
+        "label-sm": ["0.6875rem", { lineHeight: "1rem", letterSpacing: "0.5px", fontWeight: "500" }],
+        "body-lg": ["1rem", { lineHeight: "1.5rem", letterSpacing: "0.5px", fontWeight: "400" }],
+        "body-md": ["0.875rem", { lineHeight: "1.25rem", letterSpacing: "0.25px", fontWeight: "400" }],
+        "body-sm": ["0.75rem", { lineHeight: "1rem", letterSpacing: "0", fontWeight: "400" }],
       },
       boxShadow: {
         sm: "var(--shadow-sm)",
@@ -54,7 +66,16 @@ export default {
         popover: { DEFAULT: c("--popover"), foreground: c("--popover-foreground") },
         primary: { DEFAULT: c("--primary"), foreground: c("--primary-foreground") },
         secondary: { DEFAULT: c("--secondary"), foreground: c("--secondary-foreground") },
-        muted: { DEFAULT: c("--muted"), foreground: c("--muted-foreground") },
+        muted: {
+          DEFAULT: c("--muted"),
+          foreground: c("--muted-foreground"),
+          // Secondary text on a tinted container (bg-primary/10, bg-destructive/10). `--muted-foreground`
+          // is tuned against `--background` and `--muted`; a 10% tint drops it to 4.33:1.
+          "on-container": c("--semantic-muted-on-container"),
+        },
+        // The grouped section raised content sits on (TOKENS.md, surface model). Not `muted`: dark `muted` is
+        // lighter than `card`, so a card on it read as recessed.
+        surface: { grouped: c("--surface-grouped") },
         accent: { DEFAULT: c("--accent"), foreground: c("--accent-foreground") },
         destructive: { DEFAULT: c("--destructive"), foreground: c("--destructive-foreground") },
         success: { DEFAULT: c("--success"), foreground: c("--success-foreground") },
@@ -62,10 +83,14 @@ export default {
         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"),
+          // text on a tinted info surface (bg-info/10) — --info alone is 4.15:1 there. The top-level role
+          // every platform shares; `--semantic-on-info-container` is its legacy alias.
+          "on-container": c("--on-info-container"),
         },
         tertiary: { DEFAULT: c("--tertiary"), foreground: c("--tertiary-foreground") },
+        // The modal backdrop. The role carries its own alpha (black at 40% light, 60% dark), so it is mapped
+        // without `<alpha-value>`: `bg-scrim`, not `bg-scrim/40`.
+        scrim: "hsl(var(--scrim))",
         // 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
@@ -123,6 +148,10 @@ export default {
       // Added alongside Tailwind's own numeric scales (z-10, opacity-50, …),
       // not replacing them — these are the token-backed semantic names.
       transitionDuration: {
+        // `instant` is the press/toggle tier from tokens/primitives/motion.json. It was generated
+        // into globals.css but never wired here, so the one duration meant for immediate feedback
+        // was the one nobody could reach — components fell back to Tailwind's untokenised 150ms.
+        instant: "var(--duration-instant)",
         fast: "var(--duration-fast)",
         base: "var(--duration-base)",
         slow: "var(--duration-slow)",
@@ -133,6 +162,13 @@ export default {
         // cubic-bezier(0,0,1,1) value, now token-backed instead of hardcoded
         linear: "var(--easing-linear)",
         standard: "var(--easing-standard)",
+        // Same gap as `instant`: enter/exit/emphasized are defined in the DTCG source and emitted
+        // as CSS variables, but were unreachable from a class. Directional easing is the whole
+        // point of the enter/exit pair — a surface that opens should decelerate and one that
+        // closes should accelerate, and without these you cannot say that in a utility.
+        enter: "var(--easing-enter)",
+        exit: "var(--easing-exit)",
+        emphasized: "var(--easing-emphasized)",
       },
       zIndex: {
         base: "var(--z-index-base)",
@@ -151,18 +187,78 @@ export default {
       keyframes: {
         "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
         "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },
+        // Collapsible is the same disclosure gesture as Accordion on a different Radix primitive, so
+        // it reads its own measured height variable and is otherwise identical.
+        "collapsible-down": { from: { height: "0" }, to: { height: "var(--radix-collapsible-content-height)" } },
+        "collapsible-up": { from: { height: "var(--radix-collapsible-content-height)" }, to: { height: "0" } },
         "caret-blink": { "0%,70%,100%": { opacity: "1" }, "20%,50%": { opacity: "0" } },
         marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(-50%)" } },
         "typing-dot": { "0%,60%,100%": { transform: "translateY(0)", opacity: "0.4" }, "30%": { transform: "translateY(-3px)", opacity: "1" } },
       },
+      /**
+       * Durations and easings come from the tokens, not from numbers typed here.
+       *
+       * `0.2s ease-out` happened to equal `--duration-fast` and to be the same curve as
+       * `--easing-enter`, so the values were right and the provenance was not — a change to the token
+       * would have moved every other transition in the system and left disclosure behind.
+       *
+       * Disclosure uses the directional pair the easing tokens exist for: opening decelerates
+       * (`enter`), closing accelerates (`exit`). The fallbacks match the token values and exist
+       * because `animation` is a shorthand — an undefined `var()` makes the whole declaration invalid,
+       * which would mean no animation at all rather than an un-themed one. `marquee` already
+       * establishes that pattern below.
+       *
+       * `caret-blink` and `typing-dot` keep their literal timings. They are looping affordances
+       * rather than state transitions, their rhythms were chosen for their own reasons, and
+       * `scripts/a11y-animations.mjs` documents caret-blink at 1.25s by name. Retiming them to the
+       * nearest token would change how they look to buy consistency nobody asked for, which is a
+       * separate decision from giving disclosure its provenance back.
+       */
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        "accordion-down": "accordion-down var(--duration-fast, 200ms) var(--easing-enter, cubic-bezier(0, 0, 0.2, 1))",
+        "accordion-up": "accordion-up var(--duration-fast, 200ms) var(--easing-exit, cubic-bezier(0.4, 0, 1, 1))",
+        "collapsible-down": "collapsible-down var(--duration-fast, 200ms) var(--easing-enter, cubic-bezier(0, 0, 0.2, 1))",
+        "collapsible-up": "collapsible-up var(--duration-fast, 200ms) var(--easing-exit, cubic-bezier(0.4, 0, 1, 1))",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
         marquee: "marquee var(--marquee-duration, 32s) linear infinite",
         "typing-dot": "typing-dot 1.2s ease-in-out infinite",
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    /**
+     * Reduced motion, for everything this package ships.
+     *
+     * `packages/ui` ships no CSS of its own — components are class strings and consumers extend
+     * this config — so this base layer is the only place a library-wide guarantee can live.
+     * It is needed: `tailwindcss-animate` emits no `prefers-reduced-motion` rule at all, so every
+     * `animate-in` / `animate-out` on Dialog, Sheet, Popover, Dropdown, Tooltip and the rest ran at
+     * full motion in a consumer's app regardless of the operating-system setting.
+     *
+     * It shortens durations rather than removing motion, and that distinction is the safety
+     * property. `transition-duration: 0.01ms` still arrives at the same end state, so a Switch
+     * thumb is still translated, a checked box is still checked, and an IoT control still shows
+     * confirmed rather than requested — the interpolation goes, the information does not. That is
+     * what makes a blanket rule safe here, where `transition: none` would be a blunter instrument
+     * and `animation: none` an actively dangerous one: Radix unmounts an overlay on `animationend`,
+     * and an animation that never runs never fires it, so the overlay would stay in the tree.
+     *
+     * Components that need more than this still say so at their own call site with
+     * `motion-reduce:`, and `packages/iot` already does exactly that where a pulse or a bar carries
+     * meaning. This is the floor, not a replacement for that.
+     */
+    ({ addBase }: { addBase: (styles: Record<string, unknown>) => void }) => {
+      addBase({
+        "@media (prefers-reduced-motion: reduce)": {
+          "*, ::before, ::after": {
+            "animation-duration": "0.01ms !important",
+            "animation-iteration-count": "1 !important",
+            "transition-duration": "0.01ms !important",
+            "scroll-behavior": "auto !important",
+          },
+        },
+      });
+    },
+  ],
 } satisfies Config;