@kinetixui/ui 0.4.3 → 0.5.1

package/src/stories/Field.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 { Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, Input } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -26,7 +26,7 @@ const meta = {
   title: "Form Inputs/Field",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Field invalid={!!error}>\n  <FieldLabel>Email</FieldLabel>\n  <FieldControl><Input type="email" {...register("email")} /></FieldControl>\n  <FieldDescription>We'll only use it to send receipts.</FieldDescription>\n  {error && <FieldMessage intent="error">{error.message}</FieldMessage>}\n</Field>`, language: "tsx" } },
+    docs: { source: { code: "<Field invalid={!!error}>\\n  <FieldLabel>Email</FieldLabel>\\n  <FieldControl><Input type=\"email\" {...register(\"email\")} /></FieldControl>\\n  <FieldDescription>We'll only use it to send receipts.</FieldDescription>\\n  {error && <FieldMessage intent=\"error\">{error.message}</FieldMessage>}\\n</Field>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/FileUpload.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 { FileUpload } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -27,7 +27,7 @@ const meta = {
   title: "Form Inputs/FileUpload",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<FileUpload\n  multiple\n  files={files}\n  onFilesSelected={(picked) => upload(picked)}\n  onRemove={(id) => removeFile(id)}\n/>`, language: "tsx" } },
+    docs: { source: { code: "<FileUpload\\n  multiple\\n  files={files}\\n  onFilesSelected={(picked) => upload(picked)}\\n  onRemove={(id) => removeFile(id)}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Footer.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 { Footer, FooterBottom, FooterColumn, FooterLink } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -30,7 +30,7 @@ const meta = {
   title: "Data Display/Footer",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `<Footer>\n  <div className="grid grid-cols-2 gap-6">\n    <FooterColumn title="Product">\n      <FooterLink href="/pricing">Pricing</FooterLink>\n    </FooterColumn>\n  </div>\n  <FooterBottom>© 2026 Acme Inc.</FooterBottom>\n</Footer>`, language: "tsx" } },
+    docs: { source: { code: "<Footer>\\n  <div className=\"grid grid-cols-2 gap-6\">\\n    <FooterColumn title=\"Product\">\\n      <FooterLink href=\"/pricing\">Pricing</FooterLink>\\n    </FooterColumn>\\n  </div>\\n  <FooterBottom>© 2026 Acme Inc.</FooterBottom>\\n</Footer>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Form.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, Input } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -19,7 +19,7 @@ const meta = {
   title: "Form Inputs/Form",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema) })\n\n<Form {...form}>\n  <form onSubmit={form.handleSubmit(onSubmit)}>\n    <FormField control={form.control} name="username" render={({ field }) => (\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl><Input {...field} /></FormControl>\n        <FormMessage />\n      </FormItem>\n    )} />\n    <Button type="submit">Submit</Button>\n  </form>\n</Form>`, language: "tsx" } },
+    docs: { source: { code: "const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema) })\\n\\n<Form {...form}>\\n  <form onSubmit={form.handleSubmit(onSubmit)}>\\n    <FormField control={form.control} name=\"username\" render={({ field }) => (\\n      <FormItem>\\n        <FormLabel>Username</FormLabel>\\n        <FormControl><Input {...field} /></FormControl>\\n        <FormMessage />\\n      </FormItem>\\n    )} />\\n    <Button type=\"submit\">Submit</Button>\\n  </form>\\n</Form>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/HoverCard.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, HoverCard, HoverCardContent, HoverCardTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -23,7 +23,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<HoverCard>\n  <HoverCardTrigger>@kinetixui</HoverCardTrigger>\n  <HoverCardContent>…</HoverCardContent>\n</HoverCard>`, language: "tsx" } },
+    docs: { source: { code: "<HoverCard>\\n  <HoverCardTrigger>@kinetixui</HoverCardTrigger>\\n  <HoverCardContent>…</HoverCardContent>\\n</HoverCard>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Image.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 { Image } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -22,7 +22,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Image ratio="1:1" src="/photo.jpg" alt="" />\n<Image ratio="4:3" src="/photo.jpg" alt="" />\n<Image ratio="16:9" src="/photo.jpg" alt="" rounded={false} />`, language: "tsx" } },
+    docs: { source: { code: "<Image ratio=\"1:1\" src=\"/photo.jpg\" alt=\"\" />\\n<Image ratio=\"4:3\" src=\"/photo.jpg\" alt=\"\" />\\n<Image ratio=\"16:9\" src=\"/photo.jpg\" alt=\"\" rounded={false} />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Inform.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 { Inform } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -26,7 +26,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Inform variant="information" onDismiss={close}>\n  A new software update is available.\n</Inform>\n\n<Inform variant="error" action={{ label: "Retry", onClick: retry }}>\n  We couldn't process your payment.\n</Inform>`, language: "tsx" } },
+    docs: { source: { code: "<Inform variant=\"information\" onDismiss={close}>\\n  A new software update is available.\\n</Inform>\\n\\n<Inform variant=\"error\" action={{ label: \"Retry\", onClick: retry }}>\\n  We couldn't process your payment.\\n</Inform>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Input } from "../components/input";
 
 const STATES = ["Default", "Focus", "Error", "Disabled"] as const;

package/src/stories/InputGroup.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 { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@kinetixui/ui";
 import { Search } from "lucide-react";
 
@@ -27,7 +27,7 @@ const meta = {
   title: "Form Inputs/InputGroup",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<InputGroup>\n  <InputGroupText>https://</InputGroupText>\n  <InputGroupInput placeholder="kinetixui.com" />\n</InputGroup>\n\n<InputGroup>\n  <InputGroupAddon align="start">$</InputGroupAddon>\n  <InputGroupInput placeholder="0.00" />\n  <InputGroupText>USD</InputGroupText>\n</InputGroup>`, language: "tsx" } },
+    docs: { source: { code: "<InputGroup>\\n  <InputGroupText>https://</InputGroupText>\\n  <InputGroupInput placeholder=\"kinetixui.com\" />\\n</InputGroup>\\n\\n<InputGroup>\\n  <InputGroupAddon align=\"start\">$</InputGroupAddon>\\n  <InputGroupInput placeholder=\"0.00\" />\\n  <InputGroupText>USD</InputGroupText>\\n</InputGroup>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/InputOTP.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 { InputOTP, InputOTPGroup, InputOTPSlot } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -18,7 +18,7 @@ const meta = {
   title: "Form Inputs/InputOTP",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<InputOTP maxLength={6}>\n  <InputOTPGroup>\n    <InputOTPSlot index={0} />\n    ...\n    <InputOTPSlot index={5} />\n  </InputOTPGroup>\n</InputOTP>`, language: "tsx" } },
+    docs: { source: { code: "<InputOTP maxLength={6}>\\n  <InputOTPGroup>\\n    <InputOTPSlot index={0} />\\n    ...\\n    <InputOTPSlot index={5} />\\n  </InputOTPGroup>\\n</InputOTP>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Label.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 { Checkbox, Label } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -15,7 +15,7 @@ const meta = {
   title: "Foundations/Label",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Label htmlFor="email">Your email address</Label>`, language: "tsx" } },
+    docs: { source: { code: "<Label htmlFor=\"email\">Your email address</Label>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/List.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 { Badge, List, ListItem, Switch } from "@kinetixui/ui";
 import { Bell, Settings, User } from "lucide-react";
 
@@ -17,7 +17,7 @@ const meta = {
   title: "Data Display/List",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<List>\n  <ListItem\n    leading={<User />}\n    title="Profile"\n    description="Name, photo, and personal details"\n    onSelect={() => router.push("/profile")}\n  />\n  <ListItem leading={<Bell />} title="Notifications" trailing={<Switch />} />\n</List>`, language: "tsx" } },
+    docs: { source: { code: "<List>\\n  <ListItem\\n    leading={<User />}\\n    title=\"Profile\"\\n    description=\"Name, photo, and personal details\"\\n    onSelect={() => router.push(\"/profile\")}\\n  />\\n  <ListItem leading={<Bell />} title=\"Notifications\" trailing={<Switch />} />\\n</List>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Menubar.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 { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -29,7 +29,7 @@ const meta = {
   title: "Navigation/Menubar",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `<Menubar>\n  <MenubarMenu>\n    <MenubarTrigger>File</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>New Tab</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>`, language: "tsx" } },
+    docs: { source: { code: "<Menubar>\\n  <MenubarMenu>\\n    <MenubarTrigger>File</MenubarTrigger>\\n    <MenubarContent>\\n      <MenubarItem>New Tab</MenubarItem>\\n    </MenubarContent>\\n  </MenubarMenu>\\n</Menubar>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Metric.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 { Metric } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -21,7 +21,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Metric label="Active users" value="2,420" trend="up" change="12%" />`, language: "tsx" } },
+    docs: { source: { code: "<Metric label=\"Active users\" value=\"2,420\" trend=\"up\" change=\"12%\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Modal.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, Modal } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -22,7 +22,7 @@ const meta = {
   title: "Overlays/Modal",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Modal\n  type="Confirmation"\n  title="Are you sure?"\n  description="This action cannot be undone."\n  trigger={<Button variant="Outline">Delete</Button>}\n  onAction={handleDelete}\n/>`, language: "tsx" } },
+    docs: { source: { code: "<Modal\\n  type=\"Confirmation\"\\n  title=\"Are you sure?\"\\n  description=\"This action cannot be undone.\"\\n  trigger={<Button variant=\"Outline\">Delete</Button>}\\n  onAction={handleDelete}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/NavigationBar.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 { NavigationBar } from "@kinetixui/ui";
 import { Search } from "lucide-react";
 
@@ -23,7 +23,7 @@ const meta = {
   title: "Navigation/NavigationBar",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<NavigationBar\n  title="Appointments"\n  infoText="3 upcoming"\n  onBack={() => router.back()}\n  actions={<Button variant="Ghost" size="icon"><Search /></Button>}\n/>`, language: "tsx" } },
+    docs: { source: { code: "<NavigationBar\\n  title=\"Appointments\"\\n  infoText=\"3 upcoming\"\\n  onBack={() => router.back()}\\n  actions={<Button variant=\"Ghost\" size=\"icon\"><Search /></Button>}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/NavigationMenu.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 { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -25,7 +25,7 @@ const meta = {
   title: "Navigation/NavigationMenu",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n      <NavigationMenuContent>…</NavigationMenuContent>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>`, language: "tsx" } },
+    docs: { source: { code: "<NavigationMenu>\\n  <NavigationMenuList>\\n    <NavigationMenuItem>\\n      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\\n      <NavigationMenuContent>…</NavigationMenuContent>\\n    </NavigationMenuItem>\\n  </NavigationMenuList>\\n</NavigationMenu>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/NumberInput.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 { NumberInput } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -18,7 +18,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<NumberInput value={qty} onChange={setQty} min={0} max={10} />`, language: "tsx" } },
+    docs: { source: { code: "<NumberInput value={qty} onChange={setQty} min={0} max={10} />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Pagination.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 { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -21,7 +21,7 @@ const meta = {
   title: "Controls & Actions/Pagination",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Pagination>\n  <PaginationContent>\n    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>\n    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>\n    <PaginationItem><PaginationNext href="#" /></PaginationItem>\n  </PaginationContent>\n</Pagination>`, language: "tsx" } },
+    docs: { source: { code: "<Pagination>\\n  <PaginationContent>\\n    <PaginationItem><PaginationPrevious href=\"#\" /></PaginationItem>\\n    <PaginationItem><PaginationLink href=\"#\" isActive>2</PaginationLink></PaginationItem>\\n    <PaginationItem><PaginationNext href=\"#\" /></PaginationItem>\\n  </PaginationContent>\\n</Pagination>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/PasswordInput.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 { PasswordInput } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -14,7 +14,7 @@ const meta = {
   title: "Form Inputs/PasswordInput",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<PasswordInput placeholder="••••••••" />`, language: "tsx" } },
+    docs: { source: { code: "<PasswordInput placeholder=\"••••••••\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Popover.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, Popover, PopoverContent, PopoverTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -26,7 +26,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Popover>\n  <PopoverTrigger asChild><Button variant="Outline">Open popover</Button></PopoverTrigger>\n  <PopoverContent>…</PopoverContent>\n</Popover>`, language: "tsx" } },
+    docs: { source: { code: "<Popover>\\n  <PopoverTrigger asChild><Button variant=\"Outline\">Open popover</Button></PopoverTrigger>\\n  <PopoverContent>…</PopoverContent>\\n</Popover>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Progress.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 { Progress } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -20,7 +20,7 @@ const meta = {
   argTypes: { value: { control: { type: "range", min: 0, max: 100 } } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `const [value, setValue] = React.useState(13)\n// ...\n<Progress value={value} />`, language: "tsx" } },
+    docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Quote.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, Quote } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -23,7 +23,7 @@ const meta = {
   title: "Data Display/Quote",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Quote author="Amira K." authorTitle="Product Designer" avatar={<Avatar>...</Avatar>}>\n  This is exactly the token workflow our team needed.\n</Quote>`, language: "tsx" } },
+    docs: { source: { code: "<Quote author=\"Amira K.\" authorTitle=\"Product Designer\" avatar={<Avatar>...</Avatar>}>\\n  This is exactly the token workflow our team needed.\\n</Quote>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/RadioGroup.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 { Label, RadioGroup, RadioGroupItem } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -25,7 +25,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<RadioGroup defaultValue="comfortable">\n  <div className="flex items-center gap-2">\n    <RadioGroupItem value="default" id="r1" />\n    <Label htmlFor="r1">Default</Label>\n  </div>\n</RadioGroup>`, language: "tsx" } },
+    docs: { source: { code: "<RadioGroup defaultValue=\"comfortable\">\\n  <div className=\"flex items-center gap-2\">\\n    <RadioGroupItem value=\"default\" id=\"r1\" />\\n    <Label htmlFor=\"r1\">Default</Label>\\n  </div>\\n</RadioGroup>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Rating.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 { Rating } from "@kinetixui/ui";
 
 const Demo = () => {
@@ -24,7 +24,7 @@ const meta = {
   },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Rating value={value} onChange={setValue} />\n<Rating value={4} readOnly size="sm" />`, language: "tsx" } },
+    docs: { source: { code: "<Rating value={value} onChange={setValue} />\\n<Rating value={4} readOnly size=\"sm\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Resizable.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 { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -20,7 +20,7 @@ const meta = {
   title: "Data Display/Resizable",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `<ResizablePanelGroup direction="horizontal">\n  <ResizablePanel defaultSize={50}>One</ResizablePanel>\n  <ResizableHandle withHandle />\n  <ResizablePanel defaultSize={50}>Two</ResizablePanel>\n</ResizablePanelGroup>`, language: "tsx" } },
+    docs: { source: { code: "<ResizablePanelGroup direction=\"horizontal\">\\n  <ResizablePanel defaultSize={50}>One</ResizablePanel>\\n  <ResizableHandle withHandle />\\n  <ResizablePanel defaultSize={50}>Two</ResizablePanel>\\n</ResizablePanelGroup>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/ScrollArea.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 { ScrollArea, Tag } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -16,7 +16,7 @@ const meta = {
   title: "Data Display/ScrollArea",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<ScrollArea className="h-40 w-56 rounded-md border p-4">\n  {tags.map((t) => <div key={t}>{t}</div>)}\n</ScrollArea>`, language: "tsx" } },
+    docs: { source: { code: "<ScrollArea className=\"h-40 w-56 rounded-md border p-4\">\\n  {tags.map((t) => <div key={t}>{t}</div>)}\\n</ScrollArea>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Select.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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -24,7 +24,7 @@ const meta = {
   argTypes: { disabled: { control: "boolean" } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Select>\n  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>\n  <SelectContent>\n    <SelectItem value="apple">Apple</SelectItem>\n  </SelectContent>\n</Select>`, language: "tsx" } },
+    docs: { source: { code: "<Select>\\n  <SelectTrigger><SelectValue placeholder=\"Select a fruit\" /></SelectTrigger>\\n  <SelectContent>\\n    <SelectItem value=\"apple\">Apple</SelectItem>\\n  </SelectContent>\\n</Select>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Separator.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 { Separator } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -26,7 +26,7 @@ const meta = {
   argTypes: { orientation: { control: "inline-radio", options: ["horizontal", "vertical"] } },
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Separator />\n<Separator orientation="vertical" />`, language: "tsx" } },
+    docs: { source: { code: "<Separator />\\n<Separator orientation=\"vertical\" />", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Sheet.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, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -22,7 +22,7 @@ const meta = {
   title: "Overlays/Sheet",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Sheet>\n  <SheetTrigger asChild><Button variant="Outline">Open</Button></SheetTrigger>\n  <SheetContent side="right">…</SheetContent>\n</Sheet>`, language: "tsx" } },
+    docs: { source: { code: "<Sheet>\\n  <SheetTrigger asChild><Button variant=\"Outline\">Open</Button></SheetTrigger>\\n  <SheetContent side=\"right\">…</SheetContent>\\n</Sheet>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Sidebar.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";
 
 
 const Demo = () => (
@@ -16,7 +16,7 @@ const meta = {
   title: "Navigation/Sidebar",
   parameters: {
     layout: "padded",
-    docs: { source: { code: `<SidebarProvider>\n  <Sidebar>\n    <SidebarHeader>…</SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton isActive>Home</SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <SidebarTrigger />\n    {/* page content */}\n  </SidebarInset>\n</SidebarProvider>`, language: "tsx" } },
+    docs: { source: { code: "<SidebarProvider>\\n  <Sidebar>\\n    <SidebarHeader>…</SidebarHeader>\\n    <SidebarContent>\\n      <SidebarGroup>\\n        <SidebarMenu>\\n          <SidebarMenuItem>\\n            <SidebarMenuButton isActive>Home</SidebarMenuButton>\\n          </SidebarMenuItem>\\n        </SidebarMenu>\\n      </SidebarGroup>\\n    </SidebarContent>\\n  </Sidebar>\\n  <SidebarInset>\\n    <SidebarTrigger />\\n    {/* page content */}\\n  </SidebarInset>\\n</SidebarProvider>", language: "tsx" } },
   },
 } satisfies Meta;
 

package/src/stories/Skeleton.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 { Skeleton } from "@kinetixui/ui";
 
 const Demo = () => (
@@ -18,7 +18,7 @@ const meta = {
   title: "Foundations/Skeleton",
   parameters: {
     layout: "centered",
-    docs: { source: { code: `<Skeleton className="size-12 rounded-full" />\n<Skeleton className="h-4 w-[200px]" />`, language: "tsx" } },
+    docs: { source: { code: "<Skeleton className=\"size-12 rounded-full\" />\\n<Skeleton className=\"h-4 w-[200px]\" />", language: "tsx" } },
   },
 } satisfies Meta;