@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/card/card.js

@@ -0,0 +1,172 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as i from "react";
+import { shorthands as f } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as d } from "../../renderer/contract.js";
+import { makeVoltStyles as p } from "../../styles/make-styles.js";
+import { spacingGroup2 as e, textSm as m, grayA11 as g, fontWeightSemibold as u, body as C, spacingElement2 as R, radiusXl as y } from "../../tokens/index.js";
+import { mergeClasses as s } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const c = p({
+  root: {
+    backgroundColor: C,
+    display: "flex",
+    flexDirection: "column",
+    ...f.gap(e),
+    ...f.borderRadius(y),
+    ...f.border("1px", "solid", "transparent"),
+    paddingTop: e,
+    paddingBottom: e,
+    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+  },
+  header: {
+    containerType: "inline-size",
+    containerName: "card-header",
+    display: "grid",
+    gridAutoRows: "min-content",
+    gridTemplateRows: "auto auto",
+    alignItems: "start",
+    ...f.gap(R),
+    paddingLeft: e,
+    paddingRight: e,
+    "&:is(.border-b)": {
+      paddingBottom: e
+    },
+    [`&:has([${d}="card-action"])`]: {
+      gridTemplateColumns: "1fr auto"
+    }
+  },
+  title: {
+    // v1 `leading-none` — a literal 1 because no token exists for it.
+    lineHeight: 1,
+    fontWeight: u
+  },
+  description: {
+    color: g,
+    fontSize: m
+  },
+  action: {
+    gridColumnStart: 2,
+    gridRowStart: 1,
+    gridRowEnd: "span 2",
+    alignSelf: "start",
+    justifySelf: "end"
+  },
+  content: {
+    paddingLeft: e,
+    paddingRight: e
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    paddingLeft: e,
+    paddingRight: e,
+    "&:is(.border-t)": {
+      paddingTop: e
+    }
+  }
+}), N = i.forwardRef(function({ className: t, ...r }, o) {
+  const a = c();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: o,
+      "data-slot": "card",
+      [d]: "card",
+      className: s(a.root, t),
+      ...r
+    }
+  );
+}), v = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: o,
+        "data-slot": "card-header",
+        [d]: "card-header",
+        className: s(a.header, t),
+        ...r
+      }
+    );
+  }
+), A = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: o,
+        "data-slot": "card-title",
+        [d]: "card-title",
+        className: s(a.title, t),
+        ...r
+      }
+    );
+  }
+), L = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: o,
+        "data-slot": "card-description",
+        [d]: "card-description",
+        className: s(a.description, t),
+        ...r
+      }
+    );
+  }
+), D = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: o,
+        "data-slot": "card-action",
+        [d]: "card-action",
+        className: s(a.action, t),
+        ...r
+      }
+    );
+  }
+), H = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: o,
+        "data-slot": "card-content",
+        [d]: "card-content",
+        className: s(a.content, t),
+        ...r
+      }
+    );
+  }
+), j = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: o,
+        "data-slot": "card-footer",
+        [d]: "card-footer",
+        className: s(a.footer, t),
+        ...r
+      }
+    );
+  }
+);
+export {
+  N as Card,
+  D as CardAction,
+  H as CardContent,
+  L as CardDescription,
+  j as CardFooter,
+  v as CardHeader,
+  A as CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Card — the first compound component: ONE `makeVoltStyles` call for the whole family, one slot per\n * sub-component, and each sub-component reads its own slot. Callout, Breadcrumb and Table copy\n * this pattern.\n *\n * v1 expresses every sub-component as a Tailwind class string; here each class becomes atoms over\n * tokens. The header keeps v1's container-query behaviour: `@container/card-header` becomes\n * `containerType`/`containerName`, `has-data-[slot=card-action]` becomes a `:has()` rule keyed on\n * SLOT_ATTR (per CONVENTIONS rule 4, never on `data-slot`), and the `[.border-b]` / `[.border-t]`\n * arbitrary variants stay `:is()` selectors over the same class names v1 targeted.\n *\n * Two v1 values are literals because no token fits: the card root's box-shadow (Tailwind v4's\n * `shadow-sm`, the two-stop default; v2 has no shadow family) and `leading-none`'s line-height of\n * 1 (CONVENTIONS rule 1).\n *\n * `text-body-default` on the root is deliberately absent. v1 resolves that class to\n * `color: var(--color-body-default)`, a variable its own theme never defines, so in v1 the root's\n * colour is inherited — the declaration is a no-op. Omitting it reproduces that exactly, and the\n * rest of the family already sets its own colours (`gray-a11` here is a core token).\n */\n\nconst useStyles = makeVoltStyles({\n  root: {\n    backgroundColor: tokens.body,\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    paddingTop: tokens.spacingGroup2,\n    paddingBottom: tokens.spacingGroup2,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  header: {\n    containerType: \"inline-size\",\n    containerName: \"card-header\",\n    display: \"grid\",\n    gridAutoRows: \"min-content\",\n    gridTemplateRows: \"auto auto\",\n    alignItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement2),\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n    \"&:is(.border-b)\": {\n      paddingBottom: tokens.spacingGroup2,\n    },\n    [`&:has([${SLOT_ATTR}=\"card-action\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n  title: {\n    // v1 `leading-none` — a literal 1 because no token exists for it.\n    lineHeight: 1,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    color: tokens.grayA11,\n    fontSize: tokens.textSm,\n  },\n  action: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    gridRowEnd: \"span 2\",\n    alignSelf: \"start\",\n    justifySelf: \"end\",\n  },\n  content: {\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n  },\n  footer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n    \"&:is(.border-t)\": {\n      paddingTop: tokens.spacingGroup2,\n    },\n  },\n})\n\nexport type CardProps = React.ComponentProps<\"div\">\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card\"\n      {...{ [SLOT_ATTR]: \"card\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardHeader({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-header\"\n        {...{ [SLOT_ATTR]: \"card-header\" }}\n        className={mergeClasses(styles.header, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardTitle = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-title\"\n        {...{ [SLOT_ATTR]: \"card-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardDescription = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardDescription({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-description\"\n        {...{ [SLOT_ATTR]: \"card-description\" }}\n        className={mergeClasses(styles.description, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardAction = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardAction({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-action\"\n        {...{ [SLOT_ATTR]: \"card-action\" }}\n        className={mergeClasses(styles.action, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardContent({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-content\"\n        {...{ [SLOT_ATTR]: \"card-content\" }}\n        className={mergeClasses(styles.content, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardFooter({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-footer\"\n        {...{ [SLOT_ATTR]: \"card-footer\" }}\n        className={mergeClasses(styles.footer, className)}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.spacingElement2","SLOT_ATTR","tokens.fontWeightSemibold","tokens.grayA11","tokens.textSm","Card","React","className","props","ref","styles","jsx","mergeClasses","CardHeader","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"mappings":"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"}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,123 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as c from "react";
+import { Checkbox as m, CheckboxIndicator as x } from "../../node_modules/@radix-ui/react-checkbox/dist/index.js";
+import { shorthands as e } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as i } from "../../renderer/contract.js";
+import { makeVoltStyles as b } from "../../styles/make-styles.js";
+import { errorA8 as s, grayA4 as p, accentA7 as d, semAccentContrast as u, semAccentSolid as f, accentA12 as k, accentA8 as g, radiusSm as w, semAccentSoft as C } from "../../tokens/index.js";
+import { mergeClasses as v } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const y = c.forwardRef(function(r, t) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      ref: t,
+      "data-slot": "checkbox-check-icon",
+      [i]: "checkbox-check-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24px",
+      viewBox: "0 -960 960 960",
+      width: "24px",
+      fill: "currentColor",
+      ...r,
+      children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
+    }
+  );
+}), S = c.forwardRef(function(r, t) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      ref: t,
+      "data-slot": "checkbox-minus-icon",
+      [i]: "checkbox-minus-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24px",
+      viewBox: "0 -960 960 960",
+      width: "24px",
+      fill: "currentColor",
+      ...r,
+      children: /* @__PURE__ */ o("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" })
+    }
+  );
+}), T = b({
+  root: {
+    ...e.border("1px", "solid", d),
+    backgroundColor: C,
+    display: "inline-block",
+    boxSizing: "border-box",
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    borderRadius: w,
+    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "box-shadow",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transitionDuration: "150ms",
+    ":focus-visible": {
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: g
+    },
+    "&[data-disabled]": {
+      cursor: "not-allowed",
+      opacity: 0.5,
+      ...e.borderColor(p)
+    },
+    "&[aria-invalid='true']": {
+      outlineColor: s,
+      ...e.borderColor(s)
+    },
+    "&[data-state='indeterminate']": {
+      backgroundColor: d,
+      ...e.borderColor("transparent"),
+      color: k
+    },
+    "&[data-state='checked']": {
+      backgroundColor: f,
+      ...e.borderWidth("0px"),
+      color: u
+    },
+    "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
+      width: "0.875rem",
+      height: "0.875rem"
+    }
+  },
+  indicator: {
+    display: "grid",
+    placeContent: "center",
+    height: "100%",
+    color: "currentColor",
+    transitionProperty: "none",
+    "& svg": {
+      width: "0.875rem",
+      height: "0.875rem"
+    }
+  }
+}), B = c.forwardRef(function({ className: r, checked: t, ...l }, h) {
+  const a = T();
+  return /* @__PURE__ */ o(
+    m,
+    {
+      ref: h,
+      checked: t,
+      "data-slot": "checkbox",
+      [i]: "checkbox",
+      className: v(a.root, r),
+      ...l,
+      children: /* @__PURE__ */ o(
+        x,
+        {
+          "data-slot": "checkbox-indicator",
+          [i]: "checkbox-indicator",
+          className: a.indicator,
+          children: t === "indeterminate" ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(y, {})
+        }
+      )
+    }
+  );
+});
+export {
+  B as Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.errorA8,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentA12,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeVoltStyles","shorthands","tokens.accentA7","tokens.semAccentSoft","tokens.radiusSm","tokens.accentA8","tokens.grayA4","tokens.errorA8","tokens.accentA12","tokens.semAccentSolid","tokens.semAccentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}

package/dist/components/collapsible-sidebar/collapsible-sidebar.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface CollapsibleSidebarContextValue {
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    width: number | string;
+    collapsedWidth: number | string;
+    isHovered: boolean;
+    expandOnHover: boolean;
+    skipTransition: boolean;
+}
+export declare function useCollapsibleSidebar(): CollapsibleSidebarContextValue;
+export type CollapsibleSidebarProps = React.ComponentProps<"div"> & {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    width?: number | string;
+    collapsedWidth?: number | string;
+    expandOnHover?: boolean;
+    hoverDelay?: number;
+};
+export declare const CollapsibleSidebar: React.ForwardRefExoticComponent<Omit<CollapsibleSidebarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CollapsibleSidebarContentProps = React.ComponentProps<"aside"> & {
+    floatingClassName?: string;
+};
+export declare const CollapsibleSidebarContent: React.ForwardRefExoticComponent<Omit<CollapsibleSidebarContentProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export type CollapsibleSidebarCondensedProps = React.ComponentProps<"div">;
+export declare const CollapsibleSidebarCondensed: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type CollapsibleSidebarToggleProps = Omit<React.ComponentProps<"button">, "onClick" | "children"> & {
+    children?: React.ReactNode | ((props: {
+        collapsed: boolean;
+    }) => React.ReactNode);
+};
+export declare const CollapsibleSidebarToggle: React.ForwardRefExoticComponent<Omit<CollapsibleSidebarToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,216 @@
+import { jsx as f, jsxs as G, Fragment as L } from "react/jsx-runtime";
+import * as e from "react";
+import { shorthands as y } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../renderer/contract.js";
+import { makeVoltStyles as P } from "../../styles/make-styles.js";
+import { spacingGroup2 as M, body as z, spacingElement3 as B, radius2xl as X } from "../../tokens/index.js";
+import { mergeClasses as x } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const D = e.createContext(null);
+function k() {
+  const u = e.useContext(D);
+  if (!u)
+    throw new Error(
+      "CollapsibleSidebar sub-components must be used within CollapsibleSidebar"
+    );
+  return u;
+}
+const S = P({
+  root: {
+    position: "relative",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%"
+  },
+  floating: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "100%",
+    // v1 z-50; floating panel layer above collapsed sidebar.
+    zIndex: 50,
+    ...y.borderRadius(X),
+    backgroundColor: z,
+    // v1 shadow-[0_4px_20px_rgba(0,0,0,0.15)]; no shadow token exists in this package.
+    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+    display: "flex",
+    flexDirection: "column",
+    opacity: 0,
+    transform: "translateX(-50%)",
+    pointerEvents: "none",
+    transitionProperty: "all",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+    "&[data-visible]": {
+      opacity: 1,
+      transform: "translateX(0)",
+      pointerEvents: "auto"
+    }
+  },
+  transitionNone: {
+    transitionProperty: "none"
+  },
+  condensed: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingTop: M,
+    // v1 gap-3 is 0.75rem; no spacing token for 0.75rem exists in this package.
+    ...y.gap(B),
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%"
+  },
+  toggle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    ...y.padding(M),
+    cursor: "pointer",
+    backgroundColor: "transparent",
+    ...y.border("0")
+  }
+}), K = e.forwardRef(function({
+  collapsed: n,
+  defaultCollapsed: l = !1,
+  onCollapsedChange: o,
+  width: i = 264,
+  collapsedWidth: r = 64,
+  expandOnHover: t = !0,
+  hoverDelay: s = 100,
+  className: a,
+  children: c,
+  ...g
+}, h) {
+  const v = S(), [C, F] = e.useState(l), T = n !== void 0, p = T ? n : C, [E, R] = e.useState(!1), N = e.useCallback(
+    (b) => {
+      b || R(!0), T || F(b), o == null || o(b);
+    },
+    [T, o]
+  ), [I, w] = e.useState(!1), d = e.useRef(void 0), V = e.useCallback(() => {
+    !p || !t || (d.current && clearTimeout(d.current), d.current = setTimeout(() => w(!0), s));
+  }, [p, t, s]), j = e.useCallback(() => {
+    d.current && clearTimeout(d.current), w(!1);
+  }, []);
+  e.useEffect(() => {
+    w(!1);
+    const b = requestAnimationFrame(() => R(!1));
+    return () => cancelAnimationFrame(b);
+  }, [p]), e.useEffect(() => () => {
+    d.current && clearTimeout(d.current);
+  }, []);
+  const A = e.useMemo(
+    () => ({
+      collapsed: p,
+      onCollapsedChange: N,
+      width: i,
+      collapsedWidth: r,
+      isHovered: I,
+      expandOnHover: t,
+      skipTransition: E
+    }),
+    [
+      p,
+      N,
+      i,
+      r,
+      I,
+      t,
+      E
+    ]
+  );
+  return /* @__PURE__ */ f(D.Provider, { value: A, children: /* @__PURE__ */ f(
+    "div",
+    {
+      ref: h,
+      "data-slot": "collapsible-sidebar",
+      [m]: "collapsible-sidebar",
+      "data-collapsed": p ? "" : void 0,
+      className: x(v.root, a),
+      onMouseEnter: V,
+      onMouseLeave: j,
+      ...g,
+      children: c
+    }
+  ) });
+}), Q = e.forwardRef(function({ className: n, floatingClassName: l, children: o, style: i, ...r }, t) {
+  const s = S(), { collapsed: a, width: c, isHovered: g, expandOnHover: h, skipTransition: v } = k(), C = typeof c == "number" ? `${c}px` : c;
+  return /* @__PURE__ */ G(L, { children: [
+    !a && /* @__PURE__ */ f(
+      "aside",
+      {
+        ref: t,
+        "data-slot": "collapsible-sidebar-content",
+        [m]: "collapsible-sidebar-content",
+        className: x(s.content, n),
+        style: { width: C, ...i },
+        ...r,
+        children: o
+      }
+    ),
+    h && /* @__PURE__ */ f(
+      "div",
+      {
+        "data-slot": "collapsible-sidebar-floating",
+        [m]: "collapsible-sidebar-floating",
+        "data-visible": a && g ? "" : void 0,
+        className: x(
+          s.floating,
+          v && s.transitionNone,
+          l
+        ),
+        style: { width: C },
+        children: a && g && o
+      }
+    )
+  ] });
+}), U = e.forwardRef(function({ className: n, children: l, style: o, ...i }, r) {
+  const t = S(), { collapsed: s, collapsedWidth: a } = k();
+  if (!s) return null;
+  const c = typeof a == "number" ? `${a}px` : a;
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: r,
+      "data-slot": "collapsible-sidebar-condensed",
+      [m]: "collapsible-sidebar-condensed",
+      className: x(t.condensed, n),
+      style: { width: c, ...o },
+      ...i,
+      children: l
+    }
+  );
+}), Y = e.forwardRef(function({ className: n, children: l, ...o }, i) {
+  const r = S(), { collapsed: t, onCollapsedChange: s } = k();
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      ref: i,
+      "data-slot": "collapsible-sidebar-toggle",
+      [m]: "collapsible-sidebar-toggle",
+      "data-collapsed": t ? "" : void 0,
+      type: "button",
+      "aria-expanded": !t,
+      "aria-label": t ? "Expand sidebar" : "Collapse sidebar",
+      className: x(r.toggle, n),
+      onClick: () => s(!t),
+      ...o,
+      children: typeof l == "function" ? l({ collapsed: t }) : l
+    }
+  );
+});
+export {
+  K as CollapsibleSidebar,
+  U as CollapsibleSidebarCondensed,
+  Q as CollapsibleSidebarContent,
+  Y as CollapsibleSidebarToggle,
+  k as useCollapsibleSidebar
+};
+//# sourceMappingURL=collapsible-sidebar.js.map

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

@@ -0,0 +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 \"@griffel/core\"\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":"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"}