@music-vine/cadence 2.6.1 → 2.7.0

package/dist/components/drawer.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @module Drawer
+ *
+ * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.
+ * Supports drag-to-dismiss, snap points, and background scaling.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}
+ * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}
+ *
+ * @example
+ * // Basic drawer
+ * <Drawer>
+ *   <DrawerTrigger asChild>
+ *     <Button>Open Drawer</Button>
+ *   </DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Settings</DrawerTitle>
+ *       <DrawerDescription>Adjust your preferences</DrawerDescription>
+ *     </DrawerHeader>
+ *     <div className="p-4">Content here</div>
+ *     <DrawerFooter>
+ *       <DrawerClose asChild>
+ *         <Button variant="outline">Close</Button>
+ *       </DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ *
+ * @example
+ * // Controlled drawer with custom handle
+ * const [open, setOpen] = useState(false);
+ *
+ * <Drawer open={open} onOpenChange={setOpen}>
+ *   <DrawerContent handleColor="dark">
+ *     <DrawerTitle>Menu</DrawerTitle>
+ *   </DrawerContent>
+ * </Drawer>
+ */
+import type * as React from "react";
+import type { Ref } from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+/**
+ * Root drawer component. Scales background by default.
+ * @param shouldScaleBackground - Scale page content when drawer opens (default: true)
+ */
+declare const Drawer: {
+    ({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */
+declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Portal for rendering drawer outside the DOM hierarchy. */
+declare const DrawerPortal: typeof import("vaul").Portal;
+/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */
+declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/** Semi-transparent backdrop behind the drawer. */
+declare const DrawerOverlay: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Main drawer content container. Slides up from bottom with drag handle.
+ * @param handleColor - Handle bar color: `"default"`, `"dark"`, `"light"`, or `"custom"`
+ * @param customHandleColor - Tailwind class for custom handle color (when handleColor="custom")
+ */
+declare const DrawerContent: ({ className, children, handleColor, customHandleColor, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
+    handleColor?: "default" | "dark" | "light" | "custom";
+    customHandleColor?: string;
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */
+declare const DrawerHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Footer section for action buttons, pushed to bottom of drawer. */
+declare const DrawerFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** Drawer title with semibold weight. Required for accessibility. */
+declare const DrawerTitle: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Muted description text below the title. */
+declare const DrawerDescription: ({ className, ref, ...props }: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
+    ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/components/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD;;;GAGG;AACH,QAAA,MAAM,MAAM;0CAGT,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;;CAKnD,CAAC;AAIF,yFAAyF;AACzF,QAAA,MAAM,aAAa,+HAA0B,CAAC;AAE9C,6DAA6D;AAC7D,QAAA,MAAM,YAAY,8BAAyB,CAAC;AAE5C,kFAAkF;AAClF,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAE1C,mDAAmD;AACnD,QAAA,MAAM,aAAa,GAAI,8BAIpB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,4CAMA,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,aAAa,GAAI,wEAOpB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAClE,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC;CAC7D,4CAoCA,CAAC;AAEF,oGAAoG;AACpG,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKtC,CAAC;AAIF,qEAAqE;AACrE,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAKtC,CAAC;AAIF,qEAAqE;AACrE,QAAA,MAAM,WAAW,GAAI,8BAIlB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;CAC3D,4CASA,CAAC;AAEF,8CAA8C;AAC9C,QAAA,MAAM,iBAAiB,GAAI,8BAIxB,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,GAAG;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC;CACjE,4CAMA,CAAC;AAEF,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}

package/dist/components/drawer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/drawer.tsx"],
-  "sourcesContent": ["/**\n * @module Drawer\n *\n * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.\n * Supports drag-to-dismiss, snap points, and background scaling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}\n * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}\n *\n * @example\n * // Basic drawer\n * <Drawer>\n *   <DrawerTrigger asChild>\n *     <Button>Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences</DrawerDescription>\n *     </DrawerHeader>\n *     <div className=\"p-4\">Content here</div>\n *     <DrawerFooter>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Close</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * @example\n * // Controlled drawer with custom handle\n * const [open, setOpen] = useState(false);\n *\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerContent handleColor=\"dark\">\n *     <DrawerTitle>Menu</DrawerTitle>\n *   </DrawerContent>\n * </Drawer>\n */\n\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root drawer component. Scales background by default.\n * @param shouldScaleBackground - Scale page content when drawer opens (default: true)\n */\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n);\n\nDrawer.displayName = \"Drawer\";\n\n/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portal for rendering drawer outside the DOM hierarchy. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Semi-transparent backdrop behind the drawer. */\nconst DrawerOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;\n}) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main drawer content container. Slides up from bottom with drag handle.\n * @param handleColor - Handle bar color: `\"default\"`, `\"dark\"`, `\"light\"`, or `\"custom\"`\n * @param customHandleColor - Tailwind class for custom handle color (when handleColor=\"custom\")\n */\nconst DrawerContent = ({\n  className,\n  children,\n  handleColor = \"default\",\n  customHandleColor,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  handleColor?: \"default\" | \"dark\" | \"light\" | \"custom\";\n  customHandleColor?: string;\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;\n}) => {\n  const getHandleColorClass = () => {\n    switch (handleColor) {\n      case \"dark\":\n        return \"bg-gray-300 dark:bg-gray-700\";\n      case \"light\":\n        return \"bg-gray-100 dark:bg-gray-900\";\n      case \"custom\":\n        return customHandleColor ?? \"bg-gray-200 dark:bg-gray-800\";\n      case \"default\":\n      default:\n        return \"bg-gray-200 dark:bg-gray-800\";\n    }\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-800 dark:bg-gray-900\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"absolute top-2 right-0 left-0 mx-auto h-1 w-[100px] rounded-full\",\n            getHandleColorClass()\n          )}\n        />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n};\n\n/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Footer section for action buttons, pushed to bottom of drawer. */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Drawer title with semibold weight. Required for accessibility. */\nconst DrawerTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;\n}) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the title. */\nconst DrawerDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;\n}) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-gray-500 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],
+  "sourcesContent": ["/**\n * @module Drawer\n *\n * Bottom sheet drawer for mobile-friendly interactions. Built on Vaul library.\n * Supports drag-to-dismiss, snap points, and background scaling.\n *\n * @see {@link https://ui.shadcn.com/docs/components/drawer Shadcn Drawer}\n * @see {@link https://vaul.emilkowal.ski/ Vaul Documentation}\n *\n * @example\n * // Basic drawer\n * <Drawer>\n *   <DrawerTrigger asChild>\n *     <Button>Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Settings</DrawerTitle>\n *       <DrawerDescription>Adjust your preferences</DrawerDescription>\n *     </DrawerHeader>\n *     <div className=\"p-4\">Content here</div>\n *     <DrawerFooter>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Close</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * @example\n * // Controlled drawer with custom handle\n * const [open, setOpen] = useState(false);\n *\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerContent handleColor=\"dark\">\n *     <DrawerTitle>Menu</DrawerTitle>\n *   </DrawerContent>\n * </Drawer>\n */\n\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Root drawer component. Scales background by default.\n * @param shouldScaleBackground - Scale page content when drawer opens (default: true)\n */\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n);\n\nDrawer.displayName = \"Drawer\";\n\n/** Element that opens the drawer when clicked. Use `asChild` to wrap custom triggers. */\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\n/** Portal for rendering drawer outside the DOM hierarchy. */\nconst DrawerPortal = DrawerPrimitive.Portal;\n\n/** Closes the drawer when clicked. Use `asChild` to wrap custom close buttons. */\nconst DrawerClose = DrawerPrimitive.Close;\n\n/** Semi-transparent backdrop behind the drawer. */\nconst DrawerOverlay = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Overlay>>;\n}) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\n/**\n * Main drawer content container. Slides up from bottom with drag handle.\n * @param handleColor - Handle bar color: `\"default\"`, `\"dark\"`, `\"light\"`, or `\"custom\"`\n * @param customHandleColor - Tailwind class for custom handle color (when handleColor=\"custom\")\n */\nconst DrawerContent = ({\n  className,\n  children,\n  handleColor = \"default\",\n  customHandleColor,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\n  handleColor?: \"default\" | \"dark\" | \"light\" | \"custom\";\n  customHandleColor?: string;\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Content>>;\n}) => {\n  const getHandleColorClass = () => {\n    switch (handleColor) {\n      case \"dark\":\n        return \"bg-gray-300 dark:bg-gray-700\";\n      case \"light\":\n        return \"bg-gray-100 dark:bg-gray-900\";\n      case \"custom\":\n        return customHandleColor ?? \"bg-gray-200 dark:bg-gray-800\";\n      case \"default\":\n      default:\n        return \"bg-gray-200 dark:bg-gray-800\";\n    }\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[9999] mt-16 flex h-auto flex-col rounded-t-[20px] border border-gray-200 bg-white px-6 pt-10 pb-12 dark:border-gray-800 dark:bg-gray-900\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"absolute top-2 right-0 left-0 mx-auto h-1 w-[100px] rounded-full\",\n            getHandleColorClass()\n          )}\n        />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n};\n\n/** Header section for drawer title and description. Centered on mobile, left-aligned on desktop. */\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n);\n\nDrawerHeader.displayName = \"DrawerHeader\";\n\n/** Footer section for action buttons, pushed to bottom of drawer. */\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n);\n\nDrawerFooter.displayName = \"DrawerFooter\";\n\n/** Drawer title with semibold weight. Required for accessibility. */\nconst DrawerTitle = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Title>>;\n}) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-lg leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n);\n\n/** Muted description text below the title. */\nconst DrawerDescription = ({\n  className,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {\n  ref?: Ref<React.ElementRef<typeof DrawerPrimitive.Description>>;\n}) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-gray-500 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n};\n"],
   "mappings": "AAsDE,cAkEI,YAlEJ;AAZF,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAAU;AAMnB,MAAM,SAAS,CAAC;AAAA,EACd,wBAAwB;AAAA,EACxB,GAAG;AACL,MACE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACC,GAAG;AAAA;AACN;AAGF,OAAO,cAAc;AAGrB,MAAM,gBAAgB,gBAAgB;AAGtC,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACzD;AAAA,IACC,GAAG;AAAA;AACN;AAQF,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAIM;AACJ,QAAM,sBAAsB,MAAM;AAChC,YAAQ,aAAa;AAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,qBAAqB;AAAA,MAC9B,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF;AAEA,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,oBAAoB;AAAA,cACtB;AAAA;AAAA,UACF;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAGA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,6CAA6C,SAAS;AAAA,IACnE,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,IACzD,GAAG;AAAA;AACN;AAGF,aAAa,cAAc;AAG3B,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN;AAIF,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGE;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE;AAAA,IACC,GAAG;AAAA;AACN;",
   "names": []
 }

package/dist/components/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Cadence UI Components
+ *
+ * Import components from this module:
+ * @example
+ * import { Button, Input } from '@music-vine/cadence/ui';
+ */
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, } from "./accordion";
+export { Badge, type BadgeProps, badgeVariants } from "./badge";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./breadcrumb";
+export { Button, type ButtonFontSize, type ButtonProps, type ButtonSize, buttonVariants, Loading, loadingVariants, type ResponsiveButtonFontSize, type ResponsiveButtonSize, } from "./button";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card";
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, } from "./carousel";
+export { CarouselDots } from "./carousel-dots";
+export { Checkbox, DummyCheckbox } from "./checkbox";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "./context-menu";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./dialog";
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, } from "./drawer";
+export { ClearInputButton, Input, type InputProps, inputVariants, } from "./input";
+export { Label } from "./label";
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "./popover";
+export { PriceTag, type PriceTagProps } from "./price-tag";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export { FadeAway, ScrollArea, ScrollBar } from "./scroll-area";
+export { ScrollDrum, ScrollDrumColumn, type ScrollDrumColumnProps, ScrollDrumGroup, type ScrollDrumGroupProps, type ScrollDrumProps, } from "./scroll-drum";
+export { Select, SelectContent, SelectContentPopper, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
+export { Separator } from "./separator";
+export { Skeleton, SkeletonFragment } from "./skeleton";
+export { Slider, type SliderProps, sliderVariants } from "./slider";
+export { StackingCard, StackingCardCheck, StackingCardContent, StackingCardDescription, StackingCardGroup, StackingCardHeader, StackingCardList, StackingCardListItem, StackingCardTitle, } from "./stacking-card";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+export { Textarea, type TextareaProps, textareaVariants } from "./textarea";
+export { type GlobalToastOptions, Toaster, type ToasterProps, toast, } from "./toast";
+export { ToggleButton, type ToggleButtonProps } from "./toggle-button";
+export { Alpha, Bravo, Charlie, Delta, Echo, Foxtrot, Heading, type HeadingProps, headingVariants, List, ListItem, type ListItemProps, ListItemTick, type ListProps, listVariants, Prose, Text, type TextProps, textVariants, } from "./typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/input.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @module Input
+ *
+ * Styled text input with support for icons, sizes, and clear button.
+ * Includes focus state management and dark mode support.
+ *
+ * @example
+ * // Basic input
+ * <Input placeholder="Enter your email" type="email" />
+ *
+ * @example
+ * // With icons
+ * <Input
+ *   leftIcon={<Search />}
+ *   rightIcon={<ClearInputButton onClick={clearValue} />}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // Small size
+ * <Input size="sm" placeholder="Compact input" />
+ *
+ * @example
+ * // With clear button
+ * const [value, setValue] = useState('');
+ *
+ * <Input
+ *   value={value}
+ *   onChange={(e) => setValue(e.target.value)}
+ *   rightIcon={
+ *     value && <ClearInputButton onClick={() => setValue('')} />
+ *   }
+ * />
+ */
+import { type VariantProps } from "class-variance-authority";
+import type { Ref } from "react";
+declare const inputVariants: (props?: ({
+    size?: "sm" | "default" | "auto" | null | undefined;
+    hasLeftIcon?: boolean | null | undefined;
+    hasRightIcon?: boolean | null | undefined;
+    type?: "search" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputPropsWithoutSize = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+type PublicInputVariantsProps = Omit<InputVariantsProps, "hasLeftIcon" | "hasRightIcon" | "type">;
+/**
+ * Props for the Input component.
+ * @property size - Input size: `"default"`, `"sm"`, or `"auto"`
+ * @property htmlSize - Native HTML size attribute for input width
+ * @property leftIcon - Icon element displayed on the left side
+ * @property rightIcon - Icon element displayed on the right side
+ */
+export interface InputProps extends InputPropsWithoutSize, PublicInputVariantsProps {
+    htmlSize?: number;
+    leftIcon?: React.ReactNode;
+    ref?: Ref<HTMLInputElement>;
+    rightIcon?: React.ReactNode;
+}
+declare const Input: ({ className, size, type, htmlSize, leftIcon, rightIcon, placeholder, ref, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+interface ClearInputButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * Clear/reset button designed for use as Input's rightIcon.
+ * Displays an X icon and handles focus states.
+ */
+declare const ClearInputButton: ({ className, ref, ...props }: ClearInputButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { ClearInputButton, Input, inputVariants };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAkBjC,QAAA,MAAM,aAAa;;;;;8EAgElB,CAAC;AAEF,KAAK,qBAAqB,GAAG,IAAI,CAC/B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP,CAAC;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAK7D,KAAK,wBAAwB,GAAG,IAAI,CAClC,kBAAkB,EAClB,aAAa,GAAG,cAAc,GAAG,MAAM,CACxC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UACf,SAAQ,qBAAqB,EAC3B,wBAAwB;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,GAAI,sFAUZ,UAAU,4CAwDZ,CAAC;AAEF,UAAU,qBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,GAAI,8BAIvB,qBAAqB,4CAcvB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/input.js

@@ -95,61 +95,65 @@ const Input = ({
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(inputWrapperVariants({ size })),
-      onBlur: () => {
-        setTimeout(() => {
-          setIsFocused(false);
-        }, 50);
-      },
-      children: [
-        !!leftIcon && /* @__PURE__ */ jsx(
-          SlotPrimitive.Slot,
-          {
-            className: cn(
-              "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
-              size === "sm" ? "left-3 size-3" : "left-4 size-4"
-            ),
-            children: leftIcon
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: cn(
-              inputVariants({
-                size,
-                hasLeftIcon: !!leftIcon,
-                hasRightIcon: !!rightIcon,
-                type: type === "search" ? "search" : void 0,
-                className
-              })
-            ),
-            onFocus: (e) => {
-              setIsFocused(true);
-              props.onFocus?.(e);
-            },
-            placeholder: isFocused ? " " : placeholder,
-            ref,
-            size: htmlSize,
-            type,
-            ...props
-          }
-        ),
-        !!rightIcon && /* @__PURE__ */ jsx(
-          SlotPrimitive.Slot,
-          {
-            className: cn(
-              "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
-              size === "sm" ? "right-3 size-3" : "right-4 size-4"
-            ),
-            children: rightIcon
-          }
-        )
-      ]
-    }
+  return (
+    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots
+    // biome-ignore lint/a11y/noStaticElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(inputWrapperVariants({ size })),
+        onBlur: () => {
+          setTimeout(() => {
+            setIsFocused(false);
+          }, 50);
+        },
+        children: [
+          !!leftIcon && /* @__PURE__ */ jsx(
+            SlotPrimitive.Slot,
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
+                size === "sm" ? "left-3 size-3" : "left-4 size-4"
+              ),
+              children: leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: cn(
+                inputVariants({
+                  size,
+                  hasLeftIcon: !!leftIcon,
+                  hasRightIcon: !!rightIcon,
+                  type: type === "search" ? "search" : void 0,
+                  className
+                })
+              ),
+              onFocus: (e) => {
+                setIsFocused(true);
+                props.onFocus?.(e);
+              },
+              placeholder: isFocused ? " " : placeholder,
+              ref,
+              size: htmlSize,
+              type,
+              ...props
+            }
+          ),
+          !!rightIcon && /* @__PURE__ */ jsx(
+            SlotPrimitive.Slot,
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
+                size === "sm" ? "right-3 size-3" : "right-4 size-4"
+              ),
+              children: rightIcon
+            }
+          )
+        ]
+      }
+    )
   );
 };
 const ClearInputButton = ({

package/dist/components/input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/input.tsx"],
-  "sourcesContent": ["/**\n * @module Input\n *\n * Styled text input with support for icons, sizes, and clear button.\n * Includes focus state management and dark mode support.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter your email\" type=\"email\" />\n *\n * @example\n * // With icons\n * <Input\n *   leftIcon={<Search />}\n *   rightIcon={<ClearInputButton onClick={clearValue} />}\n *   placeholder=\"Search...\"\n * />\n *\n * @example\n * // Small size\n * <Input size=\"sm\" placeholder=\"Compact input\" />\n *\n * @example\n * // With clear button\n * const [value, setValue] = useState('');\n *\n * <Input\n *   value={value}\n *   onChange={(e) => setValue(e.target.value)}\n *   rightIcon={\n *     value && <ClearInputButton onClick={() => setValue('')} />\n *   }\n * />\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst inputWrapperVariants = cva(\"relative flex w-full items-center\", {\n  variants: {\n    size: {\n      auto: \"h-auto w-auto\",\n      default: \"h-10\",\n      sm: \"h-7\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\nconst inputVariants = cva(\n  [\n    \"w-full touch-manipulation self-stretch shadow-none outline-none outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed\",\n    // text\n    \"font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60\",\n    // placeholder\n    \"placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200\",\n    // background\n    \"bg-white focus:bg-white enabled:hover:bg-white disabled:bg-white/60 dark:bg-black dark:disabled:bg-black/60 dark:focus:bg-black dark:enabled:hover:bg-black\",\n    // borders (light)\n    \"rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-brand-primary enabled:hover:border-gray-200 enabled:focus:hover:border-brand-primary disabled:border-gray-150/60\", // borders light\n    // borders (dark)\n    \"dark:border-gray-800 dark:disabled:border-gray-900 dark:focus:border-white dark:enabled:hover:border-gray-700 dark:enabled:focus:hover:border-white dark:invalid:border-red dark:invalid:hover:border-red\", // borders dark\n  ],\n  {\n    variants: {\n      size: {\n        default: \"px-4\",\n        sm: \"px-3\",\n        auto: \"px-4\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasRightIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      // Scoped to type=\"search\" only: the Keeper password manager extension\n      // misidentifies inputs that style ::-webkit-search-cancel-button as\n      // search fields and blocks paste, so non-search inputs must not match.\n      type: {\n        search: \"dark:[&::-webkit-search-cancel-button]:hidden\",\n      },\n    },\n    compoundVariants: [\n      {\n        hasLeftIcon: true,\n        size: \"default\",\n        class: \"pl-10\",\n      },\n      {\n        hasLeftIcon: true,\n        size: \"sm\",\n        class: \"pl-8\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"default\",\n        class: \"pr-10\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"sm\",\n        class: \"pr-8\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      hasLeftIcon: false,\n      hasRightIcon: false,\n    },\n  }\n);\n\ntype InputPropsWithoutSize = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n>;\n\ntype InputVariantsProps = VariantProps<typeof inputVariants>;\n\n// Omit internal-only variants from the public API. `type` is excluded so\n// consumers keep the full HTMLInputTypeAttribute union; CVA still picks up\n// the runtime value via the `type` argument passed in inputVariants().\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\" | \"type\"\n>;\n\n/**\n * Props for the Input component.\n * @property size - Input size: `\"default\"`, `\"sm\"`, or `\"auto\"`\n * @property htmlSize - Native HTML size attribute for input width\n * @property leftIcon - Icon element displayed on the left side\n * @property rightIcon - Icon element displayed on the right side\n */\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst Input = ({\n  className,\n  size,\n  type = \"text\",\n  htmlSize,\n  leftIcon,\n  rightIcon,\n  placeholder,\n  ref,\n  ...props\n}: InputProps) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={cn(inputWrapperVariants({ size }))}\n      onBlur={() => {\n        setTimeout(() => {\n          setIsFocused(false);\n        }, 50);\n      }}\n    >\n      {!!leftIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"left-3 size-3\" : \"left-4 size-4\"\n          )}\n        >\n          {leftIcon}\n        </SlotPrimitive.Slot>\n      )}\n      <input\n        className={cn(\n          inputVariants({\n            size,\n            hasLeftIcon: !!leftIcon,\n            hasRightIcon: !!rightIcon,\n            type: type === \"search\" ? \"search\" : undefined,\n            className,\n          })\n        )}\n        onFocus={(e) => {\n          setIsFocused(true);\n          props.onFocus?.(e);\n        }}\n        placeholder={isFocused ? \" \" : placeholder}\n        ref={ref}\n        size={htmlSize}\n        type={type}\n        {...props}\n      />\n      {!!rightIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"right-3 size-3\" : \"right-4 size-4\"\n          )}\n        >\n          {rightIcon}\n        </SlotPrimitive.Slot>\n      )}\n    </div>\n  );\n};\n\ninterface ClearInputButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Clear/reset button designed for use as Input's rightIcon.\n * Displays an X icon and handles focus states.\n */\nconst ClearInputButton = ({\n  className,\n  ref,\n  ...props\n}: ClearInputButtonProps) => (\n  <button\n    className={cn(\n      \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300\",\n      \"focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-none dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800\",\n      className\n    )}\n    ref={ref}\n    type=\"button\"\n    {...props}\n  >\n    <X className=\"absolute inset-0 size-full\" strokeWidth={3} />\n  </button>\n);\n\nexport { ClearInputButton, Input, inputVariants };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @module Input\n *\n * Styled text input with support for icons, sizes, and clear button.\n * Includes focus state management and dark mode support.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter your email\" type=\"email\" />\n *\n * @example\n * // With icons\n * <Input\n *   leftIcon={<Search />}\n *   rightIcon={<ClearInputButton onClick={clearValue} />}\n *   placeholder=\"Search...\"\n * />\n *\n * @example\n * // Small size\n * <Input size=\"sm\" placeholder=\"Compact input\" />\n *\n * @example\n * // With clear button\n * const [value, setValue] = useState('');\n *\n * <Input\n *   value={value}\n *   onChange={(e) => setValue(e.target.value)}\n *   rightIcon={\n *     value && <ClearInputButton onClick={() => setValue('')} />\n *   }\n * />\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst inputWrapperVariants = cva(\"relative flex w-full items-center\", {\n  variants: {\n    size: {\n      auto: \"h-auto w-auto\",\n      default: \"h-10\",\n      sm: \"h-7\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\nconst inputVariants = cva(\n  [\n    \"w-full touch-manipulation self-stretch shadow-none outline-none outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed\",\n    // text\n    \"font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60\",\n    // placeholder\n    \"placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200\",\n    // background\n    \"bg-white focus:bg-white enabled:hover:bg-white disabled:bg-white/60 dark:bg-black dark:disabled:bg-black/60 dark:focus:bg-black dark:enabled:hover:bg-black\",\n    // borders (light)\n    \"rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-brand-primary enabled:hover:border-gray-200 enabled:focus:hover:border-brand-primary disabled:border-gray-150/60\", // borders light\n    // borders (dark)\n    \"dark:border-gray-800 dark:disabled:border-gray-900 dark:focus:border-white dark:enabled:hover:border-gray-700 dark:enabled:focus:hover:border-white dark:invalid:border-red dark:invalid:hover:border-red\", // borders dark\n  ],\n  {\n    variants: {\n      size: {\n        default: \"px-4\",\n        sm: \"px-3\",\n        auto: \"px-4\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasRightIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      // Scoped to type=\"search\" only: the Keeper password manager extension\n      // misidentifies inputs that style ::-webkit-search-cancel-button as\n      // search fields and blocks paste, so non-search inputs must not match.\n      type: {\n        search: \"dark:[&::-webkit-search-cancel-button]:hidden\",\n      },\n    },\n    compoundVariants: [\n      {\n        hasLeftIcon: true,\n        size: \"default\",\n        class: \"pl-10\",\n      },\n      {\n        hasLeftIcon: true,\n        size: \"sm\",\n        class: \"pl-8\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"default\",\n        class: \"pr-10\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"sm\",\n        class: \"pr-8\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      hasLeftIcon: false,\n      hasRightIcon: false,\n    },\n  }\n);\n\ntype InputPropsWithoutSize = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n>;\n\ntype InputVariantsProps = VariantProps<typeof inputVariants>;\n\n// Omit internal-only variants from the public API. `type` is excluded so\n// consumers keep the full HTMLInputTypeAttribute union; CVA still picks up\n// the runtime value via the `type` argument passed in inputVariants().\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\" | \"type\"\n>;\n\n/**\n * Props for the Input component.\n * @property size - Input size: `\"default\"`, `\"sm\"`, or `\"auto\"`\n * @property htmlSize - Native HTML size attribute for input width\n * @property leftIcon - Icon element displayed on the left side\n * @property rightIcon - Icon element displayed on the right side\n */\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n  rightIcon?: React.ReactNode;\n}\n\nconst Input = ({\n  className,\n  size,\n  type = \"text\",\n  htmlSize,\n  leftIcon,\n  rightIcon,\n  placeholder,\n  ref,\n  ...props\n}: InputProps) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots\n    // biome-ignore lint/a11y/noStaticElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots\n    <div\n      className={cn(inputWrapperVariants({ size }))}\n      onBlur={() => {\n        setTimeout(() => {\n          setIsFocused(false);\n        }, 50);\n      }}\n    >\n      {!!leftIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"left-3 size-3\" : \"left-4 size-4\"\n          )}\n        >\n          {leftIcon}\n        </SlotPrimitive.Slot>\n      )}\n      <input\n        className={cn(\n          inputVariants({\n            size,\n            hasLeftIcon: !!leftIcon,\n            hasRightIcon: !!rightIcon,\n            type: type === \"search\" ? \"search\" : undefined,\n            className,\n          })\n        )}\n        onFocus={(e) => {\n          setIsFocused(true);\n          props.onFocus?.(e);\n        }}\n        placeholder={isFocused ? \" \" : placeholder}\n        ref={ref}\n        size={htmlSize}\n        type={type}\n        {...props}\n      />\n      {!!rightIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"right-3 size-3\" : \"right-4 size-4\"\n          )}\n        >\n          {rightIcon}\n        </SlotPrimitive.Slot>\n      )}\n    </div>\n  );\n};\n\ninterface ClearInputButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Clear/reset button designed for use as Input's rightIcon.\n * Displays an X icon and handles focus states.\n */\nconst ClearInputButton = ({\n  className,\n  ref,\n  ...props\n}: ClearInputButtonProps) => (\n  <button\n    className={cn(\n      \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300\",\n      \"focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-none dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800\",\n      className\n    )}\n    ref={ref}\n    type=\"button\"\n    {...props}\n  >\n    <X className=\"absolute inset-0 size-full\" strokeWidth={3} />\n  </button>\n);\n\nexport { ClearInputButton, Input, inputVariants };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/label.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @module Label
+ *
+ * Accessible label for form controls. Built on Radix UI Label primitive.
+ * Automatically associates with form elements via `htmlFor` prop.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/label Shadcn Label}
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/label Radix Label}
+ *
+ * @example
+ * // Basic label with input
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" />
+ *
+ * @example
+ * // With checkbox
+ * <div className="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">Accept terms and conditions</Label>
+ * </div>
+ */
+import { type VariantProps } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
+import type { ComponentPropsWithoutRef, ElementRef, Ref } from "react";
+/** CVA variants for label styling */
+declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+    ref?: Ref<ElementRef<typeof LabelPrimitive.Root>>;
+}
+/**
+ * Form label with accessible peer state handling.
+ * Dims when associated form control is disabled.
+ */
+declare const Label: ({ className, ref, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvE,qCAAqC;AACrC,QAAA,MAAM,aAAa,oFAElB,CAAC;AAEF,UAAU,UACR,SAAQ,wBAAwB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;CACnD;AAED;;;GAGG;AACH,QAAA,MAAM,KAAK,GAAI,8BAA8B,UAAU,4CAMtD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/popover.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @module Popover
+ *
+ * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.
+ * Supports controlled/uncontrolled modes, custom positioning, and focus management.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}
+ *
+ * @example
+ * // Basic popover
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button>Open Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Popover content here</p>
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * @example
+ * // Controlled popover with custom positioning
+ * const [open, setOpen] = useState(false);
+ *
+ * <Popover open={open} onOpenChange={setOpen}>
+ *   <PopoverTrigger>Settings</PopoverTrigger>
+ *   <PopoverContent align="start" sideOffset={8}>
+ *     <SettingsForm onSave={() => setOpen(false)} />
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * @example
+ * // With custom anchor point
+ * <Popover>
+ *   <PopoverAnchor asChild>
+ *     <div>Anchor element (popover positions relative to this)</div>
+ *   </PopoverAnchor>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverContent>Content</PopoverContent>
+ * </Popover>
+ */
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+import type { Ref } from "react";
+/** Root component that manages popover open/closed state. */
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Alternative anchor point for popover positioning (separate from trigger). */
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover content container. Animated on open/close.
+ * @param align - Horizontal alignment: `"start"`, `"center"` (default), or `"end"`
+ * @param sideOffset - Distance from anchor in pixels (default: 4)
+ * @param forceMount - Keep mounted in DOM even when closed
+ */
+declare const PopoverContent: ({ className, forceMount, align, sideOffset, ref, ...props }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,6DAA6D;AAC7D,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,4FAA4F;AAC5F,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,gFAAgF;AAChF,QAAA,MAAM,aAAa,4GAA0B,CAAC;AAE9C;;;;;GAKG;AACH,QAAA,MAAM,cAAc,GAAI,6DAOrB,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACnE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;CAC9D,4CAaA,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/price-tag.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @module PriceTag
+ *
+ * Displays pricing information with currency symbol and frequency.
+ * Automatically formats decimal values and includes accessible labeling.
+ *
+ * @example
+ * // Basic price display
+ * <PriceTag currencySymbol="$" price="9.99" frequency="month" />
+ *
+ * @example
+ * // Annual pricing
+ * <PriceTag currencySymbol="£" price="99.00" frequency="year" />
+ */
+import type * as React from "react";
+import type { TextProps } from "./typography/text";
+/**
+ * Props for PriceTag component.
+ * @property currencySymbol - Currency symbol (e.g., "$", "£", "€")
+ * @property price - Price value as string (e.g., "9.99")
+ * @property frequency - Billing frequency (e.g., "month", "year")
+ */
+export interface PriceTagProps extends TextProps {
+    currencySymbol: string;
+    frequency: string;
+    price: string;
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+declare function PriceTag({ currencySymbol, price, frequency, ref, ...props }: PriceTagProps): import("react/jsx-runtime").JSX.Element;
+export { PriceTag };
+//# sourceMappingURL=price-tag.d.ts.map

package/dist/components/price-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-tag.d.ts","sourceRoot":"","sources":["../../src/components/price-tag.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACvC;AAED,iBAAS,QAAQ,CAAC,EAChB,cAAc,EACd,KAAK,EACL,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,2CA0Bf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/price-tag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/price-tag.tsx"],
-  "sourcesContent": ["/**\n * @module PriceTag\n *\n * Displays pricing information with currency symbol and frequency.\n * Automatically formats decimal values and includes accessible labeling.\n *\n * @example\n * // Basic price display\n * <PriceTag currencySymbol=\"$\" price=\"9.99\" frequency=\"month\" />\n *\n * @example\n * // Annual pricing\n * <PriceTag currencySymbol=\"\u00A3\" price=\"99.00\" frequency=\"year\" />\n */\nimport type * as React from \"react\";\nimport type { TextProps } from \"./typography/text\";\nimport { Text } from \"./typography/text\";\n\n/**\n * Props for PriceTag component.\n * @property currencySymbol - Currency symbol (e.g., \"$\", \"\u00A3\", \"\u20AC\")\n * @property price - Price value as string (e.g., \"9.99\")\n * @property frequency - Billing frequency (e.g., \"month\", \"year\")\n */\nexport interface PriceTagProps extends TextProps {\n  currencySymbol: string;\n  price: string;\n  frequency: string;\n  ref?: React.Ref<HTMLParagraphElement>;\n}\n\nfunction PriceTag({\n  currencySymbol,\n  price,\n  frequency,\n  ref,\n  ...props\n}: PriceTagProps) {\n  // Split price into main unit and cents/pence\n  const [mainUnit, cents = \"00\"] = price.split(\".\", 2);\n\n  // Create accessible label for screen readers\n  const accessiblePrice = `${currencySymbol}${price} per ${frequency}`;\n\n  return (\n    <Text className=\"font-sans font-normal leading-5\" ref={ref} {...props}>\n      {/* Screen reader only text */}\n      <span className=\"sr-only\">{accessiblePrice}</span>\n\n      {/* Visual presentation hidden from screen readers */}\n      <span aria-hidden=\"true\">\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          {currencySymbol}\n        </span>\n        <span className=\"font-heading font-semibold text-base text-gray-950 dark:text-white\">\n          {mainUnit}.{cents}\n        </span>\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          /{frequency}\n        </span>\n      </span>\n    </Text>\n  );\n}\n\nexport { PriceTag };\n"],
+  "sourcesContent": ["/**\n * @module PriceTag\n *\n * Displays pricing information with currency symbol and frequency.\n * Automatically formats decimal values and includes accessible labeling.\n *\n * @example\n * // Basic price display\n * <PriceTag currencySymbol=\"$\" price=\"9.99\" frequency=\"month\" />\n *\n * @example\n * // Annual pricing\n * <PriceTag currencySymbol=\"\u00A3\" price=\"99.00\" frequency=\"year\" />\n */\nimport type * as React from \"react\";\nimport type { TextProps } from \"./typography/text\";\nimport { Text } from \"./typography/text\";\n\n/**\n * Props for PriceTag component.\n * @property currencySymbol - Currency symbol (e.g., \"$\", \"\u00A3\", \"\u20AC\")\n * @property price - Price value as string (e.g., \"9.99\")\n * @property frequency - Billing frequency (e.g., \"month\", \"year\")\n */\nexport interface PriceTagProps extends TextProps {\n  currencySymbol: string;\n  frequency: string;\n  price: string;\n  ref?: React.Ref<HTMLParagraphElement>;\n}\n\nfunction PriceTag({\n  currencySymbol,\n  price,\n  frequency,\n  ref,\n  ...props\n}: PriceTagProps) {\n  // Split price into main unit and cents/pence\n  const [mainUnit, cents = \"00\"] = price.split(\".\", 2);\n\n  // Create accessible label for screen readers\n  const accessiblePrice = `${currencySymbol}${price} per ${frequency}`;\n\n  return (\n    <Text className=\"font-sans font-normal leading-5\" ref={ref} {...props}>\n      {/* Screen reader only text */}\n      <span className=\"sr-only\">{accessiblePrice}</span>\n\n      {/* Visual presentation hidden from screen readers */}\n      <span aria-hidden=\"true\">\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          {currencySymbol}\n        </span>\n        <span className=\"font-heading font-semibold text-base text-gray-950 dark:text-white\">\n          {mainUnit}.{cents}\n        </span>\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          /{frequency}\n        </span>\n      </span>\n    </Text>\n  );\n}\n\nexport { PriceTag };\n"],
   "mappings": "AA+CM,cAOE,YAPF;AA/BN,SAAS,YAAY;AAerB,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAEhB,QAAM,CAAC,UAAU,QAAQ,IAAI,IAAI,MAAM,MAAM,KAAK,CAAC;AAGnD,QAAM,kBAAkB,GAAG,cAAc,GAAG,KAAK,QAAQ,SAAS;AAElE,SACE,qBAAC,QAAK,WAAU,mCAAkC,KAAW,GAAG,OAE9D;AAAA,wBAAC,UAAK,WAAU,WAAW,2BAAgB;AAAA,IAG3C,qBAAC,UAAK,eAAY,QAChB;AAAA,0BAAC,UAAK,WAAU,4CACb,0BACH;AAAA,MACA,qBAAC,UAAK,WAAU,sEACb;AAAA;AAAA,QAAS;AAAA,QAAE;AAAA,SACd;AAAA,MACA,qBAAC,UAAK,WAAU,4CAA2C;AAAA;AAAA,QACvD;AAAA,SACJ;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/components/radio-group.d.ts

@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import type { Ref } from "react";
+import * as React from "react";
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+    ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
+}
+/** Container for radio items. Manages selection state. */
+declare const RadioGroup: ({ className, ref, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+    ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+}
+/** Individual radio button with animated selection indicator. */
+declare const RadioGroupItem: ({ className, ref, ...props }: RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.d.ts.map