singularity-components 0.1.136 → 0.1.139

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

@@ -1,28 +1,30 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+"use client";
+import { jsx } 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";
-import clsx from "clsx";
-import { cn } from "../../../utils";
 const buttonVariants = {
   variant: {
-    default: "sg:bg-primary sg:text-primary-foreground sg:shadow-xs sg:hover:bg-primary/90",
-    destructive: "sg:bg-destructive sg:text-white sg:shadow-xs sg:hover:bg-destructive/90 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/60",
-    outline: "sg:border sg:border-border sg:shadow-xs sg:hover:bg-accent sg:hover:text-accent-foreground",
-    secondary: "sg:bg-secondary sg:text-secondary-foreground sg:shadow-xs sg:hover:bg-secondary/80",
-    ghost: "sg:hover:bg-accent sg:hover:text-accent-foreground sg:dark:hover:bg-accent/50",
+    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",
     link: "sg:text-primary sg:underline-offset-4 sg:hover:underline"
   },
   size: {
-    default: "sg:h-9 sg:px-4 sg:py-2 sg:has-[>svg]:px-3",
-    sm: "sg:h-8 sg:rounded-md sg:gap-1.5 sg:px-3 sg:has-[>svg]:px-2.5",
-    lg: "sg:h-10 sg:rounded-md sg:px-6 sg:has-[>svg]:px-4",
-    icon: "sg:size-9"
+    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",
+    "icon-sm": "sg:size-8",
+    "icon-lg": "sg:size-10"
   }
 };
 const buttonVariantsProps = cva(
-  "sg:inline-flex sg:items-center sg:justify-center sg:gap-2 sg:whitespace-nowrap sg:cursor-pointer sg:rounded-md sg:text-sm sg:font-medium sg:transition-all sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&_svg]:pointer-events-none sg:[&_svg:not([class*=size-])]:size-4 sg:shrink-0 sg:[&_svg]:shrink-0 sg:outline-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: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",
   {
     variants: buttonVariants,
     defaultVariants: {
@@ -33,60 +35,16 @@ const buttonVariantsProps = cva(
 );
 function Button({
   className,
-  variant,
-  size,
-  asChild = false,
-  iconStart,
-  iconStartAnimate,
-  iconEnd,
-  iconEndAnimate,
-  children,
+  variant = "default",
+  size = "default",
   ...props
 }) {
-  const Comp = asChild ? Slot : "button";
-  const iconAnimateCss = "sg:animate-spin";
-  const LucideIconStart = iconStart && icons[iconStart];
-  const LucideIconEnd = iconEnd && icons[iconEnd];
-  if (asChild) {
-    const child = React.Children.only(children);
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        "data-slot": "button",
-        className: cn(buttonVariantsProps({ variant, size, className })),
-        ...props,
-        children: React.cloneElement(
-          child,
-          {},
-          /* @__PURE__ */ jsxs(Fragment, { children: [
-            LucideIconStart && /* @__PURE__ */ jsx(
-              LucideIconStart,
-              {
-                className: clsx(iconStartAnimate && iconAnimateCss)
-              }
-            ),
-            child.props.children,
-            LucideIconEnd && /* @__PURE__ */ jsx(
-              LucideIconEnd,
-              {
-                className: clsx(iconEndAnimate && iconAnimateCss)
-              }
-            )
-          ] })
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Comp,
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
     {
+      "data-slot": "button",
       className: cn(buttonVariantsProps({ variant, size, className })),
-      ...props,
-      children: [
-        LucideIconStart && /* @__PURE__ */ jsx(LucideIconStart, { className: clsx(iconStartAnimate && iconAnimateCss) }),
-        children,
-        LucideIconEnd && /* @__PURE__ */ jsx(LucideIconEnd, { className: clsx(iconEndAnimate && iconAnimateCss) })
-      ]
+      ...props
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { icons } from \"lucide-react\";\r\nimport clsx from \"clsx\";\r\nimport { cn } from \"../../../utils\";\r\n\r\nconst buttonVariants = {\r\n  variant: {\r\n    default:\r\n      \"sg:bg-primary sg:text-primary-foreground sg:shadow-xs sg:hover:bg-primary/90\",\r\n    destructive:\r\n      \"sg:bg-destructive sg:text-white sg:shadow-xs sg:hover:bg-destructive/90 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/60\",\r\n    outline:\r\n      \"sg:border sg:border-border sg:shadow-xs sg:hover:bg-accent sg:hover:text-accent-foreground\",\r\n    secondary:\r\n      \"sg:bg-secondary sg:text-secondary-foreground sg:shadow-xs sg:hover:bg-secondary/80\",\r\n    ghost:\r\n      \"sg:hover:bg-accent sg:hover:text-accent-foreground sg:dark:hover:bg-accent/50\",\r\n    link: \"sg:text-primary sg:underline-offset-4 sg:hover:underline\",\r\n  },\r\n  size: {\r\n    default: \"sg:h-9 sg:px-4 sg:py-2 sg:has-[>svg]:px-3\",\r\n    sm: \"sg:h-8 sg:rounded-md sg:gap-1.5 sg:px-3 sg:has-[>svg]:px-2.5\",\r\n    lg: \"sg:h-10 sg:rounded-md sg:px-6 sg:has-[>svg]:px-4\",\r\n    icon: \"sg:size-9\",\r\n  },\r\n};\r\n\r\nconst buttonVariantsProps = cva(\r\n  \"sg:inline-flex sg:items-center sg:justify-center sg:gap-2 sg:whitespace-nowrap sg:cursor-pointer sg:rounded-md sg:text-sm sg:font-medium sg:transition-all sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&_svg]:pointer-events-none sg:[&_svg:not([class*=size-])]:size-4 sg:shrink-0 sg:[&_svg]:shrink-0 sg:outline-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\",\r\n  {\r\n    variants: buttonVariants,\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n);\r\n\r\ntype Props = React.ComponentProps<\"button\"> &\r\n  VariantProps<typeof buttonVariantsProps> & {\r\n    asChild?: boolean;\r\n    iconStart?: keyof typeof icons;\r\n    iconStartAnimate?: boolean;\r\n    iconEnd?: keyof typeof icons;\r\n    iconEndAnimate?: boolean;\r\n  };\r\n\r\nfunction Button({\r\n  className,\r\n  variant,\r\n  size,\r\n  asChild = false,\r\n  iconStart,\r\n  iconStartAnimate,\r\n  iconEnd,\r\n  iconEndAnimate,\r\n  children,\r\n  ...props\r\n}: Props) {\r\n  const Comp = asChild ? Slot : \"button\";\r\n  const iconAnimateCss = \"sg:animate-spin\";\r\n\r\n  const LucideIconStart = iconStart && icons[iconStart];\r\n  const LucideIconEnd = iconEnd && icons[iconEnd];\r\n\r\n  if (asChild) {\r\n    const child = React.Children.only(children) as React.ReactElement<{\r\n      children?: React.ReactNode;\r\n    }>;\r\n\r\n    return (\r\n      <Comp\r\n        data-slot=\"button\"\r\n        className={cn(buttonVariantsProps({ variant, size, className }))}\r\n        {...props}\r\n      >\r\n        {React.cloneElement(\r\n          child,\r\n          {},\r\n          <>\r\n            {LucideIconStart && (\r\n              <LucideIconStart\r\n                className={clsx(iconStartAnimate && iconAnimateCss)}\r\n              />\r\n            )}\r\n            {child.props.children}\r\n            {LucideIconEnd && (\r\n              <LucideIconEnd\r\n                className={clsx(iconEndAnimate && iconAnimateCss)}\r\n              />\r\n            )}\r\n          </>\r\n        )}\r\n      </Comp>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Comp\r\n      className={cn(buttonVariantsProps({ variant, size, className }))}\r\n      {...props}\r\n    >\r\n      {LucideIconStart && (\r\n        <LucideIconStart className={clsx(iconStartAnimate && iconAnimateCss)} />\r\n      )}\r\n      {children}\r\n      {LucideIconEnd && (\r\n        <LucideIconEnd className={clsx(iconEndAnimate && iconAnimateCss)} />\r\n      )}\r\n    </Comp>\r\n  );\r\n}\r\n\r\nexport { Button, buttonVariantsProps, buttonVariants };\r\n"],"mappings":"AAiFU,mBAEI,KAFJ;AAjFV,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,aAAa;AACtB,OAAO,UAAU;AACjB,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,SACE;AAAA,IACF,aACE;AAAA,IACF,SACE;AAAA,IACF,WACE;AAAA,IACF,OACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAWA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,iBAAiB;AAEvB,QAAM,kBAAkB,aAAa,MAAM,SAAS;AACpD,QAAM,gBAAgB,WAAW,MAAM,OAAO;AAE9C,MAAI,SAAS;AACX,UAAM,QAAQ,MAAM,SAAS,KAAK,QAAQ;AAI1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,oBAAoB,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,QAC9D,GAAG;AAAA,QAEH,gBAAM;AAAA,UACL;AAAA,UACA,CAAC;AAAA,UACD,iCACG;AAAA,+BACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,KAAK,oBAAoB,cAAc;AAAA;AAAA,YACpD;AAAA,YAED,MAAM,MAAM;AAAA,YACZ,iBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,KAAK,kBAAkB,cAAc;AAAA;AAAA,YAClD;AAAA,aAEJ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MAC9D,GAAG;AAAA,MAEH;AAAA,2BACC,oBAAC,mBAAgB,WAAW,KAAK,oBAAoB,cAAc,GAAG;AAAA,QAEvE;AAAA,QACA,iBACC,oBAAC,iBAAc,WAAW,KAAK,kBAAkB,cAAc,GAAG;AAAA;AAAA;AAAA,EAEtE;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@/utils\";\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst buttonVariants = {\n  variant: {\n    default: \"sg:bg-primary sg:text-primary-foreground sg:hover:bg-primary/80\",\n    outline:\n      \"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\",\n    secondary:\n      \"sg:bg-secondary sg:text-secondary-foreground sg:hover:bg-secondary/80 sg:aria-expanded:bg-secondary sg:aria-expanded:text-secondary-foreground\",\n    ghost:\n      \"sg:hover:bg-muted sg:hover:text-foreground sg:dark:hover:bg-muted/50 sg:aria-expanded:bg-muted sg:aria-expanded:text-foreground\",\n    destructive:\n      \"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\",\n    link: \"sg:text-primary sg:underline-offset-4 sg:hover:underline\",\n  },\n  size: {\n    default:\n      \"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\",\n    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\",\n    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\",\n    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\",\n    icon: \"sg:size-9\",\n    \"icon-xs\": \"sg:size-6 sg:[&_svg:not([class*=size-])]:size-3\",\n    \"icon-sm\": \"sg:size-8\",\n    \"icon-lg\": \"sg:size-10\",\n  },\n};\n\nconst buttonVariantsProps = cva(\n  \"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\",\n  {\n    variants: buttonVariants,\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariantsProps>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariantsProps({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariantsProps, buttonVariants };\n"],"mappings":";AAkDI;AAhDJ,SAAS,UAAU;AACnB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,WAA8B;AAEvC,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,SACE;AAAA,IACF,WACE;AAAA,IACF,OACE;AAAA,IACF,aACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,SACE;AAAA,IACF,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAqE;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -2,9 +2,8 @@ import { StoryObj } from '@storybook/react-vite';
 import { Button } from './button.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';
-import 'react';
+import '@base-ui/react/button';
 import 'class-variance-authority';
-import 'lucide-react';
 
 declare const meta: {
     component: typeof Button;
@@ -31,7 +30,5 @@ declare const ghost: Story;
 declare const link: Story;
 declare const sm: Story;
 declare const lg: Story;
-declare const icon: Story;
-declare const icons: Story;
 
-export { meta as default, destructive, ghost, icon, icons, lg, link, outline, primary, secondary, sm };
+export { meta as default, destructive, ghost, lg, link, outline, primary, secondary, sm };

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

@@ -1,4 +1,4 @@
-import { Button, buttonVariants } from "..";
+import { Button, buttonVariants } from "./button";
 const meta = {
   component: Button,
   title: "Button",
@@ -60,23 +60,10 @@ const lg = {
     size: "lg"
   }
 };
-const icon = {
-  args: { iconStart: "PcCase", size: "icon" }
-};
-const icons = {
-  args: {
-    children: "icons",
-    iconStart: "Loader",
-    iconStartAnimate: true,
-    iconEnd: "ShieldCheck"
-  }
-};
 export {
   button_stories_default as default,
   destructive,
   ghost,
-  icon,
-  icons,
   lg,
   link,
   outline,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/button/button.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Button, buttonVariants } from \"..\";\n\nconst meta = {\n  component: Button,\n  title: \"Button\",\n  argTypes: {\n    variant: {\n      control: { type: \"select\" },\n      options: Object.keys(buttonVariants.variant),\n    },\n    size: {\n      options: Object.keys(buttonVariants.size),\n    },\n  },\n} satisfies Meta<typeof Button>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const primary: Story = {\n  args: {\n    children: \"primary\",\n  },\n};\n\nexport const secondary: Story = {\n  args: {\n    children: \"secondary\",\n    variant: \"secondary\",\n  },\n};\n\nexport const destructive: Story = {\n  args: {\n    children: \"destructive\",\n    variant: \"destructive\",\n  },\n};\n\nexport const outline: Story = {\n  args: {\n    children: \"outline\",\n    variant: \"outline\",\n  },\n};\n\nexport const ghost: Story = {\n  args: {\n    children: \"ghost\",\n    variant: \"ghost\",\n  },\n};\n\nexport const link: Story = {\n  args: {\n    children: \"link\",\n    variant: \"link\",\n  },\n};\n\nexport const sm: Story = {\n  args: {\n    children: \"sm\",\n    size: \"sm\",\n  },\n};\n\nexport const lg: Story = {\n  args: {\n    children: \"lg\",\n    size: \"lg\",\n  },\n};\n\nexport const icon: Story = {\n  args: { iconStart: \"PcCase\", size: \"icon\" },\n};\n\nexport const icons: Story = {\n  args: {\n    children: \"icons\",\n    iconStart: \"Loader\",\n    iconStartAnimate: true,\n    iconEnd: \"ShieldCheck\",\n  },\n};\n"],"mappings":"AACA,SAAS,QAAQ,sBAAsB;AAEvC,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,SAAS;AAAA,MAC1B,SAAS,OAAO,KAAK,eAAe,OAAO;AAAA,IAC7C;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,eAAe,IAAI;AAAA,IAC1C;AAAA,EACF;AACF;AACA,IAAO,yBAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,YAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,QAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,OAAc;AAAA,EACzB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,KAAY;AAAA,EACvB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,EACR;AACF;AAEO,MAAM,KAAY;AAAA,EACvB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,EACR;AACF;AAEO,MAAM,OAAc;AAAA,EACzB,MAAM,EAAE,WAAW,UAAU,MAAM,OAAO;AAC5C;AAEO,MAAM,QAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/button/button.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport { Button, buttonVariants } from \"./button\";\r\n\r\nconst meta = {\r\n  component: Button,\r\n  title: \"Button\",\r\n  argTypes: {\r\n    variant: {\r\n      control: { type: \"select\" },\r\n      options: Object.keys(buttonVariants.variant),\r\n    },\r\n    size: {\r\n      options: Object.keys(buttonVariants.size),\r\n    },\r\n  },\r\n} satisfies Meta<typeof Button>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const primary: Story = {\r\n  args: {\r\n    children: \"primary\",\r\n  },\r\n};\r\n\r\nexport const secondary: Story = {\r\n  args: {\r\n    children: \"secondary\",\r\n    variant: \"secondary\",\r\n  },\r\n};\r\n\r\nexport const destructive: Story = {\r\n  args: {\r\n    children: \"destructive\",\r\n    variant: \"destructive\",\r\n  },\r\n};\r\n\r\nexport const outline: Story = {\r\n  args: {\r\n    children: \"outline\",\r\n    variant: \"outline\",\r\n  },\r\n};\r\n\r\nexport const ghost: Story = {\r\n  args: {\r\n    children: \"ghost\",\r\n    variant: \"ghost\",\r\n  },\r\n};\r\n\r\nexport const link: Story = {\r\n  args: {\r\n    children: \"link\",\r\n    variant: \"link\",\r\n  },\r\n};\r\n\r\nexport const sm: Story = {\r\n  args: {\r\n    children: \"sm\",\r\n    size: \"sm\",\r\n  },\r\n};\r\n\r\nexport const lg: Story = {\r\n  args: {\r\n    children: \"lg\",\r\n    size: \"lg\",\r\n  },\r\n};\r\n\r\n// export const icon: Story = {\r\n//   args: { iconStart: \"PcCase\", size: \"icon\" },\r\n// };\r\n\r\n// export const icons: Story = {\r\n//   args: {\r\n//     children: \"icons\",\r\n//     iconStart: \"Loader\",\r\n//     iconStartAnimate: true,\r\n//     iconEnd: \"ShieldCheck\",\r\n//   },\r\n// };\r\n"],"mappings":"AACA,SAAS,QAAQ,sBAAsB;AAEvC,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,SAAS;AAAA,MAC1B,SAAS,OAAO,KAAK,eAAe,OAAO;AAAA,IAC7C;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,eAAe,IAAI;AAAA,IAC1C;AAAA,EACF;AACF;AACA,IAAO,yBAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,YAAmB;AAAA,EAC9B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,cAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,UAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,QAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,OAAc;AAAA,EACzB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AACF;AAEO,MAAM,KAAY;AAAA,EACvB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,EACR;AACF;AAEO,MAAM,KAAY;AAAA,EACvB,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,EACR;AACF;","names":[]}

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

@@ -0,0 +1,2 @@
+
+export {  }

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

@@ -0,0 +1 @@
+//# sourceMappingURL=button_with_icon_variant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -12,16 +12,16 @@ declare const iconVariants: {
     };
     color: {
         default: string;
-        black: string;
-        white: string;
-        gray: string;
+        foreground: string;
         primary: string;
         secondary: string;
+        muted: string;
+        destructive: string;
     };
 };
 declare const iconVariantsProps: (props?: ({
     size?: "sm" | "lg" | "md" | null | undefined;
-    color?: "default" | "secondary" | "black" | "white" | "gray" | "primary" | null | undefined;
+    color?: "default" | "destructive" | "secondary" | "foreground" | "primary" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type Props = Omit<React.ComponentProps<LucideIcon>, "size"> & VariantProps<typeof iconVariantsProps> & {
     icon: keyof typeof icons;

package/dist/components/primitives/icon/icon.js

@@ -11,11 +11,11 @@ const iconVariants = {
   },
   color: {
     default: "",
-    black: "sg:text-black",
-    white: "sg:text-white",
-    gray: "sg:text-gray",
+    foreground: "sg:text-foreground",
     primary: "sg:text-primary",
-    secondary: "sg:text-secondary"
+    secondary: "sg:text-secondary",
+    muted: "sg:text-muted",
+    destructive: "sg:text-destructive"
   }
 };
 const iconVariantsProps = cva("", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/icon/icon.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { icons, type LucideIcon } from \"lucide-react\";\r\nimport { cn } from \"../../../utils\";\r\n\r\nconst iconVariants = {\r\n  size: {\r\n    sm: \"\",\r\n    md: \"\",\r\n    lg: \"\",\r\n  },\r\n  color: {\r\n    default: \"\",\r\n    black: \"sg:text-black\",\r\n    white: \"sg:text-white\",\r\n    gray: \"sg:text-gray\",\r\n    primary: \"sg:text-primary\",\r\n    secondary: \"sg:text-secondary\",\r\n  },\r\n};\r\n\r\nconst iconVariantsProps = cva(\"\", {\r\n  variants: iconVariants,\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    color: \"default\",\r\n  },\r\n});\r\n\r\ntype Props = Omit<React.ComponentProps<LucideIcon>, \"size\"> &\r\n  VariantProps<typeof iconVariantsProps> & {\r\n    icon: keyof typeof icons;\r\n    spin?: boolean;\r\n  };\r\n\r\nfunction Icon({ className, size, color, icon, spin, ...props }: Props) {\r\n  const LucideIcon = icons[icon];\r\n\r\n  let iconSize = 20;\r\n  if (size == \"sm\") {\r\n    iconSize = 16;\r\n  } else if (size == \"lg\") {\r\n    iconSize = 32;\r\n  }\r\n\r\n  return (\r\n    <LucideIcon\r\n      size={iconSize}\r\n      className={cn(\r\n        iconVariantsProps({ color, className }),\r\n        spin && \"sg:animate-spin\"\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Icon, iconVariantsProps, iconVariants };\r\n"],"mappings":"AA8CI;AA9CJ,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,aAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,eAAe;AAAA,EACnB,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEA,MAAM,oBAAoB,IAAI,IAAI;AAAA,EAChC,UAAU;AAAA,EACV,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAQD,SAAS,KAAK,EAAE,WAAW,MAAM,OAAO,MAAM,MAAM,GAAG,MAAM,GAAU;AACrE,QAAM,aAAa,MAAM,IAAI;AAE7B,MAAI,WAAW;AACf,MAAI,QAAQ,MAAM;AAChB,eAAW;AAAA,EACb,WAAW,QAAQ,MAAM;AACvB,eAAW;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAW;AAAA,QACT,kBAAkB,EAAE,OAAO,UAAU,CAAC;AAAA,QACtC,QAAQ;AAAA,MACV;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/icon/icon.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { icons, type LucideIcon } from \"lucide-react\";\r\nimport { cn } from \"../../../utils\";\r\n\r\nconst iconVariants = {\r\n  size: {\r\n    sm: \"\",\r\n    md: \"\",\r\n    lg: \"\",\r\n  },\r\n  color: {\r\n    default: \"\",\r\n    foreground: \"sg:text-foreground\",\r\n    primary: \"sg:text-primary\",\r\n    secondary: \"sg:text-secondary\",\r\n    muted: \"sg:text-muted\",\r\n    destructive: \"sg:text-destructive\",\r\n  },\r\n};\r\n\r\nconst iconVariantsProps = cva(\"\", {\r\n  variants: iconVariants,\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    color: \"default\",\r\n  },\r\n});\r\n\r\ntype Props = Omit<React.ComponentProps<LucideIcon>, \"size\"> &\r\n  VariantProps<typeof iconVariantsProps> & {\r\n    icon: keyof typeof icons;\r\n    spin?: boolean;\r\n  };\r\n\r\nfunction Icon({ className, size, color, icon, spin, ...props }: Props) {\r\n  const LucideIcon = icons[icon];\r\n\r\n  let iconSize = 20;\r\n  if (size == \"sm\") {\r\n    iconSize = 16;\r\n  } else if (size == \"lg\") {\r\n    iconSize = 32;\r\n  }\r\n\r\n  return (\r\n    <LucideIcon\r\n      size={iconSize}\r\n      className={cn(\r\n        iconVariantsProps({ color, className }),\r\n        spin && \"sg:animate-spin\",\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Icon, iconVariantsProps, iconVariants };\r\n"],"mappings":"AA8CI;AA9CJ,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,aAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,eAAe;AAAA,EACnB,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AACF;AAEA,MAAM,oBAAoB,IAAI,IAAI;AAAA,EAChC,UAAU;AAAA,EACV,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AAQD,SAAS,KAAK,EAAE,WAAW,MAAM,OAAO,MAAM,MAAM,GAAG,MAAM,GAAU;AACrE,QAAM,aAAa,MAAM,IAAI;AAE7B,MAAI,WAAW;AACf,MAAI,QAAQ,MAAM;AAChB,eAAW;AAAA,EACb,WAAW,QAAQ,MAAM;AACvB,eAAW;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAW;AAAA,QACT,kBAAkB,EAAE,OAAO,UAAU,CAAC;AAAA,QACtC,QAAQ;AAAA,MACV;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -13,6 +13,9 @@ declare const meta: {
         size: {
             options: string[];
         };
+        color: {
+            options: string[];
+        };
     };
 };
 

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

@@ -5,6 +5,9 @@ const meta = {
   argTypes: {
     size: {
       options: Object.keys(iconVariants.size)
+    },
+    color: {
+      options: Object.keys(iconVariants.color)
     }
   }
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/icon/icon.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Icon, iconVariants } from \"..\";\n\nconst meta = {\n  component: Icon,\n  title: \"Icon\",\n  argTypes: {\n    size: {\n      options: Object.keys(iconVariants.size),\n    },\n  },\n} satisfies Meta<typeof Icon>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const small: Story = {\n  args: { icon: \"Loader\", size: \"sm\" },\n};\n\nexport const medium: Story = {\n  args: { icon: \"Loader\", size: \"md\" },\n};\n\nexport const large_spinner: Story = {\n  args: { icon: \"Loader\", size: \"lg\", color: \"primary\", spin: true },\n};\n"],"mappings":"AACA,SAAS,MAAM,oBAAoB;AAEnC,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,aAAa,IAAI;AAAA,IACxC;AAAA,EACF;AACF;AACA,IAAO,uBAAQ;AAIR,MAAM,QAAe;AAAA,EAC1B,MAAM,EAAE,MAAM,UAAU,MAAM,KAAK;AACrC;AAEO,MAAM,SAAgB;AAAA,EAC3B,MAAM,EAAE,MAAM,UAAU,MAAM,KAAK;AACrC;AAEO,MAAM,gBAAuB;AAAA,EAClC,MAAM,EAAE,MAAM,UAAU,MAAM,MAAM,OAAO,WAAW,MAAM,KAAK;AACnE;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/icon/icon.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Icon, iconVariants } from \"..\";\n\nconst meta = {\n  component: Icon,\n  title: \"Icon\",\n  argTypes: {\n    size: {\n      options: Object.keys(iconVariants.size),\n    },\n    color: {\n      options: Object.keys(iconVariants.color),\n    },\n  },\n} satisfies Meta<typeof Icon>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const small: Story = {\n  args: { icon: \"Loader\", size: \"sm\" },\n};\n\nexport const medium: Story = {\n  args: { icon: \"Loader\", size: \"md\" },\n};\n\nexport const large_spinner: Story = {\n  args: { icon: \"Loader\", size: \"lg\", color: \"primary\", spin: true },\n};\n"],"mappings":"AACA,SAAS,MAAM,oBAAoB;AAEnC,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,aAAa,IAAI;AAAA,IACxC;AAAA,IACA,OAAO;AAAA,MACL,SAAS,OAAO,KAAK,aAAa,KAAK;AAAA,IACzC;AAAA,EACF;AACF;AACA,IAAO,uBAAQ;AAIR,MAAM,QAAe;AAAA,EAC1B,MAAM,EAAE,MAAM,UAAU,MAAM,KAAK;AACrC;AAEO,MAAM,SAAgB;AAAA,EAC3B,MAAM,EAAE,MAAM,UAAU,MAAM,KAAK;AACrC;AAEO,MAAM,gBAAuB;AAAA,EAClC,MAAM,EAAE,MAAM,UAAU,MAAM,MAAM,OAAO,WAAW,MAAM,KAAK;AACnE;","names":[]}

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

@@ -1,16 +1,14 @@
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion/accordion.js';
-export { Alert, AlertDescription, AlertTitle, alertVariants } from './alert/alert.js';
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants } from './alert/alert.js';
 export { Badge, badgeVariants } from './badge/badge.js';
 export { Badges, BadgesProps } from './badge/badges.js';
 export { Button, buttonVariants, buttonVariantsProps } from './button/button.js';
 export { Icon, iconVariants, iconVariantsProps } from './icon/icon.js';
-export { Input } from './input/input.js';
 export { Layout, LayoutProps, layoutVariants, layoutVariantsProps } from './layout/layout.js';
 export { Separator } from './separator/separator.js';
 export { Skeleton } from './skeleton/skeleton.js';
-export { Spinner, SpinnerProps } from './spinner/spinner.js';
+export { Spinner } from './spinner/spinner.js';
 export { Stack, StackProps, stackVariants } from './stack/stack.js';
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './table/table.js';
 export { TextDiv } from './text/text-div.js';
 export { TextHeading, TextHeadingProps, textHeadingVariants, textHeadingVariantsProps } from './text/text-heading.js';
 export { TextParagraph } from './text/text-paragraph.js';
@@ -19,12 +17,14 @@ export { TextTime } from './text/text-time.js';
 export { UiImage } from './ui-image.js';
 export { UiLink } from './ui-link.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 './text/internal/text-element.js';
 import '../../lib/types.js';
 import '../providers/ImageContext.js';

package/dist/components/primitives/index.js

@@ -4,13 +4,11 @@ export * from "./badge/badge";
 export * from "./badge/badges";
 export * from "./button/button";
 export * from "./icon/icon";
-export * from "./input/input";
 export * from "./layout/layout";
 export * from "./separator/separator";
 export * from "./skeleton/skeleton";
 export * from "./spinner/spinner";
 export * from "./stack/stack";
-export * from "./table/table";
 export * from "./text/text-div";
 export * from "./text/text-heading";
 export * from "./text/text-paragraph";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export * from \"./accordion/accordion\";\r\nexport * from \"./alert/alert\";\r\nexport * from \"./badge/badge\";\r\nexport * from \"./badge/badges\";\r\nexport * from \"./button/button\";\r\nexport * from \"./icon/icon\";\r\nexport * from \"./input/input\";\r\nexport * from \"./layout/layout\";\r\nexport * from \"./separator/separator\";\r\nexport * from \"./skeleton/skeleton\";\r\nexport * from \"./spinner/spinner\";\r\nexport * from \"./stack/stack\";\r\nexport * from \"./table/table\";\r\nexport * from \"./text/text-div\";\r\nexport * from \"./text/text-heading\";\r\nexport * from \"./text/text-paragraph\";\r\nexport * from \"./text/text-span\";\r\nexport * from \"./text/text-time\";\r\nexport * from \"./ui-image\";\r\nexport * from \"./ui-link\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export * from \"./accordion/accordion\";\r\nexport * from \"./alert/alert\";\r\nexport * from \"./badge/badge\";\r\nexport * from \"./badge/badges\";\r\nexport * from \"./button/button\";\r\nexport * from \"./icon/icon\";\r\n// export * from \"./input/input\";\r\nexport * from \"./layout/layout\";\r\nexport * from \"./separator/separator\";\r\nexport * from \"./skeleton/skeleton\";\r\nexport * from \"./spinner/spinner\";\r\nexport * from \"./stack/stack\";\r\n// export * from \"./table/table\";\r\nexport * from \"./text/text-div\";\r\nexport * from \"./text/text-heading\";\r\nexport * from \"./text/text-paragraph\";\r\nexport * from \"./text/text-span\";\r\nexport * from \"./text/text-time\";\r\nexport * from \"./ui-image\";\r\nexport * from \"./ui-link\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

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

@@ -18,19 +18,20 @@ declare const layoutVariants: {
     };
     bgColor: {
         transparent: string;
-        white: string;
-        black: string;
-        orange: string;
-        pink: string;
+        background: string;
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
         gradient1: string;
         gradient2: string;
-        "primarylight-pink-orange": string;
+        "masks-and-opacity": string;
     };
 };
 declare const layoutVariantsProps: (props?: ({
     type?: "col" | "full" | "wide" | null | undefined;
     cols?: "100" | "66-33" | "50-50" | "33-33-33" | "25-25-25-25" | null | undefined;
-    bgColor?: "black" | "white" | "transparent" | "orange" | "pink" | "gradient1" | "gradient2" | "primarylight-pink-orange" | null | undefined;
+    bgColor?: "secondary" | "primary" | "muted" | "transparent" | "background" | "accent" | "gradient1" | "gradient2" | "masks-and-opacity" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LayoutProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof layoutVariantsProps> {
     as?: "div" | "section" | "article" | "main" | "header" | "footer";

package/dist/components/primitives/layout/layout.js

@@ -4,13 +4,15 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../../utils";
 const bgColors = {
   transparent: "sg:bg-transparent",
-  white: "sg:bg-white",
-  black: "sg:bg-black",
-  orange: "sg:bg-orange",
-  pink: "sg:bg-pink",
-  gradient1: "sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light))_0%,hsl(var(--sg-pink))_50%,hsl(var(--sg-orange))_100%)]",
-  gradient2: "sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,hsl(var(--sg-gradient-1)/0.15),transparent),radial-gradient(800px_200px_at_90%_-20%,hsl(var(--sg-gradient-2)/0.15),transparent)]",
-  "primarylight-pink-orange": "sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light)/0.1)_0%,hsl(var(--sg-pink)/0.1)_50%,hsl(var(--sg-orange)/0.1)_100%)] sg:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-white))_0%,hsl(var(--sg-white))_60%,transparent_100%)] sg:dark:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-black))_0%,hsl(var(--sg-black))_60%,transparent_100%)]"
+  background: "sg:bg-background",
+  primary: "sg:bg-primary",
+  secondary: "sg:bg-secondary",
+  muted: "sg:bg-muted",
+  accent: "sg:bg-accent",
+  gradient1: "sg:bg-[linear-gradient(135deg,var(--sg-primary)_0%,var(--sg-destructive)_50%,var(--sg-primary-dark)_100%)]",
+  gradient2: "sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,var(--sg-primary-20),transparent),radial-gradient(800px_200px_at_90%_-20%,var(--sg-primary-10),transparent)]",
+  "masks-and-opacity": "bg-brand-mask"
+  //brand class defined in main.css
 };
 const layoutVariants = {
   type: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/layout/layout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\n\nconst bgColors = {\n  transparent: \"sg:bg-transparent\",\n  white: \"sg:bg-white\",\n  black: \"sg:bg-black\",\n  orange: \"sg:bg-orange\",\n  pink: \"sg:bg-pink\",\n  gradient1:\n    \"sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light))_0%,hsl(var(--sg-pink))_50%,hsl(var(--sg-orange))_100%)]\",\n  gradient2:\n    \"sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,hsl(var(--sg-gradient-1)/0.15),transparent),radial-gradient(800px_200px_at_90%_-20%,hsl(var(--sg-gradient-2)/0.15),transparent)]\",\n  \"primarylight-pink-orange\":\n    \"sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light)/0.1)_0%,hsl(var(--sg-pink)/0.1)_50%,hsl(var(--sg-orange)/0.1)_100%)] sg:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-white))_0%,hsl(var(--sg-white))_60%,transparent_100%)] sg:dark:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-black))_0%,hsl(var(--sg-black))_60%,transparent_100%)]\",\n};\n\nconst layoutVariants = {\n  type: {\n    full: \"sg:w-full\",\n    wide: \"sg:w-full sg:px-4\",\n    col: \"sg:mx-auto sg:max-w-[768px] sg:px-4 sg:md:px-0\",\n  },\n  cols: {\n    \"100\": \"\",\n    \"66-33\": \"sg:md:grid-cols-[2fr_1fr]\",\n    \"50-50\": \"sg:md:grid-cols-2\",\n    \"33-33-33\": \"sg:md:grid-cols-3\",\n    \"25-25-25-25\": \"sg:md:grid-cols-4\",\n  },\n  bgColor: bgColors,\n};\n\nconst layoutVariantsProps = cva(\"sg:grid sg:grid-cols-1 sg:gap-4\", {\n  variants: layoutVariants,\n  defaultVariants: {\n    type: \"col\",\n    cols: \"100\",\n  },\n});\n\nexport interface LayoutProps\n  extends React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof layoutVariantsProps> {\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n}\n\nfunction Layout({\n  children,\n  className,\n  type,\n  cols,\n  bgColor,\n  as: Component = \"div\",\n  ...props\n}: React.PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (cols === \"66-33\" ||\n        cols === \"50-50\" ||\n        cols === \"33-33-33\" ||\n        cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\n      \"Content not allowed in column for variant\",\n      cols,\n      content.type\n    );\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return content;\n  };\n\n  return (\n    <Component\n      {...props}\n      className={cn(bgColors[bgColor ?? \"transparent\"], className)}\n    >\n      <div className={cn(layoutVariantsProps({ type, cols }))}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </Component>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n  hideDiv?: boolean;\n  className?: string;\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n};\n\nfunction Col({ children, hideDiv, className, as: Component = \"div\" }: colProp) {\n  return hideDiv ? (\n    <>{children}</>\n  ) : (\n    <Component className={className}>{children}</Component>\n  );\n}\n\nLayout.Col1 = Col;\nLayout.Col2 = Col;\nLayout.Col3 = Col;\nLayout.Col4 = Col;\n\nexport { Layout, layoutVariantsProps, layoutVariants };\n"],"mappings":"AAuG8D;AAvG9D,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,WAAW;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WACE;AAAA,EACF,WACE;AAAA,EACF,4BACE;AACJ;AAEA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AACX;AAEA,MAAM,sBAAsB,IAAI,mCAAmC;AAAA,EACjE,UAAU;AAAA,EACV,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF,CAAC;AAQD,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,GAAG;AACL,GAAyC;AACvC,QAAM,kBAAkB,CACtB,YACY;AACZ,QAAI,QAAQ,SAAS,OAAO,MAAM;AAChC,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,WACR,SAAS,WACT,SAAS,cACT,SAAS,gBACX;AACA,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,cAAc,SAAS,gBACjC;AACA,aAAO;AAAA,IACT,WAAW,QAAQ,SAAS,OAAO,QAAQ,SAAS,eAAe;AACjE,aAAO;AAAA,IACT;AAEA,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,CACnB,YACG;AACH,QAAI,CAAC,gBAAgB,OAAO,GAAG;AAC7B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,SAAS,WAAW,aAAa,GAAG,SAAS;AAAA,MAE3D,8BAAC,SAAI,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,CAAC,GACnD,gBAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,UAC7B,MAAM,eAAe,KAAK,IAAI,aAAa,KAAK,IAAI,gCAAE;AAAA,MACxD,GACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,IAAI,EAAE,UAAU,SAAS,WAAW,IAAI,YAAY,MAAM,GAAY;AAC7E,SAAO,UACL,gCAAG,UAAS,IAEZ,oBAAC,aAAU,WAAuB,UAAS;AAE/C;AAEA,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/layout/layout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\n\nconst bgColors = {\n  transparent: \"sg:bg-transparent\",\n  background: \"sg:bg-background\",\n  primary: \"sg:bg-primary\",\n  secondary: \"sg:bg-secondary\",\n  muted: \"sg:bg-muted\",\n  accent: \"sg:bg-accent\",\n  gradient1:\n    \"sg:bg-[linear-gradient(135deg,var(--sg-primary)_0%,var(--sg-destructive)_50%,var(--sg-primary-dark)_100%)]\",\n  gradient2:\n    \"sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,var(--sg-primary-20),transparent),radial-gradient(800px_200px_at_90%_-20%,var(--sg-primary-10),transparent)]\",\n  \"masks-and-opacity\": \"bg-brand-mask\", //brand class defined in main.css\n};\n\nconst layoutVariants = {\n  type: {\n    full: \"sg:w-full\",\n    wide: \"sg:w-full sg:px-4\",\n    col: \"sg:mx-auto sg:max-w-[768px] sg:px-4 sg:md:px-0\",\n  },\n  cols: {\n    \"100\": \"\",\n    \"66-33\": \"sg:md:grid-cols-[2fr_1fr]\",\n    \"50-50\": \"sg:md:grid-cols-2\",\n    \"33-33-33\": \"sg:md:grid-cols-3\",\n    \"25-25-25-25\": \"sg:md:grid-cols-4\",\n  },\n  bgColor: bgColors,\n};\n\nconst layoutVariantsProps = cva(\"sg:grid sg:grid-cols-1 sg:gap-4\", {\n  variants: layoutVariants,\n  defaultVariants: {\n    type: \"col\",\n    cols: \"100\",\n  },\n});\n\nexport interface LayoutProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof layoutVariantsProps> {\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n}\n\nfunction Layout({\n  children,\n  className,\n  type,\n  cols,\n  bgColor,\n  as: Component = \"div\",\n  ...props\n}: React.PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>,\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (cols === \"66-33\" ||\n        cols === \"50-50\" ||\n        cols === \"33-33-33\" ||\n        cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\n      \"Content not allowed in column for variant\",\n      cols,\n      content.type,\n    );\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>,\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return content;\n  };\n\n  return (\n    <Component\n      {...props}\n      className={cn(bgColors[bgColor ?? \"transparent\"], className)}\n    >\n      <div className={cn(layoutVariantsProps({ type, cols }))}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>,\n        )}\n      </div>\n    </Component>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n  hideDiv?: boolean;\n  className?: string;\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n};\n\nfunction Col({ children, hideDiv, className, as: Component = \"div\" }: colProp) {\n  return hideDiv ? (\n    <>{children}</>\n  ) : (\n    <Component className={className}>{children}</Component>\n  );\n}\n\nLayout.Col1 = Col;\nLayout.Col2 = Col;\nLayout.Col3 = Col;\nLayout.Col4 = Col;\n\nexport { Layout, layoutVariantsProps, layoutVariants };\n"],"mappings":"AAwG8D;AAxG9D,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,WAAW;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WACE;AAAA,EACF,WACE;AAAA,EACF,qBAAqB;AAAA;AACvB;AAEA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AACX;AAEA,MAAM,sBAAsB,IAAI,mCAAmC;AAAA,EACjE,UAAU;AAAA,EACV,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF,CAAC;AASD,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,GAAG;AACL,GAAyC;AACvC,QAAM,kBAAkB,CACtB,YACY;AACZ,QAAI,QAAQ,SAAS,OAAO,MAAM;AAChC,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,WACR,SAAS,WACT,SAAS,cACT,SAAS,gBACX;AACA,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,cAAc,SAAS,gBACjC;AACA,aAAO;AAAA,IACT,WAAW,QAAQ,SAAS,OAAO,QAAQ,SAAS,eAAe;AACjE,aAAO;AAAA,IACT;AAEA,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,CACnB,YACG;AACH,QAAI,CAAC,gBAAgB,OAAO,GAAG;AAC7B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,SAAS,WAAW,aAAa,GAAG,SAAS;AAAA,MAE3D,8BAAC,SAAI,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,CAAC,GACnD,gBAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,UAC7B,MAAM,eAAe,KAAK,IAAI,aAAa,KAAK,IAAI,gCAAE;AAAA,MACxD,GACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,IAAI,EAAE,UAAU,SAAS,WAAW,IAAI,YAAY,MAAM,GAAY;AAC7E,SAAO,UACL,gCAAG,UAAS,IAEZ,oBAAC,aAAU,WAAuB,UAAS;AAE/C;AAEA,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;","names":[]}

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

@@ -53,7 +53,7 @@ const Layout_66_33 = {
 const Layout_50_50 = {
   args: {
     cols: "50-50",
-    bgColor: "orange",
+    bgColor: "primary",
     children: [
       /* @__PURE__ */ jsx(Layout.Col1, { children: "Col1" }),
       /* @__PURE__ */ jsx(Layout.Col2, { children: "Col2" })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/layout/layout.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport { Layout, layoutVariants } from \"..\";\r\n\r\nconst meta = {\r\n  component: Layout,\r\n  title: \"Layout\",\r\n  argTypes: {\r\n    bgColor: {\r\n      options: Object.keys(layoutVariants.bgColor),\r\n    },\r\n    type: {\r\n      options: Object.keys(layoutVariants.type),\r\n    },\r\n    cols: {\r\n      options: Object.keys(layoutVariants.cols),\r\n    },\r\n  },\r\n} satisfies Meta<typeof Layout>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Empty: Story = {};\r\n\r\nexport const Layout_100: Story = {\r\n  args: {\r\n    cols: \"100\",\r\n    as: \"section\",\r\n    bgColor: \"gradient1\",\r\n    children: [\r\n      <Layout.Col1 as=\"article\">\r\n        Laytout as section, Col1 as article\r\n      </Layout.Col1>,\r\n    ],\r\n  },\r\n};\r\n\r\nexport const Layout_Wide_100: Story = {\r\n  args: {\r\n    cols: \"100\",\r\n    type: \"wide\",\r\n    children: [<Layout.Col1>Col1</Layout.Col1>],\r\n  },\r\n};\r\n\r\nexport const Layout_Full_100: Story = {\r\n  args: {\r\n    cols: \"100\",\r\n    type: \"full\",\r\n    children: [<Layout.Col1>Col1</Layout.Col1>],\r\n  },\r\n};\r\n\r\nexport const Layout_66_33: Story = {\r\n  args: {\r\n    cols: \"66-33\",\r\n    children: [\r\n      <Layout.Col1 hideDiv>\r\n        <div>Col1</div>\r\n      </Layout.Col1>,\r\n      <Layout.Col2>Col2</Layout.Col2>,\r\n    ],\r\n  },\r\n};\r\n\r\nexport const Layout_50_50: Story = {\r\n  args: {\r\n    cols: \"50-50\",\r\n    bgColor: \"orange\",\r\n    children: [\r\n      <Layout.Col1>Col1</Layout.Col1>,\r\n      <Layout.Col2>Col2</Layout.Col2>,\r\n    ],\r\n  },\r\n};\r\n"],"mappings":"AA8BM;AA7BN,SAAS,QAAQ,sBAAsB;AAEvC,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,OAAO,KAAK,eAAe,OAAO;AAAA,IAC7C;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,eAAe,IAAI;AAAA,IAC1C;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,eAAe,IAAI;AAAA,IAC1C;AAAA,EACF;AACF;AACA,IAAO,yBAAQ;AAIR,MAAM,QAAe,CAAC;AAEtB,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,MACR,oBAAC,OAAO,MAAP,EAAY,IAAG,WAAU,iDAE1B;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU,CAAC,oBAAC,OAAO,MAAP,EAAY,kBAAI,CAAc;AAAA,EAC5C;AACF;AAEO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU,CAAC,oBAAC,OAAO,MAAP,EAAY,kBAAI,CAAc;AAAA,EAC5C;AACF;AAEO,MAAM,eAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,MACR,oBAAC,OAAO,MAAP,EAAY,SAAO,MAClB,8BAAC,SAAI,kBAAI,GACX;AAAA,MACA,oBAAC,OAAO,MAAP,EAAY,kBAAI;AAAA,IACnB;AAAA,EACF;AACF;AAEO,MAAM,eAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,MACR,oBAAC,OAAO,MAAP,EAAY,kBAAI;AAAA,MACjB,oBAAC,OAAO,MAAP,EAAY,kBAAI;AAAA,IACnB;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/layout/layout.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport { Layout, layoutVariants } from \"..\";\r\n\r\nconst meta = {\r\n  component: Layout,\r\n  title: \"Layout\",\r\n  argTypes: {\r\n    bgColor: {\r\n      options: Object.keys(layoutVariants.bgColor),\r\n    },\r\n    type: {\r\n      options: Object.keys(layoutVariants.type),\r\n    },\r\n    cols: {\r\n      options: Object.keys(layoutVariants.cols),\r\n    },\r\n  },\r\n} satisfies Meta<typeof Layout>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Empty: Story = {};\r\n\r\nexport const Layout_100: Story = {\r\n  args: {\r\n    cols: \"100\",\r\n    as: \"section\",\r\n    bgColor: \"gradient1\",\r\n    children: [\r\n      <Layout.Col1 as=\"article\">\r\n        Laytout as section, Col1 as article\r\n      </Layout.Col1>,\r\n    ],\r\n  },\r\n};\r\n\r\nexport const Layout_Wide_100: Story = {\r\n  args: {\r\n    cols: \"100\",\r\n    type: \"wide\",\r\n    children: [<Layout.Col1>Col1</Layout.Col1>],\r\n  },\r\n};\r\n\r\nexport const Layout_Full_100: Story = {\r\n  args: {\r\n    cols: \"100\",\r\n    type: \"full\",\r\n    children: [<Layout.Col1>Col1</Layout.Col1>],\r\n  },\r\n};\r\n\r\nexport const Layout_66_33: Story = {\r\n  args: {\r\n    cols: \"66-33\",\r\n    children: [\r\n      <Layout.Col1 hideDiv>\r\n        <div>Col1</div>\r\n      </Layout.Col1>,\r\n      <Layout.Col2>Col2</Layout.Col2>,\r\n    ],\r\n  },\r\n};\r\n\r\nexport const Layout_50_50: Story = {\r\n  args: {\r\n    cols: \"50-50\",\r\n    bgColor: \"primary\",\r\n    children: [\r\n      <Layout.Col1>Col1</Layout.Col1>,\r\n      <Layout.Col2>Col2</Layout.Col2>,\r\n    ],\r\n  },\r\n};\r\n"],"mappings":"AA8BM;AA7BN,SAAS,QAAQ,sBAAsB;AAEvC,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,OAAO,KAAK,eAAe,OAAO;AAAA,IAC7C;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,eAAe,IAAI;AAAA,IAC1C;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO,KAAK,eAAe,IAAI;AAAA,IAC1C;AAAA,EACF;AACF;AACA,IAAO,yBAAQ;AAIR,MAAM,QAAe,CAAC;AAEtB,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,MACR,oBAAC,OAAO,MAAP,EAAY,IAAG,WAAU,iDAE1B;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU,CAAC,oBAAC,OAAO,MAAP,EAAY,kBAAI,CAAc;AAAA,EAC5C;AACF;AAEO,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,UAAU,CAAC,oBAAC,OAAO,MAAP,EAAY,kBAAI,CAAc;AAAA,EAC5C;AACF;AAEO,MAAM,eAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,MACR,oBAAC,OAAO,MAAP,EAAY,SAAO,MAClB,8BAAC,SAAI,kBAAI,GACX;AAAA,MACA,oBAAC,OAAO,MAAP,EAAY,kBAAI;AAAA,IACnB;AAAA,EACF;AACF;AAEO,MAAM,eAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,MACR,oBAAC,OAAO,MAAP,EAAY,kBAAI;AAAA,MACjB,oBAAC,OAAO,MAAP,EAAY,kBAAI;AAAA,IACnB;AAAA,EACF;AACF;","names":[]}

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

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
 
-declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function Separator({ className, orientation, ...props }: Separator$1.Props): react_jsx_runtime.JSX.Element;
 
 export { Separator };

package/dist/components/primitives/separator/separator.js

@@ -1,22 +1,19 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cn } from "../../../utils";
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { cn } from "@/utils";
 function Separator({
   className,
   orientation = "horizontal",
-  decorative = true,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
+    SeparatorPrimitive,
     {
       "data-slot": "separator",
-      decorative,
       orientation,
       className: cn(
-        "sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:h-full sg:data-[orientation=vertical]:w-px sg:my-4",
+        "sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:w-px sg:data-[orientation=vertical]:self-stretch",
         className
       ),
       ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/separator/separator.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport { cn } from \"../../../utils\";\n\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:h-full sg:data-[orientation=vertical]:w-px sg:my-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAYI;AAXJ,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,UAAU;AAEZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/separator/separator.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\r\nimport { cn } from \"@/utils\";\r\n\r\nfunction Separator({\r\n  className,\r\n  orientation = \"horizontal\",\r\n  ...props\r\n}: SeparatorPrimitive.Props) {\r\n  return (\r\n    <SeparatorPrimitive\r\n      data-slot=\"separator\"\r\n      orientation={orientation}\r\n      className={cn(\r\n        \"sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:w-px sg:data-[orientation=vertical]:self-stretch\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport { Separator };\r\n"],"mappings":";AAWI;AATJ,SAAS,aAAa,0BAA0B;AAChD,SAAS,UAAU;AAEnB,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAA6B;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

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

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

@@ -1,4 +1,4 @@
-import { Separator } from "..";
+import { Separator } from "./separator";
 const meta = {
   component: Separator,
   title: "Separator"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/separator/separator.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Separator } from \"..\";\n\nconst meta = {\n  component: Separator,\n  title: \"Separator\",\n} satisfies Meta<typeof Separator>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const vertical: Story = {\n  args: { orientation: \"vertical\" },\n};\n\nexport const horizontal: Story = {\n  args: { orientation: \"horizontal\" },\n};\n"],"mappings":"AACA,SAAS,iBAAiB;AAE1B,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACT;AACA,IAAO,4BAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM,EAAE,aAAa,WAAW;AAClC;AAEO,MAAM,aAAoB;AAAA,EAC/B,MAAM,EAAE,aAAa,aAAa;AACpC;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/separator/separator.stories.ts"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\r\nimport { Separator } from \"./separator\";\r\n\r\nconst meta = {\r\n  component: Separator,\r\n  title: \"Separator\",\r\n} satisfies Meta<typeof Separator>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const vertical: Story = {\r\n  args: { orientation: \"vertical\" },\r\n};\r\n\r\nexport const horizontal: Story = {\r\n  args: { orientation: \"horizontal\" },\r\n};\r\n"],"mappings":"AACA,SAAS,iBAAiB;AAE1B,MAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACT;AACA,IAAO,4BAAQ;AAIR,MAAM,WAAkB;AAAA,EAC7B,MAAM,EAAE,aAAa,WAAW;AAClC;AAEO,MAAM,aAAoB;AAAA,EAC/B,MAAM,EAAE,aAAa,aAAa;AACpC;","names":[]}

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

@@ -1,10 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type SpinnerProps = {
-    variant?: "ring" | "dots";
-    size?: "xs" | "sm" | "md" | "lg";
-    className?: string;
-};
-declare function Spinner({ variant, size, className, }: SpinnerProps): react_jsx_runtime.JSX.Element;
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-export { Spinner, type SpinnerProps };
+export { Spinner };