@kushagradhawan/kookie-ui 0.1.32 → 0.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/components.css +937 -458
  2. package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
  3. package/dist/cjs/components/_internal/base-button.js +1 -1
  4. package/dist/cjs/components/_internal/base-button.js.map +3 -3
  5. package/dist/cjs/components/chatbar.d.ts +202 -0
  6. package/dist/cjs/components/chatbar.d.ts.map +1 -0
  7. package/dist/cjs/components/chatbar.js +2 -0
  8. package/dist/cjs/components/chatbar.js.map +7 -0
  9. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  10. package/dist/cjs/components/icon-button.js +2 -2
  11. package/dist/cjs/components/icon-button.js.map +3 -3
  12. package/dist/cjs/components/icons.d.ts +6 -1
  13. package/dist/cjs/components/icons.d.ts.map +1 -1
  14. package/dist/cjs/components/icons.js +1 -1
  15. package/dist/cjs/components/icons.js.map +3 -3
  16. package/dist/cjs/components/index.d.ts +3 -0
  17. package/dist/cjs/components/index.d.ts.map +1 -1
  18. package/dist/cjs/components/index.js +1 -1
  19. package/dist/cjs/components/index.js.map +3 -3
  20. package/dist/cjs/components/popover.d.ts +13 -1
  21. package/dist/cjs/components/popover.d.ts.map +1 -1
  22. package/dist/cjs/components/popover.js +1 -1
  23. package/dist/cjs/components/popover.js.map +3 -3
  24. package/dist/cjs/components/sheet.d.ts +82 -0
  25. package/dist/cjs/components/sheet.d.ts.map +1 -0
  26. package/dist/cjs/components/sheet.js +2 -0
  27. package/dist/cjs/components/sheet.js.map +7 -0
  28. package/dist/cjs/components/shell.d.ts +180 -0
  29. package/dist/cjs/components/shell.d.ts.map +1 -0
  30. package/dist/cjs/components/shell.js +2 -0
  31. package/dist/cjs/components/shell.js.map +7 -0
  32. package/dist/cjs/components/sidebar.d.ts +4 -33
  33. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  34. package/dist/cjs/components/sidebar.js +1 -1
  35. package/dist/cjs/components/sidebar.js.map +3 -3
  36. package/dist/cjs/components/skeleton.d.ts.map +1 -1
  37. package/dist/cjs/components/skeleton.js +1 -1
  38. package/dist/cjs/components/skeleton.js.map +2 -2
  39. package/dist/cjs/helpers/inert.d.ts +1 -1
  40. package/dist/cjs/helpers/inert.d.ts.map +1 -1
  41. package/dist/cjs/helpers/inert.js +1 -1
  42. package/dist/cjs/helpers/inert.js.map +2 -2
  43. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  44. package/dist/esm/components/_internal/base-button.js +1 -1
  45. package/dist/esm/components/_internal/base-button.js.map +3 -3
  46. package/dist/esm/components/chatbar.d.ts +202 -0
  47. package/dist/esm/components/chatbar.d.ts.map +1 -0
  48. package/dist/esm/components/chatbar.js +2 -0
  49. package/dist/esm/components/chatbar.js.map +7 -0
  50. package/dist/esm/components/icon-button.d.ts.map +1 -1
  51. package/dist/esm/components/icon-button.js +2 -2
  52. package/dist/esm/components/icon-button.js.map +3 -3
  53. package/dist/esm/components/icons.d.ts +6 -1
  54. package/dist/esm/components/icons.d.ts.map +1 -1
  55. package/dist/esm/components/icons.js +1 -1
  56. package/dist/esm/components/icons.js.map +3 -3
  57. package/dist/esm/components/index.d.ts +3 -0
  58. package/dist/esm/components/index.d.ts.map +1 -1
  59. package/dist/esm/components/index.js +1 -1
  60. package/dist/esm/components/index.js.map +3 -3
  61. package/dist/esm/components/popover.d.ts +13 -1
  62. package/dist/esm/components/popover.d.ts.map +1 -1
  63. package/dist/esm/components/popover.js +1 -1
  64. package/dist/esm/components/popover.js.map +3 -3
  65. package/dist/esm/components/sheet.d.ts +82 -0
  66. package/dist/esm/components/sheet.d.ts.map +1 -0
  67. package/dist/esm/components/sheet.js +2 -0
  68. package/dist/esm/components/sheet.js.map +7 -0
  69. package/dist/esm/components/shell.d.ts +180 -0
  70. package/dist/esm/components/shell.d.ts.map +1 -0
  71. package/dist/esm/components/shell.js +2 -0
  72. package/dist/esm/components/shell.js.map +7 -0
  73. package/dist/esm/components/sidebar.d.ts +4 -33
  74. package/dist/esm/components/sidebar.d.ts.map +1 -1
  75. package/dist/esm/components/sidebar.js +1 -1
  76. package/dist/esm/components/sidebar.js.map +3 -3
  77. package/dist/esm/components/skeleton.d.ts.map +1 -1
  78. package/dist/esm/components/skeleton.js.map +2 -2
  79. package/dist/esm/helpers/inert.d.ts +1 -1
  80. package/dist/esm/helpers/inert.d.ts.map +1 -1
  81. package/dist/esm/helpers/inert.js +1 -1
  82. package/dist/esm/helpers/inert.js.map +2 -2
  83. package/package.json +2 -1
  84. package/src/components/_internal/base-button.tsx +8 -0
  85. package/src/components/_internal/base-card.css +18 -18
  86. package/src/components/_internal/base-dialog.css +11 -49
  87. package/src/components/_internal/base-menu.css +2 -2
  88. package/src/components/_internal/base-sidebar-menu.css +3 -3
  89. package/src/components/accordion.css +6 -6
  90. package/src/components/animations.css +65 -81
  91. package/src/components/callout.css +3 -3
  92. package/src/components/chatbar.css +214 -0
  93. package/src/components/chatbar.tsx +1181 -0
  94. package/src/components/icon-button.tsx +11 -0
  95. package/src/components/icons.tsx +97 -2
  96. package/src/components/image.css +3 -3
  97. package/src/components/index.css +3 -0
  98. package/src/components/index.tsx +3 -0
  99. package/src/components/popover.css +53 -8
  100. package/src/components/popover.tsx +180 -2
  101. package/src/components/scroll-area.css +3 -3
  102. package/src/components/segmented-control.css +3 -3
  103. package/src/components/sheet.css +90 -0
  104. package/src/components/sheet.tsx +247 -0
  105. package/src/components/shell.css +137 -0
  106. package/src/components/shell.tsx +1032 -0
  107. package/src/components/sidebar.css +55 -268
  108. package/src/components/sidebar.tsx +40 -262
  109. package/src/components/skeleton.tsx +1 -2
  110. package/src/components/text-area.css +6 -5
  111. package/src/components/tooltip.css +2 -2
  112. package/src/helpers/inert.ts +3 -3
  113. package/src/styles/tokens/constants.css +6 -3
  114. package/src/styles/tokens/index.css +1 -0
  115. package/src/styles/tokens/radius.css +7 -2
  116. package/src/styles/tokens/space.css +6 -0
  117. package/src/styles/tokens/transition.css +91 -46
  118. package/styles.css +998 -496
  119. package/tokens/base.css +57 -35
  120. package/tokens.css +61 -38
@@ -1,2 +1,2 @@
1
- "use client";import*as e from"react";import s from"classnames";import{Slot as E}from"./slot.js";import{Accordion as N}from"radix-ui";import{sidebarPropDefs as M}from"./sidebar.props.js";import{Theme as w,useThemeContext as J}from"./theme.js";import{IconButton as Q}from"./icon-button.js";import{ScrollArea as X}from"./scroll-area.js";import{Separator as Y}from"./separator.js";import{ChevronDownIcon as Z,ThickChevronRightIcon as ee}from"./icons.js";import{extractProps as re}from"../helpers/extract-props.js";import{Kbd as te}from"./kbd.js";import{Badge as L}from"./badge.js";const y=e.createContext(null);function H(){const r=e.useContext(y);if(!r)throw new Error("useSidebar must be used within a SidebarProvider.");return r}function oe(){const[r,o]=e.useState(!1);return e.useEffect(()=>{const t=()=>{o(window.innerWidth<768)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]),r}const I=e.forwardRef(({defaultOpen:r=!0,open:o,onOpenChange:t,side:a="left",className:p,children:l,...i},c)=>{const u=oe(),[d,b]=e.useState(!1),[m,P]=e.useState(r),g=o??m,f=e.useCallback(n=>{const v=typeof n=="function"?n(g):n;t?t(v):P(v)},[t,g]),C=e.useCallback(()=>u?b(n=>!n):f(n=>!n),[u,f,b]),S=g?"expanded":"collapsed",T=e.useMemo(()=>({state:S,open:g,setOpen:f,isMobile:u,openMobile:d,setOpenMobile:b,toggleSidebar:C,side:a}),[S,g,f,u,d,b,C,a]);return e.createElement("div",{...i,ref:c,className:s("rt-SidebarProvider",p),"data-state":S,"data-side":a},e.createElement(y.Provider,{value:T},l))});I.displayName="Sidebar.Provider";const R=e.forwardRef((r,o)=>{const t=J(),{isMobile:a,state:p,openMobile:l}=H(),{size:i=M.size.default,variant:c=M.variant.default,menuVariant:u=M.menuVariant.default,type:d=M.type.default,side:b=M.side.default,collapsible:m=M.collapsible.default,panelBackground:P,color:g,highContrast:f=M.highContrast.default}=r,{className:C,children:S,...T}=re(r,M),{asChild:n,panelBackground:v,...B}=T,x=g||t.accentColor,U=typeof i=="object"?i.initial||"2":i,h=e.useContext(y);return h&&(h.side=b,h.type=d,h.variant=c,h.menuVariant=u,h.collapsible=m,h.size=U),m==="none"?e.createElement("div",{...B,ref:o,"data-accent-color":x,"data-state":p,"data-side":b,"data-type":d,"data-collapsible":m,className:s("rt-SidebarRoot",`rt-r-size-${i}`,C)},e.createElement(w,null,e.createElement("div",{className:s("rt-SidebarContainer",`rt-variant-${c}`),"data-accent-color":x,"data-high-contrast":f||void 0,"data-side":b,"data-panel-background":P},S))):a?e.createElement("div",{...B,ref:o,"data-accent-color":x,"data-state":l?"open":"closed","data-side":b,"data-type":d,"data-collapsible":m,className:s("rt-SidebarRoot","rt-SidebarRoot--mobile",C)},e.createElement(w,null,e.createElement("div",{className:s("rt-SidebarContainer",`rt-variant-${c}`,`rt-r-size-${i}`),"data-accent-color":x,"data-high-contrast":f||void 0,"data-side":b,"data-type":d,"data-collapsible":m,"data-panel-background":P},S))):e.createElement("div",{...B,ref:o,"data-accent-color":x,"data-state":p,"data-side":b,"data-type":d,"data-collapsible":m,className:s("rt-SidebarRoot",C)},e.createElement(w,null,e.createElement("div",{className:s("rt-SidebarContainer",`rt-variant-${c}`,`rt-r-size-${i}`),"data-accent-color":x,"data-high-contrast":f||void 0,"data-side":b,"data-type":d,"data-collapsible":m,"data-panel-background":P},S)))});R.displayName="Sidebar.Root";const z=e.forwardRef(({className:r,children:o,"aria-label":t="Main navigation",...a},p)=>{const l=e.useContext(y),{size:i="2",menuVariant:c="soft",type:u="sidebar",collapsible:d="none"}=l||{};return e.createElement(X,{type:"hover"},e.createElement("div",{...a,ref:p,id:"sidebar-navigation",role:"navigation","aria-label":t,className:s("rt-BaseMenuContent","rt-SidebarContent",`rt-r-size-${i}`,`rt-menu-variant-${c}`,r),"data-type":u,"data-collapsible":d},o))});z.displayName="Sidebar.Content";const G=e.forwardRef(({className:r,asContainer:o=!0,...t},a)=>{const p=e.useContext(y),{size:l="2",menuVariant:i="soft"}=p||{};return e.createElement("div",{...t,ref:a,className:s("rt-SidebarHeader",`rt-r-size-${l}`,`rt-menu-variant-${i}`,{"rt-SidebarHeader--container":o},r)})});G.displayName="Sidebar.Header";const D=e.forwardRef(({className:r,asContainer:o=!0,...t},a)=>{const p=e.useContext(y),{size:l="2",menuVariant:i="soft"}=p||{};return e.createElement("div",{...t,ref:a,className:s("rt-SidebarFooter",`rt-r-size-${l}`,`rt-menu-variant-${i}`,{"rt-SidebarFooter--container":o},r)})});D.displayName="Sidebar.Footer";const W=e.forwardRef(({onClick:r,children:o,...t},a)=>{const{toggleSidebar:p,state:l}=H();return e.createElement(Q,{...t,ref:a,variant:"ghost","aria-label":l==="expanded"?"Collapse sidebar":"Expand sidebar","aria-expanded":l==="expanded","aria-controls":"sidebar-navigation",onClick:i=>{r?.(i),p()}},o||e.createElement(Z,null))});W.displayName="Sidebar.Trigger";const k=e.forwardRef(({className:r,...o},t)=>e.createElement(Y,{...o,ref:t,className:s("rt-SidebarSeparator",r)}));k.displayName="Sidebar.Separator";const A=e.forwardRef(({className:r,...o},t)=>e.createElement("ul",{...o,ref:t,role:"menu",className:s("rt-BaseMenuViewport","rt-SidebarMenu",r)}));A.displayName="Sidebar.Menu";const $=e.forwardRef(({className:r,...o},t)=>e.createElement("li",{...o,ref:t,className:s("rt-SidebarMenuItem",r)}));$.displayName="Sidebar.MenuItem";const O=e.forwardRef(({asChild:r=!1,isActive:o=!1,shortcut:t,badge:a,className:p,children:l,onMouseEnter:i,onMouseLeave:c,onKeyDown:u,...d},b)=>{const[m,P]=e.useState(!1),g=e.useContext(y),{size:f="2"}=g||{},C=r?E:"button",{onClick:S}=d,T=e.useCallback(n=>{switch(n.key){case"Enter":case" ":n.preventDefault(),S&&S(n);break;case"ArrowDown":{n.preventDefault();const v=n.currentTarget.nextElementSibling?.querySelector('[role="menuitem"]');v&&v.focus();break}case"ArrowUp":{n.preventDefault();const v=n.currentTarget.previousElementSibling?.querySelector('[role="menuitem"]');v&&v.focus();break}}u?.(n)},[S,u]);return e.createElement(C,{...d,ref:b,role:"menuitem","aria-current":o?"page":void 0,className:s("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton",p),"data-active":o||void 0,"data-highlighted":m||void 0,onKeyDown:T,onMouseEnter:n=>{P(!0),i?.(n)},onMouseLeave:n=>{P(!1),c?.(n)}},r?l:e.createElement(e.Fragment,null,l,a&&e.createElement("div",{className:"rt-SidebarMenuBadge"},typeof a=="string"?e.createElement(L,{size:f,variant:"soft"},a):e.createElement(L,{size:a.size||f,variant:a.variant||"soft",color:a.color,highContrast:a.highContrast,radius:a.radius},a.content)),t&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-SidebarMenuShortcut"},e.createElement(te,{size:f},t))))});O.displayName="Sidebar.MenuButton";const V=e.forwardRef(({defaultOpen:r=!1,children:o,...t},a)=>e.createElement("div",{...t,ref:a},e.createElement(N.Root,{type:"single",collapsible:!0,defaultValue:r?"item":void 0},e.createElement(N.Item,{value:"item"},o))));V.displayName="Sidebar.MenuSub";const F=e.forwardRef(({asChild:r=!1,className:o,children:t,onMouseEnter:a,onMouseLeave:p,...l},i)=>{const[c,u]=e.useState(!1);return e.createElement(N.Header,{asChild:!0},e.createElement("div",null,e.createElement(N.Trigger,{...l,ref:i,asChild:r,role:"menuitem","aria-haspopup":"true",className:s("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",o),"data-highlighted":c||void 0,onMouseEnter:d=>{u(!0),a?.(d)},onMouseLeave:d=>{u(!1),p?.(d)}},r?t:e.createElement(e.Fragment,null,t,e.createElement(ee,{className:s("rt-BaseMenuSubTriggerIcon","rt-SidebarMenuSubTriggerIcon")})))))});F.displayName="Sidebar.MenuSubTrigger";const j=e.forwardRef(({className:r,children:o,...t},a)=>e.createElement(N.Content,{...t,ref:a,className:s("rt-SidebarMenuSubContent",r)},e.createElement("div",{className:"rt-SidebarMenuSubList"},o)));j.displayName="Sidebar.MenuSubContent";const K=e.forwardRef(({className:r,...o},t)=>e.createElement("div",{...o,ref:t,className:s("rt-BaseMenuGroup","rt-SidebarGroup",r)}));K.displayName="Sidebar.Group";const _=e.forwardRef(({asChild:r=!1,className:o,...t},a)=>e.createElement(r?E:"div",{...t,ref:a,role:"group",className:s("rt-BaseMenuLabel","rt-SidebarGroupLabel",o)}));_.displayName="Sidebar.GroupLabel";const q=e.forwardRef(({className:r,...o},t)=>e.createElement("div",{...o,ref:t,className:s("rt-SidebarGroupContent",r)}));q.displayName="Sidebar.GroupContent";export{z as Content,D as Footer,K as Group,q as GroupContent,_ as GroupLabel,G as Header,A as Menu,O as MenuButton,$ as MenuItem,V as MenuSub,j as MenuSubContent,F as MenuSubTrigger,I as Provider,R as Root,k as Separator,W as Trigger,H as useSidebar};
1
+ "use client";import*as e from"react";import n from"classnames";import{Slot as y}from"./slot.js";import{Accordion as S}from"radix-ui";import{sidebarPropDefs as C}from"./sidebar.props.js";import{useThemeContext as $}from"./theme.js";import{ScrollArea as j}from"./scroll-area.js";import{Separator as K}from"./separator.js";import{ThickChevronRightIcon as O}from"./icons.js";import{extractProps as _}from"../helpers/extract-props.js";import{Kbd as q}from"./kbd.js";import{Badge as N}from"./badge.js";const T=e.createContext(null);function P(){return e.useContext(T)}const B=e.forwardRef((r,o)=>{const t=$(),{size:a=C.size.default,variant:i=C.variant.default,menuVariant:s=C.menuVariant.default,panelBackground:u,color:m,highContrast:l=C.highContrast.default}=r,{className:p,children:v,...M}=_(r,C),{asChild:h,panelBackground:k,...b}=M,g=m||t.accentColor,f=typeof a=="object"?a.initial||"2":a;return e.createElement("div",{...b,ref:o,"data-accent-color":g,className:n("rt-SidebarRoot",p)},e.createElement(T.Provider,{value:{size:f,menuVariant:s}},e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${i}`,`rt-r-size-${f}`,`rt-menu-variant-${s}`),"data-accent-color":g,"data-high-contrast":l||void 0,"data-panel-background":u},v)))});B.displayName="Sidebar.Root";const H=e.forwardRef(({className:r,children:o,role:t="navigation","aria-label":a="Main navigation",id:i,...s},u)=>{const m=P(),l=m?.size??"2",p=m?.menuVariant??"soft";return e.createElement(j,{type:"hover"},e.createElement("div",{...s,ref:u,id:i,role:t,"aria-label":a,className:n("rt-BaseMenuContent","rt-SidebarContent",`rt-r-size-${l}`,`rt-menu-variant-${p}`,r)},o))});H.displayName="Sidebar.Content";const R=e.forwardRef(({className:r,asContainer:o=!0,...t},a)=>{const i=P(),s=i?.size??"2",u=i?.menuVariant??"soft";return e.createElement("div",{...t,ref:a,className:n("rt-SidebarHeader",`rt-r-size-${s}`,`rt-menu-variant-${u}`,{"rt-SidebarHeader--container":o},r)})});R.displayName="Sidebar.Header";const L=e.forwardRef(({className:r,asContainer:o=!0,...t},a)=>{const i=P(),s=i?.size??"2",u=i?.menuVariant??"soft";return e.createElement("div",{...t,ref:a,className:n("rt-SidebarFooter",`rt-r-size-${s}`,`rt-menu-variant-${u}`,{"rt-SidebarFooter--container":o},r)})});L.displayName="Sidebar.Footer";const x=e.forwardRef(({className:r,...o},t)=>e.createElement(K,{...o,ref:t,className:n("rt-SidebarSeparator",r)}));x.displayName="Sidebar.Separator";const E=e.forwardRef(({className:r,...o},t)=>e.createElement("ul",{...o,ref:t,role:"menu",className:n("rt-BaseMenuViewport","rt-SidebarMenu",r)}));E.displayName="Sidebar.Menu";const z=e.forwardRef(({className:r,...o},t)=>e.createElement("li",{...o,ref:t,className:n("rt-SidebarMenuItem",r)}));z.displayName="Sidebar.MenuItem";const w=e.forwardRef(({asChild:r=!1,isActive:o=!1,shortcut:t,badge:a,className:i,children:s,onMouseEnter:u,onMouseLeave:m,onKeyDown:l,...p},v)=>{const[M,h]=e.useState(!1),b=P()?.size??"2",g=r?y:"button",{onClick:f}=p,F=e.useCallback(d=>{switch(d.key){case"Enter":case" ":d.preventDefault(),f&&f(d);break;case"ArrowDown":{d.preventDefault();const c=d.currentTarget.nextElementSibling?.querySelector('[role="menuitem"]');c&&c.focus();break}case"ArrowUp":{d.preventDefault();const c=d.currentTarget.previousElementSibling?.querySelector('[role="menuitem"]');c&&c.focus();break}}l?.(d)},[f,l]);return e.createElement(g,{...p,ref:v,role:"menuitem","aria-current":o?"page":void 0,className:n("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton",i),"data-active":o||void 0,"data-highlighted":M||void 0,onKeyDown:F,onMouseEnter:d=>{h(!0),u?.(d)},onMouseLeave:d=>{h(!1),m?.(d)}},r?s:e.createElement(e.Fragment,null,s,a&&e.createElement("div",{className:"rt-SidebarMenuBadge"},typeof a=="string"?e.createElement(N,{size:b,variant:"soft"},a):e.createElement(N,{size:a.size||b,variant:a.variant||"soft",color:a.color,highContrast:a.highContrast,radius:a.radius},a.content)),t&&e.createElement("div",{className:"rt-BaseMenuShortcut rt-SidebarMenuShortcut"},e.createElement(q,{size:b},t))))});w.displayName="Sidebar.MenuButton";const G=e.forwardRef(({defaultOpen:r=!1,children:o,...t},a)=>e.createElement("div",{...t,ref:a},e.createElement(S.Root,{type:"single",collapsible:!0,defaultValue:r?"item":void 0},e.createElement(S.Item,{value:"item"},o))));G.displayName="Sidebar.MenuSub";const I=e.forwardRef(({asChild:r=!1,className:o,children:t,onMouseEnter:a,onMouseLeave:i,...s},u)=>{const[m,l]=e.useState(!1);return e.createElement(S.Header,{asChild:!0},e.createElement("div",null,e.createElement(S.Trigger,{...s,ref:u,asChild:r,role:"menuitem","aria-haspopup":"true",className:n("rt-reset","rt-BaseMenuItem","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",o),"data-highlighted":m||void 0,onMouseEnter:p=>{l(!0),a?.(p)},onMouseLeave:p=>{l(!1),i?.(p)}},r?t:e.createElement(e.Fragment,null,t,e.createElement(O,{className:n("rt-BaseMenuSubTriggerIcon","rt-SidebarMenuSubTriggerIcon")})))))});I.displayName="Sidebar.MenuSubTrigger";const V=e.forwardRef(({className:r,children:o,...t},a)=>e.createElement(S.Content,{...t,ref:a,className:n("rt-SidebarMenuSubContent",r)},e.createElement("div",{className:"rt-SidebarMenuSubList"},o)));V.displayName="Sidebar.MenuSubContent";const D=e.forwardRef(({className:r,...o},t)=>e.createElement("div",{...o,ref:t,className:n("rt-BaseMenuGroup","rt-SidebarGroup",r)}));D.displayName="Sidebar.Group";const W=e.forwardRef(({asChild:r=!1,className:o,...t},a)=>e.createElement(r?y:"div",{...t,ref:a,role:"group",className:n("rt-BaseMenuLabel","rt-SidebarGroupLabel",o)}));W.displayName="Sidebar.GroupLabel";const A=e.forwardRef(({className:r,...o},t)=>e.createElement("div",{...o,ref:t,className:n("rt-SidebarGroupContent",r)}));A.displayName="Sidebar.GroupContent";export{H as Content,L as Footer,D as Group,A as GroupContent,W as GroupLabel,R as Header,E as Menu,w as MenuButton,z as MenuItem,G as MenuSub,V as MenuSubContent,I as MenuSubTrigger,B as Root,x as Separator};
2
2
  //# sourceMappingURL=sidebar.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/sidebar.tsx"],
4
- "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ChevronDownIcon, ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n content: React.ReactNode;\n variant?: BadgeProps['variant'];\n size?: BadgeProps['size'];\n color?: BadgeProps['color'];\n highContrast?: BadgeProps['highContrast'];\n radius?: BadgeProps['radius'];\n};\n\n// Sidebar context for state management\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n side: 'left' | 'right';\n type: 'sidebar' | 'floating';\n variant: 'soft' | 'outline' | 'surface' | 'ghost';\n menuVariant: 'solid' | 'soft';\n collapsible: 'offcanvas' | 'icon' | 'none';\n size: '1' | '2';\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\n// Hook to detect mobile (simplified version)\nfunction useIsMobile() {\n const [isMobile, setIsMobile] = React.useState(false);\n\n React.useEffect(() => {\n const checkIsMobile = () => {\n setIsMobile(window.innerWidth < 768);\n };\n\n checkIsMobile();\n window.addEventListener('resize', checkIsMobile);\n return () => window.removeEventListener('resize', checkIsMobile);\n }, []);\n\n return isMobile;\n}\n\n// Provider component\ninterface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n side?: 'left' | 'right';\n}\n\nconst SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n side = 'left',\n className,\n children,\n ...props\n },\n forwardedRef,\n ) => {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // Internal state for uncontrolled mode\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n\n // Use controlled state if provided, otherwise internal state\n const open = openProp ?? internalOpen;\n\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n setInternalOpen(openState);\n }\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // State for data attributes\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = React.useMemo<Partial<SidebarContextProps>>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n side,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, side],\n );\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarProvider', className)}\n data-state={state}\n data-side={side}\n >\n <SidebarContext.Provider value={contextValue as SidebarContextProps}>\n {children}\n </SidebarContext.Provider>\n </div>\n );\n },\n);\nSidebarProvider.displayName = 'Sidebar.Provider';\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n const themeContext = useThemeContext();\n const { isMobile, state, openMobile } = useSidebar();\n\n const {\n size = sidebarPropDefs.size.default,\n variant = sidebarPropDefs.variant.default,\n menuVariant = sidebarPropDefs.menuVariant.default,\n type = sidebarPropDefs.type.default,\n side = sidebarPropDefs.side.default,\n collapsible = sidebarPropDefs.collapsible.default,\n panelBackground,\n color,\n highContrast = sidebarPropDefs.highContrast.default,\n\n } = props;\n\n const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n const resolvedColor = color || themeContext.accentColor;\n\n // Update context with current props - we'll pass the resolved values\n const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n const context = React.useContext(SidebarContext);\n if (context) {\n context.side = side;\n context.type = type;\n context.variant = variant;\n context.menuVariant = menuVariant;\n context.collapsible = collapsible;\n context.size = resolvedSize;\n }\n\n if (collapsible === 'none') {\n return (\n <div\n {...safeRootProps}\n ref={forwardedRef}\n data-accent-color={resolvedColor}\n data-state={state}\n data-side={side}\n data-type={type}\n data-collapsible={collapsible}\n className={classNames('rt-SidebarRoot', `rt-r-size-${size}`, className)}\n >\n <Theme>\n <div\n className={classNames('rt-SidebarContainer', `rt-variant-${variant}`)}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-side={side}\n data-panel-background={panelBackground}\n >\n {children}\n </div>\n </Theme>\n </div>\n );\n }\n\n if (isMobile) {\n return (\n <div\n {...safeRootProps}\n ref={forwardedRef}\n data-accent-color={resolvedColor}\n data-state={openMobile ? 'open' : 'closed'}\n data-side={side}\n data-type={type}\n data-collapsible={collapsible}\n className={classNames('rt-SidebarRoot', 'rt-SidebarRoot--mobile', className)}\n >\n <Theme>\n <div\n className={classNames(\n 'rt-SidebarContainer',\n `rt-variant-${variant}`,\n `rt-r-size-${size}`,\n )}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-side={side}\n data-type={type}\n data-collapsible={collapsible}\n data-panel-background={panelBackground}\n >\n {children}\n </div>\n </Theme>\n </div>\n );\n }\n\n return (\n <div\n {...safeRootProps}\n ref={forwardedRef}\n data-accent-color={resolvedColor}\n data-state={state}\n data-side={side}\n data-type={type}\n data-collapsible={collapsible}\n className={classNames('rt-SidebarRoot', className)}\n >\n <Theme>\n <div\n className={classNames(\n 'rt-SidebarContainer',\n `rt-variant-${variant}`,\n `rt-r-size-${size}`,\n )}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-side={side}\n data-type={type}\n data-collapsible={collapsible}\n data-panel-background={panelBackground}\n >\n {children}\n </div>\n </Theme>\n </div>\n );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Accessible label for the navigation region.\n * @default \"Main navigation\"\n */\n 'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n (\n { className, children, 'aria-label': ariaLabel = 'Main navigation', ...props },\n forwardedRef,\n ) => {\n const context = React.useContext(SidebarContext);\n const {\n size = '2',\n menuVariant = 'soft',\n type = 'sidebar',\n collapsible = 'none',\n } = context || {};\n\n return (\n <ScrollArea type=\"hover\">\n <div\n {...props}\n ref={forwardedRef}\n id=\"sidebar-navigation\"\n role=\"navigation\"\n aria-label={ariaLabel}\n className={classNames(\n 'rt-BaseMenuContent',\n 'rt-SidebarContent',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n className,\n )}\n data-type={type}\n data-collapsible={collapsible}\n >\n {children}\n </div>\n </ScrollArea>\n );\n },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const context = React.useContext(SidebarContext);\n const { size = '2', menuVariant = 'soft' } = context || {};\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarHeader',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarHeader--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const context = React.useContext(SidebarContext);\n const { size = '2', menuVariant = 'soft' } = context || {};\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarFooter',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarFooter--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\ninterface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {}\n\nconst SidebarTrigger = React.forwardRef<React.ElementRef<typeof IconButton>, SidebarTriggerProps>(\n ({ onClick, children, ...props }, forwardedRef) => {\n const { toggleSidebar, state } = useSidebar();\n\n return (\n <IconButton\n {...props}\n ref={forwardedRef}\n variant=\"ghost\"\n aria-label={state === 'expanded' ? 'Collapse sidebar' : 'Expand sidebar'}\n aria-expanded={state === 'expanded'}\n aria-controls=\"sidebar-navigation\"\n onClick={(event) => {\n onClick?.(event);\n toggleSidebar();\n }}\n >\n {children || <ChevronDownIcon />}\n </IconButton>\n );\n },\n);\nSidebarTrigger.displayName = 'Sidebar.Trigger';\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n React.ComponentRef<typeof Separator>,\n SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <Separator\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarSeparator', className)}\n />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n ({ className, ...props }, forwardedRef) => (\n <ul\n {...props}\n ref={forwardedRef}\n role=\"menu\"\n className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}\n />\n ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n ({ className, ...props }, forwardedRef) => (\n <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n asChild?: boolean;\n isActive?: boolean;\n shortcut?: React.ReactNode;\n badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n asChild = false,\n isActive = false,\n shortcut,\n badge,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const context = React.useContext(SidebarContext);\n const { size: sidebarSize = '2' } = context || {};\n\n const Comp = asChild ? Slot : 'button';\n\n const { onClick } = props;\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (onClick) onClick(event as any);\n break;\n case 'ArrowDown': {\n event.preventDefault();\n // Focus next menu item\n const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(\n '[role=\"menuitem\"]',\n ) as HTMLElement;\n if (nextItem) nextItem.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n // Focus previous menu item\n const prevItem = (\n event.currentTarget as HTMLElement\n ).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (prevItem) prevItem.focus();\n break;\n }\n }\n onKeyDown?.(event);\n },\n [onClick, onKeyDown],\n );\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"menuitem\"\n aria-current={isActive ? 'page' : undefined}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n data-active={isActive || undefined}\n data-highlighted={isHighlighted || undefined}\n onKeyDown={handleKeyDown}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n {/* Badge with soft variant default and size mapping to sidebar size */}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge\n size={badge.size || sidebarSize}\n variant={badge.variant || 'soft'}\n color={badge.color}\n highContrast={badge.highContrast}\n radius={badge.radius}\n >\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n return (\n <div {...props} ref={forwardedRef}>\n <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n <Accordion.Item value=\"item\">{children}</Accordion.Item>\n </Accordion.Root>\n </div>\n );\n },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof Accordion.Trigger>,\n SidebarMenuSubTriggerProps\n>(\n (\n { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n return (\n <Accordion.Header asChild>\n <div>\n <Accordion.Trigger\n {...props}\n ref={forwardedRef}\n asChild={asChild}\n role=\"menuitem\"\n aria-haspopup=\"true\"\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-SidebarMenuButton',\n 'rt-SidebarMenuSubTrigger',\n className,\n )}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <ThickChevronRightIcon\n className={classNames(\n 'rt-BaseMenuSubTriggerIcon',\n 'rt-SidebarMenuSubTriggerIcon',\n )}\n />\n </>\n )}\n </Accordion.Trigger>\n </div>\n </Accordion.Header>\n );\n },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n React.ElementRef<typeof Accordion.Content>,\n SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n return (\n <Accordion.Content\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarMenuSubContent', className)}\n >\n <div className=\"rt-SidebarMenuSubList\">{children}</div>\n </Accordion.Content>\n );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n />\n ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n ({ asChild = false, className, ...props }, forwardedRef) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"group\"\n className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n />\n );\n },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarGroupContent', className)}\n />\n ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n SidebarProvider as Provider,\n Sidebar as Root,\n SidebarContent as Content,\n SidebarHeader as Header,\n SidebarFooter as Footer,\n SidebarTrigger as Trigger,\n SidebarSeparator as Separator,\n SidebarMenu as Menu,\n SidebarMenuItem as MenuItem,\n SidebarMenuButton as MenuButton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubTrigger as MenuSubTrigger,\n SidebarMenuSubContent as MenuSubContent,\n SidebarGroup as Group,\n SidebarGroupLabel as GroupLabel,\n SidebarGroupContent as GroupContent,\n // Export hook\n useSidebar,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n * <Logo />\n * <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n * <Logo />\n * <Sidebar.MenuButton>\n * <SettingsIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n * <div className=\"rt-flex rt-items-center rt-gap-2\">\n * <Logo />\n * <span>App Name</span>\n * </div>\n * <Sidebar.MenuButton>\n * <UserAvatar />\n * <span>John Doe</span>\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n * <Sidebar.MenuButton>\n * <UserIcon />\n * <span>Settings</span>\n * <ChevronUpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n * <span>v1.0.0</span>\n * <Sidebar.MenuButton>\n * <HelpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n SidebarProviderProps as ProviderProps,\n SidebarProps as RootProps,\n SidebarContentProps as ContentProps,\n SidebarHeaderProps as HeaderProps,\n SidebarFooterProps as FooterProps,\n SidebarTriggerProps as TriggerProps,\n BadgeConfig,\n};\n"],
5
- "mappings": "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",
6
- "names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "Theme", "useThemeContext", "IconButton", "ScrollArea", "Separator", "ChevronDownIcon", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarContext", "useSidebar", "context", "useIsMobile", "isMobile", "setIsMobile", "checkIsMobile", "SidebarProvider", "defaultOpen", "openProp", "setOpenProp", "side", "className", "children", "props", "forwardedRef", "openMobile", "setOpenMobile", "internalOpen", "setInternalOpen", "open", "setOpen", "value", "openState", "toggleSidebar", "state", "contextValue", "Sidebar", "themeContext", "size", "variant", "menuVariant", "type", "collapsible", "panelBackground", "color", "highContrast", "rootProps", "_", "__", "safeRootProps", "resolvedColor", "resolvedSize", "SidebarContent", "ariaLabel", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarTrigger", "onClick", "event", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "handleKeyDown", "nextItem", "prevItem", "SidebarMenuSub", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
4
+ "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from './slot.js';\nimport { Accordion } from 'radix-ui';\n\nimport { sidebarPropDefs } from './sidebar.props.js';\nimport { useThemeContext } from './theme.js';\n// import { IconButton } from './icon-button.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Separator } from './separator.js';\nimport { ThickChevronRightIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { Kbd } from './kbd.js';\nimport { Badge } from './badge.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { BadgeProps } from './badge.js';\n\n// Badge configuration type for sidebar menu buttons\ntype BadgeConfig = {\n content: React.ReactNode;\n variant?: BadgeProps['variant'];\n size?: BadgeProps['size'];\n color?: BadgeProps['color'];\n highContrast?: BadgeProps['highContrast'];\n radius?: BadgeProps['radius'];\n};\n\n// Internal presentational context (not exported) for size/menu variant\ntype SidebarVisualContextValue = {\n size: '1' | '2';\n menuVariant: 'solid' | 'soft';\n};\nconst SidebarVisualContext = React.createContext<SidebarVisualContextValue | null>(null);\nfunction useSidebarVisual() {\n return React.useContext(SidebarVisualContext);\n}\n\n// Main Sidebar component\ntype SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;\ninterface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {}\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n const {\n size = sidebarPropDefs.size.default,\n variant = sidebarPropDefs.variant.default,\n menuVariant = sidebarPropDefs.menuVariant.default,\n // type = sidebarPropDefs.type.default,\n // side = sidebarPropDefs.side.default,\n // collapsible = sidebarPropDefs.collapsible.default,\n panelBackground,\n color,\n highContrast = sidebarPropDefs.highContrast.default,\n } = props;\n\n const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);\n const { asChild: _, panelBackground: __, ...safeRootProps } = rootProps; // Remove asChild and panelBackground from DOM props\n const resolvedColor = color || themeContext.accentColor;\n\n // Update context with current props - we'll pass the resolved values\n const resolvedSize = typeof size === 'object' ? size.initial || '2' : size;\n return (\n <div\n {...safeRootProps}\n ref={forwardedRef}\n data-accent-color={resolvedColor}\n className={classNames('rt-SidebarRoot', className)}\n >\n <SidebarVisualContext.Provider value={{ size: resolvedSize, menuVariant }}>\n <div\n className={classNames(\n 'rt-SidebarContainer',\n `rt-variant-${variant}`,\n `rt-r-size-${resolvedSize}`,\n `rt-menu-variant-${menuVariant}`,\n )}\n data-accent-color={resolvedColor}\n data-high-contrast={highContrast || undefined}\n data-panel-background={panelBackground}\n >\n {children}\n </div>\n </SidebarVisualContext.Provider>\n </div>\n );\n});\nSidebar.displayName = 'Sidebar.Root';\n\n// Sidebar content area\ninterface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {\n id?: string;\n role?: 'navigation' | 'none';\n 'aria-label'?: string;\n}\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, SidebarContentProps>(\n (\n {\n className,\n children,\n role = 'navigation',\n 'aria-label': ariaLabel = 'Main navigation',\n id,\n ...props\n },\n forwardedRef,\n ) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <ScrollArea type=\"hover\">\n <div\n {...props}\n ref={forwardedRef}\n id={id}\n role={role}\n aria-label={ariaLabel}\n className={classNames(\n 'rt-BaseMenuContent',\n 'rt-SidebarContent',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n className,\n )}\n >\n {children}\n </div>\n </ScrollArea>\n );\n },\n);\nSidebarContent.displayName = 'Sidebar.Content';\n\n// Sidebar header\ninterface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarHeader',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarHeader--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarHeader.displayName = 'Sidebar.Header';\n\n// Sidebar footer\ninterface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {\n /**\n * Whether to use the default flex container layout.\n * @default true\n */\n asContainer?: boolean;\n}\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, asContainer = true, ...props }, forwardedRef) => {\n const visual = useSidebarVisual();\n const size = visual?.size ?? '2';\n const menuVariant = visual?.menuVariant ?? 'soft';\n\n return (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames(\n 'rt-SidebarFooter',\n `rt-r-size-${size}`,\n `rt-menu-variant-${menuVariant}`,\n {\n 'rt-SidebarFooter--container': asContainer,\n },\n className,\n )}\n />\n );\n },\n);\nSidebarFooter.displayName = 'Sidebar.Footer';\n\n// Sidebar trigger button\n// removed Trigger in presentational-only Sidebar\n\n// Removed SidebarInset - not needed\n\n// Sidebar separator\ninterface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}\n\nconst SidebarSeparator = React.forwardRef<\n React.ComponentRef<typeof Separator>,\n SidebarSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <Separator\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarSeparator', className)}\n />\n));\nSidebarSeparator.displayName = 'Sidebar.Separator';\n\n// Menu components - reusing dropdown menu structure\ninterface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(\n ({ className, ...props }, forwardedRef) => (\n <ul\n {...props}\n ref={forwardedRef}\n role=\"menu\"\n className={classNames('rt-BaseMenuViewport', 'rt-SidebarMenu', className)}\n />\n ),\n);\nSidebarMenu.displayName = 'Sidebar.Menu';\n\ninterface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n ({ className, ...props }, forwardedRef) => (\n <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />\n ),\n);\nSidebarMenuItem.displayName = 'Sidebar.MenuItem';\n\ninterface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n asChild?: boolean;\n isActive?: boolean;\n shortcut?: React.ReactNode;\n badge?: string | BadgeConfig;\n}\n\nconst SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n asChild = false,\n isActive = false,\n shortcut,\n badge,\n className,\n children,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n const visual = useSidebarVisual();\n const sidebarSize = visual?.size ?? '2';\n\n const Comp = asChild ? Slot : 'button';\n\n const { onClick } = props;\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (onClick) onClick(event as any);\n break;\n case 'ArrowDown': {\n event.preventDefault();\n // Focus next menu item\n const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector(\n '[role=\"menuitem\"]',\n ) as HTMLElement;\n if (nextItem) nextItem.focus();\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n // Focus previous menu item\n const prevItem = (\n event.currentTarget as HTMLElement\n ).previousElementSibling?.querySelector('[role=\"menuitem\"]') as HTMLElement;\n if (prevItem) prevItem.focus();\n break;\n }\n }\n onKeyDown?.(event);\n },\n [onClick, onKeyDown],\n );\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"menuitem\"\n aria-current={isActive ? 'page' : undefined}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}\n data-active={isActive || undefined}\n data-highlighted={isHighlighted || undefined}\n onKeyDown={handleKeyDown}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n {/* Badge with soft variant default and size mapping to sidebar size */}\n {badge && (\n <div className=\"rt-SidebarMenuBadge\">\n {typeof badge === 'string' ? (\n <Badge size={sidebarSize} variant=\"soft\">\n {badge}\n </Badge>\n ) : (\n <Badge\n size={badge.size || sidebarSize}\n variant={badge.variant || 'soft'}\n color={badge.color}\n highContrast={badge.highContrast}\n radius={badge.radius}\n >\n {badge.content}\n </Badge>\n )}\n </div>\n )}\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-SidebarMenuShortcut\">\n <Kbd size={sidebarSize}>{shortcut}</Kbd>\n </div>\n )}\n </>\n )}\n </Comp>\n );\n },\n);\nSidebarMenuButton.displayName = 'Sidebar.MenuButton';\n\n// Sub-menu components using Radix Accordion\ninterface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {\n defaultOpen?: boolean;\n}\n\nconst SidebarMenuSub = React.forwardRef<HTMLDivElement, SidebarMenuSubProps>(\n ({ defaultOpen = false, children, ...props }, forwardedRef) => {\n return (\n <div {...props} ref={forwardedRef}>\n <Accordion.Root type=\"single\" collapsible defaultValue={defaultOpen ? 'item' : undefined}>\n <Accordion.Item value=\"item\">{children}</Accordion.Item>\n </Accordion.Root>\n </div>\n );\n },\n);\nSidebarMenuSub.displayName = 'Sidebar.MenuSub';\n\ninterface SidebarMenuSubTriggerProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {\n asChild?: boolean;\n}\n\nconst SidebarMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof Accordion.Trigger>,\n SidebarMenuSubTriggerProps\n>(\n (\n { asChild = false, className, children, onMouseEnter, onMouseLeave, ...props },\n forwardedRef,\n ) => {\n const [isHighlighted, setIsHighlighted] = React.useState(false);\n\n return (\n <Accordion.Header asChild>\n <div>\n <Accordion.Trigger\n {...props}\n ref={forwardedRef}\n asChild={asChild}\n role=\"menuitem\"\n aria-haspopup=\"true\"\n className={classNames(\n 'rt-reset',\n 'rt-BaseMenuItem',\n 'rt-SidebarMenuButton',\n 'rt-SidebarMenuSubTrigger',\n className,\n )}\n data-highlighted={isHighlighted || undefined}\n onMouseEnter={(event) => {\n setIsHighlighted(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n setIsHighlighted(false);\n onMouseLeave?.(event);\n }}\n >\n {asChild ? (\n children\n ) : (\n <>\n {children}\n <ThickChevronRightIcon\n className={classNames(\n 'rt-BaseMenuSubTriggerIcon',\n 'rt-SidebarMenuSubTriggerIcon',\n )}\n />\n </>\n )}\n </Accordion.Trigger>\n </div>\n </Accordion.Header>\n );\n },\n);\nSidebarMenuSubTrigger.displayName = 'Sidebar.MenuSubTrigger';\n\ninterface SidebarMenuSubContentProps\n extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {}\n\nconst SidebarMenuSubContent = React.forwardRef<\n React.ElementRef<typeof Accordion.Content>,\n SidebarMenuSubContentProps\n>(({ className, children, ...props }, forwardedRef) => {\n return (\n <Accordion.Content\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarMenuSubContent', className)}\n >\n <div className=\"rt-SidebarMenuSubList\">{children}</div>\n </Accordion.Content>\n );\n});\nSidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';\n\n// Group components\ninterface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)}\n />\n ),\n);\nSidebarGroup.displayName = 'Sidebar.Group';\n\ninterface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {\n asChild?: boolean;\n}\n\nconst SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(\n ({ asChild = false, className, ...props }, forwardedRef) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n {...props}\n ref={forwardedRef}\n role=\"group\"\n className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)}\n />\n );\n },\n);\nSidebarGroupLabel.displayName = 'Sidebar.GroupLabel';\n\ninterface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(\n ({ className, ...props }, forwardedRef) => (\n <div\n {...props}\n ref={forwardedRef}\n className={classNames('rt-SidebarGroupContent', className)}\n />\n ),\n);\nSidebarGroupContent.displayName = 'Sidebar.GroupContent';\n\n// Export all components following shadcn's pattern\nexport {\n Sidebar as Root,\n SidebarContent as Content,\n SidebarHeader as Header,\n SidebarFooter as Footer,\n SidebarSeparator as Separator,\n SidebarMenu as Menu,\n SidebarMenuItem as MenuItem,\n SidebarMenuButton as MenuButton,\n SidebarMenuSub as MenuSub,\n SidebarMenuSubTrigger as MenuSubTrigger,\n SidebarMenuSubContent as MenuSubContent,\n SidebarGroup as Group,\n SidebarGroupLabel as GroupLabel,\n SidebarGroupContent as GroupContent,\n};\n\n/**\n * Enhanced Sidebar Header and Footer Usage Examples:\n *\n * 1. Simple default container (backwards compatible):\n * <Sidebar.Header>\n * <Logo />\n * <span>App Name</span>\n * </Sidebar.Header>\n *\n * 2. Custom flex layout:\n * <Sidebar.Header className=\"rt-justify-between rt-gap-3\">\n * <Logo />\n * <Sidebar.MenuButton>\n * <SettingsIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 3. Column layout for multiple rows:\n * <Sidebar.Header className=\"rt-flex-col rt-gap-2\" asContainer={false}>\n * <div className=\"rt-flex rt-items-center rt-gap-2\">\n * <Logo />\n * <span>App Name</span>\n * </div>\n * <Sidebar.MenuButton>\n * <UserAvatar />\n * <span>John Doe</span>\n * </Sidebar.MenuButton>\n * </Sidebar.Header>\n *\n * 4. Interactive footer with menu button:\n * <Sidebar.Footer>\n * <Sidebar.MenuButton>\n * <UserIcon />\n * <span>Settings</span>\n * <ChevronUpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * 5. Custom footer layout:\n * <Sidebar.Footer className=\"rt-justify-between\">\n * <span>v1.0.0</span>\n * <Sidebar.MenuButton>\n * <HelpIcon />\n * </Sidebar.MenuButton>\n * </Sidebar.Footer>\n *\n * Available utility classes:\n * - Layout: rt-flex-row, rt-flex-col\n * - Alignment: rt-items-center, rt-items-start, rt-items-end\n * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end\n * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4\n */\n\nexport type {\n SidebarProps as RootProps,\n SidebarContentProps as ContentProps,\n SidebarHeaderProps as HeaderProps,\n SidebarFooterProps as FooterProps,\n BadgeConfig,\n};\n"],
5
+ "mappings": "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",
6
+ "names": ["React", "classNames", "Slot", "Accordion", "sidebarPropDefs", "useThemeContext", "ScrollArea", "Separator", "ThickChevronRightIcon", "extractProps", "Kbd", "Badge", "SidebarVisualContext", "useSidebarVisual", "Sidebar", "props", "forwardedRef", "themeContext", "size", "variant", "menuVariant", "panelBackground", "color", "highContrast", "className", "children", "rootProps", "_", "__", "safeRootProps", "resolvedColor", "resolvedSize", "SidebarContent", "role", "ariaLabel", "id", "visual", "SidebarHeader", "asContainer", "SidebarFooter", "SidebarSeparator", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton", "asChild", "isActive", "shortcut", "badge", "onMouseEnter", "onMouseLeave", "onKeyDown", "isHighlighted", "setIsHighlighted", "sidebarSize", "Comp", "onClick", "handleKeyDown", "event", "nextItem", "prevItem", "SidebarMenuSub", "defaultOpen", "SidebarMenuSubTrigger", "SidebarMenuSubContent", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent"]
7
7
  }
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGzF,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,UAAU,aACR,SAAQ,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,EACjD,WAAW,EACX,gBAAgB;CAAG;AACvB,QAAA,MAAM,QAAQ,uFAyBZ,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGzF,KAAK,gBAAgB,GAAG,eAAe,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,UAAU,aACR,SAAQ,qBAAqB,CAAC,MAAM,EAAE,YAAY,CAAC,EACjD,WAAW,EACX,gBAAgB;CAAG;AACvB,QAAA,MAAM,QAAQ,uFAwBZ,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/skeleton.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { inert } from '../helpers/inert.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { skeletonPropDefs } from './skeleton.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\ntype SkeletonElement = React.ElementRef<'span'>;\ntype SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>;\ninterface SkeletonProps\n extends ComponentPropsWithout<'span', RemovedProps>,\n MarginProps,\n SkeletonOwnProps {}\nconst Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {\n const { children, className, loading, ...skeletonProps } = extractProps(\n props,\n skeletonPropDefs,\n marginPropDefs\n );\n\n if (!loading) return children;\n\n const Tag = React.isValidElement(children) ? Slot.Root : 'span';\n\n return (\n <Tag\n ref={forwardedRef}\n aria-hidden\n className={classNames('rt-Skeleton', className)}\n data-inline-skeleton={React.isValidElement(children) ? undefined : true}\n tabIndex={-1}\n // @ts-expect-error\n inert={inert}\n {...skeletonProps}\n >\n {children}\n </Tag>\n );\n});\nSkeleton.displayName = 'Skeleton';\n\nexport { Skeleton };\nexport type { SkeletonProps };\n"],
5
- "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,WAErB,OAAS,SAAAC,MAAa,sBACtB,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,oBAAAC,MAAwB,sBAYjC,MAAMC,EAAWP,EAAM,WAA2C,CAACQ,EAAOC,IAAiB,CACzF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAS,GAAGC,CAAc,EAAIT,EACzDI,EACAF,EACAD,CACF,EAEA,GAAI,CAACO,EAAS,OAAOF,EAErB,MAAMI,EAAMd,EAAM,eAAeU,CAAQ,EAAIR,EAAK,KAAO,OAEzD,OACEF,EAAA,cAACc,EAAA,CACC,IAAKL,EACL,cAAW,GACX,UAAWR,EAAW,cAAeU,CAAS,EAC9C,uBAAsBX,EAAM,eAAeU,CAAQ,EAAI,OAAY,GACnE,SAAU,GAEV,MAAOP,EACN,GAAGU,GAEHH,CACH,CAEJ,CAAC,EACDH,EAAS,YAAc",
4
+ "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { inert } from '../helpers/inert.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { skeletonPropDefs } from './skeleton.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\ntype SkeletonElement = React.ElementRef<'span'>;\ntype SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>;\ninterface SkeletonProps\n extends ComponentPropsWithout<'span', RemovedProps>,\n MarginProps,\n SkeletonOwnProps {}\nconst Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {\n const { children, className, loading, ...skeletonProps } = extractProps(\n props,\n skeletonPropDefs,\n marginPropDefs,\n );\n\n if (!loading) return children;\n\n const Tag = React.isValidElement(children) ? Slot.Root : 'span';\n\n return (\n <Tag\n ref={forwardedRef}\n aria-hidden\n className={classNames('rt-Skeleton', className)}\n data-inline-skeleton={React.isValidElement(children) ? undefined : true}\n tabIndex={-1}\n inert={inert}\n {...skeletonProps}\n >\n {children}\n </Tag>\n );\n});\nSkeleton.displayName = 'Skeleton';\n\nexport { Skeleton };\nexport type { SkeletonProps };\n"],
5
+ "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,WAErB,OAAS,SAAAC,MAAa,sBACtB,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,oBAAAC,MAAwB,sBAYjC,MAAMC,EAAWP,EAAM,WAA2C,CAACQ,EAAOC,IAAiB,CACzF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAS,GAAGC,CAAc,EAAIT,EACzDI,EACAF,EACAD,CACF,EAEA,GAAI,CAACO,EAAS,OAAOF,EAErB,MAAMI,EAAMd,EAAM,eAAeU,CAAQ,EAAIR,EAAK,KAAO,OAEzD,OACEF,EAAA,cAACc,EAAA,CACC,IAAKL,EACL,cAAW,GACX,UAAWR,EAAW,cAAeU,CAAS,EAC9C,uBAAsBX,EAAM,eAAeU,CAAQ,EAAI,OAAY,GACnE,SAAU,GACV,MAAOP,EACN,GAAGU,GAEHH,CACH,CAEJ,CAAC,EACDH,EAAS,YAAc",
6
6
  "names": ["React", "classNames", "Slot", "inert", "extractProps", "marginPropDefs", "skeletonPropDefs", "Skeleton", "props", "forwardedRef", "children", "className", "loading", "skeletonProps", "Tag"]
7
7
  }
@@ -1,2 +1,2 @@
1
- export declare const inert: string | true;
1
+ export declare const inert: boolean | undefined;
2
2
  //# sourceMappingURL=inert.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"inert.d.ts","sourceRoot":"","sources":["../../../src/helpers/inert.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,eAAwC,CAAC"}
1
+ {"version":3,"file":"inert.d.ts","sourceRoot":"","sources":["../../../src/helpers/inert.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,EAAE,OAAO,GAAG,SAA8D,CAAC"}
@@ -1,2 +1,2 @@
1
- import*as o from"react";const r=parseFloat(o.version)>=19||"";export{r as inert};
1
+ import*as e from"react";const n=parseFloat(e.version)>=19?!0:void 0;export{n as inert};
2
2
  //# sourceMappingURL=inert.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/helpers/inert.ts"],
4
- "sourcesContent": ["import * as React from 'react';\n\n// \"inert\" works differently between React versions\n// https://github.com/facebook/react/pull/24730\nexport const inert = parseFloat(React.version) >= 19 || '';\n"],
5
- "mappings": "AAAA,UAAYA,MAAW,QAIhB,MAAMC,EAAQ,WAAWD,EAAM,OAAO,GAAK,IAAM",
4
+ "sourcesContent": ["import * as React from 'react';\n\n// In React 19+, boolean attributes like inert are preserved; in earlier versions we omit it.\n// Use: {...(hidden ? { inert } : {})}\nexport const inert: boolean | undefined = parseFloat(React.version) >= 19 ? true : undefined;\n"],
5
+ "mappings": "AAAA,UAAYA,MAAW,QAIhB,MAAMC,EAA6B,WAAWD,EAAM,OAAO,GAAK,GAAK,GAAO",
6
6
  "names": ["React", "inert"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.32",
3
+ "version": "0.1.34",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
5
5
  "keywords": [
6
6
  "react",
@@ -121,6 +121,7 @@
121
121
  "classnames": "^2.3.2",
122
122
  "geist": "^1.4.2",
123
123
  "radix-ui": "^1.1.3",
124
+ "react-dropzone": "^14.3.8",
124
125
  "react-remove-scroll-bar": "^2.3.8"
125
126
  },
126
127
  "peerDependencies": {
@@ -141,6 +141,13 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
141
141
  const shouldPassDisabled =
142
142
  asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
143
143
 
144
+ // Determine if we are rendering a real <button> element so we can set a safe
145
+ // default type. Native <button> defaults to type="submit" which can cause
146
+ // accidental form submissions. We default to type="button" unless the user
147
+ // explicitly provided a type or we're using asChild (unknown underlying node).
148
+ const isNativeButtonElement = !asChild && (!as || as === 'button');
149
+ const hasExplicitTypeAttribute = 'type' in (baseButtonProps as Record<string, unknown>);
150
+
144
151
  // Generate unique ID for loading announcements
145
152
  const loadingId = React.useId();
146
153
  const describedById = props.loading ? `${loadingId}-loading` : undefined;
@@ -190,6 +197,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
190
197
  }}
191
198
  className={classNames('rt-reset', 'rt-BaseButton', className)}
192
199
  {...(shouldPassDisabled && { disabled })}
200
+ {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}
193
201
  >
194
202
  {props.loading ? (
195
203
  <>
@@ -98,39 +98,39 @@
98
98
  @breakpoints {
99
99
  .rt-BaseCard {
100
100
  &:where(.rt-r-size-1) {
101
+ --base-card-padding-top: var(--space-2);
102
+ --base-card-padding-right: var(--space-2);
103
+ --base-card-padding-bottom: var(--space-2);
104
+ --base-card-padding-left: var(--space-2);
105
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
106
+ }
107
+ &:where(.rt-r-size-2) {
101
108
  --base-card-padding-top: var(--space-3);
102
109
  --base-card-padding-right: var(--space-3);
103
110
  --base-card-padding-bottom: var(--space-3);
104
111
  --base-card-padding-left: var(--space-3);
105
- --base-card-border-radius: var(--radius-5);
112
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
106
113
  }
107
- &:where(.rt-r-size-2) {
114
+ &:where(.rt-r-size-3) {
108
115
  --base-card-padding-top: var(--space-4);
109
116
  --base-card-padding-right: var(--space-4);
110
117
  --base-card-padding-bottom: var(--space-4);
111
118
  --base-card-padding-left: var(--space-4);
112
- --base-card-border-radius: var(--radius-6);
119
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
113
120
  }
114
- &:where(.rt-r-size-3) {
121
+ &:where(.rt-r-size-4) {
115
122
  --base-card-padding-top: var(--space-5);
116
123
  --base-card-padding-right: var(--space-5);
117
124
  --base-card-padding-bottom: var(--space-5);
118
125
  --base-card-padding-left: var(--space-5);
119
- --base-card-border-radius: var(--radius-7);
126
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
120
127
  }
121
- &:where(.rt-r-size-4) {
128
+ &:where(.rt-r-size-5) {
122
129
  --base-card-padding-top: var(--space-6);
123
130
  --base-card-padding-right: var(--space-6);
124
131
  --base-card-padding-bottom: var(--space-6);
125
132
  --base-card-padding-left: var(--space-6);
126
- --base-card-border-radius: var(--radius-8);
127
- }
128
- &:where(.rt-r-size-5) {
129
- --base-card-padding-top: var(--space-7);
130
- --base-card-padding-right: var(--space-7);
131
- --base-card-padding-bottom: var(--space-7);
132
- --base-card-padding-left: var(--space-7);
133
- --base-card-border-radius: var(--radius-9);
133
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
134
134
  }
135
135
  }
136
136
  }
@@ -614,20 +614,20 @@
614
614
  --card-border-width: 0px;
615
615
 
616
616
  /* Base state: solid colors for solid panels */
617
- --card-background-color: var(--gray-2);
617
+ --card-background-color: var(--gray-3);
618
618
 
619
619
  /* Theme-level translucent override */
620
620
  :where([data-panel-background='translucent'], [data-material='translucent']) & {
621
- --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
621
+ --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
622
622
  }
623
623
 
624
624
  /* Component-level overrides (higher specificity) */
625
625
  &:where([data-panel-background='solid'], [data-material='solid']) {
626
- --card-background-color: var(--gray-2);
626
+ --card-background-color: var(--gray-3);
627
627
  }
628
628
 
629
629
  &:where([data-panel-background='translucent'], [data-material='translucent']) {
630
- --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
630
+ --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
631
631
  }
632
632
 
633
633
  &::before {
@@ -81,61 +81,28 @@
81
81
  @breakpoints {
82
82
  .rt-BaseDialogContent {
83
83
  &:where(.rt-r-size-1) {
84
- --dialog-content-padding: var(--space-4);
85
- border-radius: var(--radius-5);
84
+ --dialog-content-padding: var(--space-5);
85
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
86
86
  }
87
87
  &:where(.rt-r-size-2) {
88
- --dialog-content-padding: var(--space-5);
89
- border-radius: var(--radius-6);
88
+ --dialog-content-padding: var(--space-6);
89
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
90
90
  }
91
91
  &:where(.rt-r-size-3) {
92
- --dialog-content-padding: var(--space-6);
93
- border-radius: var(--radius-7);
92
+ --dialog-content-padding: var(--space-7);
93
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
94
94
  }
95
95
  &:where(.rt-r-size-4) {
96
- --dialog-content-padding: var(--space-7);
97
- border-radius: var(--radius-8);
96
+ --dialog-content-padding: var(--space-8);
97
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
98
98
  }
99
99
  }
100
100
  }
101
101
 
102
102
  @media (prefers-reduced-motion: no-preference) {
103
- @keyframes rt-dialog-overlay-no-op {
104
- from {
105
- opacity: 1;
106
- }
107
- to {
108
- opacity: 1;
109
- }
110
- }
111
-
112
- @keyframes rt-dialog-content-show {
113
- from {
114
- opacity: 0;
115
- transform: translateY(5px) scale(0.97);
116
- }
117
- to {
118
- opacity: 1;
119
- transform: translateY(0px) scale(1);
120
- }
121
- }
122
-
123
- @keyframes rt-dialog-content-hide {
124
- from {
125
- opacity: 1;
126
- transform: translateY(0px) scale(1);
127
- }
128
- to {
129
- opacity: 0;
130
- transform: translateY(5px) scale(0.99);
131
- }
132
- }
133
-
134
103
  .rt-BaseDialogOverlay {
135
104
  /* Keep the overlay mounted until the children have animated */
136
- &:where([data-state='closed']) {
137
- animation: rt-dialog-overlay-no-op var(--duration-4) var(--ease-spring-1);
138
- }
105
+ &:where([data-state='closed']) { animation: rt-dialog-overlay-no-op var(--motion-duration-small) var(--motion-spring-snappy); }
139
106
  &:where([data-state='open'])::before {
140
107
  animation: rt-fade-in var(--duration-5) var(--ease-spring-1);
141
108
  }
@@ -146,13 +113,8 @@
146
113
  }
147
114
 
148
115
  .rt-BaseDialogContent {
149
- &:where([data-state='open']) {
150
- animation: rt-dialog-content-show var(--duration-5) var(--ease-spring-1);
151
- }
152
- &:where([data-state='closed']) {
153
- opacity: 0;
154
- animation: rt-dialog-content-hide var(--duration-3) var(--ease-spring-1);
155
- }
116
+ &:where([data-state='open']) { animation: rt-dialog-content-show var(--motion-duration-medium) var(--motion-spring-snappy); }
117
+ &:where([data-state='closed']) { opacity: 0; animation: rt-dialog-content-hide var(--motion-duration-small) var(--motion-spring-snappy); }
156
118
  }
157
119
  }
158
120
 
@@ -335,14 +335,14 @@
335
335
 
336
336
  /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
337
337
  :where([data-panel-background='translucent']) & {
338
- transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
338
+ transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
339
339
  }
340
340
  }
341
341
 
342
342
  & :where(.rt-BaseMenuItem) {
343
343
  /* Remove backdrop-filter transitions in translucent mode to prevent flickering */
344
344
  :where([data-panel-background='translucent']) & {
345
- transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
345
+ transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
346
346
  }
347
347
  }
348
348
  }
@@ -97,7 +97,7 @@
97
97
  /* Accordion trigger icon rotation */
98
98
  .rt-SidebarMenuSubTrigger {
99
99
  & :where(.rt-SidebarMenuSubTriggerIcon) {
100
- transition: transform 0.2s ease;
100
+ transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
101
101
  }
102
102
 
103
103
  &:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
@@ -115,11 +115,11 @@
115
115
 
116
116
  /* Radix Accordion animation support */
117
117
  &:where([data-state="open"]) {
118
- animation: rt-sidebar-slide-down 200ms ease-out;
118
+ animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
119
119
  }
120
120
 
121
121
  &:where([data-state="closed"]) {
122
- animation: rt-sidebar-slide-up 200ms ease-out;
122
+ animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
123
123
  }
124
124
  }
125
125
 
@@ -29,16 +29,16 @@
29
29
  @breakpoints {
30
30
  .rt-AccordionRoot {
31
31
  &:where(.rt-r-size-1) {
32
- border-radius: var(--radius-2);
32
+ border-radius: var(--radius-1);
33
33
  }
34
34
  &:where(.rt-r-size-2) {
35
- border-radius: var(--radius-3);
35
+ border-radius: var(--radius-2);
36
36
  }
37
37
  &:where(.rt-r-size-3) {
38
- border-radius: var(--radius-4);
38
+ border-radius: var(--radius-3);
39
39
  }
40
40
  &:where(.rt-r-size-4) {
41
- border-radius: var(--radius-5);
41
+ border-radius: var(--radius-4);
42
42
  }
43
43
  }
44
44
  }
@@ -484,11 +484,11 @@
484
484
 
485
485
  /* Content animations */
486
486
  :where(.rt-AccordionContent[data-state="open"]) {
487
- animation: rt-slide-down var(--duration-spring-2) var(--ease-spring-1);
487
+ animation: rt-slide-down var(--motion-duration-small) var(--motion-spring-snappy);
488
488
  }
489
489
 
490
490
  :where(.rt-AccordionContent[data-state="closed"]) {
491
- animation: rt-slide-up var(--duration-spring-1) var(--ease-spring-1);
491
+ animation: rt-slide-up var(--motion-duration-micro) var(--motion-spring-snappy);
492
492
  }
493
493
 
494
494
  @keyframes rt-slide-down {