@kushagradhawan/kookie-ui 0.1.15 → 0.1.16

package/dist/esm/components/icons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icons.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\ntype IconElement = React.ElementRef<'svg'>;\ninterface IconProps extends ComponentPropsWithout<'svg', RemovedProps | 'children'> {}\n\nconst ThickDividerHorizontalIcon = React.forwardRef<IconElement, IconProps>(\n  (props, forwardedRef) => {\n    return (\n      <svg\n        width=\"9\"\n        height=\"9\"\n        viewBox=\"0 0 9 9\"\n        fill=\"currentcolor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z\"\n        />\n      </svg>\n    );\n  }\n);\n\nThickDividerHorizontalIcon.displayName = 'ThickDividerHorizontalIcon';\n\nconst ThickCheckIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z\"\n      />\n    </svg>\n  );\n});\nThickCheckIcon.displayName = 'ThickCheckIcon';\n\nconst ChevronDownIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <path d=\"M0.135232 3.15803C0.324102 2.95657 0.640521 2.94637 0.841971 3.13523L4.5 6.56464L8.158 3.13523C8.3595 2.94637 8.6759 2.95657 8.8648 3.15803C9.0536 3.35949 9.0434 3.67591 8.842 3.86477L4.84197 7.6148C4.64964 7.7951 4.35036 7.7951 4.15803 7.6148L0.158031 3.86477C-0.0434285 3.67591 -0.0536285 3.35949 0.135232 3.15803Z\" />\n    </svg>\n  );\n});\nChevronDownIcon.displayName = 'ChevronDownIcon';\n\nconst ThickChevronRightIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.23826 0.201711C3.54108 -0.0809141 4.01567 -0.0645489 4.29829 0.238264L7.79829 3.98826C8.06724 4.27642 8.06724 4.72359 7.79829 5.01174L4.29829 8.76174C4.01567 9.06455 3.54108 9.08092 3.23826 8.79829C2.93545 8.51567 2.91909 8.04108 3.20171 7.73826L6.22409 4.5L3.20171 1.26174C2.91909 0.958928 2.93545 0.484337 3.23826 0.201711Z\"\n      />\n    </svg>\n  );\n});\nThickChevronRightIcon.displayName = 'ThickChevronRightIcon';\n\nexport { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon };\nexport type { IconProps };\n"],
-  "mappings": "AAAA,OAAOA,MAAW,QAOlB,MAAMC,EAA6BD,EAAM,WACvC,CAACE,EAAOC,IAEJH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,iKACJ,CACF,CAGN,EAEAC,EAA2B,YAAc,6BAEzC,MAAMG,EAAiBJ,EAAM,WAAmC,CAACE,EAAOC,IAEpEH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,sXACJ,CACF,CAEH,EACDI,EAAe,YAAc,iBAE7B,MAAMC,EAAkBL,EAAM,WAAmC,CAACE,EAAOC,IAErEH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QAAK,EAAE,+TAA+T,CACzU,CAEH,EACDK,EAAgB,YAAc,kBAE9B,MAAMC,EAAwBN,EAAM,WAAmC,CAACE,EAAOC,IAE3EH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,2UACJ,CACF,CAEH,EACDM,EAAsB,YAAc",
-  "names": ["React", "ThickDividerHorizontalIcon", "props", "forwardedRef", "ThickCheckIcon", "ChevronDownIcon", "ThickChevronRightIcon"]
+  "sourcesContent": ["import React from 'react';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\ntype IconElement = React.ElementRef<'svg'>;\ninterface IconProps extends ComponentPropsWithout<'svg', RemovedProps | 'children'> {}\n\nconst ThickDividerHorizontalIcon = React.forwardRef<IconElement, IconProps>(\n  (props, forwardedRef) => {\n    return (\n      <svg\n        width=\"9\"\n        height=\"9\"\n        viewBox=\"0 0 9 9\"\n        fill=\"currentcolor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z\"\n        />\n      </svg>\n    );\n  }\n);\n\nThickDividerHorizontalIcon.displayName = 'ThickDividerHorizontalIcon';\n\nconst ThickCheckIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z\"\n      />\n    </svg>\n  );\n});\nThickCheckIcon.displayName = 'ThickCheckIcon';\n\nconst ChevronDownIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <path d=\"M0.135232 3.15803C0.324102 2.95657 0.640521 2.94637 0.841971 3.13523L4.5 6.56464L8.158 3.13523C8.3595 2.94637 8.6759 2.95657 8.8648 3.15803C9.0536 3.35949 9.0434 3.67591 8.842 3.86477L4.84197 7.6148C4.64964 7.7951 4.35036 7.7951 4.15803 7.6148L0.158031 3.86477C-0.0434285 3.67591 -0.0536285 3.35949 0.135232 3.15803Z\" />\n    </svg>\n  );\n});\nChevronDownIcon.displayName = 'ChevronDownIcon';\n\nconst ThickChevronRightIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.23826 0.201711C3.54108 -0.0809141 4.01567 -0.0645489 4.29829 0.238264L7.79829 3.98826C8.06724 4.27642 8.06724 4.72359 7.79829 5.01174L4.29829 8.76174C4.01567 9.06455 3.54108 9.08092 3.23826 8.79829C2.93545 8.51567 2.91909 8.04108 3.20171 7.73826L6.22409 4.5L3.20171 1.26174C2.91909 0.958928 2.93545 0.484337 3.23826 0.201711Z\"\n      />\n    </svg>\n  );\n});\nThickChevronRightIcon.displayName = 'ThickChevronRightIcon';\n\nconst ThickDotIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {\n  return (\n    <svg\n      width=\"9\"\n      height=\"9\"\n      viewBox=\"0 0 9 9\"\n      fill=\"currentcolor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n      ref={forwardedRef}\n    >\n      <circle cx=\"4.5\" cy=\"4.5\" r=\"2\" />\n    </svg>\n  );\n});\nThickDotIcon.displayName = 'ThickDotIcon';\n\nexport { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDividerHorizontalIcon, ThickDotIcon };\nexport type { IconProps };\n"],
+  "mappings": "AAAA,OAAOA,MAAW,QAOlB,MAAMC,EAA6BD,EAAM,WACvC,CAACE,EAAOC,IAEJH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,iKACJ,CACF,CAGN,EAEAC,EAA2B,YAAc,6BAEzC,MAAMG,EAAiBJ,EAAM,WAAmC,CAACE,EAAOC,IAEpEH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,sXACJ,CACF,CAEH,EACDI,EAAe,YAAc,iBAE7B,MAAMC,EAAkBL,EAAM,WAAmC,CAACE,EAAOC,IAErEH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QAAK,EAAE,+TAA+T,CACzU,CAEH,EACDK,EAAgB,YAAc,kBAE9B,MAAMC,EAAwBN,EAAM,WAAmC,CAACE,EAAOC,IAE3EH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,2UACJ,CACF,CAEH,EACDM,EAAsB,YAAc,wBAEpC,MAAMC,EAAeP,EAAM,WAAmC,CAACE,EAAOC,IAElEH,EAAA,cAAC,OACC,MAAM,IACN,OAAO,IACP,QAAQ,UACR,KAAK,eACL,MAAM,6BACL,GAAGE,EACJ,IAAKC,GAELH,EAAA,cAAC,UAAO,GAAG,MAAM,GAAG,MAAM,EAAE,IAAI,CAClC,CAEH,EACDO,EAAa,YAAc",
+  "names": ["React", "ThickDividerHorizontalIcon", "props", "forwardedRef", "ThickCheckIcon", "ChevronDownIcon", "ThickChevronRightIcon", "ThickDotIcon"]
 }

package/dist/esm/components/image.d.ts

@@ -16,6 +16,10 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
      * Shows a skeleton placeholder while loading instead of a blank space.
      */
     showSkeleton?: boolean;
+    /**
+     * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.
+     */
+    fadeIn?: boolean;
     /**
      * Callback fired when the image successfully loads.
      */

package/dist/esm/components/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFA+PT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAOjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,aAAa;IACf;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,KAAK,qFAkST,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/esm/components/image.js

@@ -1,2 +1,2 @@
-"use client";import*as e from"react";import o from"classnames";import{imagePropDefs as M}from"./image.props.js";import{extractProps as T}from"../helpers/extract-props.js";import{marginPropDefs as j}from"../props/margin.props.js";import{widthPropDefs as W}from"../props/width.props.js";import{heightPropDefs as z}from"../props/height.props.js";import{Skeleton as O}from"./skeleton.js";const k=e.forwardRef((f,c)=>{const{variant:g="surface",children:y}=f,{asChild:I,className:a,radius:r,style:s,loading:n="lazy",alt:p,src:i,placeholder:m,showSkeleton:b=!1,onLoad:P,onError:E,children:q,...l}=T(f,M,j,W,z),[d,v]=e.useState(!1),[S,N]=e.useState(!1),[D,w]=e.useState(!!m),u=e.useCallback(t=>{v(!0),N(!1),w(!1),P?.(t)},[P]),h=e.useCallback(t=>{v(!1),N(!0),w(!1),E?.(t)},[E]);if(!i)return console.warn("Image component: src prop is required"),null;!I&&p===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const C=b&&!d&&!S?e.createElement(O,{style:{...s,width:"100%",height:"100px",borderRadius:r?`var(--radius-${r})`:void 0},className:a}):null,H=m&&D?e.createElement("img",{"data-radius":r,style:{...s,position:"absolute",top:0,left:0,width:"100%",height:"100%",filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:o("rt-reset","rt-Image","rt-Image--placeholder",a),alt:"",src:m}):null,L=e.createElement("img",{"data-radius":r,loading:n,style:{...s,opacity:d?1:0,transition:"opacity 0.3s ease-out"},className:o("rt-reset","rt-Image",g==="blur"&&"rt-Image--blur",a),alt:p,src:i,onLoad:u,onError:h,...l,ref:c}),x=m||b?e.createElement("div",{style:{position:"relative",display:"inline-block"}},C,H,L):L;if(I&&y){const t=e.Children.only(y);return g==="blur"?e.cloneElement(t,{className:o(t.props?.className,"rt-variant-blur"),style:{position:"relative",display:"inline-block",textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...t.props?.style},children:e.createElement(e.Fragment,null,e.createElement("img",{"data-radius":r,loading:n,style:{...s,position:"absolute",top:"8px",left:"0"},className:o("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",a),alt:"",src:i,...l}),e.createElement("img",{"data-radius":r,loading:n,style:{...s,position:"relative",zIndex:1,opacity:d?1:0,transition:"opacity 0.3s ease-out"},className:o("rt-reset","rt-Image","rt-Image--blur",a),alt:p,src:i,onLoad:u,onError:h,...l,ref:c}))}):e.cloneElement(t,{className:o(t.props?.className,"rt-Image"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...t.props?.style},children:x})}return g==="blur"?e.createElement("div",{className:"rt-variant-blur",style:{position:"relative",display:"inline-block"}},e.createElement("img",{"data-radius":r,loading:n,style:{...s,position:"absolute",top:"8px",left:"0"},className:o("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",a),alt:"",src:i,...l}),e.createElement("img",{"data-radius":r,loading:n,style:{...s,position:"relative",zIndex:1,opacity:d?1:0,transition:"opacity 0.3s ease-out"},className:o("rt-reset","rt-Image","rt-Image--blur",a),alt:p,src:i,onLoad:u,onError:h,...l,ref:c})):x});k.displayName="Image";export{k as Image};
+"use client";import*as t from"react";import s from"classnames";import{imagePropDefs as w}from"./image.props.js";import{extractProps as z}from"../helpers/extract-props.js";import{marginPropDefs as O}from"../props/margin.props.js";import{widthPropDefs as q}from"../props/width.props.js";import{heightPropDefs as G}from"../props/height.props.js";import{Skeleton as _}from"./skeleton.js";const H=t.forwardRef((v,r)=>{const{variant:h="surface",children:N}=v,{asChild:L,className:a,radius:o,style:n,loading:p="lazy",alt:c,src:i,placeholder:g,showSkeleton:x=!1,fadeIn:l=!0,onLoad:k,onError:S,children:$,...m}=z(v,w,O,q,G),[u,f]=t.useState(!1),[M,y]=t.useState(!1),[T,I]=t.useState(!!g),d=t.useRef(null),b=t.useCallback(e=>{f(!0),y(!1),I(!1),k?.(e)},[k]),E=t.useCallback(e=>{f(!1),y(!0),I(!1),S?.(e)},[S]);if(t.useEffect(()=>{const e=d.current;e&&e.complete&&e.naturalWidth>0&&(f(!0),y(!1),I(!1))},[i]),!i)return console.warn("Image component: src prop is required"),null;!L&&c===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const W=x&&!u&&!M?t.createElement(_,{style:{...n,width:"100%",height:"100px",borderRadius:o?`var(--radius-${o})`:void 0},className:a}):null,j=g&&T?t.createElement("img",{"data-radius":o,style:{...n,position:"absolute",top:0,left:0,width:"100%",height:"100%",filter:"blur(4px)",opacity:.7,transition:"opacity 0.3s ease-out"},className:s("rt-reset","rt-Image","rt-Image--placeholder",a),alt:"",src:g}):null,D=t.createElement("img",{"data-radius":o,loading:p,style:{...n,opacity:l?u?1:0:1,transition:l?"opacity 0.3s ease-out":"none"},className:s("rt-reset","rt-Image",h==="blur"&&"rt-Image--blur",a),alt:c,src:i,onLoad:b,onError:E,...m,ref:e=>{d.current=e,typeof r=="function"?r(e):r&&(r.current=e)}}),C=g||x?t.createElement("div",{style:{position:"relative",display:"inline-block"}},W,j,D):D;if(L&&N){const e=t.Children.only(N);return h==="blur"?t.cloneElement(e,{className:s(e.props?.className,"rt-variant-blur"),style:{position:"relative",display:"inline-block",textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...e.props?.style},children:t.createElement(t.Fragment,null,t.createElement("img",{"data-radius":o,loading:p,style:{...n,position:"absolute",top:"8px",left:"0"},className:s("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",a),alt:"",src:i,...m}),t.createElement("img",{"data-radius":o,loading:p,style:{...n,position:"relative",zIndex:1,opacity:l?u?1:0:1,transition:l?"opacity 0.3s ease-out":"none"},className:s("rt-reset","rt-Image","rt-Image--blur",a),alt:c,src:i,onLoad:b,onError:E,...m,ref:P=>{d.current=P,typeof r=="function"?r(P):r&&(r.current=P)}}))}):t.cloneElement(e,{className:s(e.props?.className,"rt-Image"),style:{textDecoration:"none",color:"inherit",border:"none",background:"none",padding:0,font:"inherit",cursor:"pointer",...e.props?.style},children:C})}return h==="blur"?t.createElement("div",{className:"rt-variant-blur",style:{position:"relative",display:"inline-block"}},t.createElement("img",{"data-radius":o,loading:p,style:{...n,position:"absolute",top:"8px",left:"0"},className:s("rt-reset","rt-Image","rt-Image--blur","rt-Image--blur-bg",a),alt:"",src:i,...m}),t.createElement("img",{"data-radius":o,loading:p,style:{...n,position:"relative",zIndex:1,opacity:l?u?1:0:1,transition:l?"opacity 0.3s ease-out":"none"},className:s("rt-reset","rt-Image","rt-Image--blur",a),alt:c,src:i,onLoad:b,onError:E,...m,ref:e=>{d.current=e,typeof r=="function"?r(e):r&&(r.current=e)}})):C});H.displayName="Image";export{H as Image};
 //# sourceMappingURL=image.js.map

package/dist/esm/components/image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/image.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { imagePropDefs } from './image.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { widthPropDefs } from '../props/width.props.js';\nimport { heightPropDefs } from '../props/height.props.js';\nimport { Skeleton } from './skeleton.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { WidthProps } from '../props/width.props.js';\nimport type { HeightProps } from '../props/height.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ImageElement = React.ElementRef<'img'>;\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n  loading?: 'eager' | 'lazy';\n  /**\n   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    ImageOwnProps {\n  /**\n   * The alt attribute provides alternative information for an image if a user for some reason cannot view it.\n   * Required for accessibility when not using asChild. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', children } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children: _children, // Extract children to exclude from imgProps\n    ...imgProps\n  } = extractProps(props, imagePropDefs, marginPropDefs, widthPropDefs, heightPropDefs);\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n\n  // Handle image load - moved to top to avoid conditional hook call\n  const handleLoad = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {\n    setImageLoaded(true);\n    setImageError(false);\n    setShowPlaceholder(false);\n    userOnLoad?.(event);\n  }, [userOnLoad]);\n\n  // Handle image error - moved to top to avoid conditional hook call\n  const handleError = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {\n    setImageLoaded(false);\n    setImageError(true);\n    setShowPlaceholder(false);\n    userOnError?.(event);\n  }, [userOnError]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Create skeleton placeholder\n  const skeletonElement = showSkeleton && !imageLoaded && !imageError ? (\n    <Skeleton\n      style={{\n        ...style,\n        width: '100%',\n        height: '100px', // Default height, can be overridden by style\n        borderRadius: radius ? `var(--radius-${radius})` : undefined,\n      }}\n      className={className}\n    />\n  ) : null;\n\n  // Create placeholder image element\n  const placeholderElement = placeholder && showPlaceholder ? (\n    <img\n      data-radius={radius}\n      style={{\n        ...style,\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        filter: 'blur(4px)',\n        opacity: 0.7,\n        transition: 'opacity 0.3s ease-out',\n      }}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        'rt-Image--placeholder',\n        className,\n      )}\n      alt=\"\"\n      src={placeholder}\n    />\n  ) : null;\n\n  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={{\n        ...style,\n        opacity: imageLoaded ? 1 : 0,\n        transition: 'opacity 0.3s ease-out',\n      }}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        variant === 'blur' && 'rt-Image--blur',\n        className,\n      )}\n      alt={alt}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...imgProps}\n      ref={forwardedRef}\n    />\n  );\n\n  // Wrapper for images with placeholders\n  const imageWithPlaceholder = (placeholder || showSkeleton) ? (\n    <div style={{ position: 'relative', display: 'inline-block' }}>\n      {skeletonElement}\n      {placeholderElement}\n      {imgElement}\n    </div>\n  ) : imgElement;\n\n  // Handle asChild - inject img into the child element\n  if (asChild && children) {\n    const child = React.Children.only(children) as React.ReactElement<any>;\n\n    if (variant === 'blur') {\n      // For blur variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-variant-blur'),\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'absolute',\n                top: '8px',\n                left: '0',\n              }}\n              className={classNames(\n                'rt-reset',\n                'rt-Image',\n                'rt-Image--blur',\n                'rt-Image--blur-bg',\n                className,\n              )}\n              alt=\"\"\n              src={src}\n              {...imgProps}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{ \n                ...style, \n                position: 'relative', \n                zIndex: 1,\n                opacity: imageLoaded ? 1 : 0,\n                transition: 'opacity 0.3s ease-out',\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              {...imgProps}\n              ref={forwardedRef}\n            />\n          </>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-Image'),\n        style: {\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imageWithPlaceholder,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <div className=\"rt-variant-blur\" style={{ position: 'relative', display: 'inline-block' }}>\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'absolute',\n            top: '8px',\n            left: '0',\n          }}\n          className={classNames(\n            'rt-reset',\n            'rt-Image',\n            'rt-Image--blur',\n            'rt-Image--blur-bg',\n            className,\n          )}\n          alt=\"\"\n          src={src}\n          {...imgProps}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{ \n            ...style, \n            position: 'relative', \n            zIndex: 1,\n            opacity: imageLoaded ? 1 : 0,\n            transition: 'opacity 0.3s ease-out',\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...imgProps}\n          ref={forwardedRef}\n        />\n      </div>\n    );\n  }\n\n  return imageWithPlaceholder;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "Skeleton", "Image", "props", "forwardedRef", "variant", "children", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "userOnLoad", "userOnError", "_children", "imgProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "handleLoad", "event", "handleError", "skeletonElement", "placeholderElement", "imgElement", "imageWithPlaceholder", "child"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { imagePropDefs } from './image.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { widthPropDefs } from '../props/width.props.js';\nimport { heightPropDefs } from '../props/height.props.js';\nimport { Skeleton } from './skeleton.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { WidthProps } from '../props/width.props.js';\nimport type { HeightProps } from '../props/height.props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype ImageElement = React.ElementRef<'img'>;\ntype ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {\n  loading?: 'eager' | 'lazy';\n  /**\n   * Placeholder image URL to show while the main image is loading.\n   * Can be a low-quality/blurred version of the main image.\n   */\n  placeholder?: string;\n  /**\n   * Shows a skeleton placeholder while loading instead of a blank space.\n   */\n  showSkeleton?: boolean;\n  /**\n   * Whether the image should fade in when loaded. Set to false for background images or when you want immediate visibility.\n   */\n  fadeIn?: boolean;\n  /**\n   * Callback fired when the image successfully loads.\n   */\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n  /**\n   * Callback fired when the image fails to load.\n   */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n};\n\ninterface ImageProps\n  extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>,\n    MarginProps,\n    WidthProps,\n    HeightProps,\n    ImageOwnProps {\n  /**\n   * The alt attribute provides alternative information for an image if a user for some reason cannot view it.\n   * Required for accessibility when not using asChild. Use empty string for decorative images.\n   */\n  alt: string;\n}\n\nconst Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {\n  const { variant = 'surface', children } = props;\n  const {\n    asChild,\n    className,\n    radius,\n    style,\n    loading = 'lazy',\n    alt,\n    src,\n    placeholder,\n    showSkeleton = false,\n    fadeIn = true,\n    onLoad: userOnLoad,\n    onError: userOnError,\n    children: _children, // Extract children to exclude from imgProps\n    ...imgProps\n  } = extractProps(props, imagePropDefs, marginPropDefs, widthPropDefs, heightPropDefs);\n\n  // Loading state management\n  const [imageLoaded, setImageLoaded] = React.useState(false);\n  const [imageError, setImageError] = React.useState(false);\n  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);\n  \n  // Ref to check if image is already loaded (for cached images)\n  const imgRef = React.useRef<HTMLImageElement>(null);\n\n  // Handle image load - moved to top to avoid conditional hook call\n  const handleLoad = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {\n    setImageLoaded(true);\n    setImageError(false);\n    setShowPlaceholder(false);\n    userOnLoad?.(event);\n  }, [userOnLoad]);\n\n  // Handle image error - moved to top to avoid conditional hook call\n  const handleError = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {\n    setImageLoaded(false);\n    setImageError(true);\n    setShowPlaceholder(false);\n    userOnError?.(event);\n  }, [userOnError]);\n\n  // Check if image is already loaded (for cached images)\n  React.useEffect(() => {\n    const img = imgRef.current;\n    if (img && img.complete && img.naturalWidth > 0) {\n      setImageLoaded(true);\n      setImageError(false);\n      setShowPlaceholder(false);\n    }\n  }, [src]);\n\n  // Validate required props\n  if (!src) {\n    console.warn('Image component: src prop is required');\n    return null;\n  }\n\n  if (!asChild && alt === undefined) {\n    console.warn('Image component: alt prop is required for accessibility when not using asChild');\n  }\n\n  // Create skeleton placeholder\n  const skeletonElement = showSkeleton && !imageLoaded && !imageError ? (\n    <Skeleton\n      style={{\n        ...style,\n        width: '100%',\n        height: '100px', // Default height, can be overridden by style\n        borderRadius: radius ? `var(--radius-${radius})` : undefined,\n      }}\n      className={className}\n    />\n  ) : null;\n\n  // Create placeholder image element\n  const placeholderElement = placeholder && showPlaceholder ? (\n    <img\n      data-radius={radius}\n      style={{\n        ...style,\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        filter: 'blur(4px)',\n        opacity: 0.7,\n        transition: 'opacity 0.3s ease-out',\n      }}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        'rt-Image--placeholder',\n        className,\n      )}\n      alt=\"\"\n      src={placeholder}\n    />\n  ) : null;\n\n  // Create the standard img element\n  const imgElement = (\n    <img\n      data-radius={radius}\n      loading={loading}\n      style={{\n        ...style,\n        opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,\n        transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n      }}\n      className={classNames(\n        'rt-reset',\n        'rt-Image',\n        variant === 'blur' && 'rt-Image--blur',\n        className,\n      )}\n      alt={alt}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...imgProps}\n      ref={(node) => {\n        imgRef.current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n    />\n  );\n\n  // Wrapper for images with placeholders\n  const imageWithPlaceholder = (placeholder || showSkeleton) ? (\n    <div style={{ position: 'relative', display: 'inline-block' }}>\n      {skeletonElement}\n      {placeholderElement}\n      {imgElement}\n    </div>\n  ) : imgElement;\n\n  // Handle asChild - inject img into the child element\n  if (asChild && children) {\n    const child = React.Children.only(children) as React.ReactElement<any>;\n\n    if (variant === 'blur') {\n      // For blur variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-variant-blur'),\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style,\n        },\n        children: (\n          <>\n            {/* Background blurred image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{\n                ...style,\n                position: 'absolute',\n                top: '8px',\n                left: '0',\n              }}\n              className={classNames(\n                'rt-reset',\n                'rt-Image',\n                'rt-Image--blur',\n                'rt-Image--blur-bg',\n                className,\n              )}\n              alt=\"\"\n              src={src}\n              {...imgProps}\n            />\n            {/* Foreground image */}\n            <img\n              data-radius={radius}\n              loading={loading}\n              style={{ \n                ...style, \n                position: 'relative', \n                zIndex: 1,\n                opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,\n                transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n              }}\n              className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n              alt={alt}\n              src={src}\n              onLoad={handleLoad}\n              onError={handleError}\n              {...imgProps}\n              ref={(node) => {\n                imgRef.current = node;\n                if (typeof forwardedRef === 'function') {\n                  forwardedRef(node);\n                } else if (forwardedRef) {\n                  forwardedRef.current = node;\n                }\n              }}\n            />\n          </>\n        ),\n      });\n    } else {\n      // For surface variant with asChild\n      return React.cloneElement(child, {\n        className: classNames(child.props?.className, 'rt-Image'),\n        style: {\n          textDecoration: 'none', // Reset link underlines\n          color: 'inherit', // Reset link colors\n          border: 'none', // Reset button borders\n          background: 'none', // Reset button backgrounds\n          padding: 0, // Reset button padding\n          font: 'inherit', // Reset button fonts\n          cursor: 'pointer', // Ensure interactive cursor\n          ...child.props?.style, // Allow user overrides\n        },\n        children: imageWithPlaceholder,\n      });\n    }\n  }\n\n  // Regular rendering without asChild\n  if (variant === 'blur') {\n    return (\n      <div className=\"rt-variant-blur\" style={{ position: 'relative', display: 'inline-block' }}>\n        {/* Background blurred image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{\n            ...style,\n            position: 'absolute',\n            top: '8px',\n            left: '0',\n          }}\n          className={classNames(\n            'rt-reset',\n            'rt-Image',\n            'rt-Image--blur',\n            'rt-Image--blur-bg',\n            className,\n          )}\n          alt=\"\"\n          src={src}\n          {...imgProps}\n        />\n        {/* Foreground image */}\n        <img\n          data-radius={radius}\n          loading={loading}\n          style={{ \n            ...style, \n            position: 'relative', \n            zIndex: 1,\n            opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,\n            transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',\n          }}\n          className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}\n          alt={alt}\n          src={src}\n          onLoad={handleLoad}\n          onError={handleError}\n          {...imgProps}\n          ref={(node) => {\n            imgRef.current = node;\n            if (typeof forwardedRef === 'function') {\n              forwardedRef(node);\n            } else if (forwardedRef) {\n              forwardedRef.current = node;\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  return imageWithPlaceholder;\n});\n\nImage.displayName = 'Image';\n\nexport { Image };\nexport type { ImageProps };\n"],
+  "mappings": "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",
+  "names": ["React", "classNames", "imagePropDefs", "extractProps", "marginPropDefs", "widthPropDefs", "heightPropDefs", "Skeleton", "Image", "props", "forwardedRef", "variant", "children", "asChild", "className", "radius", "style", "loading", "alt", "src", "placeholder", "showSkeleton", "fadeIn", "userOnLoad", "userOnError", "_children", "imgProps", "imageLoaded", "setImageLoaded", "imageError", "setImageError", "showPlaceholder", "setShowPlaceholder", "imgRef", "handleLoad", "event", "handleError", "img", "skeletonElement", "placeholderElement", "imgElement", "node", "imageWithPlaceholder", "child"]
 }

package/dist/esm/components/sidebar.d.ts

@@ -1,71 +1,146 @@
 import * as React from 'react';
-import { sidebarPropDefs } from './sidebar.props.js';
-import { IconButton } from './icon-button.js';
-import { baseMenuItemPropDefs } from './_internal/base-menu.props.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
+import { Accordion } from 'radix-ui';
+import { sidebarPropDefs } from './sidebar.props';
+import { IconButton } from './icon-button';
+import { Separator } from './separator';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props';
+import type { GetPropDefTypes } from '../props/prop-def';
 type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
     open: boolean;
     setOpen: (open: boolean) => void;
-    collapsible: 'icon' | 'offcanvas' | 'none';
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+    side: 'left' | 'right';
+    type: 'sidebar' | 'floating';
+    variant: 'soft' | 'surface' | 'ghost';
+    menuVariant: 'solid' | 'soft';
+    collapsible: 'offcanvas' | 'icon' | 'none';
+    size: '1' | '2';
 };
 declare function useSidebar(): SidebarContextProps;
 interface SidebarProviderProps extends React.ComponentPropsWithoutRef<'div'> {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    side?: 'left' | 'right';
 }
 declare const SidebarProvider: React.ForwardRefExoticComponent<SidebarProviderProps & React.RefAttributes<HTMLDivElement>>;
-type SidebarRootOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
-interface SidebarRootProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarRootOwnProps {
+type SidebarOwnProps = GetPropDefTypes<typeof sidebarPropDefs>;
+interface SidebarProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarOwnProps {
 }
-declare const SidebarRoot: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarContentProps extends ComponentPropsWithout<'div', RemovedProps> {
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarContentProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarHeaderProps extends ComponentPropsWithout<'div', RemovedProps> {
+interface SidebarHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether to use the default flex container layout.
+     * @default true
+     */
+    asContainer?: boolean;
 }
 declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarFooterProps extends ComponentPropsWithout<'div', RemovedProps> {
+interface SidebarFooterProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether to use the default flex container layout.
+     * @default true
+     */
+    asContainer?: boolean;
 }
 declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
 interface SidebarTriggerProps extends ComponentPropsWithout<typeof IconButton, RemovedProps> {
 }
 declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<SidebarTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-interface SidebarInsetProps extends ComponentPropsWithout<'main', RemovedProps> {
+interface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {
 }
-declare const SidebarInset: React.ForwardRefExoticComponent<SidebarInsetProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarLabelProps extends React.ComponentPropsWithoutRef<'div'> {
+declare const SidebarSeparator: React.ForwardRefExoticComponent<SidebarSeparatorProps & React.RefAttributes<HTMLSpanElement>>;
+interface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {
 }
-declare const SidebarLabel: React.ForwardRefExoticComponent<SidebarLabelProps & React.RefAttributes<HTMLDivElement>>;
-type SidebarItemOwnProps = GetPropDefTypes<typeof baseMenuItemPropDefs>;
-interface SidebarItemProps extends ComponentPropsWithout<'div', RemovedProps>, SidebarItemOwnProps {
+declare const SidebarMenu: React.ForwardRefExoticComponent<SidebarMenuProps & React.RefAttributes<HTMLUListElement>>;
+interface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {
 }
-declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<SidebarMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface SidebarMenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+    asChild?: boolean;
+    isActive?: boolean;
+}
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarMenuSubProps extends React.ComponentPropsWithoutRef<'div'> {
+    defaultOpen?: boolean;
+}
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<SidebarMenuSubProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {
+    asChild?: boolean;
+}
+declare const SidebarMenuSubTrigger: React.ForwardRefExoticComponent<SidebarMenuSubTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {
+}
+declare const SidebarMenuSubContent: React.ForwardRefExoticComponent<SidebarMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
 interface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-declare const SidebarSeparator: React.ForwardRefExoticComponent<SidebarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
-    checked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    color?: string;
-    shortcut?: string;
-}
-declare const SidebarCheckboxItem: React.ForwardRefExoticComponent<SidebarCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarRadioGroupProps extends React.ComponentPropsWithoutRef<'div'> {
-    value?: string;
-    onValueChange?: (value: string) => void;
-}
-declare const SidebarRadioGroup: React.ForwardRefExoticComponent<SidebarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface SidebarRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {
-    value?: string;
-    color?: string;
-    shortcut?: string;
-}
-declare const SidebarRadioItem: React.ForwardRefExoticComponent<SidebarRadioItemProps & React.RefAttributes<HTMLDivElement>>;
-export { SidebarProvider as Provider, SidebarRoot as Root, SidebarContent as Content, SidebarHeader as Header, SidebarFooter as Footer, SidebarTrigger as Trigger, SidebarInset as Inset, SidebarLabel as Label, SidebarItem as Item, SidebarGroup as Group, SidebarSeparator as Separator, SidebarCheckboxItem as CheckboxItem, SidebarRadioGroup as RadioGroup, SidebarRadioItem as RadioItem, useSidebar, };
-export type { SidebarProviderProps as ProviderProps, SidebarRootProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, SidebarTriggerProps as TriggerProps, SidebarInsetProps as InsetProps, };
+interface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {
+    asChild?: boolean;
+}
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<SidebarGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {
+}
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<SidebarGroupContentProps & React.RefAttributes<HTMLDivElement>>;
+export { SidebarProvider as Provider, Sidebar as Root, SidebarContent as Content, SidebarHeader as Header, SidebarFooter as Footer, SidebarTrigger as Trigger, SidebarSeparator as Separator, SidebarMenu as Menu, SidebarMenuItem as MenuItem, SidebarMenuButton as MenuButton, SidebarMenuSub as MenuSub, SidebarMenuSubTrigger as MenuSubTrigger, SidebarMenuSubContent as MenuSubContent, SidebarGroup as Group, SidebarGroupLabel as GroupLabel, SidebarGroupContent as GroupContent, useSidebar, };
+/**
+ * Enhanced Sidebar Header and Footer Usage Examples:
+ *
+ * 1. Simple default container (backwards compatible):
+ * <Sidebar.Header>
+ *   <Logo />
+ *   <span>App Name</span>
+ * </Sidebar.Header>
+ *
+ * 2. Custom flex layout:
+ * <Sidebar.Header className="rt-justify-between rt-gap-3">
+ *   <Logo />
+ *   <Sidebar.MenuButton>
+ *     <SettingsIcon />
+ *   </Sidebar.MenuButton>
+ * </Sidebar.Header>
+ *
+ * 3. Column layout for multiple rows:
+ * <Sidebar.Header className="rt-flex-col rt-gap-2" asContainer={false}>
+ *   <div className="rt-flex rt-items-center rt-gap-2">
+ *     <Logo />
+ *     <span>App Name</span>
+ *   </div>
+ *   <Sidebar.MenuButton>
+ *     <UserAvatar />
+ *     <span>John Doe</span>
+ *   </Sidebar.MenuButton>
+ * </Sidebar.Header>
+ *
+ * 4. Interactive footer with menu button:
+ * <Sidebar.Footer>
+ *   <Sidebar.MenuButton>
+ *     <UserIcon />
+ *     <span>Settings</span>
+ *     <ChevronUpIcon />
+ *   </Sidebar.MenuButton>
+ * </Sidebar.Footer>
+ *
+ * 5. Custom footer layout:
+ * <Sidebar.Footer className="rt-justify-between">
+ *   <span>v1.0.0</span>
+ *   <Sidebar.MenuButton>
+ *     <HelpIcon />
+ *   </Sidebar.MenuButton>
+ * </Sidebar.Footer>
+ *
+ * Available utility classes:
+ * - Layout: rt-flex-row, rt-flex-col
+ * - Alignment: rt-items-center, rt-items-start, rt-items-end
+ * - Justification: rt-justify-between, rt-justify-center, rt-justify-start, rt-justify-end
+ * - Gap: rt-gap-1, rt-gap-2, rt-gap-3, rt-gap-4
+ */
+export type { SidebarProviderProps as ProviderProps, SidebarProps as RootProps, SidebarContentProps as ContentProps, SidebarHeaderProps as HeaderProps, SidebarFooterProps as FooterProps, SidebarTriggerProps as TriggerProps, };
 //# sourceMappingURL=sidebar.d.ts.map

package/dist/esm/components/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/sidebar.js

@@ -1,2 +1,2 @@
-"use client";import*as e from"react";import d from"classnames";import{sidebarPropDefs as C}from"./sidebar.props.js";import{IconButton as j}from"./icon-button.js";import{ScrollArea as A}from"./scroll-area.js";import{Separator as V}from"./separator.js";import{Theme as _,useThemeContext as $}from"./theme.js";import{ChevronDownIcon as K}from"./icons.js";import{extractProps as q}from"../helpers/extract-props.js";import{baseMenuItemPropDefs as J}from"./_internal/base-menu.props.js";import{Slot as g}from"radix-ui";const T=e.createContext(null);function R(){const o=e.useContext(T);if(!o)throw new Error("useSidebar must be used within a Sidebar.Provider");return o}const H=e.forwardRef(({defaultOpen:o=!0,open:r,onOpenChange:t,children:a,...s},n)=>{const[u,l]=e.useState(o),b=r??u,f=e.useCallback(p=>{t?t(p):l(p)},[t]);return e.createElement("div",{...s,ref:n},e.createElement(T.Provider,{value:{open:b,setOpen:f,collapsible:"icon"}},a))});H.displayName="Sidebar.Provider";const y=e.forwardRef((o,r)=>{const t=$(),{open:a}=R(),{size:s=C.size.default,variant:n=C.variant.default,side:u=C.side.default,collapsible:l=C.collapsible.default,floating:b=C.floating.default,color:f,highContrast:p=C.highContrast.default}=o,{className:P,children:v,...S}=q(o,C),c=f||t.accentColor;return e.createElement("div",{...S,ref:r,"data-accent-color":c,"data-state":a?"expanded":"collapsed","data-side":u,"data-collapsible":l,className:d("rt-SidebarRoot",P)},e.createElement(_,{asChild:!0},e.createElement("div",{className:d("rt-SidebarContainer",`rt-variant-${n}`,`rt-r-size-${s}`),"data-accent-color":c,"data-high-contrast":p||void 0},v)))});y.displayName="Sidebar.Root";const L=e.forwardRef(({className:o,children:r,...t},a)=>e.createElement(A,{type:"auto"},e.createElement("div",{...t,ref:a,className:d("rt-SidebarContent","rt-BaseMenuContent",o)},r)));L.displayName="Sidebar.Content";const x=e.forwardRef(({className:o,...r},t)=>e.createElement("div",{...r,ref:t,className:d("rt-SidebarHeader","rt-BaseMenuContent",o)}));x.displayName="Sidebar.Header";const D=e.forwardRef(({className:o,...r},t)=>e.createElement("div",{...r,ref:t,className:d("rt-SidebarFooter","rt-BaseMenuContent",o)}));D.displayName="Sidebar.Footer";const N=e.forwardRef(({onClick:o,...r},t)=>{const{setOpen:a,open:s}=R();return e.createElement(j,{...r,ref:t,variant:"ghost",onClick:n=>{o?.(n),a(!s)}},e.createElement(K,null))});N.displayName="Sidebar.Trigger";const k=e.forwardRef(({className:o,...r},t)=>e.createElement("main",{...r,ref:t,className:d("rt-SidebarInset",o)}));k.displayName="Sidebar.Inset";const B=e.forwardRef(({className:o,...r},t)=>e.createElement("div",{ref:t,className:d("rt-BaseMenuLabel",o),...r}));B.displayName="Sidebar.Label";const w=e.forwardRef((o,r)=>{const{className:t,children:a,color:s=J.color.default,shortcut:n,asChild:u=!1,onMouseEnter:l,onMouseLeave:b,onFocus:f,onBlur:p,...P}=o,[v,S]=e.useState(!1),c=e.useCallback(h=>{S(!0),l?.(h)},[l]),M=e.useCallback(h=>{S(!1),b?.(h)},[b]),E=e.useCallback(h=>{S(!0),f?.(h)},[f]),m=e.useCallback(h=>{S(!1),p?.(h)},[p]);return u?e.createElement(g.Root,{ref:r,"data-accent-color":s,"data-highlighted":v||void 0,className:d("rt-reset","rt-BaseMenuItem",t),onMouseEnter:c,onMouseLeave:M,onFocus:E,onBlur:m,...P},a):e.createElement("div",{ref:r,"data-accent-color":s,"data-highlighted":v||void 0,className:d("rt-reset","rt-BaseMenuItem",t),onMouseEnter:c,onMouseLeave:M,onFocus:E,onBlur:m,tabIndex:0,role:"menuitem",...P},e.createElement(g.Slottable,null,a),n&&e.createElement("div",{className:"rt-BaseMenuShortcut"},n))});w.displayName="Sidebar.Item";const F=e.forwardRef(({className:o,...r},t)=>e.createElement("div",{ref:t,className:d("rt-BaseMenuGroup",o),...r}));F.displayName="Sidebar.Group";const G=e.forwardRef(({className:o,...r},t)=>e.createElement(V,{ref:t,className:d("rt-BaseMenuSeparator",o)}));G.displayName="Sidebar.Separator";const W=e.forwardRef(({className:o,checked:r,onCheckedChange:t,children:a,color:s,shortcut:n,onMouseEnter:u,onMouseLeave:l,onFocus:b,onBlur:f,onClick:p,...P},v)=>{const[S,c]=e.useState(!1),M=e.useCallback(i=>{c(!0),u?.(i)},[u]),E=e.useCallback(i=>{c(!1),l?.(i)},[l]),m=e.useCallback(i=>{c(!0),b?.(i)},[b]),h=e.useCallback(i=>{c(!1),f?.(i)},[f]),I=e.useCallback(i=>{t?.(!r),p?.(i)},[r,t,p]);return e.createElement("div",{ref:v,"data-accent-color":s,"data-highlighted":S||void 0,className:d("rt-reset","rt-BaseMenuItem","rt-BaseMenuCheckboxItem",o),onClick:I,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),I(i))},onMouseEnter:M,onMouseLeave:E,onFocus:m,onBlur:h,tabIndex:0,role:"menuitemcheckbox","aria-checked":r,...P},e.createElement(g.Slottable,null,a),r&&e.createElement("div",{className:"rt-BaseMenuItemIndicator"},"\u2713"),n&&e.createElement("div",{className:"rt-BaseMenuShortcut"},n))});W.displayName="Sidebar.CheckboxItem";const O=e.forwardRef(({className:o,value:r,onValueChange:t,children:a,...s},n)=>e.createElement("div",{ref:n,className:d("rt-BaseMenuGroup",o),...s},a));O.displayName="Sidebar.RadioGroup";const z=e.forwardRef(({className:o,value:r,children:t,color:a,shortcut:s,onMouseEnter:n,onMouseLeave:u,onFocus:l,onBlur:b,...f},p)=>{const[P,v]=e.useState(!1),S=e.useCallback(m=>{v(!0),n?.(m)},[n]),c=e.useCallback(m=>{v(!1),u?.(m)},[u]),M=e.useCallback(m=>{v(!0),l?.(m)},[l]),E=e.useCallback(m=>{v(!1),b?.(m)},[b]);return e.createElement("div",{ref:p,"data-accent-color":a,"data-highlighted":P||void 0,className:d("rt-reset","rt-BaseMenuItem",o),onMouseEnter:S,onMouseLeave:c,onFocus:M,onBlur:E,tabIndex:0,role:"menuitemradio","aria-checked":!1,...f},e.createElement(g.Slottable,null,t),s&&e.createElement("div",{className:"rt-BaseMenuShortcut"},s))});z.displayName="Sidebar.RadioItem";export{W as CheckboxItem,L as Content,D as Footer,F as Group,x as Header,k as Inset,w as Item,B as Label,H as Provider,O as RadioGroup,z as RadioItem,y as Root,G as Separator,N as Trigger,R as useSidebar};
+"use client";import*as e from"react";import n from"classnames";import{Slot as L}from"./slot";import{Accordion as x}from"radix-ui";import{sidebarPropDefs as m}from"./sidebar.props";import{Theme as H,useThemeContext as J}from"./theme";import{IconButton as K}from"./icon-button";import{ScrollArea as Q}from"./scroll-area";import{Separator as X}from"./separator";import{ChevronDownIcon as Y,ThickChevronRightIcon as Z}from"./icons";import{extractProps as ee}from"../helpers/extract-props";const h=e.createContext(null);function w(){const r=e.useContext(h);if(!r)throw new Error("useSidebar must be used within a SidebarProvider.");return r}function re(){const[r,t]=e.useState(!1);return e.useEffect(()=>{const o=()=>{t(window.innerWidth<768)};return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),r}const I=e.forwardRef(({defaultOpen:r=!0,open:t,onOpenChange:o,side:a="left",className:i,children:s,...l},u)=>{const d=re(),[b,p]=e.useState(!1),[c,v]=e.useState(r),P=t??c,S=e.useCallback(f=>{const T=typeof f=="function"?f(P):f;o?o(T):v(T)},[o,P]),N=e.useCallback(()=>d?p(f=>!f):S(f=>!f),[d,S,p]),C=P?"expanded":"collapsed",y=e.useMemo(()=>({state:C,open:P,setOpen:S,isMobile:d,openMobile:b,setOpenMobile:p,toggleSidebar:N,side:a}),[C,P,S,d,b,p,N,a]);return e.createElement("div",{...l,ref:u,className:n("rt-SidebarProvider",i),"data-state":C,"data-side":a},e.createElement(h.Provider,{value:y},s))});I.displayName="Sidebar.Provider";const E=e.forwardRef((r,t)=>{const o=J(),{isMobile:a,state:i,openMobile:s,setOpenMobile:l}=w(),{size:u=m.size.default,variant:d=m.variant.default,menuVariant:b=m.menuVariant.default,type:p=m.type.default,side:c=m.side.default,collapsible:v=m.collapsible.default,color:P,highContrast:S=m.highContrast.default,asChild:N}=r,{className:C,children:y,...f}=ee(r,m),{asChild:T,...R}=f,M=P||o.accentColor,q=typeof u=="object"?u.initial||"2":u,g=e.useContext(h);return g&&(g.side=c,g.type=p,g.variant=d,g.menuVariant=b,g.collapsible=v,g.size=q),v==="none"?e.createElement("div",{...R,ref:t,"data-accent-color":M,"data-state":i,"data-side":c,"data-type":p,"data-collapsible":v,className:n("rt-SidebarRoot",`rt-r-size-${u}`,C)},e.createElement(H,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`),"data-accent-color":M,"data-high-contrast":S||void 0,"data-side":c},y))):a?e.createElement("div",{...R,ref:t,"data-accent-color":M,"data-state":s?"open":"closed","data-side":c,"data-type":p,"data-collapsible":v,className:n("rt-SidebarRoot","rt-SidebarRoot--mobile",C)},e.createElement(H,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`,`rt-r-size-${u}`),"data-accent-color":M,"data-high-contrast":S||void 0,"data-side":c},y))):e.createElement("div",{...R,ref:t,"data-accent-color":M,"data-state":i,"data-side":c,"data-type":p,"data-collapsible":v,className:n("rt-SidebarRoot",C)},e.createElement(H,null,e.createElement("div",{className:n("rt-SidebarContainer",`rt-variant-${d}`,`rt-r-size-${u}`),"data-accent-color":M,"data-high-contrast":S||void 0,"data-side":c},y)))});E.displayName="Sidebar.Root";const G=e.forwardRef(({className:r,children:t,...o},a)=>{const i=e.useContext(h),{size:s="2",menuVariant:l="soft"}=i||{};return e.createElement(Q,{type:"auto"},e.createElement("div",{...o,ref:a,className:n("rt-SidebarContent",`rt-r-size-${s}`,`rt-menu-variant-${l}`,r)},t))});G.displayName="Sidebar.Content";const W=e.forwardRef(({className:r,asContainer:t=!0,...o},a)=>{const i=e.useContext(h),{size:s="2",menuVariant:l="soft"}=i||{};return e.createElement("div",{...o,ref:a,className:n("rt-SidebarHeader",`rt-r-size-${s}`,`rt-menu-variant-${l}`,{"rt-SidebarHeader--container":t},r)})});W.displayName="Sidebar.Header";const z=e.forwardRef(({className:r,asContainer:t=!0,...o},a)=>{const i=e.useContext(h),{size:s="2",menuVariant:l="soft"}=i||{};return e.createElement("div",{...o,ref:a,className:n("rt-SidebarFooter",`rt-r-size-${s}`,`rt-menu-variant-${l}`,{"rt-SidebarFooter--container":t},r)})});z.displayName="Sidebar.Footer";const D=e.forwardRef(({onClick:r,children:t,...o},a)=>{const{toggleSidebar:i}=w();return e.createElement(K,{...o,ref:a,variant:"ghost",onClick:s=>{r?.(s),i()}},t||e.createElement(Y,null))});D.displayName="Sidebar.Trigger";const A=e.forwardRef(({className:r,...t},o)=>e.createElement(X,{...t,ref:o,className:n("rt-SidebarSeparator",r)}));A.displayName="Sidebar.Separator";const B=e.forwardRef(({className:r,...t},o)=>e.createElement("ul",{...t,ref:o,className:n("rt-SidebarMenu",r)}));B.displayName="Sidebar.Menu";const $=e.forwardRef(({className:r,...t},o)=>e.createElement("li",{...t,ref:o,className:n("rt-SidebarMenuItem",r)}));$.displayName="Sidebar.MenuItem";const O=e.forwardRef(({asChild:r=!1,isActive:t=!1,className:o,onMouseEnter:a,onMouseLeave:i,...s},l)=>{const[u,d]=e.useState(!1);return e.createElement(r?L:"button",{...s,ref:l,className:n("rt-reset","rt-SidebarMenuButton",o),"data-active":t||void 0,"data-highlighted":u||void 0,onMouseEnter:p=>{d(!0),a?.(p)},onMouseLeave:p=>{d(!1),i?.(p)}})});O.displayName="Sidebar.MenuButton";const F=e.forwardRef(({defaultOpen:r=!1,children:t,...o},a)=>e.createElement("div",{...o,ref:a},e.createElement(x.Root,{type:"single",collapsible:!0,defaultValue:r?"item":void 0},e.createElement(x.Item,{value:"item"},t))));F.displayName="Sidebar.MenuSub";const V=e.forwardRef(({asChild:r=!1,className:t,children:o,onMouseEnter:a,onMouseLeave:i,...s},l)=>{const[u,d]=e.useState(!1);return e.createElement(x.Header,{asChild:!0},e.createElement("div",null,e.createElement(x.Trigger,{...s,ref:l,asChild:r,className:n("rt-reset","rt-SidebarMenuButton","rt-SidebarMenuSubTrigger",t),"data-highlighted":u||void 0,onMouseEnter:b=>{d(!0),a?.(b)},onMouseLeave:b=>{d(!1),i?.(b)}},r?o:e.createElement(e.Fragment,null,o,e.createElement(Z,{className:n("rt-BaseMenuSubTriggerIcon","rt-SidebarMenuSubTriggerIcon")})))))});V.displayName="Sidebar.MenuSubTrigger";const k=e.forwardRef(({className:r,children:t,...o},a)=>e.createElement(x.Content,{...o,ref:a,className:n("rt-SidebarMenuSubContent",r)},e.createElement("div",{className:"rt-SidebarMenuSubList"},t)));k.displayName="Sidebar.MenuSubContent";const j=e.forwardRef(({className:r,...t},o)=>e.createElement("div",{...t,ref:o,className:n("rt-SidebarGroup",r)}));j.displayName="Sidebar.Group";const U=e.forwardRef(({asChild:r=!1,className:t,...o},a)=>e.createElement(r?L:"div",{...o,ref:a,className:n("rt-SidebarGroupLabel",t)}));U.displayName="Sidebar.GroupLabel";const _=e.forwardRef(({className:r,...t},o)=>e.createElement("div",{...t,ref:o,className:n("rt-SidebarGroupContent",r)}));_.displayName="Sidebar.GroupContent";export{G as Content,z as Footer,j as Group,_ as GroupContent,U as GroupLabel,W as Header,B as Menu,O as MenuButton,$ as MenuItem,F as MenuSub,k as MenuSubContent,V as MenuSubTrigger,I as Provider,E as Root,A as Separator,D as Trigger,w as useSidebar};
 //# sourceMappingURL=sidebar.js.map