@tan-ahmed/tan-ui-kit 0.1.5 → 0.1.6

package/README.md

@@ -1,20 +1,23 @@
 # @tan-ahmed/tan-ui-kit
 
-A React component library built with Tailwind CSS v4 and shadcn/ui components.
+A React component library built with Tailwind CSS v4 and base-ui components.
 
 ## Installation
 
 ### Recommended: Using pnpm
+
 ```bash
 pnpm add @tan-ahmed/tan-ui-kit
 ```
 
 ### Using yarn
+
 ```bash
 yarn add @tan-ahmed/tan-ui-kit
 ```
 
 ### Using npm
+
 ```bash
 npm install @tan-ahmed/tan-ui-kit
 ```
@@ -42,7 +45,7 @@ This package requires the following peer dependencies:
 Make sure to install these in your project:
 
 ```bash
-pnpm add react react-dom @radix-ui/react-slot class-variance-authority clsx tailwind-merge
+pnpm add @radix-ui/react-slot class-variance-authority clsx tailwind-merge
 ```
 
 ## Setup
@@ -50,7 +53,7 @@ pnpm add react react-dom @radix-ui/react-slot class-variance-authority clsx tail
 ### 1. Install Peer Dependencies
 
 ```bash
-pnpm add react react-dom @radix-ui/react-slot class-variance-authority clsx tailwind-merge tailwindcss@^4.0.0
+pnpm add @radix-ui/react-slot class-variance-authority clsx tailwind-merge tailwindcss@^4.0.0
 ```
 
 ### 2. Configure Tailwind CSS v4
@@ -67,23 +70,34 @@ This package uses **Tailwind CSS v4**. In your main CSS file (e.g., `src/index.c
 
 ### 3. Import the Component and Styles
 
+**Important:** Import the styles in your main entry point file:
+
+- **React (Vite/CRA)**: `src/main.tsx` or `src/index.tsx`
+- **Next.js (App Router)**: `app/layout.tsx` or `app/page.tsx`
+- **Next.js (Pages Router)**: `pages/_app.tsx`
+- **TanStack Start**: `app.tsx`
+- **Other frameworks**: Your main entry point file
+
 ```tsx
-import { Button } from '@tan-ahmed/tan-ui-kit'
-import '@tan-ahmed/tan-ui-kit/styles'
+// In your main entry point file (e.g., src/main.tsx, app.tsx, etc.)
+import "@tan-ahmed/tan-ui-kit/styles"; // ⚠️ Import this at the top of your entry file
+import { Button } from "@tan-ahmed/tan-ui-kit";
 
 function App() {
-  return <Button variant="destructive">Click me</Button>
+  return <Button variant="destructive">Click me</Button>;
 }
 ```
 
 ## Usage
 
+Import the styles once in your main entry point file (see Setup section above), then use components anywhere:
+
 ```tsx
-import { Button } from '@tan-ahmed/tan-ui-kit'
-import '@tan-ahmed/tan-ui-kit/styles'
+// In your component files, you only need to import the component
+import { Button } from "@tan-ahmed/tan-ui-kit";
 
-function App() {
-  return <Button variant="secondary">Click me</Button>
+function MyComponent() {
+  return <Button variant="secondary">Click me</Button>;
 }
 ```
 

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

@@ -1,12 +1,9 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA2BnB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAWX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA4BnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export { Button, buttonVariants } from './components/ui/button';
-export type { ButtonProps } from './components/ui/button';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC/D,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/tan-ui-kit.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),d=require("react"),l=require("@radix-ui/react-slot"),f=require("class-variance-authority"),g=require("clsx"),b=require("tailwind-merge");function v(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const p=v(d);function m(...e){return b.twMerge(g.clsx(e))}const o=f.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),i=p.forwardRef(({className:e,variant:r,size:t,asChild:n=!1,...s},a)=>{const c=n?l.Slot:"button";return u.jsx(c,{className:m(o({variant:r,size:t,className:e})),ref:a,...s})});i.displayName="Button";exports.Button=i;exports.buttonVariants=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("react/jsx-runtime"),G=require("class-variance-authority"),Y=require("clsx"),J=require("tailwind-merge"),M=require("react");function Z(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const c=Z(M);function Q(){return typeof window<"u"}function X(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function ee(e){return Q()?e instanceof HTMLElement||e instanceof X(e).HTMLElement:!1}const D={};function N(e,t){const n=c.useRef(D);return n.current===D&&(n.current=e(t)),n}const v=c[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0,-3)],te=v&&v!==c.useLayoutEffect?v:e=>e();function I(e){const t=N(ne).current;return t.next=e,te(t.effect),t.trampoline}function ne(){const e={next:void 0,callback:re,trampoline:(...t)=>e.callback?.(...t),effect:()=>{e.callback=e.next}};return e}function re(){if(process.env.NODE_ENV!=="production")throw new Error("Base UI: Cannot call an event handler while rendering.")}let x;process.env.NODE_ENV!=="production"&&(x=new Set);function O(...e){if(process.env.NODE_ENV!=="production"){const t=e.join(" ");x.has(t)||(x.add(t),console.error(`Base UI: ${t}`))}}const oe=()=>{},ie=typeof document<"u"?c.useLayoutEffect:oe;function E(e,t){if(e&&!t)return e;if(!e&&t)return t;if(e||t)return{...e,...t}}const h={};function T(e,t,n,o,r){let i={...w(e,h)};return t&&(i=y(i,t)),n&&(i=y(i,n)),o&&(i=y(i,o)),i}function se(e){if(e.length===0)return h;if(e.length===1)return w(e[0],h);let t={...w(e[0],h)};for(let n=1;n<e.length;n+=1)t=y(t,e[n]);return t}function y(e,t){return R(t)?t(e):ae(e,t)}function ae(e,t){if(!t)return e;for(const n in t){const o=t[n];switch(n){case"style":{e[n]=E(e.style,o);break}case"className":{e[n]=_(e.className,o);break}default:ue(n,o)?e[n]=ce(e[n],o):e[n]=o}}return e}function ue(e,t){const n=e.charCodeAt(0),o=e.charCodeAt(1),r=e.charCodeAt(2);return n===111&&o===110&&r>=65&&r<=90&&(typeof t=="function"||typeof t>"u")}function R(e){return typeof e=="function"}function w(e,t){return R(e)?e(t):e??h}function ce(e,t){return t?e?n=>{if(le(n)){const r=n;k(r);const i=t(r);return r.baseUIHandlerPrevented||e?.(r),i}const o=t(n);return e?.(n),o}:t:e}function k(e){return e.preventBaseUIHandler=()=>{e.baseUIHandlerPrevented=!0},e}function _(e,t){return t?e?t+" "+e:t:e}function le(e){return e!=null&&typeof e=="object"&&"nativeEvent"in e}function de(e,...t){const n=new URL("https://base-ui.com/production-error");return n.searchParams.set("code",e.toString()),t.forEach(o=>n.searchParams.append("args[]",o)),`Base UI error #${e}; visit ${n} for the full message.`}const U=c.createContext(void 0);process.env.NODE_ENV!=="production"&&(U.displayName="CompositeRootContext");function fe(e=!1){const t=c.useContext(U);if(t===void 0&&!e)throw new Error(process.env.NODE_ENV!=="production"?"Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.":de(16));return t}function pe(e){const{focusableWhenDisabled:t,disabled:n,composite:o=!1,tabIndex:r=0,isNativeButton:i}=e,a=o&&t!==!1,f=o&&t===!1;return{props:c.useMemo(()=>{const u={onKeyDown(b){n&&t&&b.key!=="Tab"&&b.preventDefault()}};return o||(u.tabIndex=r,!i&&n&&(u.tabIndex=t?r:-1)),(i&&(t||a)||!i&&n)&&(u["aria-disabled"]=n),i&&(!t||f)&&(u.disabled=n),u},[o,n,t,a,f,i,r])}}function be(e={}){const{disabled:t=!1,focusableWhenDisabled:n,tabIndex:o=0,native:r=!0}=e,i=c.useRef(null),a=fe(!0)!==void 0,f=I(()=>{const l=i.current;return!!(l?.tagName==="A"&&l?.href)}),{props:p}=pe({focusableWhenDisabled:n,disabled:t,composite:a,tabIndex:o,isNativeButton:r});process.env.NODE_ENV!=="production"&&c.useEffect(()=>{if(!i.current)return;const l=i.current.tagName==="BUTTON";r?l||O("A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`."):l&&O("A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.")},[r]);const u=c.useCallback(()=>{const l=i.current;ge(l)&&a&&t&&p.disabled===void 0&&l.disabled&&(l.disabled=!1)},[t,p.disabled,a]);ie(u,[u]);const b=c.useCallback((l={})=>{const{onClick:d,onMouseDown:z,onKeyUp:L,onKeyDown:K,onPointerDown:W,...$}=l;return T({type:r?"button":void 0,onClick(s){if(t){s.preventDefault();return}d?.(s)},onMouseDown(s){t||z?.(s)},onKeyDown(s){if(t||(k(s),K?.(s)),s.baseUIHandlerPrevented)return;const q=s.target===s.currentTarget&&!r&&!f()&&!t,C=s.key==="Enter",F=s.key===" ";q&&((F||C)&&s.preventDefault(),C&&d?.(s))},onKeyUp(s){t||(k(s),L?.(s)),!s.baseUIHandlerPrevented&&s.target===s.currentTarget&&!r&&!t&&s.key===" "&&d?.(s)},onPointerDown(s){if(t){s.preventDefault();return}W?.(s)}},r?void 0:{role:"button"},p,$)},[t,p,r,f]),g=I(l=>{i.current=l,u()});return{getButtonProps:b,buttonRef:g}}function ge(e){return ee(e)&&e.tagName==="BUTTON"}function P(e,t,n,o){const r=N(V).current;return he(r,e,t,n,o)&&j(r,[e,t,n,o]),r.callback}function me(e){const t=N(V).current;return ye(t,e)&&j(t,e),t.callback}function V(){return{callback:null,cleanup:null,refs:[]}}function he(e,t,n,o,r){return e.refs[0]!==t||e.refs[1]!==n||e.refs[2]!==o||e.refs[3]!==r}function ye(e,t){return e.refs.length!==t.length||e.refs.some((n,o)=>n!==t[o])}function j(e,t){if(e.refs=t,t.every(n=>n==null)){e.callback=null;return}e.callback=n=>{if(e.cleanup&&(e.cleanup(),e.cleanup=null),n!=null){const o=Array(t.length).fill(null);for(let r=0;r<t.length;r+=1){const i=t[r];if(i!=null)switch(typeof i){case"function":{const a=i(n);typeof a=="function"&&(o[r]=a);break}case"object":{i.current=n;break}}}e.cleanup=()=>{for(let r=0;r<t.length;r+=1){const i=t[r];if(i!=null)switch(typeof i){case"function":{const a=o[r];typeof a=="function"?a():i(null);break}case"object":{i.current=null;break}}}}}}}const ve=parseInt(c.version,10);function xe(e){return ve>=e}function B(e){if(!c.isValidElement(e))return null;const t=e,n=t.props;return(xe(19)?n?.ref:t.ref)??null}function Ee(e,t){const n={};for(const o in e){const r=e[o];if(t?.hasOwnProperty(o)){const i=t[o](r);i!=null&&Object.assign(n,i);continue}r===!0?n[`data-${o.toLowerCase()}`]="":r&&(n[`data-${o.toLowerCase()}`]=r.toString())}return n}function we(e,t){return typeof e=="function"?e(t):e}function ke(e,t){return typeof e=="function"?e(t):e}const m=Object.freeze({});function Ne(e,t,n={}){const o=t.render,r=Ce(t,n);if(n.enabled===!1)return null;const i=n.state??m;return De(e,o,r,i)}function Ce(e,t={}){const{className:n,style:o,render:r}=e,{state:i=m,ref:a,props:f,stateAttributesMapping:p,enabled:u=!0}=t,b=u?we(n,i):void 0,g=u?ke(o,i):void 0,l=u?Ee(i,p):m,d=u?E(l,Array.isArray(f)?se(f):f)??m:m;return typeof document<"u"&&(u?Array.isArray(a)?d.ref=me([d.ref,B(r),...a]):d.ref=P(d.ref,B(r),a):P(null,null)),u?(b!==void 0&&(d.className=_(d.className,b)),g!==void 0&&(d.style=E(d.style,g)),d):m}function De(e,t,n,o){if(t){if(typeof t=="function")return t(n,o);const r=T(n,t.props);return r.ref=n.ref,c.cloneElement(t,r)}return Ie(e,n)}function Ie(e,t){return M.createElement("button",{type:"button",...t,key:t.key})}const A=c.forwardRef(function(t,n){const{render:o,className:r,disabled:i=!1,focusableWhenDisabled:a=!1,nativeButton:f=!0,...p}=t,{getButtonProps:u,buttonRef:b}=be({disabled:i,focusableWhenDisabled:a,native:f}),g=c.useMemo(()=>({disabled:i}),[i]);return Ne("button",t,{state:g,ref:[n,b],props:[p,u]})});process.env.NODE_ENV!=="production"&&(A.displayName="Button");function Oe(...e){return J.twMerge(Y.clsx(e))}const S=G.cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/80",outline:"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",ghost:"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",destructive:"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",xs:"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",sm:"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",lg:"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",icon:"size-9","icon-xs":"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3","icon-sm":"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md","icon-lg":"size-10"}},defaultVariants:{variant:"default",size:"default"}});function Pe({className:e,variant:t="default",size:n="default",...o}){return H.jsx(A,{"data-slot":"button",className:Oe(S({variant:t,size:n,className:e})),...o})}exports.Button=Pe;exports.buttonVariants=S;

package/dist/tan-ui-kit.css

@@ -1 +1 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-outline-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--radius-md:.375rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:#fff;--color-foreground:#0a0a0a;--color-primary:#171717;--color-primary-foreground:#fafafa;--color-secondary:#f5f5f5;--color-secondary-foreground:#171717;--color-accent:#f5f5f5;--color-accent-foreground:#171717;--color-destructive:#ef4444;--color-destructive-foreground:#fafafa;--color-border:#e5e5e5;--color-input:#e5e5e5;--color-ring:#0a0a0a}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--background:0 0% 100%;--foreground:0 0% 3.9%;--card:0 0% 100%;--card-foreground:0 0% 3.9%;--popover:0 0% 100%;--popover-foreground:0 0% 3.9%;--primary:0 0% 9%;--primary-foreground:0 0% 98%;--secondary:0 0% 96.1%;--secondary-foreground:0 0% 9%;--muted:0 0% 96.1%;--muted-foreground:0 0% 45.1%;--accent:0 0% 96.1%;--accent-foreground:0 0% 9%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:0 0% 89.8%;--input:0 0% 89.8%;--ring:0 0% 3.9%;--radius:.5rem}.dark{--background:0 0% 3.9%;--foreground:0 0% 98%;--card:0 0% 3.9%;--card-foreground:0 0% 98%;--popover:0 0% 3.9%;--popover-foreground:0 0% 98%;--primary:0 0% 98%;--primary-foreground:0 0% 9%;--secondary:0 0% 14.9%;--secondary-foreground:0 0% 98%;--muted:0 0% 14.9%;--muted-foreground:0 0% 63.9%;--accent:0 0% 14.9%;--accent-foreground:0 0% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:0 0% 98%;--border:0 0% 14.9%;--input:0 0% 14.9%;--ring:0 0% 83.1%}*{border-color:var(--color-border)}body{background-color:var(--color-background);color:var(--color-foreground)}}@layer components;@layer utilities{.visible{visibility:visible}.inline-flex{display:inline-flex}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.w-10{width:calc(var(--spacing)*10)}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-input{border-color:var(--color-input)}.bg-background{background-color:var(--color-background)}.bg-destructive{background-color:var(--color-destructive)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-2{padding-block:calc(var(--spacing)*2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-destructive\/90:hover{background-color:#ef4444e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--color-destructive)90%,transparent)}}.hover\:bg-primary\/90:hover{background-color:#171717e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:#f5f5f5cc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--color-secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-500:oklch(62.3% .214 259.815);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-bold:700;--radius-md:calc(var(--radius) - 2px);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.visible{visibility:visible}.mx-auto{margin-inline:auto}.inline-flex{display:inline-flex}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.w-10{width:calc(var(--spacing)*10)}.w-full{width:100%}.shrink-0{flex-shrink:0}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.rounded-\[min\(var\(--radius-md\)\,8px\)\]{border-radius:min(var(--radius-md),8px)}.rounded-\[min\(var\(--radius-md\)\,10px\)\]{border-radius:min(var(--radius-md),10px)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--border)}.border-input{border-color:var(--input)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--background)}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.bg-destructive\/10{background-color:color-mix(in oklab,var(--destructive)10%,transparent)}}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-clip-padding{background-clip:padding-box}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-2{padding-block:calc(var(--spacing)*2)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-destructive{color:var(--destructive)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.underline-offset-4{text-underline-offset:4px}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/20:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/20:hover{background-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-muted:hover{background-color:var(--muted)}.hover\:bg-primary\/80:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/80:hover{background-color:color-mix(in oklab,var(--primary)80%,transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-destructive\/40:focus-visible{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:border-destructive\/40:focus-visible{border-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-md{border-radius:calc(var(--radius) - 2px)}.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]){padding-right:calc(var(--spacing)*1.5)}.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]){padding-right:calc(var(--spacing)*2)}.has-data-\[icon\=inline-end\]\:pr-3:has([data-icon=inline-end]){padding-right:calc(var(--spacing)*3)}.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]){padding-left:calc(var(--spacing)*1.5)}.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]){padding-left:calc(var(--spacing)*2)}.has-data-\[icon\=inline-start\]\:pl-3:has([data-icon=inline-start]){padding-left:calc(var(--spacing)*3)}.aria-expanded\:bg-muted[aria-expanded=true]{background-color:var(--muted)}.aria-expanded\:bg-secondary[aria-expanded=true]{background-color:var(--secondary)}.aria-expanded\:text-foreground[aria-expanded=true]{color:var(--foreground)}.aria-expanded\:text-secondary-foreground[aria-expanded=true]{color:var(--secondary-foreground)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-\[3px\][aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/20:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-destructive\/20:is(.dark *){background-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}@media(hover:hover){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:color-mix(in oklab,var(--destructive)30%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:var(--muted)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--muted)50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)50%,transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}

package/dist/tan-ui-kit.es.js

@@ -1,29 +1,436 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as a from "react";
-import { Slot as d } from "@radix-ui/react-slot";
-import { cva as c } from "class-variance-authority";
-import { clsx as u } from "clsx";
-import { twMerge as f } from "tailwind-merge";
-function g(...e) {
-  return f(u(e));
-}
-const m = c(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+import { jsx as F } from "react/jsx-runtime";
+import { cva as H } from "class-variance-authority";
+import { clsx as G } from "clsx";
+import { twMerge as Y } from "tailwind-merge";
+import * as c from "react";
+import { createElement as J } from "react";
+function Z() {
+  return typeof window < "u";
+}
+function q(e) {
+  var t;
+  return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function Q(e) {
+  return Z() ? e instanceof HTMLElement || e instanceof q(e).HTMLElement : !1;
+}
+const D = {};
+function N(e, t) {
+  const n = c.useRef(D);
+  return n.current === D && (n.current = e(t)), n;
+}
+const y = c[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)], X = (
+  // React 17 doesn't have useInsertionEffect.
+  y && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
+  y !== c.useLayoutEffect ? y : (e) => e()
+);
+function I(e) {
+  const t = N(ee).current;
+  return t.next = e, X(t.effect), t.trampoline;
+}
+function ee() {
+  const e = {
+    next: void 0,
+    callback: te,
+    trampoline: (...t) => e.callback?.(...t),
+    effect: () => {
+      e.callback = e.next;
+    }
+  };
+  return e;
+}
+function te() {
+  if (process.env.NODE_ENV !== "production")
+    throw new Error("Base UI: Cannot call an event handler while rendering.");
+}
+let x;
+process.env.NODE_ENV !== "production" && (x = /* @__PURE__ */ new Set());
+function B(...e) {
+  if (process.env.NODE_ENV !== "production") {
+    const t = e.join(" ");
+    x.has(t) || (x.add(t), console.error(`Base UI: ${t}`));
+  }
+}
+const ne = () => {
+}, re = typeof document < "u" ? c.useLayoutEffect : ne;
+function E(e, t) {
+  if (e && !t)
+    return e;
+  if (!e && t)
+    return t;
+  if (e || t)
+    return {
+      ...e,
+      ...t
+    };
+}
+const h = {};
+function T(e, t, n, o, r) {
+  let i = {
+    ...w(e, h)
+  };
+  return t && (i = v(i, t)), n && (i = v(i, n)), o && (i = v(i, o)), i;
+}
+function oe(e) {
+  if (e.length === 0)
+    return h;
+  if (e.length === 1)
+    return w(e[0], h);
+  let t = {
+    ...w(e[0], h)
+  };
+  for (let n = 1; n < e.length; n += 1)
+    t = v(t, e[n]);
+  return t;
+}
+function v(e, t) {
+  return U(t) ? t(e) : ie(e, t);
+}
+function ie(e, t) {
+  if (!t)
+    return e;
+  for (const n in t) {
+    const o = t[n];
+    switch (n) {
+      case "style": {
+        e[n] = E(e.style, o);
+        break;
+      }
+      case "className": {
+        e[n] = M(e.className, o);
+        break;
+      }
+      default:
+        se(n, o) ? e[n] = ae(e[n], o) : e[n] = o;
+    }
+  }
+  return e;
+}
+function se(e, t) {
+  const n = e.charCodeAt(0), o = e.charCodeAt(1), r = e.charCodeAt(2);
+  return n === 111 && o === 110 && r >= 65 && r <= 90 && (typeof t == "function" || typeof t > "u");
+}
+function U(e) {
+  return typeof e == "function";
+}
+function w(e, t) {
+  return U(e) ? e(t) : e ?? h;
+}
+function ae(e, t) {
+  return t ? e ? (n) => {
+    if (ue(n)) {
+      const r = n;
+      k(r);
+      const i = t(r);
+      return r.baseUIHandlerPrevented || e?.(r), i;
+    }
+    const o = t(n);
+    return e?.(n), o;
+  } : t : e;
+}
+function k(e) {
+  return e.preventBaseUIHandler = () => {
+    e.baseUIHandlerPrevented = !0;
+  }, e;
+}
+function M(e, t) {
+  return t ? e ? t + " " + e : t : e;
+}
+function ue(e) {
+  return e != null && typeof e == "object" && "nativeEvent" in e;
+}
+function ce(e, ...t) {
+  const n = new URL("https://base-ui.com/production-error");
+  return n.searchParams.set("code", e.toString()), t.forEach((o) => n.searchParams.append("args[]", o)), `Base UI error #${e}; visit ${n} for the full message.`;
+}
+const R = /* @__PURE__ */ c.createContext(void 0);
+process.env.NODE_ENV !== "production" && (R.displayName = "CompositeRootContext");
+function le(e = !1) {
+  const t = c.useContext(R);
+  if (t === void 0 && !e)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>." : ce(16));
+  return t;
+}
+function de(e) {
+  const {
+    focusableWhenDisabled: t,
+    disabled: n,
+    composite: o = !1,
+    tabIndex: r = 0,
+    isNativeButton: i
+  } = e, a = o && t !== !1, f = o && t === !1;
+  return {
+    props: c.useMemo(() => {
+      const u = {
+        // allow Tabbing away from focusableWhenDisabled elements
+        onKeyDown(b) {
+          n && t && b.key !== "Tab" && b.preventDefault();
+        }
+      };
+      return o || (u.tabIndex = r, !i && n && (u.tabIndex = t ? r : -1)), (i && (t || a) || !i && n) && (u["aria-disabled"] = n), i && (!t || f) && (u.disabled = n), u;
+    }, [o, n, t, a, f, i, r])
+  };
+}
+function fe(e = {}) {
+  const {
+    disabled: t = !1,
+    focusableWhenDisabled: n,
+    tabIndex: o = 0,
+    native: r = !0
+  } = e, i = c.useRef(null), a = le(!0) !== void 0, f = I(() => {
+    const l = i.current;
+    return !!(l?.tagName === "A" && l?.href);
+  }), {
+    props: p
+  } = de({
+    focusableWhenDisabled: n,
+    disabled: t,
+    composite: a,
+    tabIndex: o,
+    isNativeButton: r
+  });
+  process.env.NODE_ENV !== "production" && c.useEffect(() => {
+    if (!i.current)
+      return;
+    const l = i.current.tagName === "BUTTON";
+    r ? l || B("A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.") : l && B("A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.");
+  }, [r]);
+  const u = c.useCallback(() => {
+    const l = i.current;
+    pe(l) && a && t && p.disabled === void 0 && l.disabled && (l.disabled = !1);
+  }, [t, p.disabled, a]);
+  re(u, [u]);
+  const b = c.useCallback((l = {}) => {
+    const {
+      onClick: d,
+      onMouseDown: z,
+      onKeyUp: L,
+      onKeyDown: S,
+      onPointerDown: j,
+      ...K
+    } = l;
+    return T({
+      type: r ? "button" : void 0,
+      onClick(s) {
+        if (t) {
+          s.preventDefault();
+          return;
+        }
+        d?.(s);
+      },
+      onMouseDown(s) {
+        t || z?.(s);
+      },
+      onKeyDown(s) {
+        if (t || (k(s), S?.(s)), s.baseUIHandlerPrevented)
+          return;
+        const W = s.target === s.currentTarget && !r && !f() && !t, C = s.key === "Enter", $ = s.key === " ";
+        W && (($ || C) && s.preventDefault(), C && d?.(s));
+      },
+      onKeyUp(s) {
+        t || (k(s), L?.(s)), !s.baseUIHandlerPrevented && s.target === s.currentTarget && !r && !t && s.key === " " && d?.(s);
+      },
+      onPointerDown(s) {
+        if (t) {
+          s.preventDefault();
+          return;
+        }
+        j?.(s);
+      }
+    }, r ? void 0 : {
+      role: "button"
+    }, p, K);
+  }, [t, p, r, f]), m = I((l) => {
+    i.current = l, u();
+  });
+  return {
+    getButtonProps: b,
+    buttonRef: m
+  };
+}
+function pe(e) {
+  return Q(e) && e.tagName === "BUTTON";
+}
+function P(e, t, n, o) {
+  const r = N(A).current;
+  return me(r, e, t, n, o) && V(r, [e, t, n, o]), r.callback;
+}
+function be(e) {
+  const t = N(A).current;
+  return ge(t, e) && V(t, e), t.callback;
+}
+function A() {
+  return {
+    callback: null,
+    cleanup: null,
+    refs: []
+  };
+}
+function me(e, t, n, o, r) {
+  return e.refs[0] !== t || e.refs[1] !== n || e.refs[2] !== o || e.refs[3] !== r;
+}
+function ge(e, t) {
+  return e.refs.length !== t.length || e.refs.some((n, o) => n !== t[o]);
+}
+function V(e, t) {
+  if (e.refs = t, t.every((n) => n == null)) {
+    e.callback = null;
+    return;
+  }
+  e.callback = (n) => {
+    if (e.cleanup && (e.cleanup(), e.cleanup = null), n != null) {
+      const o = Array(t.length).fill(null);
+      for (let r = 0; r < t.length; r += 1) {
+        const i = t[r];
+        if (i != null)
+          switch (typeof i) {
+            case "function": {
+              const a = i(n);
+              typeof a == "function" && (o[r] = a);
+              break;
+            }
+            case "object": {
+              i.current = n;
+              break;
+            }
+          }
+      }
+      e.cleanup = () => {
+        for (let r = 0; r < t.length; r += 1) {
+          const i = t[r];
+          if (i != null)
+            switch (typeof i) {
+              case "function": {
+                const a = o[r];
+                typeof a == "function" ? a() : i(null);
+                break;
+              }
+              case "object": {
+                i.current = null;
+                break;
+              }
+            }
+        }
+      };
+    }
+  };
+}
+const he = parseInt(c.version, 10);
+function ve(e) {
+  return he >= e;
+}
+function O(e) {
+  if (!/* @__PURE__ */ c.isValidElement(e))
+    return null;
+  const t = e, n = t.props;
+  return (ve(19) ? n?.ref : t.ref) ?? null;
+}
+function ye(e, t) {
+  const n = {};
+  for (const o in e) {
+    const r = e[o];
+    if (t?.hasOwnProperty(o)) {
+      const i = t[o](r);
+      i != null && Object.assign(n, i);
+      continue;
+    }
+    r === !0 ? n[`data-${o.toLowerCase()}`] = "" : r && (n[`data-${o.toLowerCase()}`] = r.toString());
+  }
+  return n;
+}
+function xe(e, t) {
+  return typeof e == "function" ? e(t) : e;
+}
+function Ee(e, t) {
+  return typeof e == "function" ? e(t) : e;
+}
+const g = Object.freeze({});
+function we(e, t, n = {}) {
+  const o = t.render, r = ke(t, n);
+  if (n.enabled === !1)
+    return null;
+  const i = n.state ?? g;
+  return Ne(e, o, r, i);
+}
+function ke(e, t = {}) {
+  const {
+    className: n,
+    style: o,
+    render: r
+  } = e, {
+    state: i = g,
+    ref: a,
+    props: f,
+    stateAttributesMapping: p,
+    enabled: u = !0
+  } = t, b = u ? xe(n, i) : void 0, m = u ? Ee(o, i) : void 0, l = u ? ye(i, p) : g, d = u ? E(l, Array.isArray(f) ? oe(f) : f) ?? g : g;
+  return typeof document < "u" && (u ? Array.isArray(a) ? d.ref = be([d.ref, O(r), ...a]) : d.ref = P(d.ref, O(r), a) : P(null, null)), u ? (b !== void 0 && (d.className = M(d.className, b)), m !== void 0 && (d.style = E(d.style, m)), d) : g;
+}
+function Ne(e, t, n, o) {
+  if (t) {
+    if (typeof t == "function")
+      return t(n, o);
+    const r = T(n, t.props);
+    return r.ref = n.ref, /* @__PURE__ */ c.cloneElement(t, r);
+  }
+  return Ce(e, n);
+}
+function Ce(e, t) {
+  return /* @__PURE__ */ J("button", {
+    type: "button",
+    ...t,
+    key: t.key
+  });
+}
+const _ = /* @__PURE__ */ c.forwardRef(function(t, n) {
+  const {
+    render: o,
+    className: r,
+    disabled: i = !1,
+    focusableWhenDisabled: a = !1,
+    nativeButton: f = !0,
+    ...p
+  } = t, {
+    getButtonProps: u,
+    buttonRef: b
+  } = fe({
+    disabled: i,
+    focusableWhenDisabled: a,
+    native: f
+  }), m = c.useMemo(() => ({
+    disabled: i
+  }), [i]);
+  return we("button", t, {
+    state: m,
+    ref: [n, b],
+    props: [p, u]
+  });
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "Button");
+function De(...e) {
+  return Y(G(e));
+}
+const Ie = H(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10"
       }
     },
     defaultVariants: {
@@ -31,18 +438,23 @@ const m = c(
       size: "default"
     }
   }
-), l = a.forwardRef(
-  ({ className: e, variant: r, size: t, asChild: o = !1, ...n }, i) => /* @__PURE__ */ s(
-    o ? d : "button",
+);
+function Re({
+  className: e,
+  variant: t = "default",
+  size: n = "default",
+  ...o
+}) {
+  return /* @__PURE__ */ F(
+    _,
     {
-      className: g(m({ variant: r, size: t, className: e })),
-      ref: i,
-      ...n
+      "data-slot": "button",
+      className: De(Ie({ variant: t, size: n, className: e })),
+      ...o
     }
-  )
-);
-l.displayName = "Button";
+  );
+}
 export {
-  l as Button,
-  m as buttonVariants
+  Re as Button,
+  Ie as buttonVariants
 };

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@tan-ahmed/tan-ui-kit",
-  "version": "0.1.5",
-  "description": "A React component library built with Tailwind CSS v4 and shadcn/ui components",
+  "version": "0.1.6",
+  "description": "A React component library built with Tailwind CSS v4 and base-ui components",
   "type": "module",
-
   "module": "./dist/tan-ui-kit.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -32,7 +31,7 @@
     "component-library",
     "ui-components",
     "tailwindcss",
-    "shadcn",
+    "base-ui",
     "typescript"
   ],
   "author": "",
@@ -46,7 +45,6 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react": "^18.0.0 || ^19.0.0",
@@ -55,23 +53,27 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@types/node": "^24.10.1",
+    "@base-ui/react": "^1.1.0",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24.10.9",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^15.0.0",
-    "tailwind-merge": "^2.5.0",
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/vite": "^4.1.18",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0"
   }
 }