singularity-components 0.1.139 → 0.1.151

package/README.md

@@ -8,6 +8,7 @@ Export from main.ts
 
 ## Publish to npm
 
+npm login (if needed)
 npm publish
 
 ## Start Storybook:
@@ -17,3 +18,17 @@ npm run storybook
 ## Pack locally
 
 npm pack singularity-components
+Can check with npm pack --dry-run
+Or run npx npm pack
+
+Creates a singularity-components-1.0.0.tgz
+
+In other proj add:
+
+{
+"dependencies": {
+"singularity-components": "file:../path-to-tarball/singularity-components-1.X.X.tgz"
+}
+}
+
+and npm install

package/dist/components/blocks/cards/blogpost-card.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BlogPost } from '../../../data/posts.js';
+
+declare function BlogPostCard({ post }: {
+    post: BlogPost;
+}): react_jsx_runtime.JSX.Element;
+
+export { BlogPostCard as default };

package/dist/components/blocks/cards/blogpost-card.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from "./card";
+import { Link } from "../../primitives/link/link";
+import {
+  TextTime,
+  TextHeading,
+  TextParagraph,
+  TextSpan
+} from "../../primitives";
+import { UiImage } from "../../primitives/ui-image";
+function BlogPostCard({ post }) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: `/posts/${post.slug}`,
+      variant: "card",
+      className: "sg:group sg:block",
+      children: /* @__PURE__ */ jsxs(Card, { className: "sg:overflow-hidden sg:transition-shadow sg:hover:shadow-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "sg:aspect-16/10 sg:overflow-hidden", children: /* @__PURE__ */ jsx(
+          UiImage,
+          {
+            src: post.image,
+            alt: post.title,
+            className: "sg:h-full sg:w-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-105",
+            loading: "lazy"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "sg:p-5", children: [
+          /* @__PURE__ */ jsx(TextTime, { size: "xs", foreground: "muted-foreground", children: post.date }),
+          /* @__PURE__ */ jsx(
+            TextHeading,
+            {
+              variant: "h6",
+              as: "h3",
+              className: "sg:mt-1 sg:group-hover:text-primary sg:transition-colors",
+              children: post.title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextParagraph,
+            {
+              size: "sm",
+              foreground: "muted-foreground",
+              className: "sg:mt-2 sg:line-clamp-2",
+              children: post.excerpt
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextSpan,
+            {
+              size: "sm",
+              foreground: "primary",
+              className: "sg:mt-3 sg:inline-block",
+              children: "Read more \u2192"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  BlogPostCard as default
+};
+//# sourceMappingURL=blogpost-card.js.map

package/dist/components/blocks/cards/blogpost-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/cards/blogpost-card.tsx"],"sourcesContent":["import { Card, CardContent } from \"./card\";\r\nimport type { BlogPost } from \"../../../data/posts\";\r\nimport { Link } from \"../../primitives/link/link\";\r\nimport {\r\n  TextTime,\r\n  TextHeading,\r\n  TextParagraph,\r\n  TextSpan,\r\n} from \"../../primitives\";\r\nimport { UiImage } from \"../../primitives/ui-image\";\r\n\r\nexport default function BlogPostCard({ post }: { post: BlogPost }) {\r\n  return (\r\n    <Link\r\n      href={`/posts/${post.slug}`}\r\n      variant=\"card\"\r\n      className=\"sg:group sg:block\"\r\n    >\r\n      <Card className=\"sg:overflow-hidden sg:transition-shadow sg:hover:shadow-lg\">\r\n        <div className=\"sg:aspect-16/10 sg:overflow-hidden\">\r\n          <UiImage\r\n            src={post.image}\r\n            alt={post.title}\r\n            className=\"sg:h-full sg:w-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-105\"\r\n            loading=\"lazy\"\r\n          />\r\n        </div>\r\n        <CardContent className=\"sg:p-5\">\r\n          <TextTime size=\"xs\" foreground=\"muted-foreground\">\r\n            {post.date}\r\n          </TextTime>\r\n          <TextHeading\r\n            variant=\"h6\"\r\n            as=\"h3\"\r\n            className=\"sg:mt-1 sg:group-hover:text-primary sg:transition-colors\"\r\n          >\r\n            {post.title}\r\n          </TextHeading>\r\n          <TextParagraph\r\n            size=\"sm\"\r\n            foreground=\"muted-foreground\"\r\n            className=\"sg:mt-2 sg:line-clamp-2\"\r\n          >\r\n            {post.excerpt}\r\n          </TextParagraph>\r\n          <TextSpan\r\n            size=\"sm\"\r\n            foreground=\"primary\"\r\n            className=\"sg:mt-3 sg:inline-block\"\r\n          >\r\n            Read more →\r\n          </TextSpan>\r\n        </CardContent>\r\n      </Card>\r\n    </Link>\r\n  );\r\n}\r\n"],"mappings":"AAoBU,cAOF,YAPE;AApBV,SAAS,MAAM,mBAAmB;AAElC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAET,SAAR,aAA8B,EAAE,KAAK,GAAuB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,KAAK,IAAI;AAAA,MACzB,SAAQ;AAAA,MACR,WAAU;AAAA,MAEV,+BAAC,QAAK,WAAU,8DACd;AAAA,4BAAC,SAAI,WAAU,sCACb;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,KAAK;AAAA,YACV,KAAK,KAAK;AAAA,YACV,WAAU;AAAA,YACV,SAAQ;AAAA;AAAA,QACV,GACF;AAAA,QACA,qBAAC,eAAY,WAAU,UACrB;AAAA,8BAAC,YAAS,MAAK,MAAK,YAAW,oBAC5B,eAAK,MACR;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,IAAG;AAAA,cACH,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAW;AAAA,cACX,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAW;AAAA,cACX,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/blocks/cards/card.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/blocks/cards/card.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../utils";
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "sg:ring-foreground/10 sg:bg-card sg:gap-6 sg:overflow-hidden sg:rounded-2xl sg:ring-1 sg:has-[>img:first-child]:pt-0 sg:data-[size=sm]:gap-4 sg:data-[size=sm]:py-4 sg:*:[img:first-child]:rounded-t-xl sg:*:[img:last-child]:rounded-b-xl sg:group/card sg:flex sg:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "sg:gap-2 sg:rounded-t-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-b]:pb-6 sg:group-data-[size=sm]/card:[.border-b]:pb-4 sg:group/card-header sg:@container/card-header sg:grid sg:auto-rows-min sg:items-start sg:has-data-[slot=card-action]:grid-cols-[1fr_auto] sg:has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-title", ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-description", ...props });
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "sg:col-start-2 sg:row-span-2 sg:row-start-1 sg:self-start sg:justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("sg:px-6 sg:group-data-[size=sm]/card:px-4", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "sg:rounded-b-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-t]:pt-6 sg:group-data-[size=sm]/card:[.border-t]:pt-4 sg:flex sg:items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/components/blocks/cards/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/cards/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../../utils\";\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"sg:ring-foreground/10 sg:bg-card sg:gap-6 sg:overflow-hidden sg:rounded-2xl sg:ring-1 sg:has-[>img:first-child]:pt-0 sg:data-[size=sm]:gap-4 sg:data-[size=sm]:py-4 sg:*:[img:first-child]:rounded-t-xl sg:*:[img:last-child]:rounded-b-xl sg:group/card sg:flex sg:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"sg:gap-2 sg:rounded-t-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-b]:pb-6 sg:group-data-[size=sm]/card:[.border-b]:pb-4 sg:group/card-header sg:@container/card-header sg:grid sg:auto-rows-min sg:items-start sg:has-data-[slot=card-action]:grid-cols-[1fr_auto] sg:has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-title\" {...props} />;\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-description\" {...props} />;\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"sg:col-start-2 sg:row-span-2 sg:row-start-1 sg:self-start sg:justify-self-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"sg:px-6 sg:group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"sg:rounded-b-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-t]:pt-6 sg:group-data-[size=sm]/card:[.border-t]:pt-4 sg:flex sg:items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n"],"mappings":"AASI;AATJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAEnB,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA8D;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,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,UAAU,EAAE,WAAW,GAAG,MAAM,GAAgC;AACvE,SAAO,oBAAC,SAAI,aAAU,cAAc,GAAG,OAAO;AAChD;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC7E,SAAO,oBAAC,SAAI,aAAU,oBAAoB,GAAG,OAAO;AACtD;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,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,6CAA6C,SAAS;AAAA,MACnE,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;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './cards/card.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/components/blocks/index.js

@@ -0,0 +1,3 @@
+export * from "./cards/card";
+export * from "./cards/blogpost-card";
+//# sourceMappingURL=index.js.map

package/dist/components/blocks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blocks/index.ts"],"sourcesContent":["export * from \"./cards/card\";\r\nexport * from \"./cards/blogpost-card\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/components/index.d.ts

@@ -1,27 +1,30 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './primitives/accordion/accordion.js';
 export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants } from './primitives/alert/alert.js';
-export { Badge, badgeVariants } from './primitives/badge/badge.js';
+export { Badge, badgeVariants, badgeVariantsProps } 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 { Layout, LayoutProps, layoutVariants, layoutVariantsProps } from './primitives/layout/layout.js';
+export { Link, linkVariants } from './primitives/link/link.js';
+export { LinkButton } from './primitives/link/link-button.js';
 export { Separator } from './primitives/separator/separator.js';
 export { Skeleton } from './primitives/skeleton/skeleton.js';
 export { Spinner } from './primitives/spinner/spinner.js';
 export { Stack, StackProps, stackVariants } from './primitives/stack/stack.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';
+export { TextParagraph, textParagraphVariants, textParagraphVariantsProps } from './primitives/text/text-paragraph.js';
 export { TextSpan } from './primitives/text/text-span.js';
 export { TextTime } from './primitives/text/text-time.js';
 export { UiImage } from './primitives/ui-image.js';
 export { UiLink } from './primitives/ui-link.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './blocks/cards/card.js';
+export { Body } from './sections/body/body.js';
+export { BlogPost } from './templates/blogpost/blogpost.js';
+export { StartPage } from './templates/startpage/startpage.js';
 export { BaseImageProps, DefaultImage, ImageComponentType, ImageProvider, useImage } from './providers/ImageContext.js';
 export { BaseLinkProps, DefaultLink, LinkComponentType, LinkProvider, useLink } from './providers/LinkContext.js';
 export { SingularityProvider } from './providers/SingularityContext.js';
-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 '@base-ui/react/accordion';
 import 'class-variance-authority/types';
@@ -31,5 +34,5 @@ import '@base-ui/react/use-render';
 import '@base-ui/react/button';
 import 'lucide-react';
 import '@base-ui/react/separator';
-import './primitives/text/internal/text-element.js';
 import '../lib/types.js';
+import './primitives/text/internal/text-element.js';

package/dist/components/index.js

@@ -1,4 +1,7 @@
 export * from "./primitives";
-export * from "./providers";
 export * from "./units";
+export * from "./blocks";
+export * from "./sections";
+export * from "./templates";
+export * from "./providers";
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./primitives\";\r\nexport * from \"./providers\";\r\nexport * from \"./units\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./primitives\";\r\nexport * from \"./units\";\r\nexport * from \"./blocks\";\r\nexport * from \"./sections\";\r\nexport * from \"./templates\";\r\nexport * from \"./providers\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

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

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { cn } from "@/utils";
+import { cn } from "../../../utils";
 function Accordion({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,

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

@@ -1 +1 @@
-{"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":[]}
+{"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/alert/alert.js

@@ -1,7 +1,7 @@
 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",

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\";\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":[]}
+{"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/badge/badge.d.ts

@@ -3,9 +3,17 @@ 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?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+declare const badgeVariants: {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+};
+declare const badgeVariantsProps: (props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariantsProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants, badgeVariantsProps };

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

@@ -1,20 +1,19 @@
-import { cn } from "@/utils";
+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";
-const badgeVariants = cva(
-  "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",
+const badgeVariants = {
+  variant: {
+    default: "sg:border-transparent sg:bg-primary sg:text-primary-foreground sg:hover:bg-primary/80",
+    secondary: "sg:border-transparent sg:bg-secondary sg:text-secondary-foreground sg:hover:bg-secondary/80",
+    destructive: "sg:border-transparent sg:bg-destructive sg:text-destructive-foreground sg:hover:bg-destructive/80",
+    outline: "sg:text-foreground"
+  }
+};
+const badgeVariantsProps = cva(
+  "sg:inline-flex sg:items-center sg:rounded-full sg:border sg:px-2.5 sg:py-0.5 sg:text-xs sg:font-semibold sg:transition-colors sg:focus:outline-none sg:focus:ring-2 sg:focus:ring-ring sg:focus:ring-offset-2",
   {
-    variants: {
-      variant: {
-        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"
-      }
-    },
+    variants: badgeVariants,
     defaultVariants: {
       variant: "default"
     }
@@ -30,7 +29,7 @@ function Badge({
     defaultTagName: "span",
     props: mergeProps(
       {
-        className: cn(badgeVariants({ className, variant }))
+        className: cn(badgeVariantsProps({ className, variant }))
       },
       props
     ),
@@ -43,6 +42,7 @@ function Badge({
 }
 export {
   Badge,
-  badgeVariants
+  badgeVariants,
+  badgeVariantsProps
 };
 //# sourceMappingURL=badge.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"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 = {\n  variant: {\n    default:\n      \"sg:border-transparent sg:bg-primary sg:text-primary-foreground sg:hover:bg-primary/80\",\n    secondary:\n      \"sg:border-transparent sg:bg-secondary sg:text-secondary-foreground sg:hover:bg-secondary/80\",\n    destructive:\n      \"sg:border-transparent sg:bg-destructive sg:text-destructive-foreground sg:hover:bg-destructive/80\",\n    outline: \"sg:text-foreground\",\n  },\n};\n\nconst badgeVariantsProps = cva(\n  \"sg:inline-flex sg:items-center sg:rounded-full sg:border sg:px-2.5 sg:py-0.5 sg:text-xs sg:font-semibold sg:transition-colors sg:focus:outline-none sg:focus:ring-2 sg:focus:ring-ring sg:focus:ring-offset-2\",\n  {\n    variants: badgeVariants,\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 badgeVariantsProps>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariantsProps({ className, variant })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  });\n}\n\nexport { Badge, badgeVariantsProps, badgeVariants };\n"],"mappings":"AAAA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAA8B;AAEvC,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,IACP,SACE;AAAA,IACF,WACE;AAAA,IACF,aACE;AAAA,IACF,SAAS;AAAA,EACX;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,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,UAAU;AAAA,IACf,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,QACE,WAAW,GAAG,mBAAmB,EAAE,WAAW,QAAQ,CAAC,CAAC;AAAA,MAC1D;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/button/button.d.ts

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

package/dist/components/primitives/button/button.js

@@ -1,30 +1,29 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { cn } from "@/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
+import { icons } from "lucide-react";
 const buttonVariants = {
   variant: {
-    default: "sg:bg-primary sg:text-primary-foreground sg:hover:bg-primary/80",
-    outline: "sg:border-border sg:bg-input/30 sg:hover:bg-input/50 sg:hover:text-foreground sg:aria-expanded:bg-muted sg:aria-expanded:text-foreground",
-    secondary: "sg:bg-secondary sg:text-secondary-foreground sg:hover:bg-secondary/80 sg:aria-expanded:bg-secondary sg:aria-expanded:text-secondary-foreground",
-    ghost: "sg:hover:bg-muted sg:hover:text-foreground sg:dark:hover:bg-muted/50 sg:aria-expanded:bg-muted sg:aria-expanded:text-foreground",
-    destructive: "sg:bg-destructive/10 sg:hover:bg-destructive/20 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/20 sg:text-destructive sg:focus-visible:border-destructive/40 sg:dark:hover:bg-destructive/30",
+    default: "sg:bg-primary sg:text-primary-foreground sg:hover:brightness-110",
+    destructive: "sg:bg-destructive sg:text-destructive-foreground sg:hover:brightness-110",
+    outline: "sg:border sg:border-input sg:bg-background sg:hover:bg-muted sg:hover:text-foreground",
+    secondary: "sg:bg-secondary sg:text-secondary-foreground sg:hover:brightness-90",
+    ghost: "sg:hover:bg-muted sg:hover:text-foreground",
     link: "sg:text-primary sg:underline-offset-4 sg:hover:underline"
   },
   size: {
-    default: "sg:h-9 sg:gap-1.5 sg:px-3 sg:has-data-[icon=inline-end]:pe-2.5 sg:has-data-[icon=inline-start]:ps-2.5",
-    xs: "sg:h-6 sg:gap-1 sg:px-2.5 sg:text-xs sg:has-data-[icon=inline-end]:pe-2 sg:has-data-[icon=inline-start]:ps-2 sg:[&_svg:not([class*=size-])]:size-3",
-    sm: "sg:h-8 sg:gap-1 sg:px-3 sg:has-data-[icon=inline-end]:pe-2 sg:has-data-[icon=inline-start]:ps-2",
-    lg: "sg:h-10 sg:gap-1.5 sg:px-4 sg:has-data-[icon=inline-end]:pe-3 sg:has-data-[icon=inline-start]:ps-3",
-    icon: "sg:size-9",
-    "icon-xs": "sg:size-6 sg:[&_svg:not([class*=size-])]:size-3",
+    sm: "sg:h-8 sg:gap-1 sg:px-3 sg:has-data-[icon=inline-end]:pr-2 sg:has-data-[icon=inline-start]:pl-2",
+    default: "sg:h-9 sg:gap-1.5 sg:px-3 sg:has-data-[icon=inline-end]:pr-2.5 sg:has-data-[icon=inline-start]:pl-2.5",
+    lg: "sg:h-10 sg:gap-1.5 sg:px-4 sg:has-data-[icon=inline-end]:pr-3 sg:has-data-[icon=inline-start]:pl-3",
     "icon-sm": "sg:size-8",
+    "icon-md": "sg:size-9",
     "icon-lg": "sg:size-10"
   }
 };
 const buttonVariantsProps = cva(
-  "sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive sg:dark:aria-invalid:border-destructive/50 sg:rounded-4xl sg:border sg:border-transparent sg:bg-clip-padding sg:text-sm sg:font-medium sg:focus-visible:ring-[3px] sg:aria-invalid:ring-[3px] sg:[&_svg:not([class*=size-])]:size-4 sg:inline-flex sg:items-center sg:justify-center sg:whitespace-nowrap sg:transition-all sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&_svg]:pointer-events-none sg:shrink-0 sg:[&_svg]:shrink-0 sg:outline-none sg:group/button sg:select-none",
+  "sg:inline-flex sg:items-center sg:justify-center sg:gap-2 sg:whitespace-nowrap sg:rounded-md sg:text-sm sg:font-medium sg:ring-offset-background sg:transition-colors sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-ring sg:focus-visible:ring-offset-2 sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&_svg]:pointer-events-none sg:[&_svg]:size-4 sg:[&_svg]:shrink-0",
   {
     variants: buttonVariants,
     defaultVariants: {
@@ -37,14 +36,46 @@ function Button({
   className,
   variant = "default",
   size = "default",
+  iconStart,
+  iconStartAnimate,
+  iconEnd,
+  iconEndAnimate,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const iconAnimateCss = "sg:animate-spin";
+  const LucideIconStart = iconStart && icons[iconStart];
+  const LucideIconEnd = iconEnd && icons[iconEnd];
+  return /* @__PURE__ */ jsxs(
     ButtonPrimitive,
     {
       "data-slot": "button",
       className: cn(buttonVariantsProps({ variant, size, className })),
-      ...props
+      ...props,
+      children: [
+        LucideIconStart && /* @__PURE__ */ jsx(
+          LucideIconStart,
+          {
+            className: cn(
+              "sg:size-4",
+              iconStartAnimate && iconAnimateCss,
+              props.disabled && "sg:opacity-50"
+            ),
+            "data-icon": "inline-start"
+          }
+        ),
+        props.children,
+        LucideIconEnd && /* @__PURE__ */ jsx(
+          LucideIconEnd,
+          {
+            className: cn(
+              "sg:size-4",
+              iconEndAnimate && iconAnimateCss,
+              props.disabled && "sg:opacity-50"
+            ),
+            "data-icon": "inline-end"
+          }
+        )
+      ]
     }
   );
 }