@kinetixui/ui 0.4.1 → 0.4.3

package/dist/index.d.ts

@@ -474,6 +474,28 @@ type ChartConfig = {
 declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
     config: ChartConfig;
     children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    /**
+     * Text alternative for the chart (WCAG 1.1.1). A chart conveys its data by
+     * colour + position, which a screen reader can't relay — pass a one-line
+     * summary of what it shows and the trend. Falls back to "Chart".
+     * Cartesian charts should also get `accessibilityLayer` on the Recharts
+     * primitive for keyboard data-point navigation.
+     */
+    label?: string;
+    /**
+     * Render a placeholder in place of the chart. `"loading"` shows a shimmer,
+     * `"empty"` / `"error"` show a message (override with `stateMessage`).
+     */
+    state?: "loading" | "empty" | "error";
+    stateMessage?: string;
+    /**
+     * Visually-hidden `<table>` rendered after the chart so a screen reader can
+     * read the underlying numbers. Pair with a concise `label`.
+     */
+    srTable?: {
+        columns: React$1.ReactNode[];
+        rows: React$1.ReactNode[][];
+    };
 }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ChartStyle: ({ id, config }: {
     id: string;
@@ -1120,6 +1142,9 @@ declare const Metric: React$1.ForwardRefExoticComponent<MetricProps & React$1.Re
 
 /**
  * NumberInput — a numeric field with increment / decrement controls.
+ * The wrapper shows `--shadow-focus` on `focus-within`; each stepper also
+ * draws its own `--ring` inset outline on `:focus-visible` so keyboard users
+ * can tell which control is focused.
  */
 interface NumberInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
     value?: number;

package/dist/index.js

@@ -1545,14 +1545,50 @@ function useChart() {
   if (!context) throw new Error("useChart must be used within a <ChartContainer />");
   return context;
 }
-var ChartContainer = React32.forwardRef(({ id, className, children, config, ...props }, ref) => {
+var ChartContainer = React32.forwardRef(({
+  id,
+  className,
+  children,
+  config,
+  label,
+  state,
+  stateMessage,
+  srTable,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) => {
   const uniqueId = React32.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const name = ariaLabel ?? label ?? "Chart";
+  const innerRef = React32.useRef(null);
+  const setRef = React32.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  React32.useEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const scrub = () => {
+      el.querySelector(".recharts-surface")?.setAttribute("aria-label", name);
+      el.querySelectorAll('[role="img"]:not([data-chart])').forEach((n) => n.removeAttribute("role"));
+    };
+    scrub();
+    const mo = new MutationObserver(scrub);
+    mo.observe(el, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, [name]);
   return /* @__PURE__ */ jsx37(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-chart": chartId,
-      ref,
+      ref: setRef,
+      role: role ?? "img",
+      "aria-label": name,
       className: cn(
         "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
         className
@@ -1560,12 +1596,53 @@ var ChartContainer = React32.forwardRef(({ id, className, children, config, ...p
       ...props,
       children: [
         /* @__PURE__ */ jsx37(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx37(RechartsPrimitive.ResponsiveContainer, { children })
+        state ? /* @__PURE__ */ jsx37(ChartState, { state, message: stateMessage }) : /* @__PURE__ */ jsx37(RechartsPrimitive.ResponsiveContainer, { children }),
+        srTable && !state ? /* @__PURE__ */ jsx37(ChartSrTable, { ...srTable }) : null
       ]
     }
   ) });
 });
 ChartContainer.displayName = "Chart";
+var STATE_COPY = {
+  loading: "Loading chart\u2026",
+  empty: "No data to show",
+  error: "Couldn't load this chart"
+};
+function ChartState({
+  state,
+  message
+}) {
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      role: state === "error" ? "alert" : "status",
+      className: cn(
+        "flex h-full w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed p-6 text-center text-xs",
+        state === "error" ? "border-destructive/40 text-destructive" : "border-border text-muted-foreground"
+      ),
+      children: [
+        state === "loading" ? /* @__PURE__ */ jsx37("div", { "aria-hidden": true, className: "flex w-full max-w-[220px] items-end justify-between gap-1.5", children: [40, 72, 56, 88, 48, 64, 80].map((h, i) => /* @__PURE__ */ jsx37(
+          "span",
+          {
+            className: "w-full animate-pulse rounded-sm bg-muted",
+            style: { height: `${h}px`, animationDelay: `${i * 90}ms` }
+          },
+          i
+        )) }) : /* @__PURE__ */ jsx37("svg", { "aria-hidden": true, viewBox: "0 0 24 24", className: "size-5", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: state === "empty" ? /* @__PURE__ */ jsx37("path", { d: "M3 3v18h18M7 15l4-4 3 3 5-6", strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx37("path", { d: "M12 9v4m0 4h.01M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.42 0Z", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+        /* @__PURE__ */ jsx37("span", { children: message ?? STATE_COPY[state] })
+      ]
+    }
+  );
+}
+function ChartSrTable({
+  columns,
+  rows
+}) {
+  return /* @__PURE__ */ jsxs15("table", { className: "sr-only", children: [
+    /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsx37("tr", { children: columns.map((c, i) => /* @__PURE__ */ jsx37("th", { scope: "col", children: c }, i)) }) }),
+    /* @__PURE__ */ jsx37("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsx37("tr", { children: r.map((cell, j) => /* @__PURE__ */ jsx37("td", { children: cell }, j)) }, i)) })
+  ] });
+}
 var ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);
   if (!colorConfig.length) return null;
@@ -3530,7 +3607,7 @@ var NumberInput = React60.forwardRef(
               "aria-label": "Decrease",
               disabled: disabled || min != null && current <= min,
               onClick: () => set(current - step),
-              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsx66(Minus3, { className: "size-4" })
             }
           ),
@@ -3560,7 +3637,7 @@ var NumberInput = React60.forwardRef(
               "aria-label": "Increase",
               disabled: disabled || max != null && current >= max,
               onClick: () => set(current + step),
-              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
               children: /* @__PURE__ */ jsx66(Plus, { className: "size-4" })
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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,7 +89,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.4.1",
+    "@kinetixui/tokens": "0.4.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/src/components/chart.tsx

@@ -27,16 +27,78 @@ const ChartContainer = React.forwardRef<
   React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    /**
+     * Text alternative for the chart (WCAG 1.1.1). A chart conveys its data by
+     * colour + position, which a screen reader can't relay — pass a one-line
+     * summary of what it shows and the trend. Falls back to "Chart".
+     * Cartesian charts should also get `accessibilityLayer` on the Recharts
+     * primitive for keyboard data-point navigation.
+     */
+    label?: string;
+    /**
+     * Render a placeholder in place of the chart. `"loading"` shows a shimmer,
+     * `"empty"` / `"error"` show a message (override with `stateMessage`).
+     */
+    state?: "loading" | "empty" | "error";
+    stateMessage?: string;
+    /**
+     * Visually-hidden `<table>` rendered after the chart so a screen reader can
+     * read the underlying numbers. Pair with a concise `label`.
+     */
+    srTable?: { columns: React.ReactNode[]; rows: React.ReactNode[][] };
   }
->(({ id, className, children, config, ...props }, ref) => {
+>(({
+  id,
+  className,
+  children,
+  config,
+  label,
+  state,
+  stateMessage,
+  srTable,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) => {
   const uniqueId = React.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const name = ariaLabel ?? label ?? "Chart";
+
+  const innerRef = React.useRef<HTMLDivElement | null>(null);
+  const setRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    },
+    [ref],
+  );
+
+  // The container carries the text alternative (role="img" + aria-label).
+  // Recharts additionally (a) tags individual sector / dot <path>s with
+  // role="img" and no <title> — redundant noise that fails axe's svg-img-alt —
+  // and (b) leaves its accessibilityLayer <svg role="application"> unnamed.
+  // Fix both on the rendered output; re-run on Recharts re-layout.
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const scrub = () => {
+      el.querySelector(".recharts-surface")?.setAttribute("aria-label", name);
+      el.querySelectorAll('[role="img"]:not([data-chart])').forEach((n) => n.removeAttribute("role"));
+    };
+    scrub();
+    const mo = new MutationObserver(scrub);
+    mo.observe(el, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, [name]);
 
   return (
     <ChartContext.Provider value={{ config }}>
       <div
         data-chart={chartId}
-        ref={ref}
+        ref={setRef}
+        role={role ?? "img"}
+        aria-label={name}
         className={cn(
           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
@@ -44,13 +106,94 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        {state ? (
+          <ChartState state={state} message={stateMessage} />
+        ) : (
+          <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        )}
+        {srTable && !state ? <ChartSrTable {...srTable} /> : null}
       </div>
     </ChartContext.Provider>
   );
 });
 ChartContainer.displayName = "Chart";
 
+const STATE_COPY = {
+  loading: "Loading chart…",
+  empty: "No data to show",
+  error: "Couldn't load this chart",
+} as const;
+
+function ChartState({
+  state,
+  message,
+}: {
+  state: "loading" | "empty" | "error";
+  message?: string;
+}) {
+  return (
+    <div
+      role={state === "error" ? "alert" : "status"}
+      className={cn(
+        "flex h-full w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed p-6 text-center text-xs",
+        state === "error" ? "border-destructive/40 text-destructive" : "border-border text-muted-foreground",
+      )}
+    >
+      {state === "loading" ? (
+        <div aria-hidden className="flex w-full max-w-[220px] items-end justify-between gap-1.5">
+          {[40, 72, 56, 88, 48, 64, 80].map((h, i) => (
+            <span
+              key={i}
+              className="w-full animate-pulse rounded-sm bg-muted"
+              style={{ height: `${h}px`, animationDelay: `${i * 90}ms` }}
+            />
+          ))}
+        </div>
+      ) : (
+        <svg aria-hidden viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth={1.5}>
+          {state === "empty" ? (
+            <path d="M3 3v18h18M7 15l4-4 3 3 5-6" strokeLinecap="round" strokeLinejoin="round" />
+          ) : (
+            <path d="M12 9v4m0 4h.01M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.7 3.86a2 2 0 0 0-3.42 0Z" strokeLinecap="round" strokeLinejoin="round" />
+          )}
+        </svg>
+      )}
+      <span>{message ?? STATE_COPY[state]}</span>
+    </div>
+  );
+}
+
+function ChartSrTable({
+  columns,
+  rows,
+}: {
+  columns: React.ReactNode[];
+  rows: React.ReactNode[][];
+}) {
+  return (
+    <table className="sr-only">
+      <thead>
+        <tr>
+          {columns.map((c, i) => (
+            <th key={i} scope="col">
+              {c}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((r, i) => (
+          <tr key={i}>
+            {r.map((cell, j) => (
+              <td key={j}>{cell}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);
   if (!colorConfig.length) return null;

package/src/components/number-input.tsx

@@ -6,6 +6,9 @@ import { cn } from "../lib/utils";
 
 /**
  * NumberInput — a numeric field with increment / decrement controls.
+ * The wrapper shows `--shadow-focus` on `focus-within`; each stepper also
+ * draws its own `--ring` inset outline on `:focus-visible` so keyboard users
+ * can tell which control is focused.
  */
 export interface NumberInputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
@@ -48,7 +51,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           aria-label="Decrease"
           disabled={disabled || (min != null && current <= min)}
           onClick={() => set(current - step)}
-          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
         >
           <Minus className="size-4" />
         </button>
@@ -73,7 +76,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
           aria-label="Increase"
           disabled={disabled || (max != null && current >= max)}
           onClick={() => set(current + step)}
-          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+          className="flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
         >
           <Plus className="size-4" />
         </button>

package/tailwind.config.ts

@@ -70,6 +70,9 @@ export default {
           3: c("--chart-3"),
           4: c("--chart-4"),
           5: c("--chart-5"),
+          6: c("--chart-6"),
+          7: c("--chart-7"),
+          8: c("--chart-8"),
         },
         sidebar: {
           DEFAULT: c("--sidebar"),