@kinetixui/ui 0.4.2 → 0.5.0

package/dist/index.d.ts

@@ -482,6 +482,20 @@ declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.Cla
      * 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;

package/dist/index.js

@@ -1545,7 +1545,19 @@ function useChart() {
   if (!context) throw new Error("useChart must be used within a <ChartContainer />");
   return context;
 }
-var ChartContainer = React32.forwardRef(({ id, className, children, config, label, role, "aria-label": ariaLabel, ...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";
@@ -1584,12 +1596,53 @@ var ChartContainer = React32.forwardRef(({ id, className, children, config, labe
       ...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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.4.2",
+  "version": "0.5.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,7 +89,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.4.2",
+    "@kinetixui/tokens": "0.5.0",
     "@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

@@ -35,8 +35,31 @@ const ChartContainer = React.forwardRef<
      * 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, label, role, "aria-label": ariaLabel, ...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";
@@ -83,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/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"),