@kinetixui/ui 0.5.0 → 0.5.1

package/dist/index.js

@@ -1643,19 +1643,23 @@ function ChartSrTable({
     /* @__PURE__ */ jsx37("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsx37("tr", { children: r.map((cell, j) => /* @__PURE__ */ jsx37("td", { children: cell }, j)) }, i)) })
   ] });
 }
+var cssIdent = (s) => String(s).replace(/[^\w-]/g, "");
+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;
+  const chartSelector = cssIdent(id);
   return /* @__PURE__ */ jsx37(
     "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] || itemConfig.color;
-            return color ? `  --color-${key}: ${color};` : null;
+            const raw = itemConfig.theme?.[theme] || itemConfig.color;
+            const color = raw ? cssValue(raw) : "";
+            return color ? `  --color-${cssIdent(key)}: ${color};` : null;
           }).join("\n")}
 }
 `

package/package.json

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

package/src/stories/Command.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, 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/Command",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Command>\n  <CommandInput placeholder="Type a command…" />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup heading="Suggestions">\n      <CommandItem>Calendar</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>`, language: "tsx" } },
+    docs: { source: { code: "<Command>\\n  <CommandInput placeholder=\"Type a command…\" />\\n  <CommandList>\\n    <CommandEmpty>No results found.</CommandEmpty>\\n    <CommandGroup heading=\"Suggestions\">\\n      <CommandItem>Calendar</CommandItem>\\n    </CommandGroup>\\n  </CommandList>\\n</Command>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/ContextMenu.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 { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -22,7 +22,7 @@ const meta = {
   title: "Overlays/ContextMenu",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<ContextMenu>\n  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>\n  <ContextMenuContent>\n    <ContextMenuItem>Back</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>`, language: "tsx" } },
+    docs: { source: { code: "<ContextMenu>\\n  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>\\n  <ContextMenuContent>\\n    <ContextMenuItem>Back</ContextMenuItem>\\n  </ContextMenuContent>\\n</ContextMenu>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/DataTable.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 { DataTable } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -22,7 +22,7 @@ const meta = {
   title: "Data Display/DataTable",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `const columns: ColumnDef<Invoice>[] = [\n  { accessorKey: "invoice", header: "Invoice" },\n  { accessorKey: "amount", header: "Amount" },\n]\n<DataTable columns={columns} data={data} />`, language: "tsx" } },
+    docs: { source: { code: "const columns: ColumnDef<Invoice>[] = [\\n  { accessorKey: \"invoice\", header: \"Invoice\" },\\n  { accessorKey: \"amount\", header: \"Amount\" },\\n]\\n<DataTable columns={columns} data={data} />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/DatePicker.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 { DatePicker } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -21,7 +21,7 @@ const meta = {
   title: "Form Inputs/DatePicker",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<DatePicker\n  label="Appointment date"\n  value={date}\n  onChange={setDate}\n  helperText="Choose a weekday"\n/>`, language: "tsx" } },
+    docs: { source: { code: "<DatePicker\\n  label=\"Appointment date\"\\n  value={date}\\n  onChange={setDate}\\n  helperText=\"Choose a weekday\"\\n/>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Dialog.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, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, Label } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -29,7 +29,7 @@ const meta = {
   title: "Overlays/Dialog",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Dialog>\n  <DialogTrigger asChild><Button variant="Outline">Edit profile</Button></DialogTrigger>\n  <DialogContent>…</DialogContent>\n</Dialog>`, language: "tsx" } },
+    docs: { source: { code: "<Dialog>\\n  <DialogTrigger asChild><Button variant=\"Outline\">Edit profile</Button></DialogTrigger>\\n  <DialogContent>…</DialogContent>\\n</Dialog>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Drawer.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, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -30,7 +30,7 @@ const meta = {
   title: "Overlays/Drawer",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Drawer>\n  <DrawerTrigger asChild><Button variant="Outline">Open Drawer</Button></DrawerTrigger>\n  <DrawerContent>…</DrawerContent>\n</Drawer>`, language: "tsx" } },
+    docs: { source: { code: "<Drawer>\\n  <DrawerTrigger asChild><Button variant=\"Outline\">Open Drawer</Button></DrawerTrigger>\\n  <DrawerContent>…</DrawerContent>\\n</Drawer>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/DropdownMenu.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, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -23,7 +23,7 @@ const meta = {
   title: "Overlays/DropdownMenu",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<DropdownMenu>\n  <DropdownMenuTrigger asChild><Button variant="Outline">Open</Button></DropdownMenuTrigger>\n  <DropdownMenuContent>…</DropdownMenuContent>\n</DropdownMenu>`, language: "tsx" } },
+    docs: { source: { code: "<DropdownMenu>\\n  <DropdownMenuTrigger asChild><Button variant=\"Outline\">Open</Button></DropdownMenuTrigger>\\n  <DropdownMenuContent>…</DropdownMenuContent>\\n</DropdownMenu>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Fab.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 { Fab } from "@kinetixui/ui";
 import { Plus } from "lucide-react";
 
@@ -31,7 +31,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Fab aria-label="Add">\n  <Plus />\n</Fab>\n\n<Fab extended>\n  <Plus />\n  New item\n</Fab>`, language: "tsx" } },
+    docs: { source: { code: "<Fab aria-label=\"Add\">\\n  <Plus />\\n</Fab>\\n\\n<Fab extended>\\n  <Plus />\\n  New item\\n</Fab>", language: "tsx" } },
   },
 } satisfies Meta;