@epilot/volt-ui-experimental-griffel 0.2.1 → 0.3.0

package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-sidebar.js","sources":["../../../src/components/collapsible-sidebar/collapsible-sidebar.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// --- Context ---\n\nexport interface CollapsibleSidebarContextValue {\n  collapsed: boolean\n  onCollapsedChange: (collapsed: boolean) => void\n  width: number | string\n  collapsedWidth: number | string\n  isHovered: boolean\n  expandOnHover: boolean\n  skipTransition: boolean\n}\n\nconst CollapsibleSidebarContext =\n  React.createContext<CollapsibleSidebarContextValue | null>(null)\n\nexport function useCollapsibleSidebar() {\n  const ctx = React.useContext(CollapsibleSidebarContext)\n\n  if (!ctx) {\n    throw new Error(\n      \"CollapsibleSidebar sub-components must be used within CollapsibleSidebar\"\n    )\n  }\n\n  return ctx\n}\n\n// --- Styles ---\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    height: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  content: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  floating: {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    height: \"100%\",\n    // v1 z-50; floating panel layer above collapsed sidebar.\n    zIndex: 50,\n    ...shorthands.borderRadius(tokens.radius2xl),\n    backgroundColor: tokens.body,\n    // v1 shadow-[0_4px_20px_rgba(0,0,0,0.15)]; no shadow token exists in this package.\n    boxShadow: \"0 4px 20px rgba(0, 0, 0, 0.15)\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    opacity: 0,\n    transform: \"translateX(-50%)\",\n    pointerEvents: \"none\",\n    transitionProperty: \"all\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    \"&[data-visible]\": {\n      opacity: 1,\n      transform: \"translateX(0)\",\n      pointerEvents: \"auto\",\n    },\n  },\n  transitionNone: {\n    transitionProperty: \"none\",\n  },\n  condensed: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    paddingTop: tokens.spacingGroup2,\n    // v1 gap-3 is 0.75rem; no spacing token for 0.75rem exists in this package.\n    ...shorthands.gap(tokens.spacingElement3),\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  toggle: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    ...shorthands.padding(tokens.spacingGroup2),\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    ...shorthands.border(\"0\"),\n  },\n})\n\n// --- CollapsibleSidebar (root) ---\n\nexport type CollapsibleSidebarProps = React.ComponentProps<\"div\"> & {\n  collapsed?: boolean\n  defaultCollapsed?: boolean\n  onCollapsedChange?: (collapsed: boolean) => void\n  width?: number | string\n  collapsedWidth?: number | string\n  expandOnHover?: boolean\n  hoverDelay?: number\n}\n\nexport const CollapsibleSidebar = React.forwardRef<\n  HTMLDivElement,\n  CollapsibleSidebarProps\n>(function CollapsibleSidebar(\n  {\n    collapsed: controlledCollapsed,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    width = 264,\n    collapsedWidth = 64,\n    expandOnHover = true,\n    hoverDelay = 100,\n    className,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  const [internalCollapsed, setInternalCollapsed] =\n    React.useState(defaultCollapsed)\n  const isControlled = controlledCollapsed !== undefined\n  const collapsed = isControlled ? controlledCollapsed : internalCollapsed\n\n  // Skip floating panel transition when expanding (to avoid overlap with inline panel)\n  const [skipTransition, setSkipTransition] = React.useState(false)\n\n  const handleCollapsedChange = React.useCallback(\n    (value: boolean) => {\n      if (!value) setSkipTransition(true)\n      if (!isControlled) setInternalCollapsed(value)\n      onCollapsedChange?.(value)\n    },\n    [isControlled, onCollapsedChange]\n  )\n\n  // Hover state for floating panel\n  const [isHovered, setIsHovered] = React.useState(false)\n  const hoverTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  const handleMouseEnter = React.useCallback(() => {\n    if (!collapsed || !expandOnHover) return\n    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)\n    hoverTimeoutRef.current = setTimeout(() => setIsHovered(true), hoverDelay)\n  }, [collapsed, expandOnHover, hoverDelay])\n\n  const handleMouseLeave = React.useCallback(() => {\n    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)\n    setIsHovered(false)\n  }, [])\n\n  // Reset hover when collapse state changes\n  React.useEffect(() => {\n    setIsHovered(false)\n    // Reset skipTransition after the render so future hover exits animate normally\n    const raf = requestAnimationFrame(() => setSkipTransition(false))\n    return () => cancelAnimationFrame(raf)\n  }, [collapsed])\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)\n    }\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({\n      collapsed,\n      onCollapsedChange: handleCollapsedChange,\n      width,\n      collapsedWidth,\n      isHovered,\n      expandOnHover,\n      skipTransition,\n    }),\n    [\n      collapsed,\n      handleCollapsedChange,\n      width,\n      collapsedWidth,\n      isHovered,\n      expandOnHover,\n      skipTransition,\n    ]\n  )\n\n  return (\n    <CollapsibleSidebarContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        data-slot=\"collapsible-sidebar\"\n        {...{ [SLOT_ATTR]: \"collapsible-sidebar\" }}\n        data-collapsed={collapsed ? \"\" : undefined}\n        className={mergeClasses(styles.root, className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        {children}\n      </div>\n    </CollapsibleSidebarContext.Provider>\n  )\n})\n\n// --- CollapsibleSidebarContent ---\n\nexport type CollapsibleSidebarContentProps = React.ComponentProps<\"aside\"> & {\n  floatingClassName?: string\n}\n\nexport const CollapsibleSidebarContent = React.forwardRef<\n  HTMLElement,\n  CollapsibleSidebarContentProps\n>(function CollapsibleSidebarContent(\n  { className, floatingClassName, children, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { collapsed, width, isHovered, expandOnHover, skipTransition } =\n    useCollapsibleSidebar()\n\n  const widthValue = typeof width === \"number\" ? `${width}px` : width\n\n  return (\n    <>\n      {/* Inline panel: only rendered when expanded */}\n      {!collapsed && (\n        <aside\n          ref={ref}\n          data-slot=\"collapsible-sidebar-content\"\n          {...{ [SLOT_ATTR]: \"collapsible-sidebar-content\" }}\n          className={mergeClasses(styles.content, className)}\n          style={{ width: widthValue, ...style }}\n          {...props}\n        >\n          {children}\n        </aside>\n      )}\n\n      {/* Floating panel: visible on hover when collapsed (only if expandOnHover is enabled) */}\n      {expandOnHover && (\n        <div\n          data-slot=\"collapsible-sidebar-floating\"\n          {...{ [SLOT_ATTR]: \"collapsible-sidebar-floating\" }}\n          data-visible={collapsed && isHovered ? \"\" : undefined}\n          className={mergeClasses(\n            styles.floating,\n            skipTransition && styles.transitionNone,\n            floatingClassName\n          )}\n          style={{ width: widthValue }}\n        >\n          {collapsed && isHovered && children}\n        </div>\n      )}\n    </>\n  )\n})\n\n// --- CollapsibleSidebarCondensed ---\n\nexport type CollapsibleSidebarCondensedProps = React.ComponentProps<\"div\">\n\nexport const CollapsibleSidebarCondensed = React.forwardRef<\n  HTMLDivElement,\n  CollapsibleSidebarCondensedProps\n>(function CollapsibleSidebarCondensed(\n  { className, children, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { collapsed, collapsedWidth } = useCollapsibleSidebar()\n\n  if (!collapsed) return null\n\n  const collapsedWidthValue =\n    typeof collapsedWidth === \"number\" ? `${collapsedWidth}px` : collapsedWidth\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"collapsible-sidebar-condensed\"\n      {...{ [SLOT_ATTR]: \"collapsible-sidebar-condensed\" }}\n      className={mergeClasses(styles.condensed, className)}\n      style={{ width: collapsedWidthValue, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\n// --- CollapsibleSidebarToggle ---\n\nexport type CollapsibleSidebarToggleProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"onClick\" | \"children\"\n> & {\n  children?:\n    | React.ReactNode\n    | ((props: { collapsed: boolean }) => React.ReactNode)\n}\n\nexport const CollapsibleSidebarToggle = React.forwardRef<\n  HTMLButtonElement,\n  CollapsibleSidebarToggleProps\n>(function CollapsibleSidebarToggle({ className, children, ...props }, ref) {\n  const styles = useStyles()\n  const { collapsed, onCollapsedChange } = useCollapsibleSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-slot=\"collapsible-sidebar-toggle\"\n      {...{ [SLOT_ATTR]: \"collapsible-sidebar-toggle\" }}\n      data-collapsed={collapsed ? \"\" : undefined}\n      type=\"button\"\n      aria-expanded={!collapsed}\n      aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n      className={mergeClasses(styles.toggle, className)}\n      onClick={() => onCollapsedChange(!collapsed)}\n      {...props}\n    >\n      {typeof children === \"function\" ? children({ collapsed }) : children}\n    </button>\n  )\n})\n"],"names":["CollapsibleSidebarContext","React","useCollapsibleSidebar","ctx","useStyles","makeVoltStyles","shorthands","tokens.radius2xl","tokens.body","tokens.spacingGroup2","tokens.spacingElement3","CollapsibleSidebar","controlledCollapsed","defaultCollapsed","onCollapsedChange","width","collapsedWidth","expandOnHover","hoverDelay","className","children","props","ref","styles","internalCollapsed","setInternalCollapsed","isControlled","collapsed","skipTransition","setSkipTransition","handleCollapsedChange","value","isHovered","setIsHovered","hoverTimeoutRef","handleMouseEnter","handleMouseLeave","raf","contextValue","jsx","SLOT_ATTR","mergeClasses","CollapsibleSidebarContent","floatingClassName","style","widthValue","jsxs","Fragment","CollapsibleSidebarCondensed","collapsedWidthValue","CollapsibleSidebarToggle"],"mappings":";;;;;;;AAoBA,MAAMA,IACJC,EAAM,cAAqD,IAAI;AAE1D,SAASC,IAAwB;AACtC,QAAMC,IAAMF,EAAM,WAAWD,CAAyB;AAEtD,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAIJ,SAAOA;AACT;AAIA,MAAMC,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,EAAA;AAAA,EAEjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA;AAAA,IAER,QAAQ;AAAA,IACR,GAAGC,EAAW,aAAaC,CAAgB;AAAA,IAC3C,iBAAiBC;AAAAA;AAAAA,IAEjB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA,EAEF,gBAAgB;AAAA,IACd,oBAAoB;AAAA,EAAA;AAAA,EAEtB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAYC;AAAAA;AAAAA,IAEZ,GAAGH,EAAW,IAAII,CAAsB;AAAA,IACxC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGJ,EAAW,QAAQG,CAAoB;AAAA,IAC1C,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,GAAGH,EAAW,OAAO,GAAG;AAAA,EAAA;AAE5B,CAAC,GAcYK,IAAqBV,EAAM,WAGtC,SACA;AAAA,EACE,WAAWW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,mBAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASnB,EAAA,GAET,CAACoB,GAAmBC,CAAoB,IAC5CxB,EAAM,SAASY,CAAgB,GAC3Ba,IAAed,MAAwB,QACvCe,IAAYD,IAAed,IAAsBY,GAGjD,CAACI,GAAgBC,CAAiB,IAAI5B,EAAM,SAAS,EAAK,GAE1D6B,IAAwB7B,EAAM;AAAA,IAClC,CAAC8B,MAAmB;AAClB,MAAKA,KAAOF,EAAkB,EAAI,GAC7BH,KAAcD,EAAqBM,CAAK,GAC7CjB,KAAA,QAAAA,EAAoBiB;AAAA,IACtB;AAAA,IACA,CAACL,GAAcZ,CAAiB;AAAA,EAAA,GAI5B,CAACkB,GAAWC,CAAY,IAAIhC,EAAM,SAAS,EAAK,GAChDiC,IAAkBjC,EAAM,OAAsC,MAAS,GAEvEkC,IAAmBlC,EAAM,YAAY,MAAM;AAC/C,IAAI,CAAC0B,KAAa,CAACV,MACfiB,EAAgB,WAAS,aAAaA,EAAgB,OAAO,GACjEA,EAAgB,UAAU,WAAW,MAAMD,EAAa,EAAI,GAAGf,CAAU;AAAA,EAC3E,GAAG,CAACS,GAAWV,GAAeC,CAAU,CAAC,GAEnCkB,IAAmBnC,EAAM,YAAY,MAAM;AAC/C,IAAIiC,EAAgB,WAAS,aAAaA,EAAgB,OAAO,GACjED,EAAa,EAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAGL,EAAAhC,EAAM,UAAU,MAAM;AACpB,IAAAgC,EAAa,EAAK;AAElB,UAAMI,IAAM,sBAAsB,MAAMR,EAAkB,EAAK,CAAC;AAChE,WAAO,MAAM,qBAAqBQ,CAAG;AAAA,EACvC,GAAG,CAACV,CAAS,CAAC,GAGd1B,EAAM,UAAU,MACP,MAAM;AACX,IAAIiC,EAAgB,WAAS,aAAaA,EAAgB,OAAO;AAAA,EACnE,GACC,CAAA,CAAE;AAEL,QAAMI,IAAerC,EAAM;AAAA,IACzB,OAAO;AAAA,MACL,WAAA0B;AAAA,MACA,mBAAmBG;AAAA,MACnB,OAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,WAAAgB;AAAA,MACA,eAAAf;AAAA,MACA,gBAAAW;AAAA,IAAA;AAAA,IAEF;AAAA,MACED;AAAA,MACAG;AAAA,MACAf;AAAA,MACAC;AAAA,MACAgB;AAAA,MACAf;AAAA,MACAW;AAAA,IAAA;AAAA,EACF;AAGF,SACE,gBAAAW,EAACvC,EAA0B,UAA1B,EAAmC,OAAOsC,GACzC,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,aAAU;AAAA,MACJ,CAACkB,CAAS,GAAG;AAAA,MACnB,kBAAgBb,IAAY,KAAK;AAAA,MACjC,WAAWc,EAAalB,EAAO,MAAMJ,CAAS;AAAA,MAC9C,cAAcgB;AAAA,MACd,cAAcC;AAAA,MACb,GAAGf;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC,GAQYsB,IAA4BzC,EAAM,WAG7C,SACA,EAAE,WAAAkB,GAAW,mBAAAwB,GAAmB,UAAAvB,GAAU,OAAAwB,GAAO,GAAGvB,EAAA,GACpDC,GACA;AACA,QAAMC,IAASnB,EAAA,GACT,EAAE,WAAAuB,GAAW,OAAAZ,GAAO,WAAAiB,GAAW,eAAAf,GAAe,gBAAAW,EAAA,IAClD1B,EAAA,GAEI2C,IAAa,OAAO9B,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAE9D,SACE,gBAAA+B,EAAAC,GAAA,EAEG,UAAA;AAAA,IAAA,CAACpB,KACA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAjB;AAAA,QACA,aAAU;AAAA,QACJ,CAACkB,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAalB,EAAO,SAASJ,CAAS;AAAA,QACjD,OAAO,EAAE,OAAO0B,GAAY,GAAGD,EAAA;AAAA,QAC9B,GAAGvB;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,IAKJH,KACC,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACJ,CAACC,CAAS,GAAG;AAAA,QACnB,gBAAcb,KAAaK,IAAY,KAAK;AAAA,QAC5C,WAAWS;AAAAA,UACTlB,EAAO;AAAA,UACPK,KAAkBL,EAAO;AAAA,UACzBoB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,OAAOE,EAAA;AAAA,QAEf,eAAab,KAAaZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAC7B,GAEJ;AAEJ,CAAC,GAMY4B,IAA8B/C,EAAM,WAG/C,SACA,EAAE,WAAAkB,GAAW,UAAAC,GAAU,OAAAwB,GAAO,GAAGvB,EAAA,GACjCC,GACA;AACA,QAAMC,IAASnB,EAAA,GACT,EAAE,WAAAuB,GAAW,gBAAAX,EAAA,IAAmBd,EAAA;AAEtC,MAAI,CAACyB,EAAW,QAAO;AAEvB,QAAMsB,IACJ,OAAOjC,KAAmB,WAAW,GAAGA,CAAc,OAAOA;AAE/D,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,aAAU;AAAA,MACJ,CAACkB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAalB,EAAO,WAAWJ,CAAS;AAAA,MACnD,OAAO,EAAE,OAAO8B,GAAqB,GAAGL,EAAA;AAAA,MACvC,GAAGvB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAaY8B,IAA2BjD,EAAM,WAG5C,SAAkC,EAAE,WAAAkB,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC1E,QAAMC,IAASnB,EAAA,GACT,EAAE,WAAAuB,GAAW,mBAAAb,EAAA,IAAsBZ,EAAA;AAEzC,SACE,gBAAAqC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,aAAU;AAAA,MACJ,CAACkB,CAAS,GAAG;AAAA,MACnB,kBAAgBb,IAAY,KAAK;AAAA,MACjC,MAAK;AAAA,MACL,iBAAe,CAACA;AAAA,MAChB,cAAYA,IAAY,mBAAmB;AAAA,MAC3C,WAAWc,EAAalB,EAAO,QAAQJ,CAAS;AAAA,MAChD,SAAS,MAAML,EAAkB,CAACa,CAAS;AAAA,MAC1C,GAAGN;AAAA,MAEH,iBAAOD,KAAa,aAAaA,EAAS,EAAE,WAAAO,EAAA,CAAW,IAAIP;AAAA,IAAA;AAAA,EAAA;AAGlE,CAAC;"}
+{"version":3,"file":"collapsible-sidebar.js","sources":["../../../src/components/collapsible-sidebar/collapsible-sidebar.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// --- Context ---\n\nexport interface CollapsibleSidebarContextValue {\n  collapsed: boolean\n  onCollapsedChange: (collapsed: boolean) => void\n  width: number | string\n  collapsedWidth: number | string\n  isHovered: boolean\n  expandOnHover: boolean\n  skipTransition: boolean\n}\n\nconst CollapsibleSidebarContext =\n  React.createContext<CollapsibleSidebarContextValue | null>(null)\n\nexport function useCollapsibleSidebar() {\n  const ctx = React.useContext(CollapsibleSidebarContext)\n\n  if (!ctx) {\n    throw new Error(\n      \"CollapsibleSidebar sub-components must be used within CollapsibleSidebar\"\n    )\n  }\n\n  return ctx\n}\n\n// --- Styles ---\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    height: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  content: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    height: \"100%\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  floating: {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    height: \"100%\",\n    // v1 z-50; floating panel layer above collapsed sidebar.\n    zIndex: 50,\n    ...shorthands.borderRadius(tokens.radius2xl),\n    backgroundColor: tokens.body,\n    // v1 shadow-[0_4px_20px_rgba(0,0,0,0.15)]; no shadow token exists in this package.\n    boxShadow: \"0 4px 20px rgba(0, 0, 0, 0.15)\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    opacity: 0,\n    transform: \"translateX(-50%)\",\n    pointerEvents: \"none\",\n    transitionProperty: \"all\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    \"&[data-visible]\": {\n      opacity: 1,\n      transform: \"translateX(0)\",\n      pointerEvents: \"auto\",\n    },\n  },\n  transitionNone: {\n    transitionProperty: \"none\",\n  },\n  condensed: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    paddingTop: tokens.spacingGroup2,\n    // v1 gap-3 is 0.75rem; no spacing token for 0.75rem exists in this package.\n    ...shorthands.gap(tokens.spacingElement3),\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  toggle: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n    ...shorthands.padding(tokens.spacingGroup2),\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    ...shorthands.border(\"0\"),\n  },\n})\n\n// --- CollapsibleSidebar (root) ---\n\nexport type CollapsibleSidebarProps = React.ComponentProps<\"div\"> & {\n  collapsed?: boolean\n  defaultCollapsed?: boolean\n  onCollapsedChange?: (collapsed: boolean) => void\n  width?: number | string\n  collapsedWidth?: number | string\n  expandOnHover?: boolean\n  hoverDelay?: number\n}\n\nexport const CollapsibleSidebar = React.forwardRef<\n  HTMLDivElement,\n  CollapsibleSidebarProps\n>(function CollapsibleSidebar(\n  {\n    collapsed: controlledCollapsed,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    width = 264,\n    collapsedWidth = 64,\n    expandOnHover = true,\n    hoverDelay = 100,\n    className,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  const [internalCollapsed, setInternalCollapsed] =\n    React.useState(defaultCollapsed)\n  const isControlled = controlledCollapsed !== undefined\n  const collapsed = isControlled ? controlledCollapsed : internalCollapsed\n\n  // Skip floating panel transition when expanding (to avoid overlap with inline panel)\n  const [skipTransition, setSkipTransition] = React.useState(false)\n\n  const handleCollapsedChange = React.useCallback(\n    (value: boolean) => {\n      if (!value) setSkipTransition(true)\n      if (!isControlled) setInternalCollapsed(value)\n      onCollapsedChange?.(value)\n    },\n    [isControlled, onCollapsedChange]\n  )\n\n  // Hover state for floating panel\n  const [isHovered, setIsHovered] = React.useState(false)\n  const hoverTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  const handleMouseEnter = React.useCallback(() => {\n    if (!collapsed || !expandOnHover) return\n    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)\n    hoverTimeoutRef.current = setTimeout(() => setIsHovered(true), hoverDelay)\n  }, [collapsed, expandOnHover, hoverDelay])\n\n  const handleMouseLeave = React.useCallback(() => {\n    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)\n    setIsHovered(false)\n  }, [])\n\n  // Reset hover when collapse state changes\n  React.useEffect(() => {\n    setIsHovered(false)\n    // Reset skipTransition after the render so future hover exits animate normally\n    const raf = requestAnimationFrame(() => setSkipTransition(false))\n    return () => cancelAnimationFrame(raf)\n  }, [collapsed])\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current)\n    }\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({\n      collapsed,\n      onCollapsedChange: handleCollapsedChange,\n      width,\n      collapsedWidth,\n      isHovered,\n      expandOnHover,\n      skipTransition,\n    }),\n    [\n      collapsed,\n      handleCollapsedChange,\n      width,\n      collapsedWidth,\n      isHovered,\n      expandOnHover,\n      skipTransition,\n    ]\n  )\n\n  return (\n    <CollapsibleSidebarContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        data-slot=\"collapsible-sidebar\"\n        {...{ [SLOT_ATTR]: \"collapsible-sidebar\" }}\n        data-collapsed={collapsed ? \"\" : undefined}\n        className={mergeClasses(styles.root, className)}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        {children}\n      </div>\n    </CollapsibleSidebarContext.Provider>\n  )\n})\n\n// --- CollapsibleSidebarContent ---\n\nexport type CollapsibleSidebarContentProps = React.ComponentProps<\"aside\"> & {\n  floatingClassName?: string\n}\n\nexport const CollapsibleSidebarContent = React.forwardRef<\n  HTMLElement,\n  CollapsibleSidebarContentProps\n>(function CollapsibleSidebarContent(\n  { className, floatingClassName, children, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { collapsed, width, isHovered, expandOnHover, skipTransition } =\n    useCollapsibleSidebar()\n\n  const widthValue = typeof width === \"number\" ? `${width}px` : width\n\n  return (\n    <>\n      {/* Inline panel: only rendered when expanded */}\n      {!collapsed && (\n        <aside\n          ref={ref}\n          data-slot=\"collapsible-sidebar-content\"\n          {...{ [SLOT_ATTR]: \"collapsible-sidebar-content\" }}\n          className={mergeClasses(styles.content, className)}\n          style={{ width: widthValue, ...style }}\n          {...props}\n        >\n          {children}\n        </aside>\n      )}\n\n      {/* Floating panel: visible on hover when collapsed (only if expandOnHover is enabled) */}\n      {expandOnHover && (\n        <div\n          data-slot=\"collapsible-sidebar-floating\"\n          {...{ [SLOT_ATTR]: \"collapsible-sidebar-floating\" }}\n          data-visible={collapsed && isHovered ? \"\" : undefined}\n          className={mergeClasses(\n            styles.floating,\n            skipTransition && styles.transitionNone,\n            floatingClassName\n          )}\n          style={{ width: widthValue }}\n        >\n          {collapsed && isHovered && children}\n        </div>\n      )}\n    </>\n  )\n})\n\n// --- CollapsibleSidebarCondensed ---\n\nexport type CollapsibleSidebarCondensedProps = React.ComponentProps<\"div\">\n\nexport const CollapsibleSidebarCondensed = React.forwardRef<\n  HTMLDivElement,\n  CollapsibleSidebarCondensedProps\n>(function CollapsibleSidebarCondensed(\n  { className, children, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { collapsed, collapsedWidth } = useCollapsibleSidebar()\n\n  if (!collapsed) return null\n\n  const collapsedWidthValue =\n    typeof collapsedWidth === \"number\" ? `${collapsedWidth}px` : collapsedWidth\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"collapsible-sidebar-condensed\"\n      {...{ [SLOT_ATTR]: \"collapsible-sidebar-condensed\" }}\n      className={mergeClasses(styles.condensed, className)}\n      style={{ width: collapsedWidthValue, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\n// --- CollapsibleSidebarToggle ---\n\nexport type CollapsibleSidebarToggleProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"onClick\" | \"children\"\n> & {\n  children?:\n    | React.ReactNode\n    | ((props: { collapsed: boolean }) => React.ReactNode)\n}\n\nexport const CollapsibleSidebarToggle = React.forwardRef<\n  HTMLButtonElement,\n  CollapsibleSidebarToggleProps\n>(function CollapsibleSidebarToggle({ className, children, ...props }, ref) {\n  const styles = useStyles()\n  const { collapsed, onCollapsedChange } = useCollapsibleSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-slot=\"collapsible-sidebar-toggle\"\n      {...{ [SLOT_ATTR]: \"collapsible-sidebar-toggle\" }}\n      data-collapsed={collapsed ? \"\" : undefined}\n      type=\"button\"\n      aria-expanded={!collapsed}\n      aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n      className={mergeClasses(styles.toggle, className)}\n      onClick={() => onCollapsedChange(!collapsed)}\n      {...props}\n    >\n      {typeof children === \"function\" ? children({ collapsed }) : children}\n    </button>\n  )\n})\n"],"names":["CollapsibleSidebarContext","React","useCollapsibleSidebar","ctx","useStyles","makeVoltStyles","shorthands","tokens.radius2xl","tokens.body","tokens.spacingGroup2","tokens.spacingElement3","CollapsibleSidebar","controlledCollapsed","defaultCollapsed","onCollapsedChange","width","collapsedWidth","expandOnHover","hoverDelay","className","children","props","ref","styles","internalCollapsed","setInternalCollapsed","isControlled","collapsed","skipTransition","setSkipTransition","handleCollapsedChange","value","isHovered","setIsHovered","hoverTimeoutRef","handleMouseEnter","handleMouseLeave","raf","contextValue","jsxDEV","SLOT_ATTR","mergeClasses","CollapsibleSidebarContent","floatingClassName","style","widthValue","Fragment","CollapsibleSidebarCondensed","collapsedWidthValue","CollapsibleSidebarToggle"],"mappings":";;;;;;;AAoBA,MAAMA,IACJC,EAAM,cAAqD,IAAI;AAE1D,SAASC,IAAwB;AACtC,QAAMC,IAAMF,EAAM,WAAWD,CAAyB;AAEtD,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAIJ,SAAOA;AACT;AAIA,MAAMC,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,EAAA;AAAA,EAEjB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA;AAAA,IAER,QAAQ;AAAA,IACR,GAAGC,EAAW,aAAaC,CAAgB;AAAA,IAC3C,iBAAiBC;AAAAA;AAAAA,IAEjB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA,EAEF,gBAAgB;AAAA,IACd,oBAAoB;AAAA,EAAA;AAAA,EAEtB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAYC;AAAAA;AAAAA,IAEZ,GAAGH,EAAW,IAAII,CAAsB;AAAA,IACxC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGJ,EAAW,QAAQG,CAAoB;AAAA,IAC1C,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,GAAGH,EAAW,OAAO,GAAG;AAAA,EAAA;AAE5B,CAAC,GAcYK,IAAqBV,EAAM,WAGtC,SACA;AAAA,EACE,WAAWW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,mBAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,gBAAAC,IAAiB;AAAA,EACjB,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASnB,EAAA,GAET,CAACoB,GAAmBC,CAAoB,IAC5CxB,EAAM,SAASY,CAAgB,GAC3Ba,IAAed,MAAwB,QACvCe,IAAYD,IAAed,IAAsBY,GAGjD,CAACI,GAAgBC,CAAiB,IAAI5B,EAAM,SAAS,EAAK,GAE1D6B,IAAwB7B,EAAM;AAAA,IAClC,CAAC8B,MAAmB;AAClB,MAAKA,KAAOF,EAAkB,EAAI,GAC7BH,KAAcD,EAAqBM,CAAK,GAC7CjB,KAAA,QAAAA,EAAoBiB;AAAA,IACtB;AAAA,IACA,CAACL,GAAcZ,CAAiB;AAAA,EAAA,GAI5B,CAACkB,GAAWC,CAAY,IAAIhC,EAAM,SAAS,EAAK,GAChDiC,IAAkBjC,EAAM,OAAsC,MAAS,GAEvEkC,IAAmBlC,EAAM,YAAY,MAAM;AAC/C,IAAI,CAAC0B,KAAa,CAACV,MACfiB,EAAgB,WAAS,aAAaA,EAAgB,OAAO,GACjEA,EAAgB,UAAU,WAAW,MAAMD,EAAa,EAAI,GAAGf,CAAU;AAAA,EAC3E,GAAG,CAACS,GAAWV,GAAeC,CAAU,CAAC,GAEnCkB,IAAmBnC,EAAM,YAAY,MAAM;AAC/C,IAAIiC,EAAgB,WAAS,aAAaA,EAAgB,OAAO,GACjED,EAAa,EAAK;AAAA,EACpB,GAAG,CAAA,CAAE;AAGL,EAAAhC,EAAM,UAAU,MAAM;AACpB,IAAAgC,EAAa,EAAK;AAElB,UAAMI,IAAM,sBAAsB,MAAMR,EAAkB,EAAK,CAAC;AAChE,WAAO,MAAM,qBAAqBQ,CAAG;AAAA,EACvC,GAAG,CAACV,CAAS,CAAC,GAGd1B,EAAM,UAAU,MACP,MAAM;AACX,IAAIiC,EAAgB,WAAS,aAAaA,EAAgB,OAAO;AAAA,EACnE,GACC,CAAA,CAAE;AAEL,QAAMI,IAAerC,EAAM;AAAA,IACzB,OAAO;AAAA,MACL,WAAA0B;AAAA,MACA,mBAAmBG;AAAA,MACnB,OAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,WAAAgB;AAAA,MACA,eAAAf;AAAA,MACA,gBAAAW;AAAA,IAAA;AAAA,IAEF;AAAA,MACED;AAAA,MACAG;AAAA,MACAf;AAAA,MACAC;AAAA,MACAgB;AAAA,MACAf;AAAA,MACAW;AAAA,IAAA;AAAA,EACF;AAGF,SACEW,gBAAAA,EAAAA,OAACvC,EAA0B,UAA1B,EAAmC,OAAOsC,GACzC,UAAAC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,aAAU;AAAA,MACJ,CAACkB,CAAS,GAAG;AAAA,MACnB,kBAAgBb,IAAY,KAAK;AAAA,MACjC,WAAWc,EAAalB,EAAO,MAAMJ,CAAS;AAAA,MAC9C,cAAcgB;AAAA,MACd,cAAcC;AAAA,MACb,GAAGf;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,IAVH;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA,EAWA,GAZF,QAAA,IAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,IAaA;AAEJ,CAAC,GAQYsB,IAA4BzC,EAAM,WAG7C,SACA,EAAE,WAAAkB,GAAW,mBAAAwB,GAAmB,UAAAvB,GAAU,OAAAwB,GAAO,GAAGvB,EAAA,GACpDC,GACA;AACA,QAAMC,IAASnB,EAAA,GACT,EAAE,WAAAuB,GAAW,OAAAZ,GAAO,WAAAiB,GAAW,eAAAf,GAAe,gBAAAW,EAAA,IAClD1B,EAAA,GAEI2C,IAAa,OAAO9B,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAE9D,SACEwB,gBAAAA,EAAAA,OAAAO,YAAA,EAEG,UAAA;AAAA,IAAA,CAACnB,KACAY,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAjB;AAAA,QACA,aAAU;AAAA,QACJ,CAACkB,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAalB,EAAO,SAASJ,CAAS;AAAA,QACjD,OAAO,EAAE,OAAO0B,GAAY,GAAGD,EAAA;AAAA,QAC9B,GAAGvB;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,MARH;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAaDH,KACCsB,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACJ,CAACC,CAAS,GAAG;AAAA,QACnB,gBAAcb,KAAaK,IAAY,KAAK;AAAA,QAC5C,WAAWS;AAAAA,UACTlB,EAAO;AAAA,UACPK,KAAkBL,EAAO;AAAA,UACzBoB;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,OAAOE,EAAA;AAAA,QAEf,eAAab,KAAaZ;AAAA,MAAA;AAAA,MAX7B;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAYA,EAAA,GA7BJ,QAAA,IAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAA,IA+BA;AAEJ,CAAC,GAMY2B,IAA8B9C,EAAM,WAG/C,SACA,EAAE,WAAAkB,GAAW,UAAAC,GAAU,OAAAwB,GAAO,GAAGvB,EAAA,GACjCC,GACA;AACA,QAAMC,IAASnB,EAAA,GACT,EAAE,WAAAuB,GAAW,gBAAAX,EAAA,IAAmBd,EAAA;AAEtC,MAAI,CAACyB,EAAW,QAAO;AAEvB,QAAMqB,IACJ,OAAOhC,KAAmB,WAAW,GAAGA,CAAc,OAAOA;AAE/D,SACEuB,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,aAAU;AAAA,MACJ,CAACkB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAalB,EAAO,WAAWJ,CAAS;AAAA,MACnD,OAAO,EAAE,OAAO6B,GAAqB,GAAGJ,EAAA;AAAA,MACvC,GAAGvB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,IARH;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAWJ,CAAC,GAaY6B,IAA2BhD,EAAM,WAG5C,SAAkC,EAAE,WAAAkB,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC1E,QAAMC,IAASnB,EAAA,GACT,EAAE,WAAAuB,GAAW,mBAAAb,EAAA,IAAsBZ,EAAA;AAEzC,SACEqC,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAjB;AAAA,MACA,aAAU;AAAA,MACJ,CAACkB,CAAS,GAAG;AAAA,MACnB,kBAAgBb,IAAY,KAAK;AAAA,MACjC,MAAK;AAAA,MACL,iBAAe,CAACA;AAAA,MAChB,cAAYA,IAAY,mBAAmB;AAAA,MAC3C,WAAWc,EAAalB,EAAO,QAAQJ,CAAS;AAAA,MAChD,SAAS,MAAML,EAAkB,CAACa,CAAS;AAAA,MAC1C,GAAGN;AAAA,MAEH,iBAAOD,KAAa,aAAaA,EAAS,EAAE,WAAAO,EAAA,CAAW,IAAIP;AAAA,IAAA;AAAA,IAZ9D;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAeJ,CAAC;"}