@kinetixui/ui 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.5.0",
+  "version": "0.6.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,20 +89,20 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.5.0",
+    "@kinetixui/tokens": "0.6.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.2.0",
     "jsdom": "^25.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "vitest": "^2.1.8"
+    "vitest": "^5.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --external react --external react-dom",

package/src/components/app-bar.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Menu, X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * AppBar — a web application top bar: a brand slot, a row of primary nav
+ * links, and a trailing actions slot inside a sticky bordered header. Below
+ * the `md` breakpoint the nav collapses behind a menu toggle into a panel
+ * under the bar.
+ *
+ * <AppBar>
+ *   <AppBarBrand>Acme</AppBarBrand>
+ *   <AppBarNav>
+ *     <AppBarLink href="/" active>Overview</AppBarLink>
+ *     <AppBarLink href="/reports">Reports</AppBarLink>
+ *   </AppBarNav>
+ *   <AppBarActions><Button size="sm">New</Button></AppBarActions>
+ * </AppBar>
+ *
+ * `NavigationBar` is the mobile back-button bar; this is the desktop app shell.
+ */
+
+interface AppBarCtx {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const Ctx = React.createContext<AppBarCtx | null>(null);
+const useAppBar = () => {
+  const ctx = React.useContext(Ctx);
+  if (!ctx) throw new Error("AppBar parts must be used within <AppBar>");
+  return ctx;
+};
+
+const AppBar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    const [open, setOpen] = React.useState(false);
+
+    const nav = React.Children.toArray(children).find(
+      (c): c is React.ReactElement<React.ComponentProps<typeof AppBarNav>> =>
+        React.isValidElement(c) && c.type === AppBarNav,
+    );
+
+    return (
+      <Ctx.Provider value={{ open, setOpen }}>
+        <header
+          ref={ref}
+          className={cn(
+            "sticky top-0 z-40 w-full border-b border-border bg-background/95 font-sans",
+            "backdrop-blur supports-[backdrop-filter]:bg-background/75",
+            className,
+          )}
+          {...props}
+        >
+          <div className="mx-auto flex h-14 max-w-screen-2xl items-center gap-4 px-4">
+            {children}
+            {nav && (
+              <button
+                type="button"
+                aria-label={open ? "Close menu" : "Open menu"}
+                aria-expanded={open}
+                onClick={() => setOpen((o) => !o)}
+                className={cn(
+                  "ml-auto inline-flex size-9 items-center justify-center rounded-md text-foreground outline-none transition-colors md:hidden",
+                  "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
+                )}
+              >
+                {open ? <X className="size-5" /> : <Menu className="size-5" />}
+              </button>
+            )}
+          </div>
+          {nav && open && (
+            <nav className="flex flex-col gap-1 border-t border-border p-2 md:hidden">
+              {nav.props.children}
+            </nav>
+          )}
+        </header>
+      </Ctx.Provider>
+    );
+  },
+);
+AppBar.displayName = "AppBar";
+
+const AppBarBrand = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex shrink-0 items-center gap-2 text-[15px] font-semibold text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+AppBarBrand.displayName = "AppBarBrand";
+
+const AppBarNav = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, ...props }, ref) => (
+    <nav ref={ref} className={cn("hidden items-center gap-1 md:flex", className)} {...props} />
+  ),
+);
+AppBarNav.displayName = "AppBarNav";
+
+export interface AppBarLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Marks the current destination — sets `aria-current="page"` and the active style. */
+  active?: boolean;
+  /** Render as the child element (e.g. a framework `<Link>`), forwarding props. */
+  asChild?: boolean;
+}
+
+const AppBarLink = React.forwardRef<HTMLAnchorElement, AppBarLinkProps>(
+  ({ className, active, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (
+      <Comp
+        ref={ref}
+        data-active={active ? "" : undefined}
+        aria-current={active ? "page" : undefined}
+        className={cn(
+          "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium outline-none transition-colors",
+          "text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+          "data-[active]:bg-accent data-[active]:text-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+AppBarLink.displayName = "AppBarLink";
+
+const AppBarActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("ml-auto flex shrink-0 items-center gap-2", className)} {...props} />
+  ),
+);
+AppBarActions.displayName = "AppBarActions";
+
+export { AppBar, AppBarBrand, AppBarNav, AppBarLink, AppBarActions, useAppBar };

package/src/components/chart.tsx

@@ -194,21 +194,33 @@ function ChartSrTable({
   );
 }
 
+// This is the one spot that writes an inline <style>. `id`, the config keys and
+// the colour strings are author-supplied, but harden the interpolation anyway:
+// strip everything but `[\w-]` from identifiers, and drop any colour value that
+// carries characters able to close the declaration or the rule.
+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 ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);
   if (!colorConfig.length) return null;
 
+  const chartSelector = cssIdent(id);
+
   return (
     <style
       dangerouslySetInnerHTML={{
         __html: Object.entries(THEMES)
           .map(
             ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+${prefix} [data-chart=${chartSelector}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
+    const raw = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    const color = raw ? cssValue(raw) : "";
+    return color ? `  --color-${cssIdent(key)}: ${color};` : null;
   })
   .join("\n")}
 }

package/src/index.ts

@@ -284,6 +284,15 @@ export { Stepper, type StepperProps, type StepperStep } from "./components/stepp
 export { Fab, fabVariants, type FabProps } from "./components/fab";
 export { TabBar, TabBarItem, type TabBarItemProps } from "./components/tab-bar";
 export { NavigationBar, type NavigationBarProps } from "./components/navigation-bar";
+export {
+  AppBar,
+  AppBarBrand,
+  AppBarNav,
+  AppBarLink,
+  AppBarActions,
+  useAppBar,
+  type AppBarLinkProps,
+} from "./components/app-bar";
 export {
   FileUpload,
   FileUploadItem,

package/src/stories/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -27,7 +27,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Accordion type="single" collapsible>\n  <AccordionItem value="a">\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\n    <AccordionContent>Yes. It follows the WAI-ARIA design pattern.</AccordionContent>\n  </AccordionItem>\n</Accordion>`, language: "tsx" } },
+    docs: { source: { code: "<Accordion type=\"single\" collapsible>\\n  <AccordionItem value=\"a\">\\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n    <AccordionContent>Yes. It follows the WAI-ARIA design pattern.</AccordionContent>\\n  </AccordionItem>\\n</Accordion>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Alert.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Alert, AlertDescription, AlertTitle } from "@kinetixui/ui";
 import { Terminal } from "lucide-react";
 
@@ -22,7 +22,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Alert>\n  <Terminal className="size-4" />\n  <AlertTitle>Heads up!</AlertTitle>\n  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>\n</Alert>`, language: "tsx" } },
+    docs: { source: { code: "<Alert>\\n  <Terminal className=\"size-4\" />\\n  <AlertTitle>Heads up!</AlertTitle>\\n  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>\\n</Alert>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/AlertDialog.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -26,7 +26,7 @@ const meta = {
   title: "Overlays/AlertDialog",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<AlertDialog>\n  <AlertDialogTrigger asChild><Button variant="Outline">Delete account</Button></AlertDialogTrigger>\n  <AlertDialogContent>…</AlertDialogContent>\n</AlertDialog>`, language: "tsx" } },
+    docs: { source: { code: "<AlertDialog>\\n  <AlertDialogTrigger asChild><Button variant=\"Outline\">Delete account</Button></AlertDialogTrigger>\\n  <AlertDialogContent>…</AlertDialogContent>\\n</AlertDialog>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/AppBar.stories.tsx

@@ -0,0 +1,46 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AppBar, AppBarActions, AppBarBrand, AppBarLink, AppBarNav } from "@kinetixui/ui";
+import { Bell } from "lucide-react";
+
+const Demo = () => (
+    <AppBar className="w-full max-w-2xl rounded-md border">
+      <AppBarBrand>
+        <span className="grid size-6 place-items-center rounded bg-primary text-[11px] font-bold text-primary-foreground">
+          A
+        </span>
+        Acme
+      </AppBarBrand>
+      <AppBarNav>
+        <AppBarLink href="#" active>
+          Overview
+        </AppBarLink>
+        <AppBarLink href="#">Reports</AppBarLink>
+        <AppBarLink href="#">Team</AppBarLink>
+      </AppBarNav>
+      <AppBarActions>
+        <button
+          type="button"
+          aria-label="Notifications"
+          className="flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          <Bell className="size-4" />
+        </button>
+        <span className="grid size-8 place-items-center rounded-full bg-muted text-xs font-medium">KZ</span>
+      </AppBarActions>
+    </AppBar>
+  );
+
+const meta = {
+  title: "Components/AppBar",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<AppBar>\\n  <AppBarBrand>Acme</AppBarBrand>\\n  <AppBarNav>\\n    <AppBarLink href=\"/\" active>Overview</AppBarLink>\\n    <AppBarLink href=\"/reports\">Reports</AppBarLink>\\n    <AppBarLink href=\"/team\">Team</AppBarLink>\\n  </AppBarNav>\\n  <AppBarActions>\\n    <Button variant=\"Ghost\" size=\"icon\"><Bell /></Button>\\n    <Avatar>…</Avatar>\\n  </AppBarActions>\\n</AppBar>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/AspectRatio.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AspectRatio } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -17,7 +17,7 @@ const meta = {
   argTypes: { ratio: { control: { type: "number", step: 0.05 } } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<AspectRatio ratio={16 / 9} className="bg-muted rounded-md" />`, language: "tsx" } },
+    docs: { source: { code: "<AspectRatio ratio={16 / 9} className=\"bg-muted rounded-md\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/AudioPlayer.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AudioPlayer } from "@kinetixui/ui";
 
 const SAMPLE_AUDIO = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
@@ -17,7 +17,7 @@ const meta = {
   title: "Data Display/AudioPlayer",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<AudioPlayer src="/audio/song.mp3" title="Song 1" artist="Artist" />\n\n<AudioPlayer variant="mini" src="/audio/song.mp3" title="Song 1" artist="Artist" />`, language: "tsx" } },
+    docs: { source: { code: "<AudioPlayer src=\"/audio/song.mp3\" title=\"Song 1\" artist=\"Artist\" />\\n\\n<AudioPlayer variant=\"mini\" src=\"/audio/song.mp3\" title=\"Song 1\" artist=\"Artist\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Avatar.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar, AvatarFallback } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -14,7 +14,7 @@ const meta = {
   title: "Data Display/Avatar",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Avatar>\n  <AvatarImage src="/avatar.png" alt="@kinetixui" />\n  <AvatarFallback>KX</AvatarFallback>\n</Avatar>`, language: "tsx" } },
+    docs: { source: { code: "<Avatar>\\n  <AvatarImage src=\"/avatar.png\" alt=\"@kinetixui\" />\\n  <AvatarFallback>KX</AvatarFallback>\\n</Avatar>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/AvatarGroup.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Avatar, AvatarFallback, AvatarGroup } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -28,7 +28,7 @@ const meta = {
   title: "Data Display/AvatarGroup",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<AvatarGroup max={3}>\n  <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n  <Avatar><AvatarFallback>AK</AvatarFallback></Avatar>\n  <Avatar><AvatarFallback>MO</AvatarFallback></Avatar>\n</AvatarGroup>`, language: "tsx" } },
+    docs: { source: { code: "<AvatarGroup max={3}>\\n  <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\\n  <Avatar><AvatarFallback>AK</AvatarFallback></Avatar>\\n  <Avatar><AvatarFallback>MO</AvatarFallback></Avatar>\\n</AvatarGroup>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Badge.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Badge } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -24,7 +24,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Badge>Default</Badge>\n<Badge variant="secondary">Secondary</Badge>\n<Badge variant="destructive">Destructive</Badge>\n<Badge variant="outline">Outline</Badge>\n<Badge variant="subtle">Subtle</Badge>`, language: "tsx" } },
+    docs: { source: { code: "<Badge>Default</Badge>\\n<Badge variant=\"secondary\">Secondary</Badge>\\n<Badge variant=\"destructive\">Destructive</Badge>\\n<Badge variant=\"outline\">Outline</Badge>\\n<Badge variant=\"subtle\">Subtle</Badge>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Breadcrumb.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@kinetixui/ui";
 import { Home } from "lucide-react";
 
@@ -27,7 +27,7 @@ const meta = {
   title: "Navigation/Breadcrumb",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`, language: "tsx" } },
+    docs: { source: { code: "<Breadcrumb>\\n  <BreadcrumbList>\\n    <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\\n    <BreadcrumbSeparator />\\n    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>\\n  </BreadcrumbList>\\n</Breadcrumb>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button } from "../components/button";
 
 const VARIANTS = ["Primary", "Secondary", "Outline", "Destructive", "Ghost", "Link"] as const;

package/src/stories/Calendar.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Calendar } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -16,7 +16,7 @@ const meta = {
   title: "Form Inputs/Calendar",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `const [date, setDate] = React.useState<Date>()\n<Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />`, language: "tsx" } },
+    docs: { source: { code: "const [date, setDate] = React.useState<Date>()\\n<Calendar mode=\"single\" selected={date} onSelect={setDate} className=\"rounded-md border\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Card.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -24,7 +24,7 @@ const meta = {
   title: "Data Display/Card",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Card>\n  <CardHeader>\n    <CardTitle>Create project</CardTitle>\n    <CardDescription>Deploy your new project in one click.</CardDescription>\n  </CardHeader>\n  <CardContent>…</CardContent>\n  <CardFooter>…</CardFooter>\n</Card>`, language: "tsx" } },
+    docs: { source: { code: "<Card>\\n  <CardHeader>\\n    <CardTitle>Create project</CardTitle>\\n    <CardDescription>Deploy your new project in one click.</CardDescription>\\n  </CardHeader>\\n  <CardContent>…</CardContent>\\n  <CardFooter>…</CardFooter>\\n</Card>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Carousel.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -24,7 +24,7 @@ const meta = {
   title: "Data Display/Carousel",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `<Carousel>\n  <CarouselContent>\n    {items.map((n) => <CarouselItem key={n}>{n}</CarouselItem>)}\n  </CarouselContent>\n  <CarouselPrevious />\n  <CarouselNext />\n</Carousel>`, language: "tsx" } },
+    docs: { source: { code: "<Carousel>\\n  <CarouselContent>\\n    {items.map((n) => <CarouselItem key={n}>{n}</CarouselItem>)}\\n  </CarouselContent>\\n  <CarouselPrevious />\\n  <CarouselNext />\\n</Carousel>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Chart.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@kinetixui/ui";
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
 
@@ -35,7 +35,7 @@ const meta = {
   title: "Data Display/Chart",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `const config = {\n  desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },\n  mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },\n}\n<ChartContainer config={config}>\n  <BarChart data={data}>\n    <CartesianGrid vertical={false} />\n    <XAxis dataKey="month" />\n    <ChartTooltip content={<ChartTooltipContent />} />\n    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />\n  </BarChart>\n</ChartContainer>`, language: "tsx" } },
+    docs: { source: { code: "const config = {\\n  desktop: { label: \"Desktop\", color: \"hsl(var(--chart-1))\" },\\n  mobile: { label: \"Mobile\", color: \"hsl(var(--chart-2))\" },\\n}\\n<ChartContainer config={config}>\\n  <BarChart data={data}>\\n    <CartesianGrid vertical={false} />\\n    <XAxis dataKey=\"month\" />\\n    <ChartTooltip content={<ChartTooltipContent />} />\\n    <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\\n  </BarChart>\\n</ChartContainer>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Checkbox, Label } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -18,7 +18,7 @@ const meta = {
   argTypes: { disabled: { control: "boolean" }, defaultChecked: { control: "boolean" } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<div className="flex items-center gap-2">\n  <Checkbox id="c1" />\n  <Label htmlFor="c1">Accept terms and conditions</Label>\n</div>`, language: "tsx" } },
+    docs: { source: { code: "<div className=\"flex items-center gap-2\">\\n  <Checkbox id=\"c1\" />\\n  <Label htmlFor=\"c1\">Accept terms and conditions</Label>\\n</div>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/CircularProgress.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircularProgress } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -31,7 +31,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<CircularProgress value={66} showValue />\n<CircularProgress value={66} size={64} strokeWidth={6} showValue />`, language: "tsx" } },
+    docs: { source: { code: "<CircularProgress value={66} showValue />\\n<CircularProgress value={66} size={64} strokeWidth={6} showValue />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/CodeBlock.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button, CodeBlock } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -16,7 +16,7 @@ const meta = {
   title: "Foundations/CodeBlock",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<CodeBlock filename="button.tsx" code={source} />`, language: "tsx" } },
+    docs: { source: { code: "<CodeBlock filename=\"button.tsx\" code={source} />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Collapsible.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    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";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Toggle } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -26,7 +26,7 @@ const meta = {
   argTypes: { defaultOpen: { control: "boolean" }, disabled: { control: "boolean" } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Collapsible>\n  <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n  <CollapsibleContent>…</CollapsibleContent>\n</Collapsible>`, language: "tsx" } },
+    docs: { source: { code: "<Collapsible>\\n  <CollapsibleTrigger>Toggle</CollapsibleTrigger>\\n  <CollapsibleContent>…</CollapsibleContent>\\n</Collapsible>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Combobox.stories.tsx

@@ -1,7 +1,7 @@
 /* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
    Source of truth: apps/web/src/registry/demos.tsx */
 import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Command as Cmd, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@kinetixui/ui";
 import { Search } from "lucide-react";
 
@@ -23,7 +23,7 @@ const meta = {
   title: "Controls & Actions/Combobox",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `// Popover + Command\n<Popover>\n  <PopoverTrigger asChild><Button variant="Outline">Select framework…</Button></PopoverTrigger>\n  <PopoverContent className="p-0">\n    <Command>…</Command>\n  </PopoverContent>\n</Popover>`, language: "tsx" } },
+    docs: { source: { code: "// Popover + Command\\n<Popover>\\n  <PopoverTrigger asChild><Button variant=\"Outline\">Select framework…</Button></PopoverTrigger>\\n  <PopoverContent className=\"p-0\">\\n    <Command>…</Command>\\n  </PopoverContent>\\n</Popover>", language: "tsx" } },
   },
 } satisfies Meta;