@popgrids/ui 0.0.4 → 0.0.5

package/README.md

@@ -222,6 +222,38 @@ When you import `@popgrids/ui/theme.css` in your main CSS file:
 
 Full TypeScript support is included. All components are typed and exported with their proper types.
 
+## Changesets
+
+This library uses Changesets to manage versions. To create a new version, run:
+
+```bash
+pnpm changeset
+```
+
+This will open an interactive prompt to help you create a changeset.
+
+Once you've created a changeset, run:
+
+```bash
+pnpm changeset version
+```
+
+This will update the version in the package.json file and create a new git tag.
+
+Then push the changes to the repository:
+
+```bash
+git push origin main
+```
+
+And finally, publish the package:
+
+```bash
+pnpm changeset publish
+```
+
+This will publish the package to the npm registry.
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -1,2 +1,2 @@
-'use strict';var button=require('@base-ui/react/button'),classVarianceAuthority=require('class-variance-authority'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function a(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var n=classVarianceAuthority.cva("inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none",{variants:{align:{left:"justify-start",center:"justify-center",right:"justify-end"},collapsed:{false:null,true:"min-w-10 max-w-10 justify-center"},outline:{false:null,true:""},leading:{false:null},theme:{base:"[--background:var(--color-brand-midnight-900)] [--foreground:var(--color-text-text-reversed)]",brand:"[--background:var(--color-foreground)] [--foreground:var(--color-background)]",error:""},trailing:{false:null},variant:{default:"hover:bg-background/90",outline:"backdrop-blur-lg ",primary:"bg-primary-foreground/0 backdrop-blur-lg text-primary",secondary:"bg-secondary-foreground/0 backdrop-blur-lg text-secondary",tertiary:"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]"},pill:{false:"rounded-xs",true:"rounded-full"},size:{default:"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]",lg:"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]"}},defaultVariants:{align:"center",pill:false,size:"default",theme:"brand",variant:"default"},compoundVariants:[{pill:true,size:"default",class:"min-w-10 min-h-10 px-4"},{pill:true,collapsed:true,class:"max-w-10"},{pill:true,size:"lg",class:"min-w-12 min-h-12 px-4"},{pill:true,size:"lg",collapsed:true,class:"max-w-[54px] max-h-12"},{collapsed:false,size:"default",align:"left",pill:false,class:"pr-3 pl-2"},{align:"center",collapsed:false,size:"default",pill:false,class:"px-3"},{leading:true,pill:false,align:"left",size:"default",class:"pr-3 pl-2"},{collapsed:false,size:"default",pill:true,class:"px-4"},{size:"lg",pill:true,collapsed:false,class:"px-4"},{variant:"primary",outline:true,class:"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1"},{variant:"secondary",outline:true,class:"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md"},{variant:"primary",theme:"error",class:"[--background:var(--color-error-100)] [--foreground:var(--color-text-text-default)]"},{variant:"tertiary",theme:"error",class:"[--background:transparent] [--foreground:var(--color-error-700)]"}]}),z=classVarianceAuthority.cva("absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]",{variants:{outline:{false:null},variant:{default:"",outline:"",primary:"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0",secondary:"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default",tertiary:"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed"}},defaultVariants:{outline:false,variant:"default"},compoundVariants:[{outline:true,variant:"primary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"},{outline:true,variant:"secondary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"}]});function d({className:e,children:g,collapsed:b=false,variant:l="default",size:c="default",align:f="center",outline:o=false,pill:v=false,theme:p="brand",leadingElement:r,trailingElement:t,...m}){let x={variant:l,size:c,align:f,outline:o,collapsed:b,pill:v,leading:r!=null,theme:p,trailing:t!=null};return jsxRuntime.jsxs(button.Button,{"data-slot":"button",className:a(n(x),e),...m,children:[jsxRuntime.jsx("div",{className:a(z({variant:l,outline:o??false}))}),r&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:r}),g,t&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:t})]})}exports.Button=d;exports.buttonVariants=n;//# sourceMappingURL=index.cjs.map
+'use strict';var button=require('@base-ui/react/button'),classVarianceAuthority=require('class-variance-authority'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function i(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var n=classVarianceAuthority.cva("inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none",{variants:{align:{left:"justify-start",center:"justify-center",right:"justify-end"},collapsed:{false:null,true:"min-w-10 max-w-10 justify-center"},outline:{false:null,true:""},leading:{false:null},theme:{base:"bg-foreground text-background",brand:"bg-primary-foreground text-primary",error:""},trailing:{false:null},variant:{default:"hover:bg-background/90",outline:"backdrop-blur-lg ",primary:"bg-primary-foreground/0 backdrop-blur-lg text-primary",secondary:"bg-secondary-foreground/0 backdrop-blur-lg text-secondary",tertiary:"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]"},pill:{false:"rounded-xs",true:"rounded-full"},size:{default:"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]",lg:"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]"}},defaultVariants:{align:"center",pill:false,size:"default",theme:"brand",variant:"default"},compoundVariants:[{pill:true,size:"default",class:"min-w-10 min-h-10 px-4"},{pill:true,collapsed:true,class:"max-w-10"},{pill:true,size:"lg",class:"min-w-12 min-h-12 px-4"},{pill:true,size:"lg",collapsed:true,class:"max-w-[54px] max-h-12"},{collapsed:false,size:"default",align:"left",pill:false,class:"pr-3 pl-2"},{align:"center",collapsed:false,size:"default",pill:false,class:"px-3"},{leading:true,pill:false,align:"left",size:"default",class:"pr-3 pl-2"},{collapsed:false,size:"default",pill:true,class:"px-4"},{size:"lg",pill:true,collapsed:false,class:"px-4"},{variant:"primary",outline:true,class:"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1"},{variant:"primary",theme:"brand",class:"bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary"},{variant:"secondary",outline:true,class:"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md"},{variant:"primary",theme:"error",class:"bg-destructive text-foreground"},{variant:"tertiary",theme:"error",class:"bg-transparent text-destructive"}]}),V=classVarianceAuthority.cva("absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]",{variants:{outline:{false:null},variant:{default:"",outline:"",primary:"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0",secondary:"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default",tertiary:"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed"}},defaultVariants:{outline:false,variant:"default"},compoundVariants:[{outline:true,variant:"primary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"},{outline:true,variant:"secondary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"}]});function d({className:e,children:g,collapsed:b=false,variant:s="default",size:c="default",align:f="center",outline:l=false,pill:p=false,theme:v="brand",leadingElement:t,trailingElement:r,...m}){let x={variant:s,size:c,align:f,outline:l,collapsed:b,pill:p,leading:t!=null,theme:v,trailing:r!=null},y=n(x);return jsxRuntime.jsxs(button.Button,{"data-slot":"button",className:i(y,e),...m,children:[jsxRuntime.jsx("div",{className:i(V({variant:s,outline:l}))}),t&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:t}),g,r&&jsxRuntime.jsx(jsxRuntime.Fragment,{children:r})]})}exports.Button=d;exports.buttonVariants=n;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/button/button.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","cva","tintVariants","Button","className","children","collapsed","variant","size","align","outline","pill","theme","leadingElement","trailingElement","props","buttonProps","jsxs","ButtonPrimitive","jsx","Fragment"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none\",\n  {\n    variants: {\n      align: {\n        left: \"justify-start\",\n        center: \"justify-center\",\n        right: \"justify-end\",\n      },\n      collapsed: {\n        false: null,\n        true: \"min-w-10 max-w-10 justify-center\",\n      },\n      outline: {\n        false: null,\n        true: \"\",\n      },\n      leading: {\n        false: null,\n      },\n      theme: {\n        base: \"[--background:var(--color-brand-midnight-900)] [--foreground:var(--color-text-text-reversed)]\",\n        brand:\n          \"[--background:var(--color-foreground)] [--foreground:var(--color-background)]\",\n        error: \"\",\n      },\n      trailing: {\n        false: null,\n      },\n      variant: {\n        default: \"hover:bg-background/90\",\n        outline: \"backdrop-blur-lg \",\n        primary: \"bg-primary-foreground/0 backdrop-blur-lg text-primary\",\n        secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n        tertiary:\n          \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n      },\n      pill: {\n        false: \"rounded-xs\",\n        true: \"rounded-full\",\n      },\n      size: {\n        default:\n          \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n        lg: \"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]\",\n      },\n    },\n    defaultVariants: {\n      align: \"center\",\n      pill: false,\n      size: \"default\",\n      theme: \"brand\",\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        pill: true,\n        size: \"default\",\n        class: \"min-w-10 min-h-10 px-4\",\n      },\n      {\n        pill: true,\n        collapsed: true,\n        class: \"max-w-10\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        class: \"min-w-12 min-h-12 px-4\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        collapsed: true,\n        class: \"max-w-[54px] max-h-12\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        align: \"left\",\n        pill: false,\n        class: \"pr-3 pl-2\",\n      },\n      {\n        align: \"center\",\n        collapsed: false,\n        size: \"default\",\n        pill: false,\n        class: \"px-3\",\n      },\n      {\n        leading: true,\n        pill: false,\n        align: \"left\",\n        size: \"default\",\n        class: \"pr-3 pl-2\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        pill: true,\n        class: \"px-4\",\n      },\n      {\n        size: \"lg\",\n        pill: true,\n        collapsed: false,\n        class: \"px-4\",\n      },\n      {\n        variant: \"primary\",\n        outline: true,\n        class:\n          \"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1\",\n      },\n      {\n        variant: \"secondary\",\n        outline: true,\n        class:\n          \"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n      },\n      {\n        variant: \"primary\",\n        theme: \"error\",\n        class:\n          \"[--background:var(--color-error-100)] [--foreground:var(--color-text-text-default)]\",\n      },\n      {\n        variant: \"tertiary\",\n        theme: \"error\",\n        class:\n          \"[--background:transparent] [--foreground:var(--color-error-700)]\",\n      },\n    ],\n  }\n);\n\nconst tintVariants = cva(\n  \"absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]\",\n  {\n    variants: {\n      outline: {\n        false: null,\n      },\n      variant: {\n        default: \"\",\n        outline: \"\",\n        primary:\n          \"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0\",\n        secondary:\n          \"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default\",\n        tertiary:\n          \"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed\",\n      },\n    },\n    defaultVariants: {\n      outline: false,\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        outline: true,\n        variant: \"primary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n      {\n        outline: true,\n        variant: \"secondary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n    ],\n  }\n);\n\nfunction Button({\n  className,\n  children,\n  collapsed = false,\n  variant = \"default\",\n  size = \"default\",\n  align = \"center\",\n  outline = false,\n  pill = false,\n  theme = \"brand\",\n  leadingElement,\n  trailingElement,\n  ...props\n}: ButtonPrimitive.Props &\n  VariantProps<typeof buttonVariants> & {\n    leadingElement?: React.ReactNode;\n    trailingElement?: React.ReactNode;\n  }) {\n  const buttonProps = {\n    variant,\n    size,\n    align,\n    outline,\n    collapsed,\n    pill,\n    leading: leadingElement != null,\n    theme,\n    trailing: trailingElement != null,\n  };\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants(buttonProps), className)}\n      {...props}\n    >\n      {/* Tint */}\n      <div\n        className={cn(tintVariants({ variant, outline: outline ?? false }))}\n      ></div>\n      {leadingElement && <>{leadingElement}</>}\n      {children}\n      {trailingElement && <>{trailingElement}</>}\n    </ButtonPrimitive>\n  );\n}\n\nexport { Button, buttonVariants };\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/button/button.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","cva","tintVariants","Button","className","children","collapsed","variant","size","align","outline","pill","theme","leadingElement","trailingElement","props","buttonProps","buttonClassName","jsxs","ButtonPrimitive","jsx","Fragment"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none\",\n  {\n    variants: {\n      align: {\n        left: \"justify-start\",\n        center: \"justify-center\",\n        right: \"justify-end\",\n      },\n      collapsed: {\n        false: null,\n        true: \"min-w-10 max-w-10 justify-center\",\n      },\n      outline: {\n        false: null,\n        true: \"\",\n      },\n      leading: {\n        false: null,\n      },\n      theme: {\n        base: \"bg-foreground text-background\",\n        brand: \"bg-primary-foreground text-primary\",\n        error: \"\",\n      },\n      trailing: {\n        false: null,\n      },\n      variant: {\n        default: \"hover:bg-background/90\",\n        outline: \"backdrop-blur-lg \",\n        primary: \"bg-primary-foreground/0 backdrop-blur-lg text-primary\",\n        secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n        tertiary:\n          \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n      },\n      pill: {\n        false: \"rounded-xs\",\n        true: \"rounded-full\",\n      },\n      size: {\n        default:\n          \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n        lg: \"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]\",\n      },\n    },\n    defaultVariants: {\n      align: \"center\",\n      pill: false,\n      size: \"default\",\n      theme: \"brand\",\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        pill: true,\n        size: \"default\",\n        class: \"min-w-10 min-h-10 px-4\",\n      },\n      {\n        pill: true,\n        collapsed: true,\n        class: \"max-w-10\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        class: \"min-w-12 min-h-12 px-4\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        collapsed: true,\n        class: \"max-w-[54px] max-h-12\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        align: \"left\",\n        pill: false,\n        class: \"pr-3 pl-2\",\n      },\n      {\n        align: \"center\",\n        collapsed: false,\n        size: \"default\",\n        pill: false,\n        class: \"px-3\",\n      },\n      {\n        leading: true,\n        pill: false,\n        align: \"left\",\n        size: \"default\",\n        class: \"pr-3 pl-2\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        pill: true,\n        class: \"px-4\",\n      },\n      {\n        size: \"lg\",\n        pill: true,\n        collapsed: false,\n        class: \"px-4\",\n      },\n      {\n        variant: \"primary\",\n        outline: true,\n        class:\n          \"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1\",\n      },\n      {\n        variant: \"primary\",\n        theme: \"brand\",\n        class:\n          \"bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary\",\n      },\n      {\n        variant: \"secondary\",\n        outline: true,\n        class:\n          \"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n      },\n      {\n        variant: \"primary\",\n        theme: \"error\",\n        class: \"bg-destructive text-foreground\",\n      },\n      {\n        variant: \"tertiary\",\n        theme: \"error\",\n        class: \"bg-transparent text-destructive\",\n      },\n    ],\n  }\n);\n\nconst tintVariants = cva(\n  \"absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]\",\n  {\n    variants: {\n      outline: {\n        false: null,\n      },\n      variant: {\n        default: \"\",\n        outline: \"\",\n        primary:\n          \"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0\",\n        secondary:\n          \"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default\",\n        tertiary:\n          \"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed\",\n      },\n    },\n    defaultVariants: {\n      outline: false,\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        outline: true,\n        variant: \"primary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n      {\n        outline: true,\n        variant: \"secondary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n    ],\n  }\n);\n\nfunction Button({\n  className,\n  children,\n  collapsed = false,\n  variant = \"default\",\n  size = \"default\",\n  align = \"center\",\n  outline = false,\n  pill = false,\n  theme = \"brand\",\n  leadingElement,\n  trailingElement,\n  ...props\n}: ButtonPrimitive.Props &\n  VariantProps<typeof buttonVariants> & {\n    leadingElement?: React.ReactNode;\n    trailingElement?: React.ReactNode;\n  }) {\n  const buttonProps = {\n    variant,\n    size,\n    align,\n    outline,\n    collapsed,\n    pill,\n    leading: leadingElement != null,\n    theme,\n    trailing: trailingElement != null,\n  };\n\n  const buttonClassName = buttonVariants(buttonProps);\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonClassName, className)}\n      {...props}\n    >\n      {/* Tint */}\n      <div className={cn(tintVariants({ variant, outline }))}></div>\n      {leadingElement && <>{leadingElement}</>}\n      {children}\n      {trailingElement && <>{trailingElement}</>}\n    </ButtonPrimitive>\n  );\n}\n\nexport { Button, buttonVariants };\n"]}

package/dist/index.js

@@ -1,2 +1,2 @@
-import {Button}from'@base-ui/react/button';import {cva}from'class-variance-authority';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function a(...e){return twMerge(clsx(e))}var n=cva("inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none",{variants:{align:{left:"justify-start",center:"justify-center",right:"justify-end"},collapsed:{false:null,true:"min-w-10 max-w-10 justify-center"},outline:{false:null,true:""},leading:{false:null},theme:{base:"[--background:var(--color-brand-midnight-900)] [--foreground:var(--color-text-text-reversed)]",brand:"[--background:var(--color-foreground)] [--foreground:var(--color-background)]",error:""},trailing:{false:null},variant:{default:"hover:bg-background/90",outline:"backdrop-blur-lg ",primary:"bg-primary-foreground/0 backdrop-blur-lg text-primary",secondary:"bg-secondary-foreground/0 backdrop-blur-lg text-secondary",tertiary:"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]"},pill:{false:"rounded-xs",true:"rounded-full"},size:{default:"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]",lg:"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]"}},defaultVariants:{align:"center",pill:false,size:"default",theme:"brand",variant:"default"},compoundVariants:[{pill:true,size:"default",class:"min-w-10 min-h-10 px-4"},{pill:true,collapsed:true,class:"max-w-10"},{pill:true,size:"lg",class:"min-w-12 min-h-12 px-4"},{pill:true,size:"lg",collapsed:true,class:"max-w-[54px] max-h-12"},{collapsed:false,size:"default",align:"left",pill:false,class:"pr-3 pl-2"},{align:"center",collapsed:false,size:"default",pill:false,class:"px-3"},{leading:true,pill:false,align:"left",size:"default",class:"pr-3 pl-2"},{collapsed:false,size:"default",pill:true,class:"px-4"},{size:"lg",pill:true,collapsed:false,class:"px-4"},{variant:"primary",outline:true,class:"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1"},{variant:"secondary",outline:true,class:"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md"},{variant:"primary",theme:"error",class:"[--background:var(--color-error-100)] [--foreground:var(--color-text-text-default)]"},{variant:"tertiary",theme:"error",class:"[--background:transparent] [--foreground:var(--color-error-700)]"}]}),z=cva("absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]",{variants:{outline:{false:null},variant:{default:"",outline:"",primary:"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0",secondary:"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default",tertiary:"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed"}},defaultVariants:{outline:false,variant:"default"},compoundVariants:[{outline:true,variant:"primary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"},{outline:true,variant:"secondary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"}]});function d({className:e,children:g,collapsed:b=false,variant:l="default",size:c="default",align:f="center",outline:o=false,pill:v=false,theme:p="brand",leadingElement:r,trailingElement:t,...m}){let x={variant:l,size:c,align:f,outline:o,collapsed:b,pill:v,leading:r!=null,theme:p,trailing:t!=null};return jsxs(Button,{"data-slot":"button",className:a(n(x),e),...m,children:[jsx("div",{className:a(z({variant:l,outline:o??false}))}),r&&jsx(Fragment,{children:r}),g,t&&jsx(Fragment,{children:t})]})}export{d as Button,n as buttonVariants};//# sourceMappingURL=index.js.map
+import {Button}from'@base-ui/react/button';import {cva}from'class-variance-authority';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx,Fragment}from'react/jsx-runtime';function i(...e){return twMerge(clsx(e))}var n=cva("inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none",{variants:{align:{left:"justify-start",center:"justify-center",right:"justify-end"},collapsed:{false:null,true:"min-w-10 max-w-10 justify-center"},outline:{false:null,true:""},leading:{false:null},theme:{base:"bg-foreground text-background",brand:"bg-primary-foreground text-primary",error:""},trailing:{false:null},variant:{default:"hover:bg-background/90",outline:"backdrop-blur-lg ",primary:"bg-primary-foreground/0 backdrop-blur-lg text-primary",secondary:"bg-secondary-foreground/0 backdrop-blur-lg text-secondary",tertiary:"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]"},pill:{false:"rounded-xs",true:"rounded-full"},size:{default:"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]",lg:"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]"}},defaultVariants:{align:"center",pill:false,size:"default",theme:"brand",variant:"default"},compoundVariants:[{pill:true,size:"default",class:"min-w-10 min-h-10 px-4"},{pill:true,collapsed:true,class:"max-w-10"},{pill:true,size:"lg",class:"min-w-12 min-h-12 px-4"},{pill:true,size:"lg",collapsed:true,class:"max-w-[54px] max-h-12"},{collapsed:false,size:"default",align:"left",pill:false,class:"pr-3 pl-2"},{align:"center",collapsed:false,size:"default",pill:false,class:"px-3"},{leading:true,pill:false,align:"left",size:"default",class:"pr-3 pl-2"},{collapsed:false,size:"default",pill:true,class:"px-4"},{size:"lg",pill:true,collapsed:false,class:"px-4"},{variant:"primary",outline:true,class:"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1"},{variant:"primary",theme:"brand",class:"bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary"},{variant:"secondary",outline:true,class:"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md"},{variant:"primary",theme:"error",class:"bg-destructive text-foreground"},{variant:"tertiary",theme:"error",class:"bg-transparent text-destructive"}]}),V=cva("absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]",{variants:{outline:{false:null},variant:{default:"",outline:"",primary:"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0",secondary:"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default",tertiary:"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed"}},defaultVariants:{outline:false,variant:"default"},compoundVariants:[{outline:true,variant:"primary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"},{outline:true,variant:"secondary",class:"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed"}]});function d({className:e,children:g,collapsed:b=false,variant:s="default",size:c="default",align:f="center",outline:l=false,pill:p=false,theme:v="brand",leadingElement:t,trailingElement:r,...m}){let x={variant:s,size:c,align:f,outline:l,collapsed:b,pill:p,leading:t!=null,theme:v,trailing:r!=null},y=n(x);return jsxs(Button,{"data-slot":"button",className:i(y,e),...m,children:[jsx("div",{className:i(V({variant:s,outline:l}))}),t&&jsx(Fragment,{children:t}),g,r&&jsx(Fragment,{children:r})]})}export{d as Button,n as buttonVariants};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/button/button.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","cva","tintVariants","Button","className","children","collapsed","variant","size","align","outline","pill","theme","leadingElement","trailingElement","props","buttonProps","jsxs","ButtonPrimitive","jsx","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none\",\n  {\n    variants: {\n      align: {\n        left: \"justify-start\",\n        center: \"justify-center\",\n        right: \"justify-end\",\n      },\n      collapsed: {\n        false: null,\n        true: \"min-w-10 max-w-10 justify-center\",\n      },\n      outline: {\n        false: null,\n        true: \"\",\n      },\n      leading: {\n        false: null,\n      },\n      theme: {\n        base: \"[--background:var(--color-brand-midnight-900)] [--foreground:var(--color-text-text-reversed)]\",\n        brand:\n          \"[--background:var(--color-foreground)] [--foreground:var(--color-background)]\",\n        error: \"\",\n      },\n      trailing: {\n        false: null,\n      },\n      variant: {\n        default: \"hover:bg-background/90\",\n        outline: \"backdrop-blur-lg \",\n        primary: \"bg-primary-foreground/0 backdrop-blur-lg text-primary\",\n        secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n        tertiary:\n          \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n      },\n      pill: {\n        false: \"rounded-xs\",\n        true: \"rounded-full\",\n      },\n      size: {\n        default:\n          \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n        lg: \"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]\",\n      },\n    },\n    defaultVariants: {\n      align: \"center\",\n      pill: false,\n      size: \"default\",\n      theme: \"brand\",\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        pill: true,\n        size: \"default\",\n        class: \"min-w-10 min-h-10 px-4\",\n      },\n      {\n        pill: true,\n        collapsed: true,\n        class: \"max-w-10\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        class: \"min-w-12 min-h-12 px-4\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        collapsed: true,\n        class: \"max-w-[54px] max-h-12\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        align: \"left\",\n        pill: false,\n        class: \"pr-3 pl-2\",\n      },\n      {\n        align: \"center\",\n        collapsed: false,\n        size: \"default\",\n        pill: false,\n        class: \"px-3\",\n      },\n      {\n        leading: true,\n        pill: false,\n        align: \"left\",\n        size: \"default\",\n        class: \"pr-3 pl-2\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        pill: true,\n        class: \"px-4\",\n      },\n      {\n        size: \"lg\",\n        pill: true,\n        collapsed: false,\n        class: \"px-4\",\n      },\n      {\n        variant: \"primary\",\n        outline: true,\n        class:\n          \"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1\",\n      },\n      {\n        variant: \"secondary\",\n        outline: true,\n        class:\n          \"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n      },\n      {\n        variant: \"primary\",\n        theme: \"error\",\n        class:\n          \"[--background:var(--color-error-100)] [--foreground:var(--color-text-text-default)]\",\n      },\n      {\n        variant: \"tertiary\",\n        theme: \"error\",\n        class:\n          \"[--background:transparent] [--foreground:var(--color-error-700)]\",\n      },\n    ],\n  }\n);\n\nconst tintVariants = cva(\n  \"absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]\",\n  {\n    variants: {\n      outline: {\n        false: null,\n      },\n      variant: {\n        default: \"\",\n        outline: \"\",\n        primary:\n          \"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0\",\n        secondary:\n          \"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default\",\n        tertiary:\n          \"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed\",\n      },\n    },\n    defaultVariants: {\n      outline: false,\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        outline: true,\n        variant: \"primary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n      {\n        outline: true,\n        variant: \"secondary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n    ],\n  }\n);\n\nfunction Button({\n  className,\n  children,\n  collapsed = false,\n  variant = \"default\",\n  size = \"default\",\n  align = \"center\",\n  outline = false,\n  pill = false,\n  theme = \"brand\",\n  leadingElement,\n  trailingElement,\n  ...props\n}: ButtonPrimitive.Props &\n  VariantProps<typeof buttonVariants> & {\n    leadingElement?: React.ReactNode;\n    trailingElement?: React.ReactNode;\n  }) {\n  const buttonProps = {\n    variant,\n    size,\n    align,\n    outline,\n    collapsed,\n    pill,\n    leading: leadingElement != null,\n    theme,\n    trailing: trailingElement != null,\n  };\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants(buttonProps), className)}\n      {...props}\n    >\n      {/* Tint */}\n      <div\n        className={cn(tintVariants({ variant, outline: outline ?? false }))}\n      ></div>\n      {leadingElement && <>{leadingElement}</>}\n      {children}\n      {trailingElement && <>{trailingElement}</>}\n    </ButtonPrimitive>\n  );\n}\n\nexport { Button, buttonVariants };\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/button/button.tsx"],"names":["cn","inputs","twMerge","clsx","buttonVariants","cva","tintVariants","Button","className","children","collapsed","variant","size","align","outline","pill","theme","leadingElement","trailingElement","props","buttonProps","buttonClassName","jsxs","ButtonPrimitive","jsx","Fragment"],"mappings":"qMAGO,SAASA,CAAAA,CAAAA,GAAMC,EAAsB,CAC1C,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCAA,IAAMG,CAAAA,CAAiBC,GAAAA,CACrB,wPACA,CACE,QAAA,CAAU,CACR,KAAA,CAAO,CACL,KAAM,eAAA,CACN,MAAA,CAAQ,gBAAA,CACR,KAAA,CAAO,aACT,CAAA,CACA,UAAW,CACT,KAAA,CAAO,KACP,IAAA,CAAM,kCACR,EACA,OAAA,CAAS,CACP,KAAA,CAAO,IAAA,CACP,IAAA,CAAM,EACR,EACA,OAAA,CAAS,CACP,MAAO,IACT,CAAA,CACA,MAAO,CACL,IAAA,CAAM,+BAAA,CACN,KAAA,CAAO,oCAAA,CACP,KAAA,CAAO,EACT,CAAA,CACA,QAAA,CAAU,CACR,KAAA,CAAO,IACT,EACA,OAAA,CAAS,CACP,OAAA,CAAS,wBAAA,CACT,OAAA,CAAS,mBAAA,CACT,QAAS,uDAAA,CACT,SAAA,CAAW,2DAAA,CACX,QAAA,CACE,gFACJ,CAAA,CACA,KAAM,CACJ,KAAA,CAAO,YAAA,CACP,IAAA,CAAM,cACR,CAAA,CACA,KAAM,CACJ,OAAA,CACE,4EACF,EAAA,CAAI,mEACN,CACF,CAAA,CACA,eAAA,CAAiB,CACf,KAAA,CAAO,QAAA,CACP,IAAA,CAAM,MACN,IAAA,CAAM,SAAA,CACN,MAAO,OAAA,CACP,OAAA,CAAS,SACX,CAAA,CACA,gBAAA,CAAkB,CAChB,CACE,IAAA,CAAM,IAAA,CACN,KAAM,SAAA,CACN,KAAA,CAAO,wBACT,CAAA,CACA,CACE,KAAM,IAAA,CACN,SAAA,CAAW,IAAA,CACX,KAAA,CAAO,UACT,CAAA,CACA,CACE,IAAA,CAAM,IAAA,CACN,IAAA,CAAM,IAAA,CACN,KAAA,CAAO,wBACT,EACA,CACE,IAAA,CAAM,IAAA,CACN,IAAA,CAAM,IAAA,CACN,SAAA,CAAW,KACX,KAAA,CAAO,uBACT,EACA,CACE,SAAA,CAAW,MACX,IAAA,CAAM,SAAA,CACN,KAAA,CAAO,MAAA,CACP,IAAA,CAAM,KAAA,CACN,MAAO,WACT,CAAA,CACA,CACE,KAAA,CAAO,QAAA,CACP,UAAW,KAAA,CACX,IAAA,CAAM,SAAA,CACN,IAAA,CAAM,KAAA,CACN,KAAA,CAAO,MACT,CAAA,CACA,CACE,QAAS,IAAA,CACT,IAAA,CAAM,MACN,KAAA,CAAO,MAAA,CACP,IAAA,CAAM,SAAA,CACN,KAAA,CAAO,WACT,EACA,CACE,SAAA,CAAW,KAAA,CACX,IAAA,CAAM,SAAA,CACN,IAAA,CAAM,KACN,KAAA,CAAO,MACT,CAAA,CACA,CACE,IAAA,CAAM,IAAA,CACN,KAAM,IAAA,CACN,SAAA,CAAW,MACX,KAAA,CAAO,MACT,EACA,CACE,OAAA,CAAS,SAAA,CACT,OAAA,CAAS,IAAA,CACT,KAAA,CACE,uOACJ,CAAA,CACA,CACE,QAAS,SAAA,CACT,KAAA,CAAO,QACP,KAAA,CACE,mMACJ,CAAA,CACA,CACE,OAAA,CAAS,WAAA,CACT,QAAS,IAAA,CACT,KAAA,CACE,kKACJ,CAAA,CACA,CACE,QAAS,SAAA,CACT,KAAA,CAAO,OAAA,CACP,KAAA,CAAO,gCACT,CAAA,CACA,CACE,OAAA,CAAS,UAAA,CACT,KAAA,CAAO,OAAA,CACP,KAAA,CAAO,iCACT,CACF,CACF,CACF,CAAA,CAEMC,CAAAA,CAAeD,GAAAA,CACnB,wTAAA,CACA,CACE,QAAA,CAAU,CACR,QAAS,CACP,KAAA,CAAO,IACT,CAAA,CACA,OAAA,CAAS,CACP,OAAA,CAAS,EAAA,CACT,OAAA,CAAS,GACT,OAAA,CACE,4MAAA,CACF,UACE,yIAAA,CACF,QAAA,CACE,6IACJ,CACF,CAAA,CACA,eAAA,CAAiB,CACf,OAAA,CAAS,KAAA,CACT,QAAS,SACX,CAAA,CACA,iBAAkB,CAChB,CACE,QAAS,IAAA,CACT,OAAA,CAAS,SAAA,CACT,KAAA,CACE,6IACJ,CAAA,CACA,CACE,OAAA,CAAS,IAAA,CACT,OAAA,CAAS,WAAA,CACT,KAAA,CACE,6IACJ,CACF,CACF,CACF,EAEA,SAASE,CAAAA,CAAO,CACd,UAAAC,CAAAA,CACA,QAAA,CAAAC,EACA,SAAA,CAAAC,CAAAA,CAAY,MACZ,OAAA,CAAAC,CAAAA,CAAU,SAAA,CACV,IAAA,CAAAC,CAAAA,CAAO,SAAA,CACP,MAAAC,CAAAA,CAAQ,QAAA,CACR,QAAAC,CAAAA,CAAU,KAAA,CACV,KAAAC,CAAAA,CAAO,KAAA,CACP,KAAA,CAAAC,CAAAA,CAAQ,OAAA,CACR,cAAA,CAAAC,EACA,eAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CAIK,CACH,IAAMC,CAAAA,CAAc,CAClB,OAAA,CAAAT,CAAAA,CACA,IAAA,CAAAC,EACA,KAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CACA,SAAA,CAAAJ,CAAAA,CACA,KAAAK,CAAAA,CACA,OAAA,CAASE,CAAAA,EAAkB,IAAA,CAC3B,KAAA,CAAAD,CAAAA,CACA,SAAUE,CAAAA,EAAmB,IAC/B,EAEMG,CAAAA,CAAkBjB,CAAAA,CAAegB,CAAW,CAAA,CAElD,OACEE,IAAAA,CAACC,MAAAA,CAAA,CACC,WAAA,CAAU,SACV,SAAA,CAAWvB,CAAAA,CAAGqB,EAAiBb,CAAS,CAAA,CACvC,GAAGW,CAAAA,CAGJ,QAAA,CAAA,CAAAK,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAWxB,CAAAA,CAAGM,EAAa,CAAE,OAAA,CAAAK,EAAS,OAAA,CAAAG,CAAQ,CAAC,CAAC,CAAA,CAAG,CAAA,CACvDG,CAAAA,EAAkBO,GAAAA,CAAAC,QAAAA,CAAA,CAAG,QAAA,CAAAR,CAAAA,CAAe,CAAA,CACpCR,CAAAA,CACAS,CAAAA,EAAmBM,GAAAA,CAAAC,SAAA,CAAG,QAAA,CAAAP,CAAAA,CAAgB,CAAA,CAAA,CACzC,CAEJ","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none\",\n  {\n    variants: {\n      align: {\n        left: \"justify-start\",\n        center: \"justify-center\",\n        right: \"justify-end\",\n      },\n      collapsed: {\n        false: null,\n        true: \"min-w-10 max-w-10 justify-center\",\n      },\n      outline: {\n        false: null,\n        true: \"\",\n      },\n      leading: {\n        false: null,\n      },\n      theme: {\n        base: \"bg-foreground text-background\",\n        brand: \"bg-primary-foreground text-primary\",\n        error: \"\",\n      },\n      trailing: {\n        false: null,\n      },\n      variant: {\n        default: \"hover:bg-background/90\",\n        outline: \"backdrop-blur-lg \",\n        primary: \"bg-primary-foreground/0 backdrop-blur-lg text-primary\",\n        secondary: \"bg-secondary-foreground/0 backdrop-blur-lg text-secondary\",\n        tertiary:\n          \"bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]\",\n      },\n      pill: {\n        false: \"rounded-xs\",\n        true: \"rounded-full\",\n      },\n      size: {\n        default:\n          \"h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]\",\n        lg: \"h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]\",\n      },\n    },\n    defaultVariants: {\n      align: \"center\",\n      pill: false,\n      size: \"default\",\n      theme: \"brand\",\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        pill: true,\n        size: \"default\",\n        class: \"min-w-10 min-h-10 px-4\",\n      },\n      {\n        pill: true,\n        collapsed: true,\n        class: \"max-w-10\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        class: \"min-w-12 min-h-12 px-4\",\n      },\n      {\n        pill: true,\n        size: \"lg\",\n        collapsed: true,\n        class: \"max-w-[54px] max-h-12\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        align: \"left\",\n        pill: false,\n        class: \"pr-3 pl-2\",\n      },\n      {\n        align: \"center\",\n        collapsed: false,\n        size: \"default\",\n        pill: false,\n        class: \"px-3\",\n      },\n      {\n        leading: true,\n        pill: false,\n        align: \"left\",\n        size: \"default\",\n        class: \"pr-3 pl-2\",\n      },\n      {\n        collapsed: false,\n        size: \"default\",\n        pill: true,\n        class: \"px-4\",\n      },\n      {\n        size: \"lg\",\n        pill: true,\n        collapsed: false,\n        class: \"px-4\",\n      },\n      {\n        variant: \"primary\",\n        outline: true,\n        class:\n          \"ring ring-background bg-background/0 text-background hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:outline-background focus-visible:bg-background/1\",\n      },\n      {\n        variant: \"primary\",\n        theme: \"brand\",\n        class:\n          \"bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary\",\n      },\n      {\n        variant: \"secondary\",\n        outline: true,\n        class:\n          \"bg-background/0 ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md\",\n      },\n      {\n        variant: \"primary\",\n        theme: \"error\",\n        class: \"bg-destructive text-foreground\",\n      },\n      {\n        variant: \"tertiary\",\n        theme: \"error\",\n        class: \"bg-transparent text-destructive\",\n      },\n    ],\n  }\n);\n\nconst tintVariants = cva(\n  \"absolute inset-0 transition-all group-focus-visible/button:border-ring-3 group-focus-visible/button:ring-ring/60 group-focus-visible/button:ring-[3px] group-aria-invalid/button:ring-destructive/20 dark:group-aria-invalid/button:ring-destructive/40 group-aria-invalid/button:border-destructive rounded-[inherit]\",\n  {\n    variants: {\n      outline: {\n        false: null,\n      },\n      variant: {\n        default: \"\",\n        outline: \"\",\n        primary:\n          \"bg-tint-700-reversed/0 hover:bg-tint-700-reversed hover:bg-tint-700-reversed active:bg-tint-700-reversed/0 disabled:bg-tint-700-reversed disabled:bg-tint-900-default focus-visible:bg-tint-700-reversed/0\",\n        secondary:\n          \"bg-tint-900-default hover:bg-tint-800-default active:bg-tint-900-default disabled:bg-tint-900-default focus-visible:bg-tint-800-default\",\n        tertiary:\n          \"bg-tint-950-reversed hover:bg-tint-900-default active:bg-tint-950-reversed disabled:bg-tint-950-reversed focus-visible:bg-tint-950-reversed\",\n      },\n    },\n    defaultVariants: {\n      outline: false,\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        outline: true,\n        variant: \"primary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n      {\n        outline: true,\n        variant: \"secondary\",\n        class:\n          \"bg-tint-950-reversed hover:bg-tint-950-reversed active:bg-tint-950-reversed disabled:bg-tint-900-default focus-visible:bg-tint-950-reversed\",\n      },\n    ],\n  }\n);\n\nfunction Button({\n  className,\n  children,\n  collapsed = false,\n  variant = \"default\",\n  size = \"default\",\n  align = \"center\",\n  outline = false,\n  pill = false,\n  theme = \"brand\",\n  leadingElement,\n  trailingElement,\n  ...props\n}: ButtonPrimitive.Props &\n  VariantProps<typeof buttonVariants> & {\n    leadingElement?: React.ReactNode;\n    trailingElement?: React.ReactNode;\n  }) {\n  const buttonProps = {\n    variant,\n    size,\n    align,\n    outline,\n    collapsed,\n    pill,\n    leading: leadingElement != null,\n    theme,\n    trailing: trailingElement != null,\n  };\n\n  const buttonClassName = buttonVariants(buttonProps);\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonClassName, className)}\n      {...props}\n    >\n      {/* Tint */}\n      <div className={cn(tintVariants({ variant, outline }))}></div>\n      {leadingElement && <>{leadingElement}</>}\n      {children}\n      {trailingElement && <>{trailingElement}</>}\n    </ButtonPrimitive>\n  );\n}\n\nexport { Button, buttonVariants };\n"]}

package/dist/theme.css

@@ -9,76 +9,88 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.58 0.22 27);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
   --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --background: var(--background, oklch(1 0 0));
+  --foreground: var(--foreground, oklch(0 0 0));
+  --card: var(--card, oklch(1 0 0));
+  --card-foreground: var(--card-foreground, oklch(0.145 0 0));
+  --popover: var(--popover, oklch(1 0 0));
+  --popover-foreground: var(--popover-foreground, oklch(0 0 0));
+  --primary: var(--primary, oklch(0.205 0 0));
+  --primary-foreground: var(--primary-foreground, oklch(0.985 0 0));
+  --secondary: var(--secondary, oklch(0.97 0 0));
+  --secondary-foreground: var(--secondary-foreground, oklch(0.205 0 0));
+  --muted: var(--muted, oklch(0.97 0 0));
+  --muted-foreground: var(--muted-foreground, oklch(0.48 0.007 255.43));
+  --accent: var(--accent, oklch(0.97 0 0));
+  --accent-foreground: var(--accent-foreground, oklch(0.205 0 0));
+  --destructive: var(--destructive, oklch(0.577 0.245 27.325));
+  --border: var(--border, oklch(0.1101 0.0763 264.05 / 10.2%));
+  --input: var(--input, oklch(0.922 0 0));
+  --ring: var(--ring, oklch(0.5367 0.2286 262.17));
+  --chart-1: var(--chart-1, oklch(0.646 0.222 41.116));
+  --chart-2: var(--chart-2, oklch(0.6 0.118 184.704));
+  --chart-3: var(--chart-3, oklch(0.398 0.07 227.392));
+  --chart-4: var(--chart-4, oklch(0.828 0.189 84.429));
+  --chart-5: var(--chart-5, oklch(0.769 0.188 70.08));
+  --sidebar: var(--sidebar, oklch(0.985 0 0));
+  --sidebar-foreground: var(--sidebar-foreground, oklch(0.145 0 0));
+  --sidebar-primary: var(--sidebar-primary, oklch(0.205 0 0));
+  --sidebar-primary-foreground: var(
+    --sidebar-primary-foreground,
+    oklch(0.985 0 0)
+  );
+  --sidebar-accent: var(--sidebar-accent, oklch(0.97 0 0));
+  --sidebar-accent-foreground: var(
+    --sidebar-accent-foreground,
+    oklch(0.205 0 0)
+  );
+  --sidebar-border: var(--sidebar-border, oklch(0.922 0 0));
+  --sidebar-ring: var(--sidebar-ring, oklch(0.708 0 0));
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.87 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: var(--background, oklch(0.15 0.03 255.43));
+  --foreground: var(--foreground, oklch(0.66 0.006 255.43));
+  --card: var(--card, oklch(0.205 0 0));
+  --card-foreground: var(--card-foreground, oklch(0.985 0 0));
+  --popover: var(--popover, oklch(0.15 0.03 255.43));
+  --popover-foreground: var(--popover-foreground, oklch(0.66 0.006 255.43));
+  --primary: var(--primary, oklch(0.922 0 0));
+  --primary-foreground: var(--primary-foreground, oklch(0.205 0 0));
+  --secondary: var(--secondary, oklch(0.269 0 0));
+  --secondary-foreground: var(--secondary-foreground, oklch(0.985 0 0));
+  --muted: var(--muted, oklch(0.269 0 0));
+  --muted-foreground: var(--muted-foreground, oklch(0.66 0.006 255.43));
+  --accent: var(--accent, oklch(0.269 0 0));
+  --accent-foreground: var(--accent-foreground, oklch(0.985 0 0));
+  --destructive: var(--destructive, oklch(0.704 0.191 22.216));
+  --border: var(--border, oklch(1 0 0 / 10%));
+  --input: var(--input, oklch(1 0 0 / 15%));
+  --ring: var(--ring, oklch(0.5367 0.2286 262.17));
+  --chart-1: var(--chart-1, oklch(0.488 0.243 264.376));
+  --chart-2: var(--chart-2, oklch(0.696 0.17 162.48));
+  --chart-3: var(--chart-3, oklch(0.769 0.188 70.08));
+  --chart-4: var(--chart-4, oklch(0.627 0.265 303.9));
+  --chart-5: var(--chart-5, oklch(0.645 0.246 16.439));
+  --sidebar: var(--sidebar, oklch(0.205 0 0));
+  --sidebar-foreground: var(--sidebar-foreground, oklch(0.985 0 0));
+  --sidebar-primary: var(--sidebar-primary, oklch(0.488 0.243 264.376));
+  --sidebar-primary-foreground: var(
+    --sidebar-primary-foreground,
+    oklch(0.985 0 0)
+  );
+  --sidebar-accent: var(--sidebar-accent, oklch(0.269 0 0));
+  --sidebar-accent-foreground: var(
+    --sidebar-accent-foreground,
+    oklch(0.985 0 0)
+  );
+  --sidebar-border: var(--sidebar-border, oklch(1 0 0 / 10%));
+  --sidebar-ring: var(--sidebar-ring, oklch(0.556 0 0));
 }
 
 @theme inline {
-  --font-sans: "Poppins", sans-serif;
+  --font-sans: "Inter Variable", sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -119,6 +131,319 @@
   --radius-4xl: calc(var(--radius) + 16px);
 }
 
+/* ------------------------------------------------------------ */
+/* Brand theme settings */
+/* ------------------------------------------------------------ */
+
+:root {
+  --color-tint-700-reversed: var(--color-white-alpha-700);
+  --color-tint-800-default: var(--color-black-alpha-800);
+  --color-tint-900-default: var(--color-black-alpha-900);
+  --color-tint-950-reversed: var(--color-white-alpha-950);
+  --color-tint-950-default: var(--color-black-alpha-950);
+}
+
+.dark {
+  --color-tint-700-reversed: var(--color-black-alpha-700);
+  --color-tint-800-default: var(--color-white-alpha-800);
+  --color-tint-900-default: var(--color-white-alpha-900);
+  --color-tint-950-reversed: var(--color-black-alpha-950);
+  --color-tint-950-default: var(--color-white-alpha-950);
+}
+
+@theme inline {
+  /* Color: Tint */
+  --color-tint-700-reversed: var(--color-tint-700-reversed);
+  --color-tint-800-default: var(--color-tint-800-default);
+  --color-tint-900-default: var(--color-tint-900-default);
+  --color-tint-950-reversed: var(--color-tint-950-reversed);
+  --color-tint-950-default: var(--color-tint-950-default);
+}
+
+@theme {
+  --bg-image-checkerboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+
+  --animate-appear-then-fade: appear-then-fade 4s 300ms both;
+  --animate-fade-in: fade-in 150ms forwards;
+  --animate-fade-out: fade-out 150ms forwards;
+  --animate-shake: shake 150ms 2 linear;
+  --animate-smooth-bounce-in: smooth-bounce-in 800ms ease 1;
+  --animate-smooth-pulse: smooth-pulse 1200ms ease-in-out infinite;
+  --animate-notification-badge-ping: notification-badge-ping 1s
+    cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-glowing-border: glowing-border 3s linear infinite;
+
+  /* Color: Brand */
+  --color-brand-midnight-900: oklch(0.15 0.03 255.43);
+  --color-brand-midnight-800: oklch(0.19 0.05 255.43);
+  --color-brand-ocean-400: oklch(0.63 0.19 255.43);
+  --color-brand-ocean-100: oklch(0.91 0.05 255.43);
+  --color-brand-forest-900: oklch(0.31 0.12 165.43);
+  --color-brand-forest-700: oklch(0.45 0.15 165.43);
+  --color-brand-forest-100: oklch(0.97 0.04 165.43);
+  --color-brand-highlight-400: oklch(0.88 0.25 105.43);
+  --color-brand-pumpkin-500: oklch(0.62 0.18 45.43);
+  --color-brand-pumpkin-200: oklch(0.89 0.08 45.43);
+  --color-brand-lemon-300: oklch(0.91 0.12 85.43);
+  --color-brand-lemon-100: oklch(0.97 0.04 85.43);
+
+  /* Color: Black Alpha */
+  --color-black-alpha-25: rgb(0 0 32 / 0.98);
+  --color-black-alpha-50: rgb(0 0 32 / 0.96);
+  --color-black-alpha-100: rgb(0 0 32 / 0.94);
+  --color-black-alpha-200: rgb(0 0 32 / 0.92);
+  --color-black-alpha-300: rgb(0 0 32 / 0.8);
+  --color-black-alpha-400: rgb(0 0 32 / 0.56);
+  --color-black-alpha-500: rgb(0 0 32 / 0.5);
+  --color-black-alpha-600: rgb(0 0 32 / 0.35);
+  --color-black-alpha-700: rgb(0 0 32 / 0.16);
+  --color-black-alpha-800: rgb(0 0 32 / 0.08);
+  --color-black-alpha-900: rgb(0 0 32 / 0.04);
+  --color-black-alpha-950: rgb(0 0 32 / 0);
+
+  /* Color: White Alpha */
+  --color-white-alpha-25: rgb(255 255 255 / 0.98);
+  --color-white-alpha-50: rgb(255 255 255 / 0.96);
+  --color-white-alpha-100: rgb(255 255 255 / 0.94);
+  --color-white-alpha-200: rgb(255 255 255 / 0.92);
+  --color-white-alpha-300: rgb(255 255 255 / 0.8);
+  --color-white-alpha-400: rgb(255 255 255 / 0.56);
+  --color-white-alpha-500: rgb(255 255 255 / 0.5);
+  --color-white-alpha-600: rgb(255 255 255 / 0.35);
+  --color-white-alpha-700: rgb(255 255 255 / 0.16);
+  --color-white-alpha-800: rgb(255 255 255 / 0.08);
+  --color-white-alpha-900: rgb(255 255 255 / 0.04);
+  --color-white-alpha-950: rgb(255 255 255 / 0);
+
+  /* Color: Grayscale */
+  --color-grayscale-25: oklch(0.99 0.001 255.43);
+  --color-grayscale-50: oklch(0.98 0.002 255.43);
+  --color-grayscale-100: oklch(0.95 0.003 255.43);
+  --color-grayscale-200: oklch(0.91 0.004 255.43);
+  --color-grayscale-300: oklch(0.84 0.005 255.43);
+  --color-grayscale-400: oklch(0.66 0.006 255.43);
+  --color-grayscale-500: oklch(0.48 0.007 255.43);
+  --color-grayscale-600: oklch(0.36 0.008 255.43);
+  --color-grayscale-700: oklch(0.28 0.009 255.43);
+  --color-grayscale-800: oklch(0.19 0.01 255.43);
+  --color-grayscale-900: oklch(0.15 0.02 255.43);
+  --color-grayscale-950: oklch(0.11 0.02 255.43);
+
+  /* Color: Error */
+  --color-error-25: oklch(0.98 0.01 25.43);
+  --color-error-50: oklch(0.96 0.02 25.43);
+  --color-error-100: oklch(0.9394 0.0288 22.95);
+  --color-error-200: oklch(0.87 0.07 23.76);
+  --color-error-300: oklch(0.8014 0.1094 24.57);
+  --color-error-400: oklch(0.72 0.16 26.56);
+  --color-error-500: oklch(0.6371 0.2104 28.54);
+  --color-error-600: oklch(0.57 0.1963 29.03);
+  --color-error-700: oklch(0.5003 0.1821 29.51);
+  --color-error-800: oklch(0.42 0.16 29.51);
+  --color-error-900: oklch(0.35 0.14 29.51);
+  --color-error-950: oklch(0.22 0.11 29.51);
+
+  /* Color: Warning */
+  --color-warning-25: oklch(0.99 0.01 85.43);
+  --color-warning-50: oklch(0.98 0.02 85.43);
+  --color-warning-100: oklch(0.95 0.06 85.43);
+  --color-warning-200: oklch(0.89 0.12 85.43);
+  --color-warning-300: oklch(0.82 0.17 85.43);
+  --color-warning-400: oklch(0.74 0.2 85.43);
+  --color-warning-500: oklch(0.65 0.22 85.43);
+  --color-warning-600: oklch(0.55 0.23 85.43);
+  --color-warning-700: oklch(0.44 0.21 85.43);
+  --color-warning-800: oklch(0.35 0.19 85.43);
+  --color-warning-900: oklch(0.29 0.16 85.43);
+  --color-warning-950: oklch(0.18 0.13 85.43);
+
+  /* Color: Success */
+  --color-success-25: oklch(0.98 0.01 145.43);
+  --color-success-50: oklch(0.97 0.02 145.43);
+  --color-success-100: oklch(0.94 0.05 145.43);
+  --color-success-200: oklch(0.88 0.1 145.43);
+  --color-success-300: oklch(0.79 0.15 145.43);
+  --color-success-400: oklch(0.69 0.19 145.43);
+  --color-success-500: oklch(0.58 0.22 145.43);
+  --color-success-600: oklch(0.47 0.23 145.43);
+  --color-success-700: oklch(0.38 0.21 145.43);
+  --color-success-800: oklch(0.31 0.19 145.43);
+  --color-success-900: oklch(0.26 0.16 145.43);
+  --color-success-950: oklch(0.17 0.13 145.43);
+
+  /* Brand Font Settings */
+  --font--feature-settings: "kern" 1, "liga" 1, "calt" 1, "rlig" 1;
+  --font--variation-settings: "opsz" 14;
+
+  --font-decor: "Poppins", sans-serif;
+  --font-decor--feature-settings: "cv08", "ss01" 1, "ss03" 1, "kern" 1, "liga" 1;
+  --font-decor--variation-settings: "opsz" 32;
+
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Font Sizes */
+  /* Regular Text */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.125rem;
+  --text-xs--letter-spacing: 0rem;
+
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-sm--letter-spacing: 0rem;
+
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-base--letter-spacing: 0rem;
+
+  --text-md: var(--text-base);
+  --text-md--line-height: var(--text-base--line-height);
+  --text-md--letter-spacing: var(--text-base--letter-spacing);
+
+  --text-widget-base: 0.8125rem;
+  --text-widget-base--line-height: 1.125rem;
+  --text-widget-base--letter-spacing: -0.08px;
+
+  --text-widget-md: var(--text-widget-base);
+  --text-widget-md--line-height: var(--text-widget-base--line-height);
+  --text-widget-md--letter-spacing: var(--text-widget-base--letter-spacing);
+
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-lg--letter-spacing: 0rem;
+
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.875rem;
+  --text-xl--letter-spacing: 0rem;
+
+  /* Decorative Text */
+  --text-decor-xxs: 1.25rem;
+  --text-decor-xxs--line-height: 1.375rem;
+  --text-decor-xxs--letter-spacing: -0.025rem;
+  --text-decor-xxs--font-weight: 700;
+
+  --text-decor-xs: 1.5rem;
+  --text-decor-xs--line-height: 1.5rem;
+  --text-decor-xs--letter-spacing: -0.03rem;
+  --text-decor-xs--font-weight: 800;
+
+  --text-decor-sm: 1.875rem;
+  --text-decor-sm--line-height: 1.875rem;
+  --text-decor-sm--letter-spacing: -0.075rem;
+  --text-decor-sm--font-weight: 800;
+
+  --text-decor-md: 2.25rem;
+  --text-decor-md--line-height: 2.25rem;
+  --text-decor-md--letter-spacing: -0.09rem;
+  --text-decor-md--font-weight: 800;
+
+  --text-decor-lg: 3rem;
+  --text-decor-lg--line-height: 3rem;
+  --text-decor-lg--letter-spacing: -0.18rem;
+  --text-decor-lg--font-weight: 800;
+
+  --text-decor-xl: 3.75rem;
+  --text-decor-xl--line-height: 3.75rem;
+  --text-decor-xl--letter-spacing: -0.225rem;
+  --text-decor-xl--font-weight: 700;
+
+  --text-decor-2xl: 4.375rem;
+  --text-decor-2xl--line-height: 4.375rem;
+  --text-decor-2xl--letter-spacing: -0.2625rem;
+  --text-decor-2xl--font-weight: 800;
+
+  @keyframes shake {
+    0% {
+      transform: translate(3px, 0);
+    }
+    50% {
+      transform: translate(-3px, 0);
+    }
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+
+  @keyframes appear-then-fade {
+    0%, 100%: {
+      opacity: 0;
+    }
+    5%, 80%: {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in {
+    0%: {
+      opacity: 0;
+    }
+    100%: {
+      opacity: 100;
+    }
+  }
+
+  @keyframes fade-out {
+    0%: {
+      opacity: 100;
+    }
+    100%: {
+      opacity: 0;
+    }
+  }
+
+  @keyframes smooth-bounce-in {
+    0%: {
+      transform: scale(0.3);
+      opacity: 0;
+    }
+    50%: {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+    70%: {
+      transform: scale(0.9);
+    }
+    100%: {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes smooth-pulse {
+    100%: {
+      transform: scale(1.8);
+      opacity: 0;
+    }
+  }
+
+  @keyframes notification-badge-ping {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    75%,
+    100% {
+      transform: scale(1.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes glowing-border {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+}
+
+@utility scrollbar-stable {
+  scrollbar-gutter: stable;
+}
+
 /* Instruct Tailwind to scan this library's files when this CSS is imported */
 /* The path is relative to this CSS file's location in node_modules */
 @source "./**/*.{js,cjs}";

package/package.json

@@ -69,7 +69,7 @@
   "sideEffects": false,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "build": "tsup"
   }