@signalflare-ai/ui 1.0.0 → 1.2.0

package/dist/{select-1w2aebGQ.js → select-DMhdoHMa.js}

@@ -1,8 +1,8 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { i as buttonVariants } from "./button-De0267YU.js";
-import { t as Field } from "./field-Y_UK1_Cg.js";
-import { t as SkeletonLine } from "./skeleton-line-Do3UmGk9.js";
+import { i as buttonVariants } from "./button-CO6-qPax.js";
+import { t as Field } from "./field-B_yVof52.js";
+import { t as SkeletonLine } from "./skeleton-line-CH1-h6e2.js";
 import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
@@ -92,4 +92,4 @@ Select$1.Option = Option;
 //#endregion
 export { Select$1 as t };
 
-//# sourceMappingURL=select-1w2aebGQ.js.map
+//# sourceMappingURL=select-DMhdoHMa.js.map

package/dist/{select-1w2aebGQ.js.map → select-DMhdoHMa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"select-1w2aebGQ.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport { SkeletonLine } from \"../loader\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const SF_SELECT_VARIANTS = {\n  // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const SF_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"color-secondary\",\n    ring: \"color-border\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from SF_SELECT_VARIANTS\nexport interface SFSelectVariantsProps {}\n\nexport function selectVariants(_props: SFSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants(),\n    \"justify-between font-normal\",\n    \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\"\n  );\n}\n\ntype SelectPropsGeneric<\n  T,\n  Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n  SFSelectVariantsProps & {\n    multiple?: Multiple;\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n\n/**\n * Select component props.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n  label?: ReactNode;\n  /**\n   * Visually hide the label while keeping it accessible to screen readers.\n   * Set to `false` to show a visible label above the select via the Field wrapper.\n   * @default true\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with SignalFlare styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel = true,\n  placeholder,\n  loading,\n  labelTooltip,\n  description,\n  error,\n  required,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Use Field wrapper when label is provided and not hidden\n  const useFieldWrapper = label && !hideLabel;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Placeholder must be provide via the items props\n  // We need to fake the items or do some transformation\n  let items = props.items;\n  if (placeholder) {\n    if (!items) {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n      ];\n    } else if (typeof items === \"object\") {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n        ...Object.entries(items).map(([key, value]) => ({\n          value: key as T,\n          label: value,\n        })),\n      ];\n    } else if (Array.isArray(items)) {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n        ...items,\n      ];\n    }\n  }\n\n  const selectControl = (\n    <SelectBase.Root\n      {...props}\n      items={items}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          buttonVariants(),\n          \"justify-between font-normal\",\n          \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\",\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value>{renderValue}</SelectBase.Value>\n        )}\n        <SelectBase.Icon className=\"flex items-center\">\n          <CaretUpDownIcon />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"overflow-hidden bg-sf-control text-sf-default\", // background\n              \"rounded-lg shadow-lg ring ring-sf-line\", // border part\n              // 3px adjustment to account for padding + border differences\n              \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\" // spacing\n            )}\n          >\n            {children}\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  return (\n    <>\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n    </>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay\"\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\nSelect.Option = Option;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoJA,SAAgB,SAAwD,EACtE,UACA,WACA,aACA,OACA,YAAY,MACZ,aACA,SACA,cACA,aACA,OACA,UACA,GAAG,SACwD;CAC3D,MAAM,UAAU,OAAO;CACvB,MAAM,aAAa;CACnB,MAAM,YAAY,WAAW;CAC7B,MAAM,iBAAiB,WAAW;CAElC,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ;CAG1D,MAAM,kBAAkB,SAAS,CAAC;CAClC,MAAM,oBAAoB,kBACtB,KAAA,IACC,mBAAmB,QAAQ,UAAU,KAAA;CAC1C,MAAM,mBACJ,cAAc,CAAC,oBAAoB,gBAAgB,KAAA;CAIrD,IAAI,QAAQ,MAAM;AAClB,KAAI;MACE,CAAC,MACH,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,CACF;WACQ,OAAO,UAAU,SAC1B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,KAAK,YAAY;GAC9C,OAAO;GACP,OAAO;GACR,EAAE,CACJ;WACQ,MAAM,QAAQ,MAAM,CAC7B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,MACJ;;CAIL,MAAM,gBACJ,qBAAC,OAAW,MAAZ;EACE,GAAI;EACG;EACP,UAAU,WAAW,MAAM;YAH7B,CAKE,qBAAC,OAAW,SAAZ;GACE,WAAW,GACT,gBAAgB,EAChB,+BACA,yGACA,MAAM,YAAY,iCAClB,UACD;GACD,cAAY;GACZ,mBAAiB;aATnB,CAWG,UACC,oBAAC,cAAD,EAAc,WAAU,QAAS,CAAA,GAEjC,oBAAC,OAAW,OAAZ,EAAA,UAAmB,aAA+B,CAAA,EAEpD,oBAAC,OAAW,MAAZ;IAAiB,WAAU;cACzB,oBAAC,iBAAD,EAAmB,CAAA;IACH,CAAA,CACC;MACrB,oBAAC,OAAW,QAAZ,EAAA,UACE,oBAAC,OAAW,YAAZ,EAAA,UACE,oBAAC,OAAW,OAAZ;GACE,WAAW,GACT,iDACA,0CAEA,8CACD;GAEA;GACgB,CAAA,EACG,CAAA,EACN,CAAA,CACJ;;AAIpB,KAAI,gBACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACK,CAAA;AAKZ,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,SACC,oBAAC,QAAD;EAAM,IAAI;EAAS,WAAU;YAC1B;EACI,CAAA,EAER,cACA,EAAA,CAAA;;AASP,SAAS,OAAU,EAAE,UAAU,SAAyB;AACtD,QACE,qBAAC,OAAW,MAAZ;EACS;EACP,WAAU;YAFZ,CAIE,oBAAC,OAAW,UAAZ,EAAsB,UAA+B,CAAA,EACrD,oBAAC,OAAW,eAAZ,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACY,CAAA,CACX;;;AAItB,SAAO,SAAS"}
+{"version":3,"file":"select-DMhdoHMa.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport { SkeletonLine } from \"../loader\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const SF_SELECT_VARIANTS = {\n  // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const SF_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"color-secondary\",\n    ring: \"color-border\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from SF_SELECT_VARIANTS\nexport interface SFSelectVariantsProps {}\n\nexport function selectVariants(_props: SFSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants(),\n    \"justify-between font-normal\",\n    \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\"\n  );\n}\n\ntype SelectPropsGeneric<\n  T,\n  Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n  SFSelectVariantsProps & {\n    multiple?: Multiple;\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n\n/**\n * Select component props.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n  label?: ReactNode;\n  /**\n   * Visually hide the label while keeping it accessible to screen readers.\n   * Set to `false` to show a visible label above the select via the Field wrapper.\n   * @default true\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with SignalFlare styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel = true,\n  placeholder,\n  loading,\n  labelTooltip,\n  description,\n  error,\n  required,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Use Field wrapper when label is provided and not hidden\n  const useFieldWrapper = label && !hideLabel;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Placeholder must be provide via the items props\n  // We need to fake the items or do some transformation\n  let items = props.items;\n  if (placeholder) {\n    if (!items) {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n      ];\n    } else if (typeof items === \"object\") {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n        ...Object.entries(items).map(([key, value]) => ({\n          value: key as T,\n          label: value,\n        })),\n      ];\n    } else if (Array.isArray(items)) {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n        ...items,\n      ];\n    }\n  }\n\n  const selectControl = (\n    <SelectBase.Root\n      {...props}\n      items={items}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          buttonVariants(),\n          \"justify-between font-normal\",\n          \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\",\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value>{renderValue}</SelectBase.Value>\n        )}\n        <SelectBase.Icon className=\"flex items-center\">\n          <CaretUpDownIcon />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"overflow-hidden bg-sf-control text-sf-default\", // background\n              \"rounded-lg shadow-lg ring ring-sf-line\", // border part\n              // 3px adjustment to account for padding + border differences\n              \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\" // spacing\n            )}\n          >\n            {children}\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  return (\n    <>\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n    </>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay\"\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\nSelect.Option = Option;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoJA,SAAgB,SAAwD,EACtE,UACA,WACA,aACA,OACA,YAAY,MACZ,aACA,SACA,cACA,aACA,OACA,UACA,GAAG,SACwD;CAC3D,MAAM,UAAU,OAAO;CACvB,MAAM,aAAa;CACnB,MAAM,YAAY,WAAW;CAC7B,MAAM,iBAAiB,WAAW;CAElC,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ;CAG1D,MAAM,kBAAkB,SAAS,CAAC;CAClC,MAAM,oBAAoB,kBACtB,KAAA,IACC,mBAAmB,QAAQ,UAAU,KAAA;CAC1C,MAAM,mBACJ,cAAc,CAAC,oBAAoB,gBAAgB,KAAA;CAIrD,IAAI,QAAQ,MAAM;AAClB,KAAI;MACE,CAAC,MACH,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,CACF;WACQ,OAAO,UAAU,SAC1B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,KAAK,YAAY;GAC9C,OAAO;GACP,OAAO;GACR,EAAE,CACJ;WACQ,MAAM,QAAQ,MAAM,CAC7B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,MACJ;;CAIL,MAAM,gBACJ,qBAAC,OAAW,MAAZ;EACE,GAAI;EACG;EACP,UAAU,WAAW,MAAM;YAH7B,CAKE,qBAAC,OAAW,SAAZ;GACE,WAAW,GACT,gBAAgB,EAChB,+BACA,yGACA,MAAM,YAAY,iCAClB,UACD;GACD,cAAY;GACZ,mBAAiB;aATnB,CAWG,UACC,oBAAC,cAAD,EAAc,WAAU,QAAS,CAAA,GAEjC,oBAAC,OAAW,OAAZ,EAAA,UAAmB,aAA+B,CAAA,EAEpD,oBAAC,OAAW,MAAZ;IAAiB,WAAU;cACzB,oBAAC,iBAAD,EAAmB,CAAA;IACH,CAAA,CACC;MACrB,oBAAC,OAAW,QAAZ,EAAA,UACE,oBAAC,OAAW,YAAZ,EAAA,UACE,oBAAC,OAAW,OAAZ;GACE,WAAW,GACT,iDACA,0CAEA,8CACD;GAEA;GACgB,CAAA,EACG,CAAA,EACN,CAAA,CACJ;;AAIpB,KAAI,gBACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACK,CAAA;AAKZ,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,SACC,oBAAC,QAAD;EAAM,IAAI;EAAS,WAAU;YAC1B;EACI,CAAA,EAER,cACA,EAAA,CAAA;;AASP,SAAS,OAAU,EAAE,UAAU,SAAyB;AACtD,QACE,qBAAC,OAAW,MAAZ;EACS;EACP,WAAU;YAFZ,CAIE,oBAAC,OAAW,UAAZ,EAAsB,UAA+B,CAAA,EACrD,oBAAC,OAAW,eAAZ,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACY,CAAA,CACX;;;AAItB,SAAO,SAAS"}

package/dist/{sensitive-input-82Cez3vj.js → sensitive-input-CJUpIRal.js}

@@ -1,7 +1,7 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Field } from "./field-Y_UK1_Cg.js";
-import { n as SF_INPUT_VARIANTS, r as inputVariants } from "./input-DXYUjGgD.js";
+import { t as Field } from "./field-B_yVof52.js";
+import { n as SF_INPUT_VARIANTS, r as inputVariants } from "./input-B2bbijRh.js";
 import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeSlash } from "@phosphor-icons/react";
@@ -245,4 +245,4 @@ SensitiveInput.displayName = "SensitiveInput";
 //#endregion
 export { SF_SENSITIVE_INPUT_VARIANTS as n, SensitiveInput as r, SF_SENSITIVE_INPUT_DEFAULT_VARIANTS as t };
 
-//# sourceMappingURL=sensitive-input-82Cez3vj.js.map
+//# sourceMappingURL=sensitive-input-CJUpIRal.js.map

package/dist/{sensitive-input-82Cez3vj.js.map → sensitive-input-CJUpIRal.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sensitive-input-82Cez3vj.js","names":[],"sources":["../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  inputVariants,\n  SF_INPUT_VARIANTS,\n  type SFInputSize,\n  type SFInputVariant,\n} from \"../input/input\";\n\nexport const SF_SENSITIVE_INPUT_VARIANTS = SF_INPUT_VARIANTS;\n\nexport const SF_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps extends Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"size\" | \"type\" | \"value\" | \"defaultValue\"\n> {\n  /** Controlled value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Simplified change handler receiving just the value */\n  onValueChange?: (value: string) => void;\n  /** Callback fired after value is copied to clipboard */\n  onCopy?: () => void;\n  /**\n   * Size of the input.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default input size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: SFInputSize;\n  /**\n   * Style variant of the input.\n   * - `\"default\"` — Default input appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFInputVariant;\n  /** Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the input */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n  (\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onValueChange,\n      onCopy,\n      size = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n      variant = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n      disabled = false,\n      readOnly = false,\n      id,\n      autoComplete = \"off\",\n      className,\n      label,\n      labelTooltip,\n      description,\n      error,\n      required,\n      ...inputProps\n    },\n    ref\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback =\n      typeof label === \"string\" ? label : \"Sensitive value\";\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const value = isControlled ? controlledValue : internalValue;\n    const hasValue = value.length > 0;\n\n    const [mode, setMode] = useState<Mode>(() =>\n      hasValue ? \"masked\" : \"empty\"\n    );\n\n    const [copied, setCopied] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const liveRegionId = useId();\n    const generatedId = useId();\n    const inputId = id ?? generatedId;\n    const maskedInstructionId = useId();\n\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Reset copied state after 2 seconds\n    useEffect(() => {\n      if (copied) {\n        const timeoutId = setTimeout(() => setCopied(false), 2000);\n        return () => clearTimeout(timeoutId);\n      }\n    }, [copied]);\n\n    const copyToClipboard = useCallback(\n      async (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        try {\n          if (\n            typeof navigator !== \"undefined\" &&\n            navigator.clipboard &&\n            typeof navigator.clipboard.writeText === \"function\"\n          ) {\n            await navigator.clipboard.writeText(value);\n            setCopied(true);\n            onCopy?.();\n            return;\n          }\n        } catch {\n          // Fall through to manual fallback\n        }\n\n        if (typeof document !== \"undefined\") {\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = value;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n            setCopied(true);\n            onCopy?.();\n          } catch (error) {\n            console.warn(\"Clipboard copy failed\", error);\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n      },\n      [value, onCopy]\n    );\n\n    // Sync mode when value changes externally\n    const prevHasValueRef = useRef(hasValue);\n    if (prevHasValueRef.current !== hasValue) {\n      prevHasValueRef.current = hasValue;\n      if (!hasValue && mode === \"masked\") {\n        setMode(\"empty\");\n      }\n    }\n\n    const handleContainerClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return;\n        // Ignore clicks that originated from outside (e.g., label click focusing input)\n        // Label clicks trigger a click on the input, but the click coordinates are outside the container\n        if (containerRef.current) {\n          const rect = containerRef.current.getBoundingClientRect();\n          const isClickInsideContainer =\n            e.clientX >= rect.left &&\n            e.clientX <= rect.right &&\n            e.clientY >= rect.top &&\n            e.clientY <= rect.bottom;\n          if (!isClickInsideContainer) return;\n        }\n        if (mode === \"masked\" && hasValue) {\n          setMode(\"revealed\");\n          if (!readOnly) {\n            setTimeout(() => inputRef.current?.focus(), 0);\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly]\n    );\n\n    const handleToggleVisibility = useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        if (mode === \"revealed\") {\n          setMode(\"masked\");\n        } else if (mode === \"empty\" && hasValue) {\n          setMode(\"revealed\");\n        }\n      },\n      [mode, hasValue]\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (!isControlled) {\n          setInternalValue(newValue);\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange]\n    );\n\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n        if (\n          containerRef.current &&\n          e.relatedTarget instanceof Node &&\n          containerRef.current.contains(e.relatedTarget)\n        ) {\n          return;\n        }\n        if (hasValue) {\n          setMode(\"masked\");\n        }\n      },\n      [hasValue]\n    );\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled) return;\n        if (mode === \"masked\" && hasValue) {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            setMode(\"revealed\");\n            if (!readOnly) {\n              setTimeout(() => inputRef.current?.focus(), 0);\n            }\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly]\n    );\n\n    const handleInputKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (mode === \"revealed\" && e.key === \"Escape\") {\n          setMode(\"masked\");\n          // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n          setTimeout(() => containerRef.current?.focus(), 0);\n        }\n      },\n      [mode]\n    );\n\n    const isMaskedWithValue = mode === \"masked\" && hasValue;\n    const showEyeButton =\n      !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n    // Icon sizes matching input sizes\n    const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n    const containerClassName = cn(\n      inputVariants({ size, variant, parentFocusIndicator: true }),\n      \"group/container relative flex w-full items-center\",\n      isMaskedWithValue && !disabled && \"cursor-pointer\",\n      disabled && \"cursor-not-allowed\",\n      className\n    );\n\n    const containerContent = (\n      <>\n        {/* Input - defines the width, always rendered */}\n        <BaseInput\n          ref={mergedRef}\n          id={inputId}\n          type={mode === \"revealed\" ? \"text\" : \"password\"}\n          value={value}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleInputKeyDown}\n          disabled={disabled}\n          readOnly={readOnly || isMaskedWithValue}\n          autoComplete={autoComplete}\n          tabIndex={isMaskedWithValue ? -1 : 0}\n          className={cn(\n            \"w-full border-0 bg-transparent p-0 text-sf-default ring-0 outline-none placeholder:text-sf-subtle disabled:cursor-not-allowed disabled:text-sf-subtle\",\n            size === \"xs\" && \"pr-5\",\n            size === \"sm\" && \"pr-6\",\n            size === \"base\" && \"pr-8\",\n            size === \"lg\" && \"pr-10\",\n            isMaskedWithValue && \"pointer-events-none text-transparent\"\n          )}\n          aria-hidden={isMaskedWithValue}\n          {...inputProps}\n        />\n\n        {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n        <span\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n            // Match input pr padding (space for icon)\n            size === \"xs\" && \"right-5\",\n            size === \"sm\" && \"right-6\",\n            size === \"base\" && \"right-8\",\n            size === \"lg\" && \"right-10\",\n            // Match the padding from inputVariants\n            size === \"xs\" && \"px-1.5\",\n            size === \"sm\" && \"px-2\",\n            size === \"base\" && \"px-3\",\n            size === \"lg\" && \"px-4\",\n            // Hidden when not masked\n            !isMaskedWithValue && \"invisible\",\n            // When masked: enable pointer events\n            isMaskedWithValue && \"pointer-events-auto\",\n            // Text color - use text-sf-default to contrast with bg-sf-control input background\n            \"text-sf-default\",\n            // Hover state - pure CSS, no React state (group for children)\n            \"group/mask\"\n          )}\n          aria-hidden=\"true\"\n        >\n          {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n          <span className=\"relative\">\n            <span\n              className={cn(\n                isMaskedWithValue &&\n                  !disabled &&\n                  \"group-focus-within/container:invisible group-hover/mask:invisible\"\n              )}\n            >\n              ••••••••\n            </span>\n            {isMaskedWithValue && !disabled && (\n              <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-sf-subtle group-focus-within/container:visible group-hover/mask:visible\">\n                Click to reveal\n              </span>\n            )}\n          </span>\n        </span>\n\n        {/* Eye button - absolutely positioned to the right */}\n        <button\n          type=\"button\"\n          onClick={handleToggleVisibility}\n          onKeyDown={(e) => e.stopPropagation()}\n          aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n          tabIndex={showEyeButton ? 0 : -1}\n          className={cn(\n            \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-sf-subtle outline-none hover:text-sf-default focus:text-sf-default\",\n            // Match right padding from inputVariants\n            size === \"xs\" && \"right-1.5\",\n            size === \"sm\" && \"right-2\",\n            size === \"base\" && \"right-3\",\n            size === \"lg\" && \"right-4\",\n            iconSize,\n            !showEyeButton && \"pointer-events-none opacity-0\"\n          )}\n        >\n          {mode === \"revealed\" ? (\n            <EyeSlash className=\"size-full\" />\n          ) : (\n            <Eye className=\"size-full\" />\n          )}\n        </button>\n\n        {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            onClick={copyToClipboard}\n            onKeyDown={(e) => e.stopPropagation()}\n            aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n            className={cn(\n              \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-sf-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-sf-ring\"\n            )}\n          >\n            {copied ? \"Copied\" : \"Copy\"}\n          </button>\n        )}\n      </>\n    );\n\n    const input = (\n      <div>\n        {isMaskedWithValue ? (\n          <div\n            ref={containerRef}\n            // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n            // Using role=\"button\" with proper keyboard handling instead.\n            // oxlint-disable-next-line prefer-tag-over-role\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            className={containerClassName}\n            onClick={handleContainerClick}\n            onKeyDown={handleContainerKeyDown}\n            aria-label={`${ariaLabelFallback}, masked.`}\n            aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n            aria-disabled={disabled}\n          >\n            {containerContent}\n          </div>\n        ) : (\n          <div ref={containerRef} className={containerClassName}>\n            {containerContent}\n          </div>\n        )}\n        {isMaskedWithValue && (\n          <span id={maskedInstructionId} className=\"sr-only\">\n            Click or press Enter to reveal.\n          </span>\n        )}\n        <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n          {mode === \"masked\" && hasValue && \"Value hidden\"}\n          {copied && \"Copied to clipboard\"}\n        </span>\n      </div>\n    );\n\n    // Render with Field wrapper if label is provided\n    if (label) {\n      return (\n        <Field\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    // Render bare input without Field wrapper\n    return input;\n  }\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":"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"}
+{"version":3,"file":"sensitive-input-CJUpIRal.js","names":[],"sources":["../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  inputVariants,\n  SF_INPUT_VARIANTS,\n  type SFInputSize,\n  type SFInputVariant,\n} from \"../input/input\";\n\nexport const SF_SENSITIVE_INPUT_VARIANTS = SF_INPUT_VARIANTS;\n\nexport const SF_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps extends Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"size\" | \"type\" | \"value\" | \"defaultValue\"\n> {\n  /** Controlled value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Simplified change handler receiving just the value */\n  onValueChange?: (value: string) => void;\n  /** Callback fired after value is copied to clipboard */\n  onCopy?: () => void;\n  /**\n   * Size of the input.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default input size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: SFInputSize;\n  /**\n   * Style variant of the input.\n   * - `\"default\"` — Default input appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFInputVariant;\n  /** Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the input */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n  (\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onValueChange,\n      onCopy,\n      size = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n      variant = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n      disabled = false,\n      readOnly = false,\n      id,\n      autoComplete = \"off\",\n      className,\n      label,\n      labelTooltip,\n      description,\n      error,\n      required,\n      ...inputProps\n    },\n    ref\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback =\n      typeof label === \"string\" ? label : \"Sensitive value\";\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const value = isControlled ? controlledValue : internalValue;\n    const hasValue = value.length > 0;\n\n    const [mode, setMode] = useState<Mode>(() =>\n      hasValue ? \"masked\" : \"empty\"\n    );\n\n    const [copied, setCopied] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const liveRegionId = useId();\n    const generatedId = useId();\n    const inputId = id ?? generatedId;\n    const maskedInstructionId = useId();\n\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Reset copied state after 2 seconds\n    useEffect(() => {\n      if (copied) {\n        const timeoutId = setTimeout(() => setCopied(false), 2000);\n        return () => clearTimeout(timeoutId);\n      }\n    }, [copied]);\n\n    const copyToClipboard = useCallback(\n      async (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        try {\n          if (\n            typeof navigator !== \"undefined\" &&\n            navigator.clipboard &&\n            typeof navigator.clipboard.writeText === \"function\"\n          ) {\n            await navigator.clipboard.writeText(value);\n            setCopied(true);\n            onCopy?.();\n            return;\n          }\n        } catch {\n          // Fall through to manual fallback\n        }\n\n        if (typeof document !== \"undefined\") {\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = value;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n            setCopied(true);\n            onCopy?.();\n          } catch (error) {\n            console.warn(\"Clipboard copy failed\", error);\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n      },\n      [value, onCopy]\n    );\n\n    // Sync mode when value changes externally\n    const prevHasValueRef = useRef(hasValue);\n    if (prevHasValueRef.current !== hasValue) {\n      prevHasValueRef.current = hasValue;\n      if (!hasValue && mode === \"masked\") {\n        setMode(\"empty\");\n      }\n    }\n\n    const handleContainerClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return;\n        // Ignore clicks that originated from outside (e.g., label click focusing input)\n        // Label clicks trigger a click on the input, but the click coordinates are outside the container\n        if (containerRef.current) {\n          const rect = containerRef.current.getBoundingClientRect();\n          const isClickInsideContainer =\n            e.clientX >= rect.left &&\n            e.clientX <= rect.right &&\n            e.clientY >= rect.top &&\n            e.clientY <= rect.bottom;\n          if (!isClickInsideContainer) return;\n        }\n        if (mode === \"masked\" && hasValue) {\n          setMode(\"revealed\");\n          if (!readOnly) {\n            setTimeout(() => inputRef.current?.focus(), 0);\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly]\n    );\n\n    const handleToggleVisibility = useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        if (mode === \"revealed\") {\n          setMode(\"masked\");\n        } else if (mode === \"empty\" && hasValue) {\n          setMode(\"revealed\");\n        }\n      },\n      [mode, hasValue]\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (!isControlled) {\n          setInternalValue(newValue);\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange]\n    );\n\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n        if (\n          containerRef.current &&\n          e.relatedTarget instanceof Node &&\n          containerRef.current.contains(e.relatedTarget)\n        ) {\n          return;\n        }\n        if (hasValue) {\n          setMode(\"masked\");\n        }\n      },\n      [hasValue]\n    );\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled) return;\n        if (mode === \"masked\" && hasValue) {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            setMode(\"revealed\");\n            if (!readOnly) {\n              setTimeout(() => inputRef.current?.focus(), 0);\n            }\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly]\n    );\n\n    const handleInputKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (mode === \"revealed\" && e.key === \"Escape\") {\n          setMode(\"masked\");\n          // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n          setTimeout(() => containerRef.current?.focus(), 0);\n        }\n      },\n      [mode]\n    );\n\n    const isMaskedWithValue = mode === \"masked\" && hasValue;\n    const showEyeButton =\n      !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n    // Icon sizes matching input sizes\n    const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n    const containerClassName = cn(\n      inputVariants({ size, variant, parentFocusIndicator: true }),\n      \"group/container relative flex w-full items-center\",\n      isMaskedWithValue && !disabled && \"cursor-pointer\",\n      disabled && \"cursor-not-allowed\",\n      className\n    );\n\n    const containerContent = (\n      <>\n        {/* Input - defines the width, always rendered */}\n        <BaseInput\n          ref={mergedRef}\n          id={inputId}\n          type={mode === \"revealed\" ? \"text\" : \"password\"}\n          value={value}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleInputKeyDown}\n          disabled={disabled}\n          readOnly={readOnly || isMaskedWithValue}\n          autoComplete={autoComplete}\n          tabIndex={isMaskedWithValue ? -1 : 0}\n          className={cn(\n            \"w-full border-0 bg-transparent p-0 text-sf-default ring-0 outline-none placeholder:text-sf-subtle disabled:cursor-not-allowed disabled:text-sf-subtle\",\n            size === \"xs\" && \"pr-5\",\n            size === \"sm\" && \"pr-6\",\n            size === \"base\" && \"pr-8\",\n            size === \"lg\" && \"pr-10\",\n            isMaskedWithValue && \"pointer-events-none text-transparent\"\n          )}\n          aria-hidden={isMaskedWithValue}\n          {...inputProps}\n        />\n\n        {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n        <span\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n            // Match input pr padding (space for icon)\n            size === \"xs\" && \"right-5\",\n            size === \"sm\" && \"right-6\",\n            size === \"base\" && \"right-8\",\n            size === \"lg\" && \"right-10\",\n            // Match the padding from inputVariants\n            size === \"xs\" && \"px-1.5\",\n            size === \"sm\" && \"px-2\",\n            size === \"base\" && \"px-3\",\n            size === \"lg\" && \"px-4\",\n            // Hidden when not masked\n            !isMaskedWithValue && \"invisible\",\n            // When masked: enable pointer events\n            isMaskedWithValue && \"pointer-events-auto\",\n            // Text color - use text-sf-default to contrast with bg-sf-control input background\n            \"text-sf-default\",\n            // Hover state - pure CSS, no React state (group for children)\n            \"group/mask\"\n          )}\n          aria-hidden=\"true\"\n        >\n          {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n          <span className=\"relative\">\n            <span\n              className={cn(\n                isMaskedWithValue &&\n                  !disabled &&\n                  \"group-focus-within/container:invisible group-hover/mask:invisible\"\n              )}\n            >\n              ••••••••\n            </span>\n            {isMaskedWithValue && !disabled && (\n              <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-sf-subtle group-focus-within/container:visible group-hover/mask:visible\">\n                Click to reveal\n              </span>\n            )}\n          </span>\n        </span>\n\n        {/* Eye button - absolutely positioned to the right */}\n        <button\n          type=\"button\"\n          onClick={handleToggleVisibility}\n          onKeyDown={(e) => e.stopPropagation()}\n          aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n          tabIndex={showEyeButton ? 0 : -1}\n          className={cn(\n            \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-sf-subtle outline-none hover:text-sf-default focus:text-sf-default\",\n            // Match right padding from inputVariants\n            size === \"xs\" && \"right-1.5\",\n            size === \"sm\" && \"right-2\",\n            size === \"base\" && \"right-3\",\n            size === \"lg\" && \"right-4\",\n            iconSize,\n            !showEyeButton && \"pointer-events-none opacity-0\"\n          )}\n        >\n          {mode === \"revealed\" ? (\n            <EyeSlash className=\"size-full\" />\n          ) : (\n            <Eye className=\"size-full\" />\n          )}\n        </button>\n\n        {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            onClick={copyToClipboard}\n            onKeyDown={(e) => e.stopPropagation()}\n            aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n            className={cn(\n              \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-sf-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-sf-ring\"\n            )}\n          >\n            {copied ? \"Copied\" : \"Copy\"}\n          </button>\n        )}\n      </>\n    );\n\n    const input = (\n      <div>\n        {isMaskedWithValue ? (\n          <div\n            ref={containerRef}\n            // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n            // Using role=\"button\" with proper keyboard handling instead.\n            // oxlint-disable-next-line prefer-tag-over-role\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            className={containerClassName}\n            onClick={handleContainerClick}\n            onKeyDown={handleContainerKeyDown}\n            aria-label={`${ariaLabelFallback}, masked.`}\n            aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n            aria-disabled={disabled}\n          >\n            {containerContent}\n          </div>\n        ) : (\n          <div ref={containerRef} className={containerClassName}>\n            {containerContent}\n          </div>\n        )}\n        {isMaskedWithValue && (\n          <span id={maskedInstructionId} className=\"sr-only\">\n            Click or press Enter to reveal.\n          </span>\n        )}\n        <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n          {mode === \"masked\" && hasValue && \"Value hidden\"}\n          {copied && \"Copied to clipboard\"}\n        </span>\n      </div>\n    );\n\n    // Render with Field wrapper if label is provided\n    if (label) {\n      return (\n        <Field\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    // Render bare input without Field wrapper\n    return input;\n  }\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":"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"}

package/dist/{sidebar-CAsCmSpM.js → sidebar-D4zrlYpn.js}

@@ -1,7 +1,7 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
 import { n as useLinkComponent } from "./link-provider-BUZKXaNE.js";
-import { n as TooltipProvider, t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { n as TooltipProvider, t as Tooltip } from "./tooltip-g9lFsvcT.js";
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretRightIcon, MagnifyingGlassIcon, SidebarSimpleIcon } from "@phosphor-icons/react";
@@ -961,4 +961,4 @@ var Sidebar = Object.assign(SidebarRoot, {
 //#endregion
 export { useSidebar as A, SidebarMenuSubItem as C, SidebarRoot as D, SidebarResizeHandle as E, SidebarSeparator as O, SidebarMenuSubButton as S, SidebarRail as T, SidebarMenuBadge as _, SidebarCollapsible as a, SidebarMenuItem as b, SidebarContent as c, SidebarGroupContent as d, SidebarGroupLabel as f, SidebarMenuAction as g, SidebarMenu as h, Sidebar as i, SidebarTrigger as k, SidebarFooter as l, SidebarInput as m, SF_SIDEBAR_STYLING as n, SidebarCollapsibleContent as o, SidebarHeader as p, SF_SIDEBAR_VARIANTS as r, SidebarCollapsibleTrigger as s, SF_SIDEBAR_DEFAULT_VARIANTS as t, SidebarGroup as u, SidebarMenuButton as v, SidebarProvider as w, SidebarMenuSub as x, SidebarMenuChevron as y };
 
-//# sourceMappingURL=sidebar-CAsCmSpM.js.map
+//# sourceMappingURL=sidebar-D4zrlYpn.js.map

package/dist/{sidebar-CAsCmSpM.js.map → sidebar-D4zrlYpn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sidebar-CAsCmSpM.js","names":[],"sources":["../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n  CaretRightIcon,\n  MagnifyingGlassIcon,\n  SidebarSimpleIcon,\n} from \"@phosphor-icons/react\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by SignalFlare convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const SF_SIDEBAR_VARIANTS = {\n  variant: {\n    sidebar: {\n      classes: \"\",\n      description: \"Standard sidebar with border separator\",\n    },\n    floating: {\n      classes: \"\",\n      description: \"Floating sidebar with shadow and rounded corners\",\n    },\n    inset: {\n      classes: \"\",\n      description: \"Inset sidebar within the content area\",\n    },\n  },\n  collapsible: {\n    icon: {\n      classes: \"\",\n      description: \"Collapses to show icons only\",\n    },\n    offcanvas: {\n      classes: \"\",\n      description: \"Slides off screen when collapsed\",\n    },\n    none: {\n      classes: \"\",\n      description: \"Cannot be collapsed\",\n    },\n  },\n  side: {\n    left: {\n      classes: \"\",\n      description: \"Left-aligned sidebar\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Right-aligned sidebar\",\n    },\n  },\n} as const;\n\nexport const SF_SIDEBAR_DEFAULT_VARIANTS = {\n  variant: \"sidebar\",\n  collapsible: \"icon\",\n  side: \"left\",\n} as const;\n\nexport const SF_SIDEBAR_STYLING = {\n  width: {\n    expanded: \"16rem\",\n    icon: \"3rem\",\n  },\n  mobile: {\n    breakpoint: 768,\n  },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst MOBILE_BREAKPOINT = 768;\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => setIsMobile(mql.matches);\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(mql.matches);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport interface SidebarContextValue {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  variant: \"sidebar\" | \"floating\" | \"inset\";\n  side: \"left\" | \"right\";\n  collapsible: \"icon\" | \"offcanvas\" | \"none\";\n  width: number;\n  resizable: boolean;\n  minWidth: number;\n  maxWidth: number;\n  isResizing: boolean;\n  setIsResizing: (resizing: boolean) => void;\n  setWidth: (width: number) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n  }\n  return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n  /** Initial open state when uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode). */\n  onOpenChange?: (open: boolean) => void;\n  /** Sidebar layout variant. @default \"sidebar\" */\n  variant?: SidebarVariant;\n  /** Which side the sidebar is on. @default \"left\" */\n  side?: SidebarSide;\n  collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n  /** Enable drag-to-resize on the sidebar edge. @default false */\n  resizable?: boolean;\n  /** Initial width in pixels when resizable. @default 256 */\n  defaultWidth?: number;\n  /** Minimum width in pixels when resizing. @default 200 */\n  minWidth?: number;\n  /** Maximum width in pixels when resizing. @default 480 */\n  maxWidth?: number;\n  /** Callback when width changes during resize. */\n  onWidthChange?: (width: number) => void;\n  /** Content — typically `<Sidebar>` + main content. */\n  children: ReactNode;\n  /** Additional CSS classes for the wrapper div. */\n  className?: string;\n  /** Inline styles for the wrapper div. */\n  style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>{...}</Sidebar>\n *   <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  variant = SF_SIDEBAR_DEFAULT_VARIANTS.variant,\n  side = SF_SIDEBAR_DEFAULT_VARIANTS.side,\n  collapsible = SF_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n  resizable = false,\n  defaultWidth = DEFAULT_WIDTH_PX,\n  minWidth = MIN_WIDTH_PX,\n  maxWidth = MAX_WIDTH_PX,\n  onWidthChange,\n  children,\n  className,\n  style,\n}: SidebarProviderProps) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n  const [width, setWidthState] = useState(defaultWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n      setWidthState(clamped);\n      onWidthChange?.(clamped);\n    },\n    [minWidth, maxWidth, onWidthChange]\n  );\n\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((prev: boolean) => boolean)) => {\n      const next = typeof value === \"function\" ? value(open) : value;\n      setOpenProp?.(next);\n      _setOpen(next);\n    },\n    [setOpenProp, open]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) {\n      setOpenMobile((prev) => !prev);\n    } else {\n      setOpen((prev: boolean) => !prev);\n    }\n  }, [isMobile, setOpen]);\n\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n  const contextValue = useMemo<SidebarContextValue>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n    }),\n    [\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n    ]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-sidebar-wrapper=\"\"\n        data-state={state}\n        data-side={side}\n        style={\n          {\n            \"--sidebar-width\": sidebarWidthValue,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full\",\n          \"has-data-[variant=inset]:bg-sf-recessed\",\n          isResizing && \"select-none\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Additional CSS classes for the sidebar element. */\n  className?: string;\n  /** Sidebar content — Header, Content, Footer, etc. */\n  children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n *   <Sidebar>\n *     <Sidebar.Header>...</Sidebar.Header>\n *     <Sidebar.Content>...</Sidebar.Content>\n *     <Sidebar.Footer>...</Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    const {\n      state,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      side,\n      variant,\n      collapsible,\n      isResizing,\n      resizable,\n      width,\n    } = useSidebar();\n\n    if (collapsible === \"none\") {\n      return (\n        <aside\n          ref={ref}\n          data-state=\"expanded\"\n          data-side={side}\n          data-variant={variant}\n          data-sidebar=\"sidebar\"\n          style={{\n            width: \"var(--sidebar-width)\",\n            minWidth: \"var(--sidebar-width)\",\n            maxWidth: \"var(--sidebar-width)\",\n          }}\n          className={cn(\n            \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-sf-base text-sf-default\",\n            variant === \"sidebar\" &&\n              (side === \"left\"\n                ? \"border-r border-sf-line\"\n                : \"border-l border-sf-line\"),\n            variant === \"floating\" &&\n              \"m-2 rounded-lg border border-sf-line shadow-lg\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <DialogBase.Root open={openMobile} onOpenChange={setOpenMobile}>\n          <DialogBase.Portal>\n            <DialogBase.Backdrop className=\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\" />\n            <DialogBase.Popup\n              className={cn(\n                \"fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-sf-base p-0\",\n                \"duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n                side === \"left\" &&\n                  \"left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full\",\n                side === \"right\" &&\n                  \"right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full\"\n              )}\n              style={\n                {\n                  \"--sidebar-width\": SIDEBAR_WIDTH,\n                  transitionProperty: \"transform, opacity\",\n                  transitionTimingFunction:\n                    \"var(--default-transition-timing-function)\",\n                } as CSSProperties\n              }\n            >\n              <div\n                data-sidebar=\"sidebar\"\n                data-mobile=\"true\"\n                className={cn(\n                  \"flex h-full w-full flex-col bg-sf-base text-sf-default\",\n                  className\n                )}\n              >\n                {children}\n              </div>\n            </DialogBase.Popup>\n          </DialogBase.Portal>\n        </DialogBase.Root>\n      );\n    }\n\n    // Resolve the target width from CSS variables or literal values\n    const collapsedWidth =\n      collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n    const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n    const targetWidth = state === \"expanded\" ? expandedWidth : collapsedWidth;\n\n    return (\n      <aside\n        ref={ref}\n        data-state={state}\n        data-side={side}\n        data-variant={variant}\n        data-collapsible={collapsible}\n        data-sidebar=\"sidebar\"\n        style={{ width: targetWidth }}\n        className={cn(\n          \"group/sidebar relative flex h-full shrink-0 grow-0 flex-col\",\n          // overflow-hidden makes flex min-width resolve to 0 (per spec),\n          // preventing children from pushing the sidebar wider than its width\n          \"min-w-0 overflow-hidden whitespace-nowrap\",\n          \"bg-sf-base text-sf-default\",\n          // Transition width — matches production SidebarNav curve exactly\n          \"transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]\",\n          \"motion-reduce:transition-none\",\n          // Disable transition during resize drag\n          isResizing && \"transition-none!\",\n          variant === \"sidebar\" &&\n            (side === \"left\"\n              ? \"border-r border-sf-line\"\n              : \"border-l border-sf-line\"),\n          variant === \"floating\" &&\n            \"m-2 rounded-lg border border-sf-line shadow-lg\",\n          className\n        )}\n        {...props}\n      >\n        {/* TooltipProvider groups all collapsed-state tooltips so hovering\n            between icons shows tooltips instantly (no repeated delay). */}\n        <TooltipProvider>{children}</TooltipProvider>\n      </aside>\n    );\n  }\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n *   <Logo />\n *   <span>Design Engineering</span>\n *   <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"header\"\n    className={cn(\n      \"flex items-center gap-2 border-b border-sf-line px-2 py-3\",\n      \"overflow-hidden\",\n      // Collapsed: just remove border, keep same height\n      \"group-data-[state=collapsed]/sidebar:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n *   <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"content\"\n    className={cn(\n      \"flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2\",\n      // Collapsed: flatten spacing so icons are evenly spaced\n      \"group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0\",\n      \"group-data-[state=collapsed]/sidebar:overflow-x-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n *   <Sidebar.Trigger />\n *   <Button shape=\"square\" icon={InfoIcon} aria-label=\"Help\" />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"footer\"\n    className={cn(\n      \"flex min-w-0 flex-col gap-2 border-t border-sf-line px-2 py-2\",\n      // Collapsed: remove border, tighten padding\n      \"group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/** Context to signal children they're inside a collapsible group and provide open state. */\ninterface SidebarGroupCollapsibleContextValue {\n  isCollapsible: boolean;\n  isOpen: boolean;\n}\nconst SidebarGroupCollapsibleContext =\n  createContext<SidebarGroupCollapsibleContextValue>({\n    isCollapsible: false,\n    isOpen: true,\n  });\n\nexport interface SidebarGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** When true, the group can be expanded/collapsed via its label. @default false */\n  collapsible?: boolean;\n  /** Initial open state when collapsible and uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state (collapsible mode only). */\n  open?: boolean;\n  /** Callback when open state changes (collapsible mode only). */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Groups related menu items with an optional label.\n * When `collapsible` is set, wraps content with Base UI Collapsible for\n * animated expand/collapse via the group label.\n *\n * @example Non-collapsible group\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n *\n * @example Collapsible group (requires GroupContent for animation)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.GroupContent>\n *     <Sidebar.Menu>...</Sidebar.Menu>\n *   </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n  (\n    {\n      className,\n      collapsible = false,\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Track internal open state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isOpen = openProp ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setInternalOpen(newOpen);\n        onOpenChange?.(newOpen);\n      },\n      [onOpenChange]\n    );\n\n    const contextValue = useMemo(\n      () => ({ isCollapsible: collapsible, isOpen }),\n      [collapsible, isOpen]\n    );\n\n    const content = (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn(\n          \"flex min-w-0 flex-col gap-0.5\",\n          // Collapsed: remove internal gap so icons stack uniformly\n          \"group-data-[state=collapsed]/sidebar:gap-0\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n\n    if (!collapsible) {\n      return (\n        <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n          {content}\n        </SidebarGroupCollapsibleContext.Provider>\n      );\n    }\n\n    return (\n      <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n        <CollapsibleBase.Root\n          defaultOpen={defaultOpen}\n          open={openProp}\n          onOpenChange={handleOpenChange}\n          className=\"min-w-0\"\n        >\n          {content}\n        </CollapsibleBase.Root>\n      </SidebarGroupCollapsibleContext.Provider>\n    );\n  }\n);\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * Hidden when the sidebar is collapsed to icon-only mode.\n *\n * When used inside a collapsible `Sidebar.Group`, renders as a\n * `Collapsible.Trigger` with an auto-rotating chevron.\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { isCollapsible } = useContext(SidebarGroupCollapsibleContext);\n\n  if (isCollapsible) {\n    return (\n      <CollapsibleBase.Trigger\n        ref={ref as React.Ref<HTMLButtonElement>}\n        data-sidebar=\"group-label\"\n        className={cn(\n          \"group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-sf-subtle\",\n          \"group-data-[state=collapsed]/sidebar:hidden\",\n          className\n        )}\n        {...(props as ComponentPropsWithoutRef<\"button\">)}\n      >\n        <span className=\"flex-1 truncate text-left\">{children}</span>\n        <CaretRightIcon\n          className={cn(\n            \"ml-auto size-3 shrink-0 text-sf-subtle transition-transform duration-200\",\n            \"group-data-[panel-open]/group-label:rotate-90\"\n          )}\n        />\n      </CollapsibleBase.Trigger>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"truncate px-3 py-1 text-xs font-medium text-sf-subtle\",\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// Sidebar GroupContent\n// ============================================================================\n\n/**\n * Animation wrapper for collapsible group content. Uses CSS grid-rows\n * for smooth height transitions when the group is expanded/collapsed.\n *\n * **Only needed for collapsible groups.** For non-collapsible groups,\n * place `Menu` directly inside `Group` — no wrapper required.\n *\n * @example Collapsible group (GroupContent required)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.GroupContent>\n *     <Sidebar.Menu>...</Sidebar.Menu>\n *   </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n *\n * @example Non-collapsible group (no GroupContent needed)\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroupContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { isCollapsible, isOpen } = useContext(SidebarGroupCollapsibleContext);\n\n  if (isCollapsible) {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group-content\"\n        className={cn(\n          \"grid\",\n          // Animate height via grid-rows — matches production NavGroup pattern\n          \"transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n          \"motion-reduce:transition-none\",\n          // Default: collapsed\n          \"grid-rows-[0fr]\",\n          // When sidebar is expanded, respect group open/close state\n          isOpen\n            ? \"group-data-[state=expanded]/sidebar:grid-rows-[1fr]\"\n            : \"group-data-[state=expanded]/sidebar:grid-rows-[0fr]\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"overflow-hidden\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nSidebarGroupContent.displayName = \"Sidebar.GroupContent\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuItem>\n *     <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *     <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n *   </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\n      \"m-0 flex min-w-0 list-none flex-col gap-0.5 p-0\",\n      \"group-data-[state=collapsed]/sidebar:gap-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when you need to place siblings (e.g., `MenuAction`) alongside\n * a `MenuButton`.\n *\n * @example Explicit usage (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"children\"\n> {\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  active?: boolean;\n  /**\n   * Button size.\n   * - `\"base\"` — Standard nav item\n   * - `\"sm\"` — Compact nav item\n   * @default \"base\"\n   */\n  size?: SidebarMenuButtonSize;\n  href?: string;\n  tooltip?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).\n *\n * When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron\n * auto-rotates thanks to Base UI's `data-panel-open` attribute combined with\n * `group/menu-button` CSS grouping.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With MenuAction sibling (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      className,\n      icon: IconProp,\n      active = false,\n      size = \"base\",\n      href,\n      tooltip,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { state } = useSidebar();\n    const LinkComponent = useLinkComponent();\n    const isInsideMenuItem = useContext(MenuItemContext);\n\n    // Render icon — supports both component types and React elements\n    const iconNode = (() => {\n      if (!IconProp) return null;\n      if (React.isValidElement(IconProp)) return IconProp;\n      const Comp = IconProp as React.ComponentType<{ className?: string }>;\n      return (\n        <Comp\n          className={cn(\"shrink-0\", size === \"base\" ? \"size-3.5\" : \"size-3\")}\n        />\n      );\n    })();\n\n    const content = (\n      <>\n        {iconNode}\n        <span\n          className={cn(\n            \"flex flex-1 items-center min-w-0 text-left overflow-hidden\",\n            \"group-data-[state=collapsed]/sidebar:hidden\"\n          )}\n        >\n          {children}\n        </span>\n      </>\n    );\n\n    const buttonClasses = cn(\n      // Layout\n      \"group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer\",\n      // Sizing\n      size === \"base\" && \"min-h-[34px] px-3 py-1.5 text-sm font-medium\",\n      size === \"sm\" && \"min-h-[28px] px-2 py-1 text-sm\",\n      // Default state — transition includes padding so collapsed centering animates smoothly\n      \"text-sf-default\",\n      \"transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n      // Icon color\n      \"[&>svg]:text-sf-subtle\",\n      !active && \"hover:bg-sf-tint\",\n      // Active state\n      active && \"bg-sf-tint\",\n      // When a child sub-button is active, don't show active styling on the parent trigger\n      \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-sf-tint\",\n      // Focus\n      \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n      // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;\n      // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.\n      \"group-data-[state=collapsed]/sidebar:px-2\",\n      className\n    );\n\n    let button: React.ReactNode = href ? (\n      <LinkComponent\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={cn(buttonClasses, \"no-underline!\")}\n        href={href}\n        to={href}\n        data-active={active || undefined}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        onClick={\n          props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n        }\n      >\n        {content}\n      </LinkComponent>\n    ) : (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={buttonClasses}\n        data-active={active || undefined}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n\n    // Wrap in Tooltip when collapsed and tooltip text is provided.\n    if (state === \"collapsed\" && tooltip) {\n      button = (\n        <Tooltip content={tooltip} side=\"right\">\n          {button}\n        </Tooltip>\n      );\n    }\n\n    // Auto-wrap in <li> when not already inside a MenuItem\n    if (!isInsideMenuItem) {\n      return (\n        <li data-sidebar=\"menu-item\" className=\"relative\">\n          {button}\n        </li>\n      );\n    }\n\n    return button;\n  }\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuAction\n// ============================================================================\n\n/**\n * Right-aligned action button inside a menu item (e.g., settings gear, plus icon).\n * Positioned absolutely so it overlays the menu button.\n * Hidden when the sidebar is collapsed.\n */\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    data-sidebar=\"menu-action\"\n    className={cn(\n      \"absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1\",\n      \"text-sf-strong hover:bg-sf-overlay\",\n      \"transition-colors duration-150\",\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuAction.displayName = \"Sidebar.MenuAction\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n *   Containers\n *   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n  HTMLSpanElement,\n  ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"inline-flex shrink-0 items-center rounded-full border border-dashed border-sf-line\",\n      \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-sf-strong\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-sf-line p-0 pl-2.5\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuSubItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Marks this sub-item as currently active/selected. @default false */\n  active?: boolean;\n  /** Navigation URL. When set, renders as a link via LinkProvider. */\n  href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n  HTMLButtonElement,\n  SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n  const LinkComponent = useLinkComponent();\n  const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n  const buttonClasses = cn(\n    \"flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none\",\n    \"text-sf-default transition-colors duration-150\",\n    !active && \"hover:bg-sf-tint\",\n    active && \"bg-sf-tint\",\n    \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n    className\n  );\n\n  const content = <span className=\"flex-1 truncate text-left\">{children}</span>;\n\n  const button: React.ReactNode = href ? (\n    <LinkComponent\n      ref={ref as React.Ref<HTMLAnchorElement>}\n      className={cn(buttonClasses, \"no-underline!\")}\n      href={href}\n      to={href}\n      data-active={active || undefined}\n      data-sidebar=\"menu-sub-button\"\n      onClick={\n        props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n      }\n    >\n      {content}\n    </LinkComponent>\n  ) : (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClasses}\n      data-active={active || undefined}\n      data-sidebar=\"menu-sub-button\"\n      {...props}\n    >\n      {content}\n    </button>\n  );\n\n  // Auto-wrap in <li> when not already inside a MenuSubItem\n  if (!isInsideMenuSubItem) {\n    return (\n      <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n        {button}\n      </li>\n    );\n  }\n\n  return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n  HTMLHRElement,\n  ComponentPropsWithoutRef<\"hr\">\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    data-sidebar=\"separator\"\n    className={cn(\"mx-2 min-h-px h-px border-0 bg-sf-line\", className)}\n    {...props}\n  />\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Input\n// ============================================================================\n\nexport interface SidebarInputProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Placeholder text displayed inside the search trigger. @default \"Search...\" */\n  placeholder?: string;\n  /** Keyboard shortcut hint (e.g., \"⌘K\"). */\n  shortcut?: string;\n}\n\n/**\n * Search trigger button styled as an input. Typically opens a command palette.\n *\n * @example\n * ```tsx\n * <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" onClick={openSearch} />\n * ```\n */\nconst SidebarInput = forwardRef<HTMLButtonElement, SidebarInputProps>(\n  (\n    { className, placeholder = \"Search...\", shortcut, children, ...props },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm\",\n        \"bg-sf-base text-sf-subtle ring ring-sf-line\",\n        \"transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n        \"hover:bg-sf-overlay\",\n        // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition\n        \"group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0\",\n        className\n      )}\n      {...props}\n    >\n      <MagnifyingGlassIcon className=\"size-4 shrink-0 text-sf-subtle\" />\n      <span className=\"flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden\">\n        {children ?? placeholder}\n      </span>\n      {shortcut && (\n        <kbd className=\"ml-auto font-sans text-xs text-sf-subtle group-data-[state=collapsed]/sidebar:hidden\">\n          {shortcut}\n        </kbd>\n      )}\n    </button>\n  )\n);\n\nSidebarInput.displayName = \"Sidebar.Input\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to a `SidebarSimpleIcon`, left-aligned.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * <Sidebar.Trigger><PanelLeftIcon className=\"size-5\" /></Sidebar.Trigger>\n * ```\n */\nconst SidebarTrigger = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"trigger\"\n      aria-label=\"Toggle sidebar\"\n      className={cn(\n        \"flex items-center rounded-md p-1.5\",\n        \"text-sf-subtle hover:text-sf-strong hover:bg-sf-overlay\",\n        \"transition-colors duration-150\",\n        className\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      {children ?? <SidebarSimpleIcon className=\"size-5\" />}\n    </button>\n  );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle sidebar\"\n      tabIndex={-1}\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n        \"hover:after:bg-sf-brand/20\",\n        \"group-data-[side=left]/sidebar-wrapper:right-0\",\n        \"group-data-[side=right]/sidebar-wrapper:left-0\",\n        \"sm:flex\",\n        className\n      )}\n      onClick={toggleSidebar}\n      {...props}\n    />\n  );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n *   tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  const { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth } =\n    useSidebar();\n  const startX = useRef(0);\n  const startWidth = useRef(0);\n  const wasCollapsed = useRef(false);\n\n  if (!resizable) return null;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsResizing(true);\n    startX.current = e.clientX;\n    wasCollapsed.current = !open;\n\n    const wrapper = (e.currentTarget as HTMLElement).closest(\n      \"[data-sidebar-wrapper]\"\n    );\n    const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n    startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n    const cleanup = () => {\n      setIsResizing(false);\n      document.removeEventListener(\"pointermove\", handlePointerMove);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n\n    const handlePointerMove = (moveEvent: PointerEvent) => {\n      const delta =\n        side === \"left\"\n          ? moveEvent.clientX - startX.current\n          : startX.current - moveEvent.clientX;\n      const rawWidth = startWidth.current + delta;\n\n      if (wasCollapsed.current) {\n        // Dragging outward from collapsed — expand once past minWidth\n        if (rawWidth >= minWidth) {\n          wasCollapsed.current = false;\n          setOpen(true);\n          setWidth(rawWidth);\n        }\n        return;\n      }\n\n      // Dragging inward while expanded — collapse when below minWidth\n      if (rawWidth < minWidth) {\n        setOpen(false);\n        wasCollapsed.current = true;\n        return;\n      }\n\n      setWidth(rawWidth);\n    };\n\n    const handlePointerUp = () => {\n      cleanup();\n    };\n\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"resize-handle\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block\",\n        \"hover:bg-sf-brand/30 active:bg-sf-brand/50\",\n        side === \"left\" && \"right-0\",\n        side === \"right\" && \"left-0\",\n        className\n      )}\n      onPointerDown={handlePointerDown}\n      {...props}\n    />\n  );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. When the parent\n * `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets\n * `data-panel-open` on the trigger — the chevron rotates automatically via CSS.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>\n *   Compute\n *   <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n  return (\n    <CaretRightIcon\n      className={cn(\n        \"ml-auto size-4 shrink-0 text-sf-subtle transition-transform duration-200\",\n        // Auto-rotate when inside an open Collapsible trigger\n        \"group-data-[panel-open]/menu-button:rotate-90\",\n        // Hidden when collapsed\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className\n      )}\n    />\n  );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// Collapsible re-exports\n// ============================================================================\n\n/**\n * Base UI Collapsible.Root for sidebar sub-menu expand/collapse.\n * @see https://base-ui.com/react/components/collapsible\n */\nconst SidebarCollapsible = CollapsibleBase.Root;\n\n/**\n * Base UI Collapsible.Trigger for sidebar sub-menu toggle.\n * Use `render` prop to compose with `Sidebar.MenuButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>\n *   Compute\n *   <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nconst SidebarCollapsibleTrigger = CollapsibleBase.Trigger;\n\n/**\n * Animated collapsible panel for sidebar sub-menu content.\n * Wraps Base UI `Collapsible.Panel` with a height transition driven by the\n * `--collapsible-panel-height` CSS variable that Base UI measures automatically.\n *\n * Uses `keepMounted` by default so the exit animation plays before removal.\n *\n * Animation flow:\n * - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up\n * - **Closing**: `data-open` removed + `data-ending-style` (h=0) — transition down\n * - **Closed**: `data-closed` (h=0) — stays collapsed while mounted\n */\nconst SidebarCollapsibleContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>\n>(({ className, keepMounted = true, ...props }, ref) => (\n  <CollapsibleBase.Panel\n    ref={ref}\n    keepMounted={keepMounted}\n    className={cn(\n      \"overflow-hidden\",\n      // Default: show at measured height (when data-open, no override matches)\n      \"h-[var(--collapsible-panel-height)]\",\n      // Transition height — matches production NavGroup easing\n      \"transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n      \"motion-reduce:transition-none\",\n      // Closed / animating in / animating out: height 0\n      \"data-[closed]:h-0 data-[starting-style]:h-0 data-[ending-style]:h-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>\n *     <Sidebar.Content>\n *       <Sidebar.Group>\n *         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *         <Sidebar.Menu>\n *           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n *           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n *         </Sidebar.Menu>\n *       </Sidebar.Group>\n *     </Sidebar.Content>\n *     <Sidebar.Footer>\n *       <Sidebar.Trigger />\n *     </Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Provider: SidebarProvider,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Group: SidebarGroup,\n  GroupLabel: SidebarGroupLabel,\n  GroupContent: SidebarGroupContent,\n  Menu: SidebarMenu,\n  MenuItem: SidebarMenuItem,\n  MenuButton: SidebarMenuButton,\n  MenuAction: SidebarMenuAction,\n  MenuBadge: SidebarMenuBadge,\n  MenuSub: SidebarMenuSub,\n  MenuSubItem: SidebarMenuSubItem,\n  MenuSubButton: SidebarMenuSubButton,\n  Separator: SidebarSeparator,\n  Input: SidebarInput,\n  Trigger: SidebarTrigger,\n  Rail: SidebarRail,\n  ResizeHandle: SidebarResizeHandle,\n  MenuChevron: SidebarMenuChevron,\n  Collapsible: SidebarCollapsible,\n  CollapsibleTrigger: SidebarCollapsibleTrigger,\n  CollapsibleContent: SidebarCollapsibleContent,\n});\n\nexport {\n  SidebarProvider,\n  SidebarRoot,\n  SidebarHeader,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuSubButton,\n  SidebarSeparator,\n  SidebarInput,\n  SidebarTrigger,\n  SidebarRail,\n  SidebarResizeHandle,\n  SidebarMenuChevron,\n  SidebarCollapsible,\n  SidebarCollapsibleTrigger,\n  SidebarCollapsibleContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar-D4zrlYpn.js","names":[],"sources":["../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n  CaretRightIcon,\n  MagnifyingGlassIcon,\n  SidebarSimpleIcon,\n} from \"@phosphor-icons/react\";\nimport React, {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by SignalFlare convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const SF_SIDEBAR_VARIANTS = {\n  variant: {\n    sidebar: {\n      classes: \"\",\n      description: \"Standard sidebar with border separator\",\n    },\n    floating: {\n      classes: \"\",\n      description: \"Floating sidebar with shadow and rounded corners\",\n    },\n    inset: {\n      classes: \"\",\n      description: \"Inset sidebar within the content area\",\n    },\n  },\n  collapsible: {\n    icon: {\n      classes: \"\",\n      description: \"Collapses to show icons only\",\n    },\n    offcanvas: {\n      classes: \"\",\n      description: \"Slides off screen when collapsed\",\n    },\n    none: {\n      classes: \"\",\n      description: \"Cannot be collapsed\",\n    },\n  },\n  side: {\n    left: {\n      classes: \"\",\n      description: \"Left-aligned sidebar\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Right-aligned sidebar\",\n    },\n  },\n} as const;\n\nexport const SF_SIDEBAR_DEFAULT_VARIANTS = {\n  variant: \"sidebar\",\n  collapsible: \"icon\",\n  side: \"left\",\n} as const;\n\nexport const SF_SIDEBAR_STYLING = {\n  width: {\n    expanded: \"16rem\",\n    icon: \"3rem\",\n  },\n  mobile: {\n    breakpoint: 768,\n  },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst MOBILE_BREAKPOINT = 768;\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => setIsMobile(mql.matches);\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(mql.matches);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport interface SidebarContextValue {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n  variant: \"sidebar\" | \"floating\" | \"inset\";\n  side: \"left\" | \"right\";\n  collapsible: \"icon\" | \"offcanvas\" | \"none\";\n  width: number;\n  resizable: boolean;\n  minWidth: number;\n  maxWidth: number;\n  isResizing: boolean;\n  setIsResizing: (resizing: boolean) => void;\n  setWidth: (width: number) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n  const context = useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n  }\n  return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n  /** Initial open state when uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Callback when open state changes (controlled mode). */\n  onOpenChange?: (open: boolean) => void;\n  /** Sidebar layout variant. @default \"sidebar\" */\n  variant?: SidebarVariant;\n  /** Which side the sidebar is on. @default \"left\" */\n  side?: SidebarSide;\n  collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n  /** Enable drag-to-resize on the sidebar edge. @default false */\n  resizable?: boolean;\n  /** Initial width in pixels when resizable. @default 256 */\n  defaultWidth?: number;\n  /** Minimum width in pixels when resizing. @default 200 */\n  minWidth?: number;\n  /** Maximum width in pixels when resizing. @default 480 */\n  maxWidth?: number;\n  /** Callback when width changes during resize. */\n  onWidthChange?: (width: number) => void;\n  /** Content — typically `<Sidebar>` + main content. */\n  children: ReactNode;\n  /** Additional CSS classes for the wrapper div. */\n  className?: string;\n  /** Inline styles for the wrapper div. */\n  style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>{...}</Sidebar>\n *   <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  variant = SF_SIDEBAR_DEFAULT_VARIANTS.variant,\n  side = SF_SIDEBAR_DEFAULT_VARIANTS.side,\n  collapsible = SF_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n  resizable = false,\n  defaultWidth = DEFAULT_WIDTH_PX,\n  minWidth = MIN_WIDTH_PX,\n  maxWidth = MAX_WIDTH_PX,\n  onWidthChange,\n  children,\n  className,\n  style,\n}: SidebarProviderProps) {\n  const isMobile = useIsMobile();\n  const [openMobile, setOpenMobile] = useState(false);\n  const [width, setWidthState] = useState(defaultWidth);\n  const [isResizing, setIsResizing] = useState(false);\n\n  const setWidth = useCallback(\n    (newWidth: number) => {\n      const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n      setWidthState(clamped);\n      onWidthChange?.(clamped);\n    },\n    [minWidth, maxWidth, onWidthChange]\n  );\n\n  const [_open, _setOpen] = useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = useCallback(\n    (value: boolean | ((prev: boolean) => boolean)) => {\n      const next = typeof value === \"function\" ? value(open) : value;\n      setOpenProp?.(next);\n      _setOpen(next);\n    },\n    [setOpenProp, open]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) {\n      setOpenMobile((prev) => !prev);\n    } else {\n      setOpen((prev: boolean) => !prev);\n    }\n  }, [isMobile, setOpen]);\n\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n  const contextValue = useMemo<SidebarContextValue>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n    }),\n    [\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      toggleSidebar,\n      variant,\n      side,\n      collapsible,\n      width,\n      resizable,\n      minWidth,\n      maxWidth,\n      isResizing,\n      setIsResizing,\n      setWidth,\n    ]\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-sidebar-wrapper=\"\"\n        data-state={state}\n        data-side={side}\n        style={\n          {\n            \"--sidebar-width\": sidebarWidthValue,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full\",\n          \"has-data-[variant=inset]:bg-sf-recessed\",\n          isResizing && \"select-none\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /** Additional CSS classes for the sidebar element. */\n  className?: string;\n  /** Sidebar content — Header, Content, Footer, etc. */\n  children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n *   <Sidebar>\n *     <Sidebar.Header>...</Sidebar.Header>\n *     <Sidebar.Content>...</Sidebar.Content>\n *     <Sidebar.Footer>...</Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    const {\n      state,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      side,\n      variant,\n      collapsible,\n      isResizing,\n      resizable,\n      width,\n    } = useSidebar();\n\n    if (collapsible === \"none\") {\n      return (\n        <aside\n          ref={ref}\n          data-state=\"expanded\"\n          data-side={side}\n          data-variant={variant}\n          data-sidebar=\"sidebar\"\n          style={{\n            width: \"var(--sidebar-width)\",\n            minWidth: \"var(--sidebar-width)\",\n            maxWidth: \"var(--sidebar-width)\",\n          }}\n          className={cn(\n            \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-sf-base text-sf-default\",\n            variant === \"sidebar\" &&\n              (side === \"left\"\n                ? \"border-r border-sf-line\"\n                : \"border-l border-sf-line\"),\n            variant === \"floating\" &&\n              \"m-2 rounded-lg border border-sf-line shadow-lg\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </aside>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <DialogBase.Root open={openMobile} onOpenChange={setOpenMobile}>\n          <DialogBase.Portal>\n            <DialogBase.Backdrop className=\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\" />\n            <DialogBase.Popup\n              className={cn(\n                \"fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-sf-base p-0\",\n                \"duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n                side === \"left\" &&\n                  \"left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full\",\n                side === \"right\" &&\n                  \"right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full\"\n              )}\n              style={\n                {\n                  \"--sidebar-width\": SIDEBAR_WIDTH,\n                  transitionProperty: \"transform, opacity\",\n                  transitionTimingFunction:\n                    \"var(--default-transition-timing-function)\",\n                } as CSSProperties\n              }\n            >\n              <div\n                data-sidebar=\"sidebar\"\n                data-mobile=\"true\"\n                className={cn(\n                  \"flex h-full w-full flex-col bg-sf-base text-sf-default\",\n                  className\n                )}\n              >\n                {children}\n              </div>\n            </DialogBase.Popup>\n          </DialogBase.Portal>\n        </DialogBase.Root>\n      );\n    }\n\n    // Resolve the target width from CSS variables or literal values\n    const collapsedWidth =\n      collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n    const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n    const targetWidth = state === \"expanded\" ? expandedWidth : collapsedWidth;\n\n    return (\n      <aside\n        ref={ref}\n        data-state={state}\n        data-side={side}\n        data-variant={variant}\n        data-collapsible={collapsible}\n        data-sidebar=\"sidebar\"\n        style={{ width: targetWidth }}\n        className={cn(\n          \"group/sidebar relative flex h-full shrink-0 grow-0 flex-col\",\n          // overflow-hidden makes flex min-width resolve to 0 (per spec),\n          // preventing children from pushing the sidebar wider than its width\n          \"min-w-0 overflow-hidden whitespace-nowrap\",\n          \"bg-sf-base text-sf-default\",\n          // Transition width — matches production SidebarNav curve exactly\n          \"transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]\",\n          \"motion-reduce:transition-none\",\n          // Disable transition during resize drag\n          isResizing && \"transition-none!\",\n          variant === \"sidebar\" &&\n            (side === \"left\"\n              ? \"border-r border-sf-line\"\n              : \"border-l border-sf-line\"),\n          variant === \"floating\" &&\n            \"m-2 rounded-lg border border-sf-line shadow-lg\",\n          className\n        )}\n        {...props}\n      >\n        {/* TooltipProvider groups all collapsed-state tooltips so hovering\n            between icons shows tooltips instantly (no repeated delay). */}\n        <TooltipProvider>{children}</TooltipProvider>\n      </aside>\n    );\n  }\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n *   <Logo />\n *   <span>Design Engineering</span>\n *   <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"header\"\n    className={cn(\n      \"flex items-center gap-2 border-b border-sf-line px-2 py-3\",\n      \"overflow-hidden\",\n      // Collapsed: just remove border, keep same height\n      \"group-data-[state=collapsed]/sidebar:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n *   <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"content\"\n    className={cn(\n      \"flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2\",\n      // Collapsed: flatten spacing so icons are evenly spaced\n      \"group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0\",\n      \"group-data-[state=collapsed]/sidebar:overflow-x-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n *   <Sidebar.Trigger />\n *   <Button shape=\"square\" icon={InfoIcon} aria-label=\"Help\" />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"footer\"\n    className={cn(\n      \"flex min-w-0 flex-col gap-2 border-t border-sf-line px-2 py-2\",\n      // Collapsed: remove border, tighten padding\n      \"group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/** Context to signal children they're inside a collapsible group and provide open state. */\ninterface SidebarGroupCollapsibleContextValue {\n  isCollapsible: boolean;\n  isOpen: boolean;\n}\nconst SidebarGroupCollapsibleContext =\n  createContext<SidebarGroupCollapsibleContextValue>({\n    isCollapsible: false,\n    isOpen: true,\n  });\n\nexport interface SidebarGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** When true, the group can be expanded/collapsed via its label. @default false */\n  collapsible?: boolean;\n  /** Initial open state when collapsible and uncontrolled. @default true */\n  defaultOpen?: boolean;\n  /** Controlled open state (collapsible mode only). */\n  open?: boolean;\n  /** Callback when open state changes (collapsible mode only). */\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Groups related menu items with an optional label.\n * When `collapsible` is set, wraps content with Base UI Collapsible for\n * animated expand/collapse via the group label.\n *\n * @example Non-collapsible group\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n *\n * @example Collapsible group (requires GroupContent for animation)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.GroupContent>\n *     <Sidebar.Menu>...</Sidebar.Menu>\n *   </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n  (\n    {\n      className,\n      collapsible = false,\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Track internal open state for uncontrolled mode\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isOpen = openProp ?? internalOpen;\n\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setInternalOpen(newOpen);\n        onOpenChange?.(newOpen);\n      },\n      [onOpenChange]\n    );\n\n    const contextValue = useMemo(\n      () => ({ isCollapsible: collapsible, isOpen }),\n      [collapsible, isOpen]\n    );\n\n    const content = (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn(\n          \"flex min-w-0 flex-col gap-0.5\",\n          // Collapsed: remove internal gap so icons stack uniformly\n          \"group-data-[state=collapsed]/sidebar:gap-0\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n\n    if (!collapsible) {\n      return (\n        <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n          {content}\n        </SidebarGroupCollapsibleContext.Provider>\n      );\n    }\n\n    return (\n      <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n        <CollapsibleBase.Root\n          defaultOpen={defaultOpen}\n          open={openProp}\n          onOpenChange={handleOpenChange}\n          className=\"min-w-0\"\n        >\n          {content}\n        </CollapsibleBase.Root>\n      </SidebarGroupCollapsibleContext.Provider>\n    );\n  }\n);\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * Hidden when the sidebar is collapsed to icon-only mode.\n *\n * When used inside a collapsible `Sidebar.Group`, renders as a\n * `Collapsible.Trigger` with an auto-rotating chevron.\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { isCollapsible } = useContext(SidebarGroupCollapsibleContext);\n\n  if (isCollapsible) {\n    return (\n      <CollapsibleBase.Trigger\n        ref={ref as React.Ref<HTMLButtonElement>}\n        data-sidebar=\"group-label\"\n        className={cn(\n          \"group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-sf-subtle\",\n          \"group-data-[state=collapsed]/sidebar:hidden\",\n          className\n        )}\n        {...(props as ComponentPropsWithoutRef<\"button\">)}\n      >\n        <span className=\"flex-1 truncate text-left\">{children}</span>\n        <CaretRightIcon\n          className={cn(\n            \"ml-auto size-3 shrink-0 text-sf-subtle transition-transform duration-200\",\n            \"group-data-[panel-open]/group-label:rotate-90\"\n          )}\n        />\n      </CollapsibleBase.Trigger>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"truncate px-3 py-1 text-xs font-medium text-sf-subtle\",\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// Sidebar GroupContent\n// ============================================================================\n\n/**\n * Animation wrapper for collapsible group content. Uses CSS grid-rows\n * for smooth height transitions when the group is expanded/collapsed.\n *\n * **Only needed for collapsible groups.** For non-collapsible groups,\n * place `Menu` directly inside `Group` — no wrapper required.\n *\n * @example Collapsible group (GroupContent required)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n *   <Sidebar.GroupContent>\n *     <Sidebar.Menu>...</Sidebar.Menu>\n *   </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n *\n * @example Non-collapsible group (no GroupContent needed)\n * ```tsx\n * <Sidebar.Group>\n *   <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *   <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroupContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n  const { isCollapsible, isOpen } = useContext(SidebarGroupCollapsibleContext);\n\n  if (isCollapsible) {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group-content\"\n        className={cn(\n          \"grid\",\n          // Animate height via grid-rows — matches production NavGroup pattern\n          \"transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n          \"motion-reduce:transition-none\",\n          // Default: collapsed\n          \"grid-rows-[0fr]\",\n          // When sidebar is expanded, respect group open/close state\n          isOpen\n            ? \"group-data-[state=expanded]/sidebar:grid-rows-[1fr]\"\n            : \"group-data-[state=expanded]/sidebar:grid-rows-[0fr]\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"overflow-hidden\">{children}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nSidebarGroupContent.displayName = \"Sidebar.GroupContent\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuItem>\n *     <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *     <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n *   </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\n      \"m-0 flex min-w-0 list-none flex-col gap-0.5 p-0\",\n      \"group-data-[state=collapsed]/sidebar:gap-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when you need to place siblings (e.g., `MenuAction`) alongside\n * a `MenuButton`.\n *\n * @example Explicit usage (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"className\" | \"children\"\n> {\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  active?: boolean;\n  /**\n   * Button size.\n   * - `\"base\"` — Standard nav item\n   * - `\"sm\"` — Compact nav item\n   * @default \"base\"\n   */\n  size?: SidebarMenuButtonSize;\n  href?: string;\n  tooltip?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).\n *\n * When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron\n * auto-rotates thanks to Base UI's `data-panel-open` attribute combined with\n * `group/menu-button` CSS grouping.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n *   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n *   <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With MenuAction sibling (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n  (\n    {\n      className,\n      icon: IconProp,\n      active = false,\n      size = \"base\",\n      href,\n      tooltip,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { state } = useSidebar();\n    const LinkComponent = useLinkComponent();\n    const isInsideMenuItem = useContext(MenuItemContext);\n\n    // Render icon — supports both component types and React elements\n    const iconNode = (() => {\n      if (!IconProp) return null;\n      if (React.isValidElement(IconProp)) return IconProp;\n      const Comp = IconProp as React.ComponentType<{ className?: string }>;\n      return (\n        <Comp\n          className={cn(\"shrink-0\", size === \"base\" ? \"size-3.5\" : \"size-3\")}\n        />\n      );\n    })();\n\n    const content = (\n      <>\n        {iconNode}\n        <span\n          className={cn(\n            \"flex flex-1 items-center min-w-0 text-left overflow-hidden\",\n            \"group-data-[state=collapsed]/sidebar:hidden\"\n          )}\n        >\n          {children}\n        </span>\n      </>\n    );\n\n    const buttonClasses = cn(\n      // Layout\n      \"group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg outline-none cursor-pointer\",\n      // Sizing\n      size === \"base\" && \"min-h-[34px] px-3 py-1.5 text-sm font-medium\",\n      size === \"sm\" && \"min-h-[28px] px-2 py-1 text-sm\",\n      // Default state — transition includes padding so collapsed centering animates smoothly\n      \"text-sf-default\",\n      \"transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n      // Icon color\n      \"[&>svg]:text-sf-subtle\",\n      !active && \"hover:bg-sf-tint\",\n      // Active state\n      active && \"bg-sf-tint\",\n      // When a child sub-button is active, don't show active styling on the parent trigger\n      \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-sf-tint\",\n      // Focus\n      \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n      // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;\n      // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.\n      \"group-data-[state=collapsed]/sidebar:px-2\",\n      className\n    );\n\n    let button: React.ReactNode = href ? (\n      <LinkComponent\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        className={cn(buttonClasses, \"no-underline!\")}\n        href={href}\n        to={href}\n        data-active={active || undefined}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        onClick={\n          props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n        }\n      >\n        {content}\n      </LinkComponent>\n    ) : (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={buttonClasses}\n        data-active={active || undefined}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n\n    // Wrap in Tooltip when collapsed and tooltip text is provided.\n    if (state === \"collapsed\" && tooltip) {\n      button = (\n        <Tooltip content={tooltip} side=\"right\">\n          {button}\n        </Tooltip>\n      );\n    }\n\n    // Auto-wrap in <li> when not already inside a MenuItem\n    if (!isInsideMenuItem) {\n      return (\n        <li data-sidebar=\"menu-item\" className=\"relative\">\n          {button}\n        </li>\n      );\n    }\n\n    return button;\n  }\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuAction\n// ============================================================================\n\n/**\n * Right-aligned action button inside a menu item (e.g., settings gear, plus icon).\n * Positioned absolutely so it overlays the menu button.\n * Hidden when the sidebar is collapsed.\n */\nconst SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    data-sidebar=\"menu-action\"\n    className={cn(\n      \"absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1\",\n      \"text-sf-strong hover:bg-sf-overlay\",\n      \"transition-colors duration-150\",\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuAction.displayName = \"Sidebar.MenuAction\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n *   Containers\n *   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n  HTMLSpanElement,\n  ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"inline-flex shrink-0 items-center rounded-full border border-dashed border-sf-line\",\n      \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-sf-strong\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n  HTMLUListElement,\n  ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-sf-line p-0 pl-2.5\",\n      // Hidden when collapsed\n      \"group-data-[state=collapsed]/sidebar:hidden\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n  HTMLLIElement,\n  ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n  <MenuSubItemContext.Provider value={true}>\n    <li\n      ref={ref}\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {children}\n    </li>\n  </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Marks this sub-item as currently active/selected. @default false */\n  active?: boolean;\n  /** Navigation URL. When set, renders as a link via LinkProvider. */\n  href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n *   <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n  HTMLButtonElement,\n  SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n  const LinkComponent = useLinkComponent();\n  const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n  const buttonClasses = cn(\n    \"flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium outline-none\",\n    \"text-sf-default transition-colors duration-150\",\n    !active && \"hover:bg-sf-tint\",\n    active && \"bg-sf-tint\",\n    \"focus-visible:ring-1 focus-visible:ring-sf-ring\",\n    className\n  );\n\n  const content = <span className=\"flex-1 truncate text-left\">{children}</span>;\n\n  const button: React.ReactNode = href ? (\n    <LinkComponent\n      ref={ref as React.Ref<HTMLAnchorElement>}\n      className={cn(buttonClasses, \"no-underline!\")}\n      href={href}\n      to={href}\n      data-active={active || undefined}\n      data-sidebar=\"menu-sub-button\"\n      onClick={\n        props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n      }\n    >\n      {content}\n    </LinkComponent>\n  ) : (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClasses}\n      data-active={active || undefined}\n      data-sidebar=\"menu-sub-button\"\n      {...props}\n    >\n      {content}\n    </button>\n  );\n\n  // Auto-wrap in <li> when not already inside a MenuSubItem\n  if (!isInsideMenuSubItem) {\n    return (\n      <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n        {button}\n      </li>\n    );\n  }\n\n  return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n  HTMLHRElement,\n  ComponentPropsWithoutRef<\"hr\">\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    data-sidebar=\"separator\"\n    className={cn(\"mx-2 min-h-px h-px border-0 bg-sf-line\", className)}\n    {...props}\n  />\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Input\n// ============================================================================\n\nexport interface SidebarInputProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Placeholder text displayed inside the search trigger. @default \"Search...\" */\n  placeholder?: string;\n  /** Keyboard shortcut hint (e.g., \"⌘K\"). */\n  shortcut?: string;\n}\n\n/**\n * Search trigger button styled as an input. Typically opens a command palette.\n *\n * @example\n * ```tsx\n * <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" onClick={openSearch} />\n * ```\n */\nconst SidebarInput = forwardRef<HTMLButtonElement, SidebarInputProps>(\n  (\n    { className, placeholder = \"Search...\", shortcut, children, ...props },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm\",\n        \"bg-sf-base text-sf-subtle ring ring-sf-line\",\n        \"transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n        \"hover:bg-sf-overlay\",\n        // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition\n        \"group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0\",\n        className\n      )}\n      {...props}\n    >\n      <MagnifyingGlassIcon className=\"size-4 shrink-0 text-sf-subtle\" />\n      <span className=\"flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden\">\n        {children ?? placeholder}\n      </span>\n      {shortcut && (\n        <kbd className=\"ml-auto font-sans text-xs text-sf-subtle group-data-[state=collapsed]/sidebar:hidden\">\n          {shortcut}\n        </kbd>\n      )}\n    </button>\n  )\n);\n\nSidebarInput.displayName = \"Sidebar.Input\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to a `SidebarSimpleIcon`, left-aligned.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * <Sidebar.Trigger><PanelLeftIcon className=\"size-5\" /></Sidebar.Trigger>\n * ```\n */\nconst SidebarTrigger = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"trigger\"\n      aria-label=\"Toggle sidebar\"\n      className={cn(\n        \"flex items-center rounded-md p-1.5\",\n        \"text-sf-subtle hover:text-sf-strong hover:bg-sf-overlay\",\n        \"transition-colors duration-150\",\n        className\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      {children ?? <SidebarSimpleIcon className=\"size-5\" />}\n    </button>\n  );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle sidebar\"\n      tabIndex={-1}\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n        \"hover:after:bg-sf-brand/20\",\n        \"group-data-[side=left]/sidebar-wrapper:right-0\",\n        \"group-data-[side=right]/sidebar-wrapper:left-0\",\n        \"sm:flex\",\n        className\n      )}\n      onClick={toggleSidebar}\n      {...props}\n    />\n  );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n *   tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n  const { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth } =\n    useSidebar();\n  const startX = useRef(0);\n  const startWidth = useRef(0);\n  const wasCollapsed = useRef(false);\n\n  if (!resizable) return null;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setIsResizing(true);\n    startX.current = e.clientX;\n    wasCollapsed.current = !open;\n\n    const wrapper = (e.currentTarget as HTMLElement).closest(\n      \"[data-sidebar-wrapper]\"\n    );\n    const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n    startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n    const cleanup = () => {\n      setIsResizing(false);\n      document.removeEventListener(\"pointermove\", handlePointerMove);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n\n    const handlePointerMove = (moveEvent: PointerEvent) => {\n      const delta =\n        side === \"left\"\n          ? moveEvent.clientX - startX.current\n          : startX.current - moveEvent.clientX;\n      const rawWidth = startWidth.current + delta;\n\n      if (wasCollapsed.current) {\n        // Dragging outward from collapsed — expand once past minWidth\n        if (rawWidth >= minWidth) {\n          wasCollapsed.current = false;\n          setOpen(true);\n          setWidth(rawWidth);\n        }\n        return;\n      }\n\n      // Dragging inward while expanded — collapse when below minWidth\n      if (rawWidth < minWidth) {\n        setOpen(false);\n        wasCollapsed.current = true;\n        return;\n      }\n\n      setWidth(rawWidth);\n    };\n\n    const handlePointerUp = () => {\n      cleanup();\n    };\n\n    document.addEventListener(\"pointermove\", handlePointerMove);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"resize-handle\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block\",\n        \"hover:bg-sf-brand/30 active:bg-sf-brand/50\",\n        side === \"left\" && \"right-0\",\n        side === \"right\" && \"left-0\",\n        className\n      )}\n      onPointerDown={handlePointerDown}\n      {...props}\n    />\n  );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. When the parent\n * `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets\n * `data-panel-open` on the trigger — the chevron rotates automatically via CSS.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>\n *   Compute\n *   <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n  return (\n    <CaretRightIcon\n      className={cn(\n        \"ml-auto size-4 shrink-0 text-sf-subtle transition-transform duration-200\",\n        // Auto-rotate when inside an open Collapsible trigger\n        \"group-data-[panel-open]/menu-button:rotate-90\",\n        // Hidden when collapsed\n        \"group-data-[state=collapsed]/sidebar:hidden\",\n        className\n      )}\n    />\n  );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// Collapsible re-exports\n// ============================================================================\n\n/**\n * Base UI Collapsible.Root for sidebar sub-menu expand/collapse.\n * @see https://base-ui.com/react/components/collapsible\n */\nconst SidebarCollapsible = CollapsibleBase.Root;\n\n/**\n * Base UI Collapsible.Trigger for sidebar sub-menu toggle.\n * Use `render` prop to compose with `Sidebar.MenuButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>\n *   Compute\n *   <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nconst SidebarCollapsibleTrigger = CollapsibleBase.Trigger;\n\n/**\n * Animated collapsible panel for sidebar sub-menu content.\n * Wraps Base UI `Collapsible.Panel` with a height transition driven by the\n * `--collapsible-panel-height` CSS variable that Base UI measures automatically.\n *\n * Uses `keepMounted` by default so the exit animation plays before removal.\n *\n * Animation flow:\n * - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up\n * - **Closing**: `data-open` removed + `data-ending-style` (h=0) — transition down\n * - **Closed**: `data-closed` (h=0) — stays collapsed while mounted\n */\nconst SidebarCollapsibleContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>\n>(({ className, keepMounted = true, ...props }, ref) => (\n  <CollapsibleBase.Panel\n    ref={ref}\n    keepMounted={keepMounted}\n    className={cn(\n      \"overflow-hidden\",\n      // Default: show at measured height (when data-open, no override matches)\n      \"h-[var(--collapsible-panel-height)]\",\n      // Transition height — matches production NavGroup easing\n      \"transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n      \"motion-reduce:transition-none\",\n      // Closed / animating in / animating out: height 0\n      \"data-[closed]:h-0 data-[starting-style]:h-0 data-[ending-style]:h-0\",\n      className\n    )}\n    {...props}\n  />\n));\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n *   <Sidebar>\n *     <Sidebar.Content>\n *       <Sidebar.Group>\n *         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n *         <Sidebar.Menu>\n *           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n *           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n *         </Sidebar.Menu>\n *       </Sidebar.Group>\n *     </Sidebar.Content>\n *     <Sidebar.Footer>\n *       <Sidebar.Trigger />\n *     </Sidebar.Footer>\n *   </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n  Provider: SidebarProvider,\n  Header: SidebarHeader,\n  Content: SidebarContent,\n  Footer: SidebarFooter,\n  Group: SidebarGroup,\n  GroupLabel: SidebarGroupLabel,\n  GroupContent: SidebarGroupContent,\n  Menu: SidebarMenu,\n  MenuItem: SidebarMenuItem,\n  MenuButton: SidebarMenuButton,\n  MenuAction: SidebarMenuAction,\n  MenuBadge: SidebarMenuBadge,\n  MenuSub: SidebarMenuSub,\n  MenuSubItem: SidebarMenuSubItem,\n  MenuSubButton: SidebarMenuSubButton,\n  Separator: SidebarSeparator,\n  Input: SidebarInput,\n  Trigger: SidebarTrigger,\n  Rail: SidebarRail,\n  ResizeHandle: SidebarResizeHandle,\n  MenuChevron: SidebarMenuChevron,\n  Collapsible: SidebarCollapsible,\n  CollapsibleTrigger: SidebarCollapsibleTrigger,\n  CollapsibleContent: SidebarCollapsibleContent,\n});\n\nexport {\n  SidebarProvider,\n  SidebarRoot,\n  SidebarHeader,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuItem,\n  SidebarMenuButton,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuSub,\n  SidebarMenuSubItem,\n  SidebarMenuSubButton,\n  SidebarSeparator,\n  SidebarInput,\n  SidebarTrigger,\n  SidebarRail,\n  SidebarResizeHandle,\n  SidebarMenuChevron,\n  SidebarCollapsible,\n  SidebarCollapsibleTrigger,\n  SidebarCollapsibleContent,\n};\n"],"mappings":"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"}

package/dist/{signalflare-ai-logo-DDhxMJD6.js → signalflare-ai-logo-Bipogceq.js}

@@ -257,4 +257,4 @@ var SignalflareAiLogo = SignalFlareAILogo;
 //#endregion
 export { SignalFlareAILogo as a, SF_SIGNALFLARE_AI_LOGO_VARIANTS as i, PoweredBySignalFlareAI as n, SignalflareAiLogo as o, SF_SIGNALFLARE_AI_LOGO_DEFAULT_VARIANTS as r, generateSignalFlareAILogoSvg as s, PoweredByNavigator as t };
 
-//# sourceMappingURL=signalflare-ai-logo-DDhxMJD6.js.map
+//# sourceMappingURL=signalflare-ai-logo-Bipogceq.js.map