blunt-ui 0.1.1 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # blunt-ui
 
-React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 8 components, 2 hooks.
+React + TypeScript + styled-components. Thick borders, offset shadows, no fluff. 9 components, 2 hooks.
 
 **Live demo:** https://blunt-ui.vercel.app/
 
@@ -66,6 +66,34 @@ Sizes: `sm`, `md`, `lg`, `fullscreen`.
 </Modal>
 ```
 
+## CollapsibleCard
+
+A card with a clickable header that shows/hides its content. Supports controlled and uncontrolled modes, an optional subtitle, a slot for header actions, and an `accentColor` prop to tint the border and chevron.
+
+```tsx
+<CollapsibleCard
+  title="blunt-ui"
+  subtitle="Subtitle"
+  defaultOpen
+>
+  React component library in neo-brutalism style.
+</CollapsibleCard>
+```
+
+Pass `open` + `onToggle` for controlled mode:
+
+```tsx
+<CollapsibleCard
+  title="Project"
+  open={isOpen}
+  onToggle={setIsOpen}
+  accentColor="#f97316"
+  headerActions={<Badge variant="primary">npm</Badge>}
+>
+  {children}
+</CollapsibleCard>
+```
+
 ## Toast
 
 Pops up in a portal, auto-dismisses after 4 seconds. Set `duration={0}` to keep it until the user closes it.

package/dist/components/CollapsibleCard/CollapsibleCard.d.ts

@@ -0,0 +1,5 @@
+import { CollapsibleCardProps } from './CollapsibleCard.types';
+export declare function CollapsibleCard({ title, children, defaultOpen, open: controlledOpen, onToggle, subtitle, headerActions, accentColor, }: CollapsibleCardProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CollapsibleCard {
+    var displayName: string;
+}

package/dist/components/CollapsibleCard/CollapsibleCard.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentProps } from 'react';
+import { CollapsibleCard } from './CollapsibleCard';
+type StoryArgs = ComponentProps<typeof CollapsibleCard> & {
+    text: string;
+};
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<StoryArgs>;
+export declare const Default: Story;
+export declare const WithSubtitle: Story;
+export declare const WithHeaderActions: Story;
+export declare const Controlled: Story;
+export declare const ClosedByDefault: Story;
+export declare const AccentColor: Story;

package/dist/components/CollapsibleCard/CollapsibleCard.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface CollapsibleCardProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onToggle?: (open: boolean) => void;
+    subtitle?: string;
+    headerActions?: ReactNode;
+    accentColor?: string;
+}

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

@@ -0,0 +1,2 @@
+export { CollapsibleCard } from './CollapsibleCard';
+export type { CollapsibleCardProps } from './CollapsibleCard.types';

package/dist/index.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("styled-components"),t=require("react"),A=require("react-dom"),I=(o,s,n)=>r.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),a=require("react"),A=require("react-dom"),I=(o,s,n)=>r.css`
   background: ${s};
   color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
   box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
-`,Q=r.span`
+`,no=r.span`
   display: inline-flex;
   align-items: center;
   font-weight: 700;
@@ -38,7 +38,7 @@
         background: ${s.colors.info[50]};
         color: ${s.colors.info[500]};
       `}[o]}
-`;function P({variant:o="primary",size:s="md",children:n,...e}){return a.jsx(Q,{$variant:o,$size:s,...e,children:n})}P.displayName="Badge";const F=(o,s,n)=>r.css`
+`;function D({variant:o="primary",size:s="md",children:n,...e}){return t.jsx(no,{$variant:o,$size:s,...e,children:n})}D.displayName="Badge";const E=(o,s,n)=>r.css`
   background-color: ${s};
   color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
@@ -51,7 +51,7 @@
     transform: translate(2px, 2px);
     box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
   }
-`,oo=r.button`
+`,to=r.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -70,7 +70,7 @@
     cursor: not-allowed;
   }
 
-  ${({$variant:o,theme:s})=>s.brutalism?{primary:F(s,s.colors.primary[500],s.colors.primary.contrast),secondary:F(s,s.colors.neutral[100],s.colors.neutral[900]),outline:F(s,s.colors.neutral[0],s.colors.neutral[900])}[o]:{primary:r.css`
+  ${({$variant:o,theme:s})=>s.brutalism?{primary:E(s,s.colors.primary[500],s.colors.primary.contrast),secondary:E(s,s.colors.neutral[100],s.colors.neutral[900]),outline:E(s,s.colors.neutral[0],s.colors.neutral[900])}[o]:{primary:r.css`
         background-color: ${s.colors.primary[500]};
         color: ${s.colors.neutral[0]};
         border: none;
@@ -103,18 +103,18 @@
         padding: ${s.spacing[3]} ${s.spacing[6]};
         font-size: ${s.fontSizes.lg};
       `})[o]}
-`;function D({ref:o,as:s,href:n,variant:e="primary",size:c="md",isLoading:l,disabled:i,children:d,...g}){const f=s??(n?"a":"button");return a.jsx(oo,{ref:o,as:f,href:n,$variant:e,$size:c,disabled:l||i,...g,children:l?"Loading...":d})}D.displayName="Button";const so=r.div`
+`;function Y({ref:o,as:s,href:n,variant:e="primary",size:c="md",isLoading:l,disabled:i,children:d,...p}){const u=s??(n?"a":"button");return t.jsx(to,{ref:o,as:u,href:n,$variant:e,$size:c,disabled:l||i,...p,children:l?"Loading...":d})}Y.displayName="Button";const eo=r.div`
   display: flex;
   flex-direction: column;
   gap: ${({theme:o})=>o.spacing[1]};
   width: ${({$fullWidth:o})=>o?"100%":"auto"};
-`,ro=r.label`
+`,ao=r.label`
   font-size: ${({theme:o})=>o.fontSizes.sm};
   font-weight: ${({theme:o})=>o.brutalism?"700":"500"};
-`,no=r.span`
+`,io=r.span`
   font-size: ${({theme:o})=>o.fontSizes.xs};
   color: ${({$error:o,theme:s})=>o?s.colors.error[500]:s.colors.neutral[500]};
-`,to=r.div`
+`,lo=r.div`
   display: flex;
   align-items: center;
   border-radius: ${({theme:o})=>o.radius.md};
@@ -159,7 +159,7 @@
   &:focus-within {
     box-shadow: ${({theme:o})=>o.shadows.focusRing};
   }
-`,eo=r.input`
+`,co=r.input`
   flex: 1;
   border: none;
   outline: none;
@@ -174,7 +174,7 @@
   display: inline-flex;
   align-items: center;
   margin: 0 ${({theme:o})=>o.spacing[1]};
-`,ao=r.button`
+`,uo=r.button`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({theme:o})=>o.spacing[1]};
@@ -187,19 +187,19 @@
   &:hover {
     opacity: 0.8;
   }
-`;function Y({ref:o,type:s="text",size:n="md",variant:e="default",label:c,helperText:l,error:i,leftElement:d,rightElement:g,clearable:f,onClear:x,fullWidth:k,id:v,value:b,defaultValue:h,onChange:S,...w}){const m=t.useId(),C=v??m,z=`${C}-hint`,[j,u]=t.useState(h??""),p=b!==void 0,$=p?b:j,y=typeof i=="string"?i:void 0,T=!!(l||i),E=O=>{p||u(O.target.value),S?.(O)},J=()=>{p||u(""),x?.()};return a.jsxs(so,{$fullWidth:k,children:[c&&a.jsx(ro,{htmlFor:C,children:c}),a.jsxs(to,{$size:n,$variant:e,$error:!!i,children:[d&&a.jsx(R,{children:d}),a.jsx(eo,{id:C,ref:o,type:s,value:$,onChange:E,...w,"aria-invalid":!!i,"aria-describedby":T?z:void 0}),f&&$&&a.jsx(ao,{type:"button",onClick:J,"aria-label":"Clear input",children:"✕"}),g&&a.jsx(R,{children:g})]}),T&&a.jsx(no,{id:z,$error:!!i,children:y??l})]})}Y.displayName="Input";const io=r.keyframes`
+`;function H({ref:o,type:s="text",size:n="md",variant:e="default",label:c,helperText:l,error:i,leftElement:d,rightElement:p,clearable:u,onClear:x,fullWidth:w,id:g,value:$,defaultValue:m,onChange:h,...C}){const k=a.useId(),j=g??k,S=`${j}-hint`,[z,f]=a.useState(m??""),b=$!==void 0,y=b?$:z,v=typeof i=="string"?i:void 0,T=!!(l||i),O=N=>{b||f(N.target.value),h?.(N)},ro=()=>{b||f(""),x?.()};return t.jsxs(eo,{$fullWidth:w,children:[c&&t.jsx(ao,{htmlFor:j,children:c}),t.jsxs(lo,{$size:n,$variant:e,$error:!!i,children:[d&&t.jsx(R,{children:d}),t.jsx(co,{id:j,ref:o,type:s,value:y,onChange:O,...C,"aria-invalid":!!i,"aria-describedby":T?S:void 0}),u&&y&&t.jsx(uo,{type:"button",onClick:ro,"aria-label":"Clear input",children:"✕"}),p&&t.jsx(R,{children:p})]}),T&&t.jsx(io,{id:S,$error:!!i,children:v??l})]})}H.displayName="Input";const fo=r.keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
-`,lo=r.keyframes`
+`,po=r.keyframes`
   from { opacity: 1; }
   to { opacity: 0; }
-`,co=r.keyframes`
+`,bo=r.keyframes`
   from { opacity: 0; transform: scale(0.95) translateY(-8px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
-`,uo=r.keyframes`
+`,go=r.keyframes`
   from { opacity: 1; transform: scale(1) translateY(0); }
   to { opacity: 0; transform: scale(0.95) translateY(-8px); }
-`,fo=r.div`
+`,$o=r.div`
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -207,9 +207,9 @@
   align-items: center;
   justify-content: center;
   z-index: ${({theme:o})=>o.zIndex.modal};
-  animation: ${({$closing:o})=>o?lo:io} 0.15s ease
+  animation: ${({$closing:o})=>o?po:fo} 0.15s ease
     forwards;
-`,po=r.div`
+`,xo=r.div`
   position: relative;
   background: ${({theme:o})=>o.colors.neutral[0]};
   border-radius: ${({theme:o})=>o.radius.md};
@@ -218,7 +218,7 @@
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  animation: ${({$closing:o})=>o?uo:co} 0.15s ease
+  animation: ${({$closing:o})=>o?go:bo} 0.15s ease
     forwards;
 
   ${({$size:o})=>o==="sm"&&r.css`
@@ -236,19 +236,19 @@
       max-height: 100vh;
       border-radius: 0;
     `}
-`,go=r.div`
+`,yo=r.div`
   display: flex;
   align-items: center;
   gap: ${({theme:o})=>o.spacing[2]};
   padding: ${({theme:o})=>o.spacing[4]};
   border-bottom: 1px solid ${({theme:o})=>o.colors.neutral[200]};
   flex-shrink: 0;
-`,$o=r.h2`
+`,mo=r.h2`
   flex: 1;
   font-size: ${({theme:o})=>o.fontSizes.lg};
   font-weight: 600;
   margin: 0;
-`,bo=r.button`
+`,vo=r.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -273,11 +273,11 @@
     outline: 2px solid ${({theme:o})=>o.colors.primary[500]};
     outline-offset: 2px;
   }
-`,xo=r.div`
+`,wo=r.div`
   padding: ${({theme:o})=>o.spacing[4]};
   overflow-y: auto;
   flex: 1;
-`,yo=r.div`
+`,ko=r.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -285,16 +285,16 @@
   padding: ${({theme:o})=>o.spacing[4]};
   border-top: 1px solid ${({theme:o})=>o.colors.neutral[200]};
   flex-shrink: 0;
-`,mo=["button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","a[href]",'[tabindex]:not([tabindex="-1"])'].join(", ");function N(o){return Array.from(o.querySelectorAll(mo))}function q({open:o,onClose:s,title:n,children:e,footer:c,size:l="md",closeOnBackdrop:i=!0,closeOnEscape:d=!0,ariaLabelledBy:g,ariaDescribedBy:f}){const x=t.useRef(null),k=t.useId(),v=g??(n?k:void 0),[b,h]=t.useState(o),[S,w]=t.useState(!1);return t.useEffect(()=>{if(o)h(!0),w(!1);else if(b){w(!0);const m=setTimeout(()=>{h(!1),w(!1)},150);return()=>clearTimeout(m)}},[o,b]),t.useEffect(()=>{if(!o)return;const m=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=m}},[o]),t.useEffect(()=>{if(!o||!x.current)return;const m=x.current,C=document.activeElement;(N(m)[0]??m).focus();const j=u=>{if(u.key==="Escape"&&d){s();return}if(u.key!=="Tab")return;const p=N(m);if(p.length===0){u.preventDefault();return}const $=p[0],y=p[p.length-1];u.shiftKey?document.activeElement===$&&(u.preventDefault(),y.focus()):document.activeElement===y&&(u.preventDefault(),$.focus())};return document.addEventListener("keydown",j),()=>{document.removeEventListener("keydown",j),C?.focus()}},[o,d,s,b]),b?A.createPortal(a.jsx(fo,{$closing:S,onClick:i?s:void 0,children:a.jsxs(po,{ref:x,role:"dialog","aria-modal":"true","aria-labelledby":v,"aria-describedby":f,$size:l,$closing:S,tabIndex:-1,onClick:m=>m.stopPropagation(),children:[a.jsxs(go,{children:[n&&a.jsx($o,{id:k,children:n}),a.jsx(bo,{onClick:s,"aria-label":"Close modal",children:"×"})]}),a.jsx(xo,{children:e}),c&&a.jsx(yo,{children:c})]})}),document.body):null}q.displayName="Modal";const vo=r.keyframes`
+`,Co=["button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","a[href]",'[tabindex]:not([tabindex="-1"])'].join(", ");function V(o){return Array.from(o.querySelectorAll(Co))}function q({open:o,onClose:s,title:n,children:e,footer:c,size:l="md",closeOnBackdrop:i=!0,closeOnEscape:d=!0,ariaLabelledBy:p,ariaDescribedBy:u}){const x=a.useRef(null),w=a.useId(),g=p??(n?w:void 0),[$,m]=a.useState(o),[h,C]=a.useState(!1);return a.useEffect(()=>{if(o)m(!0),C(!1);else if($){C(!0);const k=setTimeout(()=>{m(!1),C(!1)},150);return()=>clearTimeout(k)}},[o,$]),a.useEffect(()=>{if(!o)return;const k=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=k}},[o]),a.useEffect(()=>{if(!o||!x.current)return;const k=x.current,j=document.activeElement;(V(k)[0]??k).focus();const z=f=>{if(f.key==="Escape"&&d){s();return}if(f.key!=="Tab")return;const b=V(k);if(b.length===0){f.preventDefault();return}const y=b[0],v=b[b.length-1];f.shiftKey?document.activeElement===y&&(f.preventDefault(),v.focus()):document.activeElement===v&&(f.preventDefault(),y.focus())};return document.addEventListener("keydown",z),()=>{document.removeEventListener("keydown",z),j?.focus()}},[o,d,s,$]),$?A.createPortal(t.jsx($o,{$closing:h,onClick:i?s:void 0,children:t.jsxs(xo,{ref:x,role:"dialog","aria-modal":"true","aria-labelledby":g,"aria-describedby":u,$size:l,$closing:h,tabIndex:-1,onClick:k=>k.stopPropagation(),children:[t.jsxs(yo,{children:[n&&t.jsx(mo,{id:w,children:n}),t.jsx(vo,{onClick:s,"aria-label":"Close modal",children:"×"})]}),t.jsx(wo,{children:e}),c&&t.jsx(ko,{children:c})]})}),document.body):null}q.displayName="Modal";const _=(...o)=>o.filter((s,n,e)=>!!s&&s.trim()!==""&&e.indexOf(s)===n).join(" ").trim();const ho=o=>o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();const jo=o=>o.replace(/^([A-Z])|[\s-_]+(\w)/g,(s,n,e)=>e?e.toUpperCase():n.toLowerCase());const M=o=>{const s=jo(o);return s.charAt(0).toUpperCase()+s.slice(1)};var F={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};const So=o=>{for(const s in o)if(s.startsWith("aria-")||s==="role"||s==="title")return!0;return!1},zo=a.createContext({}),Io=()=>a.useContext(zo),To=a.forwardRef(({color:o,size:s,strokeWidth:n,absoluteStrokeWidth:e,className:c="",children:l,iconNode:i,...d},p)=>{const{size:u=24,strokeWidth:x=2,absoluteStrokeWidth:w=!1,color:g="currentColor",className:$=""}=Io()??{},m=e??w?Number(n??x)*24/Number(s??u):n??x;return a.createElement("svg",{ref:p,...F,width:s??u??F.width,height:s??u??F.height,stroke:o??g,strokeWidth:m,className:_("lucide",$,c),...!l&&!So(d)&&{"aria-hidden":"true"},...d},[...i.map(([h,C])=>a.createElement(h,C)),...Array.isArray(l)?l:[l]])});const K=(o,s)=>{const n=a.forwardRef(({className:e,...c},l)=>a.createElement(To,{ref:l,iconNode:s,className:_(`lucide-${ho(M(o))}`,`lucide-${o}`,e),...c}));return n.displayName=M(o),n};const Wo=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],U=K("chevron-down",Wo);const Bo=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]],Z=K("x",Bo),Oo=r.keyframes`
   from { opacity: 0; transform: translateY(12px); }
   to   { opacity: 1; transform: translateY(0); }
-`,wo=r.keyframes`
+`,Eo=r.keyframes`
   from { opacity: 0; transform: translateY(-12px); }
   to   { opacity: 1; transform: translateY(0); }
-`,ko=r.keyframes`
+`,Fo=r.keyframes`
   from { opacity: 1; }
   to   { opacity: 0; }
-`,ho=r.div`
+`,Lo=r.div`
   position: fixed;
   z-index: ${({theme:o})=>o.zIndex.toast};
   display: flex;
@@ -304,14 +304,12 @@
   max-width: 400px;
   padding: ${({theme:o})=>`${o.spacing[3]} ${o.spacing[4]}`};
   border-radius: ${({theme:o})=>o.radius.md};
-  border-left: 4px solid transparent;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   animation: ${({$closing:o,$position:s})=>o?r.css`
-          ${ko} 0.2s ease forwards
+          ${Fo} 0.2s ease forwards
         `:s.startsWith("top")?r.css`
-            ${wo} 0.2s ease forwards
+            ${Eo} 0.2s ease forwards
           `:r.css`
-            ${vo} 0.2s ease forwards
+            ${Oo} 0.2s ease forwards
           `};
 
   ${({$position:o,theme:s})=>({"bottom-right":r.css`
@@ -327,27 +325,37 @@
         top: ${s.spacing[6]};
         left: ${s.spacing[6]};
       `})[o]}
-`,So=r(ho)`
-  ${({$variant:o,theme:s})=>({success:r.css`
+`,W=(o,s,n)=>r.css`
+  background: ${s};
+  border: ${o.brutalism.borderWidth} solid ${n};
+  box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
+    0 ${n};
+`,No=r(Lo)`
+  ${({$variant:o,theme:s})=>s.brutalism?{success:W(s,s.colors.success[50],s.colors.success[500]),error:W(s,s.colors.error[50],s.colors.error[500]),warning:W(s,s.colors.warning[50],s.colors.warning[500]),info:W(s,s.colors.info[50],s.colors.info[500])}[o]:{success:r.css`
         background: ${s.colors.success[50]};
-        border-left-color: ${s.colors.success[500]};
+        border-left: 4px solid ${s.colors.success[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
       `,error:r.css`
         background: ${s.colors.error[50]};
-        border-left-color: ${s.colors.error[500]};
+        border-left: 4px solid ${s.colors.error[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
       `,warning:r.css`
         background: ${s.colors.warning[50]};
-        border-left-color: ${s.colors.warning[500]};
+        border-left: 4px solid ${s.colors.warning[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
       `,info:r.css`
         background: ${s.colors.info[50]};
-        border-left-color: ${s.colors.info[500]};
-      `})[o]}
-`,Co=r.p`
+        border-left: 4px solid ${s.colors.info[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      `}[o]}
+`,Ro=r.p`
   flex: 1;
   margin: 0;
   font-size: ${({theme:o})=>o.fontSizes.sm};
+  font-weight: ${({theme:o})=>o.brutalism?600:400};
   line-height: 1.5;
   color: ${({theme:o})=>o.colors.neutral[900]};
-`,zo=r.button`
+`,Vo=r.button`
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -358,8 +366,6 @@
   background: none;
   cursor: pointer;
   border-radius: ${({theme:o})=>o.radius.md};
-  font-size: 18px;
-  line-height: 1;
   color: ${({theme:o})=>o.colors.neutral[500]};
 
   &:hover {
@@ -371,38 +377,38 @@
     outline: 2px solid ${({theme:o})=>o.colors.primary[500]};
     outline-offset: 2px;
   }
-`;function L({open:o,onClose:s,message:n,variant:e="info",duration:c=4e3,position:l="bottom-right"}){const[i,d]=t.useState(o),[g,f]=t.useState(!1);return t.useEffect(()=>{if(o)d(!0),f(!1);else if(i){f(!0);const x=setTimeout(()=>{d(!1),f(!1)},200);return()=>clearTimeout(x)}},[o,i]),t.useEffect(()=>{if(!o||c===0)return;const x=setTimeout(s,c);return()=>clearTimeout(x)},[o,c,s]),i?A.createPortal(a.jsxs(So,{$position:l,$variant:e,$closing:g,role:"alert","aria-live":"polite",children:[a.jsx(Co,{children:n}),a.jsx(zo,{onClick:s,"aria-label":"Close notification",children:"×"})]}),document.body):null}L.displayName="Toast";const jo=r.form`
+`;function L({open:o,onClose:s,message:n,variant:e="info",duration:c=4e3,position:l="bottom-right"}){const[i,d]=a.useState(o),[p,u]=a.useState(!1);return a.useEffect(()=>{if(o)d(!0),u(!1);else if(i){u(!0);const x=setTimeout(()=>{d(!1),u(!1)},200);return()=>clearTimeout(x)}},[o,i]),a.useEffect(()=>{if(!o||c===0)return;const x=setTimeout(s,c);return()=>clearTimeout(x)},[o,c,s]),i?A.createPortal(t.jsxs(No,{$position:l,$variant:e,$closing:p,role:"alert","aria-live":"polite",children:[t.jsx(Ro,{children:n}),t.jsx(Vo,{onClick:s,"aria-label":"Close notification",children:t.jsx(Z,{size:14,strokeWidth:2.5})})]}),document.body):null}L.displayName="Toast";const Mo=r.form`
   display: flex;
   flex-direction: column;
   gap: ${({theme:o})=>o.spacing[4]};
-`,Io=r.div`
+`,Po=r.div`
   display: flex;
   flex-direction: column;
   gap: ${({theme:o})=>o.spacing[1]};
-`,To=r.label`
+`,Ao=r.label`
   font-size: ${({theme:o})=>o.fontSizes.sm};
   font-weight: 500;
   color: ${({theme:o})=>o.colors.neutral[900]};
-`,Bo=r.span`
+`,Do=r.span`
   color: ${({theme:o})=>o.colors.error[500]};
   margin-left: 2px;
   aria-hidden: true;
-`,Eo=r.span`
+`,Yo=r.span`
   font-size: ${({theme:o})=>o.fontSizes.xs};
   color: ${({$error:o,theme:s})=>o?s.colors.error[500]:s.colors.neutral[500]};
-`;function _({onSubmit:o,children:s,...n}){return a.jsx(jo,{onSubmit:e=>{e.preventDefault(),o?.(e)},noValidate:!0,...n,children:s})}_.displayName="Form";function H({label:o,error:s,helperText:n,required:e,children:c}){const l=t.useId(),i=`${l}-hint`,d=!!(s||n),g=typeof s=="string"?s:void 0,f=t.isValidElement(c)?t.cloneElement(c,{id:l,...d&&{"aria-describedby":i},...s&&{"aria-invalid":!0}}):c;return a.jsxs(Io,{children:[o&&a.jsxs(To,{htmlFor:l,children:[o,e&&a.jsx(Bo,{"aria-hidden":"true",children:" *"})]}),f,d&&a.jsx(Eo,{id:i,$error:!!s,children:g??n})]})}H.displayName="FormField";const K=(...o)=>o.filter((s,n,e)=>!!s&&s.trim()!==""&&e.indexOf(s)===n).join(" ").trim();const Fo=o=>o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();const Wo=o=>o.replace(/^([A-Z])|[\s-_]+(\w)/g,(s,n,e)=>e?e.toUpperCase():n.toLowerCase());const V=o=>{const s=Wo(o);return s.charAt(0).toUpperCase()+s.slice(1)};var W={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};const Lo=o=>{for(const s in o)if(s.startsWith("aria-")||s==="role"||s==="title")return!0;return!1},Oo=t.createContext({}),Ro=()=>t.useContext(Oo),No=t.forwardRef(({color:o,size:s,strokeWidth:n,absoluteStrokeWidth:e,className:c="",children:l,iconNode:i,...d},g)=>{const{size:f=24,strokeWidth:x=2,absoluteStrokeWidth:k=!1,color:v="currentColor",className:b=""}=Ro()??{},h=e??k?Number(n??x)*24/Number(s??f):n??x;return t.createElement("svg",{ref:g,...W,width:s??f??W.width,height:s??f??W.height,stroke:o??v,strokeWidth:h,className:K("lucide",b,c),...!l&&!Lo(d)&&{"aria-hidden":"true"},...d},[...i.map(([S,w])=>t.createElement(S,w)),...Array.isArray(l)?l:[l]])});const U=(o,s)=>{const n=t.forwardRef(({className:e,...c},l)=>t.createElement(No,{ref:l,iconNode:s,className:K(`lucide-${Fo(V(o))}`,`lucide-${o}`,e),...c}));return n.displayName=V(o),n};const Vo=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],Mo=U("chevron-down",Vo);const Ao=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]],Po=U("x",Ao),Do=r.div`
+`;function X({onSubmit:o,children:s,...n}){return t.jsx(Mo,{onSubmit:e=>{e.preventDefault(),o?.(e)},noValidate:!0,...n,children:s})}X.displayName="Form";function G({label:o,error:s,helperText:n,required:e,children:c}){const l=a.useId(),i=`${l}-hint`,d=!!(s||n),p=typeof s=="string"?s:void 0,u=a.isValidElement(c)?a.cloneElement(c,{id:l,...d&&{"aria-describedby":i},...s&&{"aria-invalid":!0}}):c;return t.jsxs(Po,{children:[o&&t.jsxs(Ao,{htmlFor:l,children:[o,e&&t.jsx(Do,{"aria-hidden":"true",children:" *"})]}),u,d&&t.jsx(Yo,{id:i,$error:!!s,children:p??n})]})}G.displayName="FormField";const Ho=r.div`
   display: inline-flex;
   flex-direction: column;
   gap: ${({theme:o})=>o.spacing[1]};
   width: ${({$fullWidth:o})=>o?"100%":"auto"};
-`,Yo=r.div`
+`,qo=r.div`
   position: relative;
   display: flex;
   width: 100%;
-`,qo=r.span`
+`,_o=r.span`
   font-size: ${({theme:o})=>o.fontSizes.xs};
   color: ${({$error:o,theme:s})=>o?s.colors.error[500]:s.colors.neutral[500]};
-`,_o=r.select`
+`,Ko=r.select`
   appearance: none;
   width: 100%;
   border-radius: ${({theme:o})=>o.radius.md};
@@ -455,7 +461,7 @@
     cursor: not-allowed;
     opacity: 0.6;
   }
-`,Ho=r.button`
+`,Uo=r.button`
   position: absolute;
   right: ${({theme:o})=>o.spacing[3]};
   top: 50%;
@@ -477,7 +483,7 @@
     outline-offset: 2px;
     border-radius: 2px;
   }
-`,Ko=r.span`
+`,Zo=r.span`
   position: absolute;
   right: ${({theme:o})=>o.spacing[3]};
   top: 50%;
@@ -486,7 +492,7 @@
   display: flex;
   align-items: center;
   color: ${({theme:o})=>o.colors.neutral[500]};
-`;function Z({options:o,placeholder:s,size:n="md",variant:e="default",error:c,fullWidth:l,clearable:i,onClear:d,id:g,value:f,defaultValue:x,onChange:k,...v}){const b=t.useId(),h=g??b,S=`${h}-hint`,w=typeof c=="string"?c:void 0,[m,C]=t.useState(x??""),z=f!==void 0,j=z?f:m,u=y=>{z||C(y.target.value),k?.(y)},p=()=>{z||C(""),d?.()},$=i&&!!j;return a.jsxs(Do,{$fullWidth:l,children:[a.jsxs(Yo,{children:[a.jsxs(_o,{id:h,$size:n,$variant:e,$error:!!c,"aria-invalid":!!c,"aria-describedby":w?S:void 0,value:j,onChange:u,...v,children:[s&&a.jsx("option",{value:"",disabled:!0,children:s}),o.map(y=>a.jsx("option",{value:y.value,disabled:y.disabled,children:y.label},y.value))]}),$?a.jsx(Ho,{type:"button",onClick:p,"aria-label":"Clear selection",children:a.jsx(Po,{size:14})}):a.jsx(Ko,{"aria-hidden":"true",children:a.jsx(Mo,{size:14})})]}),w&&a.jsx(qo,{id:S,$error:!0,children:w})]})}Z.displayName="Select";const Uo=r.a`
+`;function J({options:o,placeholder:s,size:n="md",variant:e="default",error:c,fullWidth:l,clearable:i,onClear:d,id:p,value:u,defaultValue:x,onChange:w,...g}){const $=a.useId(),m=p??$,h=`${m}-hint`,C=typeof c=="string"?c:void 0,[k,j]=a.useState(x??""),S=u!==void 0,z=S?u:k,f=v=>{S||j(v.target.value),w?.(v)},b=()=>{S||j(""),d?.()},y=i&&!!z;return t.jsxs(Ho,{$fullWidth:l,children:[t.jsxs(qo,{children:[t.jsxs(Ko,{id:m,$size:n,$variant:e,$error:!!c,"aria-invalid":!!c,"aria-describedby":C?h:void 0,value:z,onChange:f,...g,children:[s&&t.jsx("option",{value:"",disabled:!0,children:s}),o.map(v=>t.jsx("option",{value:v.value,disabled:v.disabled,children:v.label},v.value))]}),y?t.jsx(Uo,{type:"button",onClick:b,"aria-label":"Clear selection",children:t.jsx(Z,{size:14})}):t.jsx(Zo,{"aria-hidden":"true",children:t.jsx(U,{size:14})})]}),C&&t.jsx(_o,{id:h,$error:!0,children:C})]})}J.displayName="Select";const Xo=r.a`
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: color 0.15s;
@@ -508,4 +514,73 @@
           color: ${s.colors.neutral[900]};
         }
       `})[o]}
-`;function X({variant:o="default",external:s,children:n,...e}){return a.jsx(Uo,{$variant:o,...s&&{target:"_blank",rel:"noreferrer"},...e,children:n})}X.displayName="Link";const G=t.createContext(null);function Zo({children:o}){const[s,n]=t.useState(null),e=t.useCallback(l=>{n({...l,id:Date.now()})},[]),c=t.useMemo(()=>{const l=i=>e(i);return l.success=(i,d)=>e({...d,message:i,variant:"success"}),l.error=(i,d)=>e({...d,message:i,variant:"error"}),l.warning=(i,d)=>e({...d,message:i,variant:"warning"}),l.info=(i,d)=>e({...d,message:i,variant:"info"}),l},[e]);return a.jsxs(G.Provider,{value:{toast:c},children:[o,s&&a.jsx(L,{open:!0,onClose:()=>n(null),message:s.message,variant:s.variant,duration:s.duration,position:s.position},s.id)]})}function Xo(){const o=t.useContext(G);if(!o)throw new Error("useToast must be used within a ToastProvider");return o}function Go({initialValues:o,validate:s,onSubmit:n,onError:e}){const[c,l]=t.useState(o),[i,d]=t.useState({}),[g,f]=t.useState({}),[x,k]=t.useState(!1),v=t.useRef(c);v.current=c;const b=t.useCallback(u=>{if(!s)return{};const p=s(u);return Object.fromEntries(Object.entries(p).filter(([,$])=>$!==void 0))},[s]),h=t.useRef(g);h.current=g;const S=t.useCallback(u=>{const{name:p,value:$}=u.target,y={...v.current,[p]:$};l(y),h.current[p]&&d(b(y))},[b]),w=t.useCallback(u=>{const{name:p}=u.target;f($=>({...$,[p]:!0})),d(b(v.current))},[b]),m=t.useCallback(u=>{u?.preventDefault();const p=Object.keys(v.current).reduce((T,E)=>({...T,[E]:!0}),{});f(p);const $=b(v.current);if(d($),Object.keys($).length>0){e?.($);return}(async()=>{k(!0);try{await n?.(v.current)}finally{k(!1)}})()},[b,n,e]),C=t.useCallback((u,p)=>{l($=>({...$,[u]:p}))},[]),z=t.useCallback(()=>{l(o),d({}),f({}),k(!1)},[o]),j=Object.fromEntries(Object.entries(i).filter(([u])=>g[u]));return{values:c,errors:j,touched:g,handleChange:S,handleBlur:w,handleSubmit:m,setFieldValue:C,reset:z,isSubmitting:x}}const M={primary:{50:"#f0f8ff",500:"#0070f3",700:"#005bb5"},neutral:{0:"#ffffff",100:"#f5f5f5",200:"#eaeaea",300:"#cacaca",400:"#cccccc",500:"#666666",600:"#333333",900:"#111111"},error:{50:"#fef2f2",500:"#d32f2f"},success:{50:"#f0fdf4",500:"#16a34a"},warning:{50:"#fffbeb",500:"#d97706"},info:{50:"#eff6ff",500:"#2563eb"}},Jo={1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px"},Qo={md:"6px"},os={modal:1e3,toast:1100},ss={xs:"12px",sm:"14px",md:"16px",lg:"18px"},rs={colors:{...M,primary:{...M.primary,contrast:"#ffffff"}},spacing:Jo,fontSizes:ss,radius:Qo,zIndex:os,shadows:{focusRing:"0 0 0 2px rgba(0, 112, 243, 0.25)"}};function ns(o){const s=parseInt(o.slice(1,3),16)/255,n=parseInt(o.slice(3,5),16)/255,e=parseInt(o.slice(5,7),16)/255,c=i=>i<=.03928?i/12.92:((i+.055)/1.055)**2.4;return .2126*c(s)+.7152*c(n)+.0722*c(e)>.179?"#111111":"#ffffff"}const B={colors:{primary:{50:"#fffde6",500:"#ffd000",700:"#ffd000",contrast:"#111111"},neutral:{0:"#ffffff",100:"#f5f0e8",200:"#e8e3db",300:"#ccc8c0",400:"#a8a49c",500:"#706c64",600:"#3c3830",900:"#111111"},error:{50:"#fff0f0",500:"#ff3333"},success:{50:"#f0fff4",500:"#00cc44"},warning:{50:"#fffbe6",500:"#ff9900"},info:{50:"#f0f0ff",500:"#3333ff"}},spacing:{1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px"},radius:{md:"2px"},zIndex:{modal:1e3,toast:1100},fontSizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px"},shadows:{focusRing:"3px 3px 0 #111111"},brutalism:{borderWidth:"2px",shadowOffset:"4px"}};function ts(o){return{...B,colors:{...B.colors,primary:{50:"#fffff0",500:o,700:o,contrast:ns(o)}}}}function es({theme:o=B,children:s}){return a.jsx(r.ThemeProvider,{theme:o,children:s})}exports.Badge=P;exports.Button=D;exports.Form=_;exports.FormField=H;exports.Input=Y;exports.Link=X;exports.Modal=q;exports.Select=Z;exports.ThemeProvider=es;exports.Toast=L;exports.ToastProvider=Zo;exports.createNeoBrutalTheme=ts;exports.defaultTheme=rs;exports.neoBrutalTheme=B;exports.useForm=Go;exports.useToast=Xo;
+`;function Q({variant:o="default",external:s,children:n,...e}){return t.jsx(Xo,{$variant:o,...s&&{target:"_blank",rel:"noreferrer"},...e,children:n})}Q.displayName="Link";const Go=r.div`
+  border-radius: ${({theme:o})=>o.radius.md};
+  background: ${({theme:o})=>o.colors.neutral[0]};
+  overflow: hidden;
+
+  ${({theme:o,$accentColor:s})=>o.brutalism?r.css`
+          border: ${o.brutalism.borderWidth} solid
+            ${s??o.colors.neutral[900]};
+          box-shadow: ${o.brutalism.shadowOffset}
+            ${o.brutalism.shadowOffset} 0
+            ${s??o.colors.neutral[900]};
+        `:r.css`
+          border: 1px solid ${s??o.colors.neutral[200]};
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        `}
+`,Jo=r.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: ${({theme:o})=>o.spacing[3]};
+  padding: ${({theme:o})=>o.spacing[4]};
+  background: ${({theme:o})=>o.brutalism?o.colors.neutral[100]:o.colors.neutral[0]};
+  border: none;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    background: ${({theme:o})=>o.colors.neutral[100]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      ${({theme:o,$accentColor:s})=>s??o.colors.primary[500]};
+    outline-offset: -2px;
+  }
+`,Qo=r.div`
+  flex: 1;
+  min-width: 0;
+`,os=r.span`
+  display: block;
+  font-size: ${({theme:o})=>o.fontSizes.md};
+  font-weight: 600;
+  color: ${({theme:o})=>o.colors.neutral[900]};
+`,ss=r.span`
+  display: block;
+  font-size: ${({theme:o})=>o.fontSizes.sm};
+  color: ${({theme:o})=>o.colors.neutral[500]};
+  margin-top: ${({theme:o})=>o.spacing[1]};
+`,rs=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${({theme:o})=>o.spacing[2]};
+`,ns=r.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  transform: ${({$open:o})=>o?"rotate(180deg)":"rotate(0deg)"};
+  color: ${({theme:o,$accentColor:s})=>s??o.colors.neutral[500]};
+`,ts=r.div`
+  display: grid;
+  grid-template-rows: ${({$open:o})=>o?"1fr":"0fr"};
+  transition: grid-template-rows 0.2s ease;
+`,es=r.div`
+  overflow: hidden;
+`,as=r.div`
+  padding: ${({theme:o})=>o.spacing[4]};
+  border-top: 1px solid ${({theme:o})=>o.colors.neutral[200]};
+`;function oo({title:o,children:s,defaultOpen:n=!1,open:e,onToggle:c,subtitle:l,headerActions:i,accentColor:d}){const[p,u]=a.useState(n),x=a.useId(),w=e!==void 0,g=w?e:p,$=()=>{const m=!g;w||u(m),c?.(m)};return t.jsxs(Go,{$accentColor:d,children:[t.jsxs(Jo,{type:"button",$open:g,$accentColor:d,"aria-expanded":g,"aria-controls":x,onClick:$,children:[t.jsxs(Qo,{children:[t.jsx(os,{children:o}),l&&t.jsx(ss,{children:l})]}),i&&t.jsx(rs,{onClick:m=>m.stopPropagation(),children:i}),t.jsx(ns,{$open:g,$accentColor:d,"aria-hidden":"true",children:t.jsx(U,{size:18,strokeWidth:2.5})})]}),t.jsx(ts,{$open:g,children:t.jsx(es,{id:x,role:"region","aria-label":o,children:t.jsx(as,{children:s})})})]})}oo.displayName="CollapsibleCard";const so=a.createContext(null);function is({children:o}){const[s,n]=a.useState(null),e=a.useCallback(l=>{n({...l,id:Date.now()})},[]),c=a.useMemo(()=>{const l=i=>e(i);return l.success=(i,d)=>e({...d,message:i,variant:"success"}),l.error=(i,d)=>e({...d,message:i,variant:"error"}),l.warning=(i,d)=>e({...d,message:i,variant:"warning"}),l.info=(i,d)=>e({...d,message:i,variant:"info"}),l},[e]);return t.jsxs(so.Provider,{value:{toast:c},children:[o,s&&t.jsx(L,{open:!0,onClose:()=>n(null),message:s.message,variant:s.variant,duration:s.duration,position:s.position},s.id)]})}function ls(){const o=a.useContext(so);if(!o)throw new Error("useToast must be used within a ToastProvider");return o}function cs({initialValues:o,validate:s,onSubmit:n,onError:e}){const[c,l]=a.useState(o),[i,d]=a.useState({}),[p,u]=a.useState({}),[x,w]=a.useState(!1),g=a.useRef(c);g.current=c;const $=a.useCallback(f=>{if(!s)return{};const b=s(f);return Object.fromEntries(Object.entries(b).filter(([,y])=>y!==void 0))},[s]),m=a.useRef(p);m.current=p;const h=a.useCallback(f=>{const{name:b,value:y}=f.target,v={...g.current,[b]:y};l(v),m.current[b]&&d($(v))},[$]),C=a.useCallback(f=>{const{name:b}=f.target;u(y=>({...y,[b]:!0})),d($(g.current))},[$]),k=a.useCallback(f=>{f?.preventDefault();const b=Object.keys(g.current).reduce((T,O)=>({...T,[O]:!0}),{});u(b);const y=$(g.current);if(d(y),Object.keys(y).length>0){e?.(y);return}(async()=>{w(!0);try{await n?.(g.current)}finally{w(!1)}})()},[$,n,e]),j=a.useCallback((f,b)=>{l(y=>({...y,[f]:b}))},[]),S=a.useCallback(()=>{l(o),d({}),u({}),w(!1)},[o]),z=Object.fromEntries(Object.entries(i).filter(([f])=>p[f]));return{values:c,errors:z,touched:p,handleChange:h,handleBlur:C,handleSubmit:k,setFieldValue:j,reset:S,isSubmitting:x}}const P={primary:{50:"#f0f8ff",500:"#0070f3",700:"#005bb5"},neutral:{0:"#ffffff",100:"#f5f5f5",200:"#eaeaea",300:"#cacaca",400:"#cccccc",500:"#666666",600:"#333333",900:"#111111"},error:{50:"#fef2f2",500:"#d32f2f"},success:{50:"#f0fdf4",500:"#16a34a"},warning:{50:"#fffbeb",500:"#d97706"},info:{50:"#eff6ff",500:"#2563eb"}},ds={1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px"},us={md:"6px"},fs={modal:1e3,toast:1100},ps={xs:"12px",sm:"14px",md:"16px",lg:"18px"},bs={colors:{...P,primary:{...P.primary,contrast:"#ffffff"}},spacing:ds,fontSizes:ps,radius:us,zIndex:fs,shadows:{focusRing:"0 0 0 2px rgba(0, 112, 243, 0.25)"}};function gs(o){const s=parseInt(o.slice(1,3),16)/255,n=parseInt(o.slice(3,5),16)/255,e=parseInt(o.slice(5,7),16)/255,c=i=>i<=.03928?i/12.92:((i+.055)/1.055)**2.4;return .2126*c(s)+.7152*c(n)+.0722*c(e)>.179?"#111111":"#ffffff"}const B={colors:{primary:{50:"#fffde6",500:"#ffd000",700:"#ffd000",contrast:"#111111"},neutral:{0:"#ffffff",100:"#f5f0e8",200:"#e8e3db",300:"#ccc8c0",400:"#a8a49c",500:"#706c64",600:"#3c3830",900:"#111111"},error:{50:"#fff0f0",500:"#ff3333"},success:{50:"#f0fff4",500:"#00cc44"},warning:{50:"#fffbe6",500:"#ff9900"},info:{50:"#f0f0ff",500:"#3333ff"}},spacing:{1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px"},radius:{md:"2px"},zIndex:{modal:1e3,toast:1100},fontSizes:{xs:"12px",sm:"14px",md:"16px",lg:"18px"},shadows:{focusRing:"3px 3px 0 #111111"},brutalism:{borderWidth:"2px",shadowOffset:"4px"}};function $s(o){return{...B,colors:{...B.colors,primary:{50:"#fffff0",500:o,700:o,contrast:gs(o)}}}}function xs({theme:o=B,children:s}){return t.jsx(r.ThemeProvider,{theme:o,children:s})}exports.Badge=D;exports.Button=Y;exports.CollapsibleCard=oo;exports.Form=X;exports.FormField=G;exports.Input=H;exports.Link=Q;exports.Modal=q;exports.Select=J;exports.ThemeProvider=xs;exports.Toast=L;exports.ToastProvider=is;exports.createNeoBrutalTheme=$s;exports.defaultTheme=bs;exports.neoBrutalTheme=B;exports.useForm=cs;exports.useToast=ls;

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export { Select } from './components/Select';
 export type { SelectProps, SelectOption, SelectSizes, SelectVariants, } from './components/Select';
 export { Link } from './components/Link';
 export type { LinkProps, LinkVariants } from './components/Link';
+export { CollapsibleCard } from './components/CollapsibleCard';
+export type { CollapsibleCardProps } from './components/CollapsibleCard';
 export { useToast, ToastProvider } from './hooks';
 export type { ToastOptions, ToastFn, ToastContextValue } from './hooks';
 export { useForm } from './hooks';