@kinetixui/ui 0.21.0 → 0.22.1

package/dist/index.d.ts

@@ -114,7 +114,7 @@ declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
-declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;

package/dist/index.js

@@ -284,7 +284,7 @@ var alertVariants = cva4(
 var Alert = React5.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
 Alert.displayName = "Alert";
 var AlertTitle = React5.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
 );
 AlertTitle.displayName = "AlertTitle";
 var AlertDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props }));
@@ -1716,7 +1716,7 @@ function ChartSrTable({
   ] });
 }
 var cssIdent = (s) => String(s).replace(/[^\w-]/g, "");
-var cssValue = (s) => /[<>{}\[\];@]|\/\*|\*\//.test(s) ? "" : s.trim();
+var cssValue = (s) => /[<>{}[\];@]|\/\*|\*\//.test(s) ? "" : s.trim();
 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.21.0",
+  "version": "0.22.1",
   "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": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.21.0",
+    "@kinetixui/tokens": "0.22.1",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
@@ -79,7 +79,7 @@
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
-    "lucide-react": "^1.46.0",
+    "lucide-react": "^1.47.0",
     "react-day-picker": "^10.0.1",
     "react-hook-form": "^7.88.0",
     "react-resizable-panels": "^4.12.4",
@@ -95,6 +95,7 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.5",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -102,12 +103,15 @@
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
     "axe-core": "4.13.0",
-    "jsdom": "^30.0.1",
+    "eslint": "^9.39.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "jsdom": "^30.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.70.0",
     "vitest": "^5.0.1"
   },
   "scripts": {

package/src/components/alert.tsx

@@ -29,9 +29,12 @@ const Alert = React.forwardRef<
 ));
 Alert.displayName = "Alert";
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+// A plain block, not a heading: the component does not know where it sits in the page's outline, so a hardcoded
+// <h5> skipped heading levels under any <h2> (WCAG 1.3.1 / axe heading-order). `role="alert"` on Alert carries the
+// semantics. Pass `role="heading" aria-level={n}` if a specific level is wanted.
+const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+    <div ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
   ),
 );
 AlertTitle.displayName = "AlertTitle";

package/src/components/chart.tsx

@@ -201,7 +201,7 @@ function ChartSrTable({
 const cssIdent = (s: string) => String(s).replace(/[^\w-]/g, "");
 // keep parens (hsl(), var(), color-mix()…); reject only what can end the
 // declaration, close the rule, open an at-rule, a comment, or the <style>.
-const cssValue = (s: string) => (/[<>{}\[\];@]|\/\*|\*\//.test(s) ? "" : s.trim());
+const cssValue = (s: string) => (/[<>{}[\];@]|\/\*|\*\//.test(s) ? "" : s.trim());
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);

package/src/stories/Button.stories.tsx

@@ -112,40 +112,16 @@ export const CrossPlatformUsage: Story = {
           "/* ── Web · React (@kinetixui/ui) ────────────────────────────── */",
           '<Button variant="Primary" size="md">Save</Button>',
           "",
-          "/* ── Web · HTML + CSS (token contract) ───────────────────── */",
-          '<button class="kx-btn kx-btn--primary kx-btn--md">Save</button>',
-          "/* uses --primary / --primary-foreground / --radius from globals.css */",
+          "/* The native libraries mirror the React API — wrap a screen in KinetixTheme once. */",
           "",
-          "/* ── Angular (kx-button) ─────────────────────────────── */",
-          '<button kx-button variant="primary" size="md">Save</button>',
+          "/* ── iOS · SwiftUI (KinetixUI) ─────────────────────────────── */",
+          'KinetixButton(variant: .primary, action: save) { Text("Save") }',
           "",
-          "/* ── Flutter (AppTheme) ──────────────────────────────────── */",
-          "FilledButton(",
-          "  style: FilledButton.styleFrom(",
-          "    backgroundColor: AppColors.primary,",
-          "    foregroundColor: AppColors.primaryForeground,",
-          "    shape: RoundedRectangleBorder(",
-          "      borderRadius: BorderRadius.circular(AppTheme.radius)),",
-          "  ),",
-          "  onPressed: onSave,",
-          "  child: const Text('Save'),",
-          ")",
+          "/* ── Android · Jetpack Compose (com.kinetixui:ui-compose) ──── */",
+          'KinetixButton(onClick = ::save, variant = KinetixButtonVariant.Primary) { Text("Save") }',
           "",
-          "/* ── iOS · SwiftUI (KinetixTheme) ─────────────────────────── */",
-          "Button('Save', action: save)",
-          "  .padding(.horizontal, 16).padding(.vertical, 12)",
-          "  .background(KinetixTheme.light.primary)",
-          "  .foregroundStyle(KinetixTheme.light.primaryForeground)",
-          "  .clipShape(RoundedRectangle(cornerRadius: KinetixTheme.light.radius))",
-          "",
-          "/* ── Android · Jetpack Compose (KinetixTheme) ─────────────── */",
-          "Button(",
-          "  onClick = onSave,",
-          "  colors = ButtonDefaults.buttonColors(",
-          "    containerColor = KinetixTheme.primary,",
-          "    contentColor = KinetixTheme.primaryForeground),",
-          "  shape = RoundedCornerShape(KinetixTheme.radius),",
-          ") { Text(\"Save\") }",
+          "/* ── Flutter (kinetix_ui) ───────────────────────────────────── */",
+          "KinetixButton(onPressed: save, child: const Text('Save'))",
         ].join("\n"),
         language: "tsx",
       },

package/tailwind.config.ts

@@ -112,6 +112,12 @@ export default {
         xl: "var(--radius-xl)",
         "2xl": "calc(var(--radius-lg) + 8px)",
         full: "var(--radius-full)",
+        // Role aliases (tokens/primitives/dimension.json) — theme one role without touching the size steps.
+        // Additive: components still use the size utilities above and move to these incrementally.
+        field: "var(--radius-field)",
+        control: "var(--radius-control)",
+        container: "var(--radius-container)",
+        surface: "var(--radius-surface)",
       },
       // Motion + scale — tokens/primitives/{motion,opacity,z-index}.json.
       // Added alongside Tailwind's own numeric scales (z-10, opacity-50, …),