singularity-components 0.1.136 → 0.1.139

package/dist/components/index.d.ts

@@ -1,16 +1,14 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './primitives/accordion/accordion.js';
-export { Alert, AlertDescription, AlertTitle, alertVariants } from './primitives/alert/alert.js';
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants } from './primitives/alert/alert.js';
 export { Badge, badgeVariants } from './primitives/badge/badge.js';
 export { Badges, BadgesProps } from './primitives/badge/badges.js';
 export { Button, buttonVariants, buttonVariantsProps } from './primitives/button/button.js';
 export { Icon, iconVariants, iconVariantsProps } from './primitives/icon/icon.js';
-export { Input } from './primitives/input/input.js';
 export { Layout, LayoutProps, layoutVariants, layoutVariantsProps } from './primitives/layout/layout.js';
 export { Separator } from './primitives/separator/separator.js';
 export { Skeleton } from './primitives/skeleton/skeleton.js';
-export { Spinner, SpinnerProps } from './primitives/spinner/spinner.js';
+export { Spinner } from './primitives/spinner/spinner.js';
 export { Stack, StackProps, stackVariants } from './primitives/stack/stack.js';
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './primitives/table/table.js';
 export { TextDiv } from './primitives/text/text-div.js';
 export { TextHeading, TextHeadingProps, textHeadingVariants, textHeadingVariantsProps } from './primitives/text/text-heading.js';
 export { TextParagraph } from './primitives/text/text-paragraph.js';
@@ -25,11 +23,13 @@ export { BlogPost } from './units/cards/blog-card.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle } from './units/cards/card.js';
 export { Cards, CardsProps, getGridColsClass } from './units/cards/cards.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@radix-ui/react-accordion';
+import '@base-ui/react/accordion';
 import 'class-variance-authority/types';
+import 'react';
 import 'class-variance-authority';
+import '@base-ui/react/use-render';
+import '@base-ui/react/button';
 import 'lucide-react';
-import '@radix-ui/react-separator';
+import '@base-ui/react/separator';
 import './primitives/text/internal/text-element.js';
 import '../lib/types.js';

package/dist/components/primitives/accordion/accordion.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
 
-declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function Accordion({ className, ...props }: Accordion$1.Root.Props): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion$1.Item.Props): react_jsx_runtime.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: Accordion$1.Panel.Props): react_jsx_runtime.JSX.Element;
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/primitives/accordion/accordion.js

@@ -1,23 +1,27 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "lucide-react";
-import { cn } from "../../../utils";
-function Accordion({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "@/utils";
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      "data-slot": "accordion",
+      className: cn(
+        "sg:overflow-hidden sg:rounded-2xl sg:border sg:flex sg:w-full sg:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
 }
-function AccordionItem({
-  className,
-  ...props
-}) {
+function AccordionItem({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("sg:border-b sg:last:border-b-0", className),
+      className: cn("sg:data-open:bg-muted/50 sg:not-last:border-b", className),
       ...props
     }
   );
@@ -32,13 +36,26 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:flex sg:flex-1 sg:items-start sg:justify-between sg:gap-4 sg:rounded-md sg:py-4 sg:text-left sg:text-sm sg:font-medium sg:transition-all sg:outline-none sg:hover:underline sg:focus-visible:ring-[3px] sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&[data-state=open]>svg]:rotate-180",
+        "sg:**:data-[slot=accordion-trigger-icon]:text-muted-foreground sg:gap-6 sg:p-4 sg:text-start sg:text-sm sg:font-medium sg:hover:underline sg:**:data-[slot=accordion-trigger-icon]:ms-auto sg:**:data-[slot=accordion-trigger-icon]:size-4 sg:group/accordion-trigger sg:relative sg:flex sg:flex-1 sg:items-start sg:justify-between sg:border sg:border-transparent sg:transition-all sg:outline-none sg:disabled:pointer-events-none sg:disabled:opacity-50",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "sg:text-muted-foreground sg:pointer-events-none sg:size-4 sg:shrink-0 sg:translate-y-0.5 sg:transition-transform sg:duration-200" })
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            "data-slot": "accordion-trigger-icon",
+            className: "sg:pointer-events-none sg:shrink-0 sg:group-aria-expanded/accordion-trigger:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronUpIcon,
+          {
+            "data-slot": "accordion-trigger-icon",
+            className: "sg:pointer-events-none sg:hidden sg:shrink-0 sg:group-aria-expanded/accordion-trigger:inline"
+          }
+        )
       ]
     }
   ) });
@@ -49,12 +66,21 @@ function AccordionContent({
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    AccordionPrimitive.Content,
+    AccordionPrimitive.Panel,
     {
       "data-slot": "accordion-content",
-      className: "sg:data-[state=closed]:animate-accordion-up sg:data-[state=open]:animate-accordion-down sg:overflow-hidden sg:text-sm",
+      className: "sg:data-open:animate-accordion-down sg:data-closed:animate-accordion-up sg:px-4 sg:text-sm sg:overflow-hidden",
       ...props,
-      children: /* @__PURE__ */ jsx("div", { className: cn("sg:pt-0 sg:pb-4", className), children })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "sg:pt-0 sg:pb-4 sg:[&_a]:hover:text-foreground sg:h-(--accordion-panel-height) sg:data-ending-style:h-0 sg:data-starting-style:h-0 sg:[&_a]:underline sg:[&_a]:underline-offset-3 sg:[&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
     }
   );
 }

package/dist/components/primitives/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { cn } from \"../../../utils\";\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"sg:border-b sg:last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"sg:flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:flex sg:flex-1 sg:items-start sg:justify-between sg:gap-4 sg:rounded-md sg:py-4 sg:text-left sg:text-sm sg:font-medium sg:transition-all sg:outline-none sg:hover:underline sg:focus-visible:ring-[3px] sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"sg:text-muted-foreground sg:pointer-events-none sg:size-4 sg:shrink-0 sg:translate-y-0.5 sg:transition-transform sg:duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"sg:data-[state=closed]:animate-accordion-up sg:data-[state=open]:animate-accordion-down sg:overflow-hidden sg:text-sm\"\n      {...props}\n    >\n      <div className={cn(\"sg:pt-0 sg:pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"mappings":";AASS,cAuBH,YAvBG;AART,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,uBAAuB;AAChC,SAAS,UAAU;AAEnB,SAAS,UAAU;AAAA,EACjB,GAAG;AACL,GAAyD;AACvD,SAAO,oBAAC,mBAAmB,MAAnB,EAAwB,aAAU,aAAa,GAAG,OAAO;AACnE;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,kCAAkC,SAAS;AAAA,MACxD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4D;AAC1D,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,WACnC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,mBAAgB,WAAU,oIAAmI;AAAA;AAAA;AAAA,EAChK,GACF;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4D;AAC1D,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,GAAI,UAAS;AAAA;AAAA,EAC9D;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\r\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\r\nimport { cn } from \"@/utils\";\r\n\r\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\r\n  return (\r\n    <AccordionPrimitive.Root\r\n      data-slot=\"accordion\"\r\n      className={cn(\r\n        \"sg:overflow-hidden sg:rounded-2xl sg:border sg:flex sg:w-full sg:flex-col\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\r\n  return (\r\n    <AccordionPrimitive.Item\r\n      data-slot=\"accordion-item\"\r\n      className={cn(\"sg:data-open:bg-muted/50 sg:not-last:border-b\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AccordionTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: AccordionPrimitive.Trigger.Props) {\r\n  return (\r\n    <AccordionPrimitive.Header className=\"sg:flex\">\r\n      <AccordionPrimitive.Trigger\r\n        data-slot=\"accordion-trigger\"\r\n        className={cn(\r\n          \"sg:**:data-[slot=accordion-trigger-icon]:text-muted-foreground sg:gap-6 sg:p-4 sg:text-start sg:text-sm sg:font-medium sg:hover:underline sg:**:data-[slot=accordion-trigger-icon]:ms-auto sg:**:data-[slot=accordion-trigger-icon]:size-4 sg:group/accordion-trigger sg:relative sg:flex sg:flex-1 sg:items-start sg:justify-between sg:border sg:border-transparent sg:transition-all sg:outline-none sg:disabled:pointer-events-none sg:disabled:opacity-50\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n        <ChevronDownIcon\r\n          data-slot=\"accordion-trigger-icon\"\r\n          className=\"sg:pointer-events-none sg:shrink-0 sg:group-aria-expanded/accordion-trigger:hidden\"\r\n        />\r\n        <ChevronUpIcon\r\n          data-slot=\"accordion-trigger-icon\"\r\n          className=\"sg:pointer-events-none sg:hidden sg:shrink-0 sg:group-aria-expanded/accordion-trigger:inline\"\r\n        />\r\n      </AccordionPrimitive.Trigger>\r\n    </AccordionPrimitive.Header>\r\n  );\r\n}\r\n\r\nfunction AccordionContent({\r\n  className,\r\n  children,\r\n  ...props\r\n}: AccordionPrimitive.Panel.Props) {\r\n  return (\r\n    <AccordionPrimitive.Panel\r\n      data-slot=\"accordion-content\"\r\n      className=\"sg:data-open:animate-accordion-down sg:data-closed:animate-accordion-up sg:px-4 sg:text-sm sg:overflow-hidden\"\r\n      {...props}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \"sg:pt-0 sg:pb-4 sg:[&_a]:hover:text-foreground sg:h-(--accordion-panel-height) sg:data-ending-style:h-0 sg:data-starting-style:h-0 sg:[&_a]:underline sg:[&_a]:underline-offset-3 sg:[&_p:not(:last-child)]:mb-4\",\r\n          className,\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </AccordionPrimitive.Panel>\r\n  );\r\n}\r\n\r\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\r\n"],"mappings":";AAQI,cA4BE,YA5BF;AANJ,SAAS,aAAa,0BAA0B;AAChD,SAAS,iBAAiB,qBAAqB;AAC/C,SAAS,UAAU;AAEnB,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAkC;AACzE,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC7E,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iDAAiD,SAAS;AAAA,MACvE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,WACnC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/primitives/accordion/accordion.stories.d.ts

@@ -1,8 +1,7 @@
 import { Accordion } from './accordion.js';
 import { StoryObj } from '@storybook/react-vite';
 import 'react/jsx-runtime';
-import 'react';
-import '@radix-ui/react-accordion';
+import '@base-ui/react/accordion';
 
 declare const meta: {
     component: typeof Accordion;

package/dist/components/primitives/accordion/accordion.stories.js

@@ -12,10 +12,9 @@ const meta = {
 var accordion_stories_default = meta;
 const primary = {
   args: {
-    type: "single",
-    collapsible: true,
+    multiple: false,
     children: [
-      /* @__PURE__ */ jsxs(Accordion, { type: "single", collapsible: true, className: "w-full", children: [
+      /* @__PURE__ */ jsxs(Accordion, { multiple: false, className: "w-full", children: [
         /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", children: [
           /* @__PURE__ */ jsx(AccordionTrigger, { children: "Is it accessible?" }),
           /* @__PURE__ */ jsx(AccordionContent, { children: "Yes. It adheres to the WAI-ARIA design pattern." })
@@ -34,9 +33,9 @@ const primary = {
 };
 const multiple = {
   args: {
-    type: "multiple",
+    multiple: true,
     children: [
-      /* @__PURE__ */ jsxs(Accordion, { type: "multiple", className: "w-full", children: [
+      /* @__PURE__ */ jsxs(Accordion, { multiple: true, className: "w-full", children: [
         /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", children: [
           /* @__PURE__ */ jsx(AccordionTrigger, { children: "Is it accessible?" }),
           /* @__PURE__ */ jsx(AccordionContent, { children: "Yes. It adheres to the WAI-ARIA design pattern." })

package/dist/components/primitives/accordion/accordion.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/accordion/accordion.stories.tsx"],"sourcesContent":["import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"./accordion\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nconst meta = {\n  component: Accordion,\n  title: \"Accordion\",\n} satisfies Meta<typeof Accordion>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const primary: Story = {\n  args: {\n    type: \"single\",\n    collapsible: true,\n    children: [\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n        <AccordionItem value=\"item-1\">\n          <AccordionTrigger>Is it accessible?</AccordionTrigger>\n          <AccordionContent>\n            Yes. It adheres to the WAI-ARIA design pattern.\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem value=\"item-2\">\n          <AccordionTrigger>Is it styled?</AccordionTrigger>\n          <AccordionContent>\n            Yes. It comes with default styles that matches the other\n            components&apos; aesthetic.\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem value=\"item-3\">\n          <AccordionTrigger>Is it animated?</AccordionTrigger>\n          <AccordionContent>\n            Yes. It's animated by default, but you can disable it if you prefer.\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>,\n    ],\n  },\n};\n\nexport const multiple: Story = {\n  args: {\n    type: \"multiple\",\n    children: [\n      <Accordion type=\"multiple\" className=\"w-full\">\n        <AccordionItem value=\"item-1\">\n          <AccordionTrigger>Is it accessible?</AccordionTrigger>\n          <AccordionContent>\n            Yes. It adheres to the WAI-ARIA design pattern.\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem value=\"item-2\">\n          <AccordionTrigger>Is it styled?</AccordionTrigger>\n          <AccordionContent>\n            Yes. It comes with default styles that matches the other\n            components&apos; aesthetic.\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem value=\"item-3\">\n          <AccordionTrigger>Is it animated?</AccordionTrigger>\n          <AccordionContent>\n            Yes. It's animated by default, but you can disable it if you prefer.\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>,\n    ],\n  },\n};\n"],"mappings":"AAsBQ,SACE,KADF;AAtBR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACT;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,MACR,qBAAC,aAAU,MAAK,UAAS,aAAW,MAAC,WAAU,UAC7C;AAAA,6BAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,+BAAiB;AAAA,UACnC,oBAAC,oBAAiB,6DAElB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,2BAAa;AAAA,UAC/B,oBAAC,oBAAiB,6FAGlB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,6BAAe;AAAA,UACjC,oBAAC,oBAAiB,kFAElB;AAAA,WACF;AAAA,SACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,MACR,qBAAC,aAAU,MAAK,YAAW,WAAU,UACnC;AAAA,6BAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,+BAAiB;AAAA,UACnC,oBAAC,oBAAiB,6DAElB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,2BAAa;AAAA,UAC/B,oBAAC,oBAAiB,6FAGlB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,6BAAe;AAAA,UACjC,oBAAC,oBAAiB,kFAElB;AAAA,WACF;AAAA,SACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/accordion/accordion.stories.tsx"],"sourcesContent":["import {\r\n  Accordion,\r\n  AccordionContent,\r\n  AccordionItem,\r\n  AccordionTrigger,\r\n} from \"./accordion\";\r\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\r\n\r\nconst meta = {\r\n  component: Accordion,\r\n  title: \"Accordion\",\r\n} satisfies Meta<typeof Accordion>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const primary: Story = {\r\n  args: {\r\n    multiple: false,\r\n    children: [\r\n      <Accordion multiple={false} className=\"w-full\">\r\n        <AccordionItem value=\"item-1\">\r\n          <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n          <AccordionContent>\r\n            Yes. It adheres to the WAI-ARIA design pattern.\r\n          </AccordionContent>\r\n        </AccordionItem>\r\n        <AccordionItem value=\"item-2\">\r\n          <AccordionTrigger>Is it styled?</AccordionTrigger>\r\n          <AccordionContent>\r\n            Yes. It comes with default styles that matches the other\r\n            components&apos; aesthetic.\r\n          </AccordionContent>\r\n        </AccordionItem>\r\n        <AccordionItem value=\"item-3\">\r\n          <AccordionTrigger>Is it animated?</AccordionTrigger>\r\n          <AccordionContent>\r\n            Yes. It's animated by default, but you can disable it if you prefer.\r\n          </AccordionContent>\r\n        </AccordionItem>\r\n      </Accordion>,\r\n    ],\r\n  },\r\n};\r\n\r\nexport const multiple: Story = {\r\n  args: {\r\n    multiple: true,\r\n    children: [\r\n      <Accordion multiple className=\"w-full\">\r\n        <AccordionItem value=\"item-1\">\r\n          <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n          <AccordionContent>\r\n            Yes. It adheres to the WAI-ARIA design pattern.\r\n          </AccordionContent>\r\n        </AccordionItem>\r\n        <AccordionItem value=\"item-2\">\r\n          <AccordionTrigger>Is it styled?</AccordionTrigger>\r\n          <AccordionContent>\r\n            Yes. It comes with default styles that matches the other\r\n            components&apos; aesthetic.\r\n          </AccordionContent>\r\n        </AccordionItem>\r\n        <AccordionItem value=\"item-3\">\r\n          <AccordionTrigger>Is it animated?</AccordionTrigger>\r\n          <AccordionContent>\r\n            Yes. It's animated by default, but you can disable it if you prefer.\r\n          </AccordionContent>\r\n        </AccordionItem>\r\n      </Accordion>,\r\n    ],\r\n  },\r\n};\r\n"],"mappings":"AAqBQ,SACE,KADF;AArBR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACT;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,MACR,qBAAC,aAAU,UAAU,OAAO,WAAU,UACpC;AAAA,6BAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,+BAAiB;AAAA,UACnC,oBAAC,oBAAiB,6DAElB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,2BAAa;AAAA,UAC/B,oBAAC,oBAAiB,6FAGlB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,6BAAe;AAAA,UACjC,oBAAC,oBAAiB,kFAElB;AAAA,WACF;AAAA,SACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,UAAU;AAAA,MACR,qBAAC,aAAU,UAAQ,MAAC,WAAU,UAC5B;AAAA,6BAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,+BAAiB;AAAA,UACnC,oBAAC,oBAAiB,6DAElB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,2BAAa;AAAA,UAC/B,oBAAC,oBAAiB,6FAGlB;AAAA,WACF;AAAA,QACA,qBAAC,iBAAc,OAAM,UACnB;AAAA,8BAAC,oBAAiB,6BAAe;AAAA,UACjC,oBAAC,oBAAiB,kFAElB;AAAA,WACF;AAAA,SACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/components/primitives/alert/alert.d.ts

@@ -15,5 +15,6 @@ declare const alertVariantsProps: (props?: ({
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariantsProps>): react_jsx_runtime.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, AlertTitle, alertVariants };
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

package/dist/components/primitives/alert/alert.js

@@ -1,15 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../../utils";
+import { cn } from "@/utils";
 const alertVariants = {
   variant: {
     default: "sg:bg-card sg:text-card-foreground",
-    destructive: "sg:text-destructive sg:bg-card sg:[&>svg]:text-current sg:*:data-[slot=alert-description]:text-destructive/90"
+    destructive: "sg:text-destructive sg:bg-card sg:*:data-[slot=alert-description]:text-destructive/90 sg:*:[svg]:text-current"
   }
 };
 const alertVariantsProps = cva(
-  "sg:relative sg:w-full sg:rounded-lg sg:border sg:px-4 sg:py-3 sg:text-sm sg:grid sg:has-[>svg]:grid-cols-[calc(var(--sg-spacing)*4)_1fr] sg:grid-cols-[0_1fr] sg:has-[>svg]:gap-x-3 sg:gap-y-0.5 sg:items-start sg:[&>svg]:size-4 sg:[&>svg]:translate-y-0.5 sg:[&>svg]:text-current",
+  "sg:grid sg:gap-0.5 sg:rounded-lg sg:border sg:px-4 sg:py-3 sg:text-start sg:text-sm sg:has-data-[slot=alert-action]:relative sg:has-data-[slot=alert-action]:pe-18 sg:has-[>svg]:grid-cols-[auto_1fr] sg:has-[>svg]:gap-x-2.5 sg:*:[svg]:row-span-2 sg:*:[svg]:translate-y-0.5 sg:*:[svg]:text-current sg:*:[svg:not([class*=size-])]:size-4 sg:w-full sg:relative sg:group/alert",
   {
     variants: alertVariants,
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }) {
     {
       "data-slot": "alert-title",
       className: cn(
-        "sg:col-start-2 sg:line-clamp-1 sg:min-h-4 sg:font-medium sg:tracking-tight",
+        "sg:font-medium sg:group-has-[>svg]/alert:col-start-2 sg:[&_a]:hover:text-foreground sg:[&_a]:underline sg:[&_a]:underline-offset-3",
         className
       ),
       ...props
@@ -54,15 +54,26 @@ function AlertDescription({
     {
       "data-slot": "alert-description",
       className: cn(
-        "sg:text-muted-foreground sg:col-start-2 sg:grid sg:justify-items-start sg:gap-1 sg:text-sm sg:[&_p]:leading-relaxed",
+        "sg:text-muted-foreground sg:text-sm sg:text-balance sg:md:text-pretty sg:[&_p:not(:last-child)]:mb-4 sg:[&_a]:hover:text-foreground sg:[&_a]:underline sg:[&_a]:underline-offset-3",
         className
       ),
       ...props
     }
   );
 }
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("sg:absolute sg:top-2.5 sg:end-3", className),
+      ...props
+    }
+  );
+}
 export {
   Alert,
+  AlertAction,
   AlertDescription,
   AlertTitle,
   alertVariants

package/dist/components/primitives/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/alert/alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\n\nconst alertVariants = {\n  variant: {\n    default: \"sg:bg-card sg:text-card-foreground\",\n    destructive:\n      \"sg:text-destructive sg:bg-card sg:[&>svg]:text-current sg:*:data-[slot=alert-description]:text-destructive/90\",\n  },\n};\n\nconst alertVariantsProps = cva(\n  \"sg:relative sg:w-full sg:rounded-lg sg:border sg:px-4 sg:py-3 sg:text-sm sg:grid sg:has-[>svg]:grid-cols-[calc(var(--sg-spacing)*4)_1fr] sg:grid-cols-[0_1fr] sg:has-[>svg]:gap-x-3 sg:gap-y-0.5 sg:items-start sg:[&>svg]:size-4 sg:[&>svg]:translate-y-0.5 sg:[&>svg]:text-current\",\n  {\n    variants: alertVariants,\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariantsProps>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariantsProps({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"sg:col-start-2 sg:line-clamp-1 sg:min-h-4 sg:font-medium sg:tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"sg:text-muted-foreground sg:col-start-2 sg:grid sg:justify-items-start sg:gap-1 sg:text-sm sg:[&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n"],"mappings":"AA4BI;AA5BJ,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,aACE;AAAA,EACJ;AACF;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0E;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,mBAAmB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/alert/alert.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"@/utils\";\r\n\r\nconst alertVariants = {\r\n  variant: {\r\n    default: \"sg:bg-card sg:text-card-foreground\",\r\n    destructive:\r\n      \"sg:text-destructive sg:bg-card sg:*:data-[slot=alert-description]:text-destructive/90 sg:*:[svg]:text-current\",\r\n  },\r\n};\r\n\r\nconst alertVariantsProps = cva(\r\n  \"sg:grid sg:gap-0.5 sg:rounded-lg sg:border sg:px-4 sg:py-3 sg:text-start sg:text-sm sg:has-data-[slot=alert-action]:relative sg:has-data-[slot=alert-action]:pe-18 sg:has-[>svg]:grid-cols-[auto_1fr] sg:has-[>svg]:gap-x-2.5 sg:*:[svg]:row-span-2 sg:*:[svg]:translate-y-0.5 sg:*:[svg]:text-current sg:*:[svg:not([class*=size-])]:size-4 sg:w-full sg:relative sg:group/alert\",\r\n  {\r\n    variants: alertVariants,\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction Alert({\r\n  className,\r\n  variant,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariantsProps>) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert\"\r\n      role=\"alert\"\r\n      className={cn(alertVariantsProps({ variant }), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-title\"\r\n      className={cn(\r\n        \"sg:font-medium sg:group-has-[>svg]/alert:col-start-2 sg:[&_a]:hover:text-foreground sg:[&_a]:underline sg:[&_a]:underline-offset-3\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertDescription({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-description\"\r\n      className={cn(\r\n        \"sg:text-muted-foreground sg:text-sm sg:text-balance sg:md:text-pretty sg:[&_p:not(:last-child)]:mb-4 sg:[&_a]:hover:text-foreground sg:[&_a]:underline sg:[&_a]:underline-offset-3\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"alert-action\"\r\n      className={cn(\"sg:absolute sg:top-2.5 sg:end-3\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants };\r\n"],"mappings":"AA4BI;AA5BJ,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,aACE;AAAA,EACJ;AACF;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0E;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,mBAAmB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/primitives/alert/alert.stories.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Alert, AlertDescription, AlertTitle, alertVariants } from "..";
+import { Alert, AlertDescription, AlertTitle, alertVariants } from "./alert";
 import { Terminal } from "lucide-react";
 const meta = {
   component: Alert,

package/dist/components/primitives/alert/alert.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/alert/alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Alert, AlertDescription, AlertTitle, alertVariants } from \"..\";\nimport { Terminal } from \"lucide-react\";\n\nconst meta = {\n  component: Alert,\n  title: \"Alert\",\n  argTypes: {\n    variant: {\n      options: Object.keys(alertVariants.variant),\n    },\n  },\n} satisfies Meta<typeof Alert>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const normal: Story = {\n  args: {\n    children: [\n      <Terminal />,\n      <AlertTitle>Default</AlertTitle>,\n      <AlertDescription>Default variant</AlertDescription>,\n    ],\n  },\n};\n\nexport const destructive: Story = {\n  args: {\n    variant: \"destructive\",\n    children: [\n      <AlertTitle>Destructive</AlertTitle>,\n      <AlertDescription>Destructive variant</AlertDescription>,\n    ],\n  },\n};\n"],"mappings":"AAoBM;AAnBN,SAAS,OAAO,kBAAkB,YAAY,qBAAqB;AACnE,SAAS,gBAAgB;AAEzB,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,OAAO,KAAK,cAAc,OAAO;AAAA,IAC5C;AAAA,EACF;AACF;AACA,IAAO,wBAAQ;AAIR,MAAM,SAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,UAAU;AAAA,MACR,oBAAC,YAAS;AAAA,MACV,oBAAC,cAAW,qBAAO;AAAA,MACnB,oBAAC,oBAAiB,6BAAe;AAAA,IACnC;AAAA,EACF;AACF;AAEO,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,MACR,oBAAC,cAAW,yBAAW;AAAA,MACvB,oBAAC,oBAAiB,iCAAmB;AAAA,IACvC;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/alert/alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport { Alert, AlertDescription, AlertTitle, alertVariants } from \"./alert\";\r\nimport { Terminal } from \"lucide-react\";\r\n\r\nconst meta = {\r\n  component: Alert,\r\n  title: \"Alert\",\r\n  argTypes: {\r\n    variant: {\r\n      options: Object.keys(alertVariants.variant),\r\n    },\r\n  },\r\n} satisfies Meta<typeof Alert>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const normal: Story = {\r\n  args: {\r\n    children: [\r\n      <Terminal />,\r\n      <AlertTitle>Default</AlertTitle>,\r\n      <AlertDescription>Default variant</AlertDescription>,\r\n    ],\r\n  },\r\n};\r\n\r\nexport const destructive: Story = {\r\n  args: {\r\n    variant: \"destructive\",\r\n    children: [\r\n      <AlertTitle>Destructive</AlertTitle>,\r\n      <AlertDescription>Destructive variant</AlertDescription>,\r\n    ],\r\n  },\r\n};\r\n"],"mappings":"AAoBM;AAnBN,SAAS,OAAO,kBAAkB,YAAY,qBAAqB;AACnE,SAAS,gBAAgB;AAEzB,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,OAAO,KAAK,cAAc,OAAO;AAAA,IAC5C;AAAA,EACF;AACF;AACA,IAAO,wBAAQ;AAIR,MAAM,SAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,UAAU;AAAA,MACR,oBAAC,YAAS;AAAA,MACV,oBAAC,cAAW,qBAAO;AAAA,MACnB,oBAAC,oBAAiB,6BAAe;AAAA,IACnC;AAAA,EACF;AACF;AAEO,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,MACR,oBAAC,cAAW,yBAAW;AAAA,MACvB,oBAAC,oBAAiB,iCAAmB;AAAA,IACvC;AAAA,EACF;AACF;","names":[]}

package/dist/components/primitives/badge/badge.d.ts

@@ -1,13 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
-    asChild?: boolean;
-}): react_jsx_runtime.JSX.Element;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 
 export { Badge, badgeVariants };

package/dist/components/primitives/badge/badge.js

@@ -1,17 +1,18 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { cn } from "@/utils";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-import { cn } from "../../../utils";
 const badgeVariants = cva(
-  "sg:inline-flex sg:items-center sg:justify-center sg:rounded-md sg:border sg:px-2 sg:py-0.5 sg:text-xs sg:font-medium sg:w-fit sg:whitespace-nowrap sg:shrink-0 sg:[&>svg]:size-3 sg:gap-1 sg:[&>svg]:pointer-events-none sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px] sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive sg:transition-[color,box-shadow] sg:overflow-hidden",
+  "sg:h-5 sg:gap-1 sg:rounded-4xl sg:border sg:border-transparent sg:px-2 sg:py-0.5 sg:text-xs sg:font-medium sg:transition-all sg:has-data-[icon=inline-end]:pe-1.5 sg:has-data-[icon=inline-start]:ps-1.5 sg:[&>svg]:size-3! sg:inline-flex sg:items-center sg:justify-center sg:w-fit sg:whitespace-nowrap sg:shrink-0 sg:[&>svg]:pointer-events-none sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px] sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive sg:overflow-hidden sg:group/badge",
   {
     variants: {
       variant: {
-        default: "sg:border-transparent sg:bg-primary sg:text-primary-foreground sg:[a&]:hover:bg-primary/90",
-        secondary: "sg:border-transparent sg:bg-secondary sg:text-secondary-foreground sg:[a&]:hover:bg-secondary/90",
-        destructive: "sg:border-transparent sg:bg-destructive sg:text-white sg:[a&]:hover:bg-destructive/90 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/60",
-        outline: "sg:text-foreground sg:[a&]:hover:bg-accent sg:[a&]:hover:text-accent-foreground"
+        default: "sg:bg-primary sg:text-primary-foreground sg:[a]:hover:bg-primary/80",
+        secondary: "sg:bg-secondary sg:text-secondary-foreground sg:[a]:hover:bg-secondary/80",
+        destructive: "sg:bg-destructive/10 sg:[a]:hover:bg-destructive/20 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:text-destructive sg:dark:bg-destructive/20",
+        outline: "sg:border-border sg:text-foreground sg:[a]:hover:bg-muted sg:[a]:hover:text-muted-foreground sg:bg-input/30",
+        ghost: "sg:hover:bg-muted sg:hover:text-muted-foreground sg:dark:hover:bg-muted/50",
+        link: "sg:text-primary sg:underline-offset-4 sg:hover:underline"
       }
     },
     defaultVariants: {
@@ -21,19 +22,24 @@ const badgeVariants = cva(
 );
 function Badge({
   className,
-  variant,
-  asChild = false,
+  variant = "default",
+  render,
   ...props
 }) {
-  const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ className, variant }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
     }
-  );
+  });
 }
 export {
   Badge,

package/dist/components/primitives/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\n\nconst badgeVariants = cva(\n  \"sg:inline-flex sg:items-center sg:justify-center sg:rounded-md sg:border sg:px-2 sg:py-0.5 sg:text-xs sg:font-medium sg:w-fit sg:whitespace-nowrap sg:shrink-0 sg:[&>svg]:size-3 sg:gap-1 sg:[&>svg]:pointer-events-none sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px] sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive sg:transition-[color,box-shadow] sg:overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"sg:border-transparent sg:bg-primary sg:text-primary-foreground sg:[a&]:hover:bg-primary/90\",\n        secondary:\n          \"sg:border-transparent sg:bg-secondary sg:text-secondary-foreground sg:[a&]:hover:bg-secondary/90\",\n        destructive:\n          \"sg:border-transparent sg:bg-destructive sg:text-white sg:[a&]:hover:bg-destructive/90 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/60\",\n        outline:\n          \"sg:text-foreground sg:[a&]:hover:bg-accent sg:[a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":"AAoCI;AApCJ,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAC8D;AAC5D,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/badge/badge.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst badgeVariants = cva(\n  \"sg:h-5 sg:gap-1 sg:rounded-4xl sg:border sg:border-transparent sg:px-2 sg:py-0.5 sg:text-xs sg:font-medium sg:transition-all sg:has-data-[icon=inline-end]:pe-1.5 sg:has-data-[icon=inline-start]:ps-1.5 sg:[&>svg]:size-3! sg:inline-flex sg:items-center sg:justify-center sg:w-fit sg:whitespace-nowrap sg:shrink-0 sg:[&>svg]:pointer-events-none sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px] sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive sg:overflow-hidden sg:group/badge\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"sg:bg-primary sg:text-primary-foreground sg:[a]:hover:bg-primary/80\",\n        secondary:\n          \"sg:bg-secondary sg:text-secondary-foreground sg:[a]:hover:bg-secondary/80\",\n        destructive:\n          \"sg:bg-destructive/10 sg:[a]:hover:bg-destructive/20 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:text-destructive sg:dark:bg-destructive/20\",\n        outline:\n          \"sg:border-border sg:text-foreground sg:[a]:hover:bg-muted sg:[a]:hover:text-muted-foreground sg:bg-input/30\",\n        ghost:\n          \"sg:hover:bg-muted sg:hover:text-muted-foreground sg:dark:hover:bg-muted/50\",\n        link: \"sg:text-primary sg:underline-offset-4 sg:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  });\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":"AAAA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAA8B;AAEvC,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,MAAM;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAA0E;AACxE,SAAO,UAAU;AAAA,IACf,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,QACE,WAAW,GAAG,cAAc,EAAE,WAAW,QAAQ,CAAC,CAAC;AAAA,MACrD;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/components/primitives/badge/badges.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/badge/badges.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../../utils\";\n\nexport interface BadgesProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const Badges = ({ children, className, ...props }: BadgesProps) => {\n  return (\n    <div className={cn(\"sg:flex sg:flex-wrap sg:gap-2\", className)} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":"AAOI;AAPJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAIZ,MAAM,SAAS,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,MAAmB;AACxE,SACE,oBAAC,SAAI,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,OACjE,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/badge/badges.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cn } from \"../../../utils\";\r\n\r\nexport interface BadgesProps extends React.HTMLAttributes<HTMLDivElement> {}\r\n\r\nexport const Badges = ({ children, className, ...props }: BadgesProps) => {\r\n  return (\r\n    <div className={cn(\"sg:flex sg:flex-wrap sg:gap-2\", className)} {...props}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"AAOI;AAPJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAIZ,MAAM,SAAS,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,MAAmB;AACxE,SACE,oBAAC,SAAI,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,OACjE,UACH;AAEJ;","names":[]}

package/dist/components/primitives/button/button.d.ts

@@ -1,36 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
+import { Button as Button$1 } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
-import { icons } from 'lucide-react';
 
 declare const buttonVariants: {
     variant: {
         default: string;
-        destructive: string;
         outline: string;
         secondary: string;
         ghost: string;
+        destructive: string;
         link: string;
     };
     size: {
         default: string;
+        xs: string;
         sm: string;
         lg: string;
         icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
     };
 };
 declare const buttonVariantsProps: (props?: ({
     variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props = React.ComponentProps<"button"> & VariantProps<typeof buttonVariantsProps> & {
-    asChild?: boolean;
-    iconStart?: keyof typeof icons;
-    iconStartAnimate?: boolean;
-    iconEnd?: keyof typeof icons;
-    iconEndAnimate?: boolean;
-};
-declare function Button({ className, variant, size, asChild, iconStart, iconStartAnimate, iconEnd, iconEndAnimate, children, ...props }: Props): react_jsx_runtime.JSX.Element;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariantsProps>): react_jsx_runtime.JSX.Element;
 
 export { Button, buttonVariants, buttonVariantsProps };