@signalflare-ai/ui 0.5.0

package/dist/switch-CzZBRBL7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-CzZBRBL7.js","names":[],"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field } from \"../field/field\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_SWITCH_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"h-5.5 w-8.5\",\n      description: \"Small switch for compact UIs\",\n    },\n    base: {\n      classes: \"h-6.5 w-10.5\",\n      description: \"Default switch size\",\n    },\n    lg: {\n      classes: \"h-7.5 w-12.5\",\n      description: \"Large switch for prominent toggles\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default switch appearance\",\n    },\n    error: {\n      classes: \"ring-sf-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_SWITCH_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_SWITCH_VARIANTS\nexport type SFSwitchSize = keyof typeof SF_SWITCH_VARIANTS.size;\nexport type SFSwitchVariant = keyof typeof SF_SWITCH_VARIANTS.variant;\n\nexport interface SFSwitchVariantsProps {\n  /**\n   * Switch size.\n   * - `\"sm\"` — Small for compact UIs\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent toggles\n   * @default \"base\"\n   */\n  size?: SFSwitchSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard switch appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFSwitchVariant;\n}\n\nexport function switchVariants({\n  size = SF_SWITCH_DEFAULT_VARIANTS.size,\n  variant = SF_SWITCH_DEFAULT_VARIANTS.variant,\n}: SFSwitchVariantsProps = {}) {\n  return cn(\n    SF_SWITCH_VARIANTS.size[size].classes,\n    SF_SWITCH_VARIANTS.variant[variant].classes\n  );\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = SFSwitchSize;\nexport type SwitchVariant = SFSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Error variant (visual only, no error text):\n * ```tsx\n * <Switch label=\"Required setting\" variant=\"error\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n  variant?: SwitchVariant;\n  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /**\n   * Whether the switch is required.\n   * When explicitly false, shows \"(optional)\" text after the label.\n   */\n  required?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  size?: SFSwitchSize;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n *   legend=\"Notification settings\"\n *   error=\"You must enable at least one notification type\"\n * >\n *   <Switch.Item label=\"Email notifications\" value=\"email\" />\n *   <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchGroupProps {\n  /** Legend text for the group */\n  legend: string;\n  /** Child Switch.Item components */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single switches) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Whether all switches in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: SwitchVariant;\n  /** Label text displayed next to switch */\n  label: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: SFSwitchSize;\n  transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      labelTooltip,\n      required,\n      controlFirst = true,\n      onCheckedChange,\n      transitioning,\n      ...props\n    },\n    ref\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n    const switchControl = (\n      <BaseSwitch.Root\n        ref={ref}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={onCheckedChange}\n        nativeButton\n        render={(rootProps, state) => {\n          const {\n            ref: rootRef,\n            className: baseClassName,\n            role: baseRole,\n            \"aria-checked\": _ariaChecked,\n            \"aria-pressed\": _ariaPressed,\n            ...restRootProps\n          } = rootProps as typeof rootProps & {\n            ref?: Ref<HTMLButtonElement>;\n            className?: string;\n            role?: string;\n            \"aria-checked\"?: boolean;\n            \"aria-pressed\"?: boolean;\n          };\n\n          const mergedClassName = cn(\n            \"interactive flex items-center gap-2 rounded-full border border-transparent bg-sf-recessed p-1 transition-colors\",\n            switchVariants({ size, variant }),\n            {\n              \"bg-sf-brand\": state.checked && !disabled && variant !== \"error\",\n              \"bg-sf-danger\": state.checked && !disabled && variant === \"error\",\n              \"hover:bg-sf-brand-hover\":\n                state.checked &&\n                !transitioning &&\n                !disabled &&\n                variant !== \"error\",\n              \"hover:bg-sf-danger/90\":\n                state.checked &&\n                !transitioning &&\n                !disabled &&\n                variant === \"error\",\n              \"hover:bg-sf-interact\":\n                !state.checked && !transitioning && !disabled,\n              \"cursor-not-allowed opacity-50\": disabled,\n            },\n            transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n            className,\n            baseClassName\n          );\n\n          const role =\n            (props.role as string | undefined) ?? baseRole ?? \"switch\";\n          const checkedA11yProps =\n            role === \"switch\"\n              ? { \"aria-checked\": state.checked }\n              : { \"aria-pressed\": state.checked };\n\n          return (\n            <button\n              {...restRootProps}\n              {...props}\n              ref={rootRef}\n              type=\"button\"\n              role={role}\n              {...checkedA11yProps}\n              aria-busy={transitioning || undefined}\n              aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n              className={mergedClassName}\n            >\n              <BaseSwitch.Thumb\n                className={cn(\n                  \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n                  {\n                    \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n                  }\n                )}\n              />\n            </button>\n          );\n        }}\n      />\n    );\n\n    // Wrap in Field (built-in) - no description for single switches\n    // If no label provided, return bare switch (for use in other components)\n    if (!label) {\n      return switchControl;\n    }\n\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        controlFirst={controlFirst}\n      >\n        {switchControl}\n      </Field>\n    );\n  }\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      onCheckedChange,\n      transitioning,\n    },\n    ref\n  ) => {\n    const { controlFirst } = useContext(SwitchGroupContext);\n\n    return (\n      <label\n        className={cn(\n          \"relative inline-flex items-center gap-2\",\n          // Control first (default): switch before label\n          // Label first: label before switch using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className\n        )}\n      >\n        <BaseSwitch.Root\n          ref={ref}\n          checked={checked}\n          disabled={disabled}\n          onCheckedChange={onCheckedChange}\n          nativeButton\n          render={(rootProps, state) => {\n            const {\n              ref: rootRef,\n              className: baseClassName,\n              role: baseRole,\n              \"aria-checked\": _ariaChecked,\n              \"aria-pressed\": _ariaPressed,\n              ...restRootProps\n            } = rootProps as typeof rootProps & {\n              ref?: Ref<HTMLButtonElement>;\n              className?: string;\n              role?: string;\n              \"aria-checked\"?: boolean;\n              \"aria-pressed\"?: boolean;\n            };\n\n            const mergedClassName = cn(\n              \"interactive flex items-center gap-2 rounded-full border border-transparent bg-sf-recessed p-1 transition-colors\",\n              switchVariants({ size, variant }),\n              {\n                \"bg-sf-brand\":\n                  state.checked && !disabled && variant !== \"error\",\n                \"bg-sf-danger\":\n                  state.checked && !disabled && variant === \"error\",\n                \"hover:bg-sf-brand-hover\":\n                  state.checked &&\n                  !transitioning &&\n                  !disabled &&\n                  variant !== \"error\",\n                \"hover:bg-sf-danger/90\":\n                  state.checked &&\n                  !transitioning &&\n                  !disabled &&\n                  variant === \"error\",\n                \"hover:bg-sf-interact\":\n                  !state.checked && !transitioning && !disabled,\n                \"cursor-not-allowed opacity-50\": disabled,\n              },\n              transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n              baseClassName\n            );\n\n            const role = baseRole ?? \"switch\";\n            const checkedA11yProps =\n              role === \"switch\"\n                ? { \"aria-checked\": state.checked }\n                : { \"aria-pressed\": state.checked };\n\n            return (\n              <button\n                {...restRootProps}\n                ref={rootRef}\n                type=\"button\"\n                role={role}\n                {...checkedA11yProps}\n                aria-busy={transitioning || undefined}\n                className={mergedClassName}\n              >\n                <BaseSwitch.Thumb\n                  className={cn(\n                    \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n                    {\n                      \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n                    }\n                  )}\n                />\n              </button>\n            );\n          }}\n        />\n        <span className=\"text-base font-medium text-sf-default\">{label}</span>\n      </label>\n    );\n  }\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n  legend,\n  children,\n  error,\n  description,\n  disabled,\n  controlFirst = true,\n  className,\n}: SwitchGroupProps) {\n  return (\n    <SwitchGroupContext.Provider value={{ controlFirst }}>\n      <Fieldset.Root\n        className={cn(\n          \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n          className\n        )}\n        disabled={disabled}\n      >\n        <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n          {legend}\n        </Fieldset.Legend>\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n        {description && <p className=\"text-sm text-sf-subtle\">{description}</p>}\n      </Fieldset.Root>\n    </SwitchGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n  Item: SwitchItem,\n  Group: SwitchGroup,\n});\n\nSwitch.displayName = \"Switch\";\n"],"mappings":"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"}

package/dist/table-CIMx0Oq0.js

@@ -0,0 +1,200 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Checkbox } from "./checkbox-CPX7lBaU.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+/** Table layout and row variant definitions mapping names to their Tailwind classes. */
+var SF_TABLE_VARIANTS = {
+	layout: {
+		auto: {
+			classes: "",
+			description: "Auto table layout - columns resize based on content"
+		},
+		fixed: {
+			classes: "table-fixed",
+			description: "Fixed table layout - columns have equal width, controlled via colgroup"
+		}
+	},
+	variant: {
+		default: {
+			classes: "",
+			description: "Default row variant"
+		},
+		selected: {
+			classes: "bg-sf-tint",
+			description: "Selected row variant"
+		}
+	}
+};
+var SF_TABLE_DEFAULT_VARIANTS = {
+	layout: "auto",
+	variant: "default"
+};
+/**
+* Table root — applies layout, borders, padding, and header styles.
+*
+* @example
+* ```tsx
+* <Table layout="fixed">
+*   <Table.Header>
+*     <Table.Row>
+*       <Table.Head>Name</Table.Head>
+*       <Table.Head>Status</Table.Head>
+*     </Table.Row>
+*   </Table.Header>
+*   <Table.Body>
+*     <Table.Row>
+*       <Table.Cell>Worker A</Table.Cell>
+*       <Table.Cell>Active</Table.Cell>
+*     </Table.Row>
+*   </Table.Body>
+* </Table>
+* ```
+*/
+var TableRoot = forwardRef(({ layout = "auto", ...props }, ref) => {
+	const className = cn("w-full", SF_TABLE_VARIANTS.layout[layout].classes, "[&_tr_td]:border-b [&_tr_td]:border-sf-fill [&_tr:last-child_td]:border-b-0", "[&_tr_td]:p-3", "[&_tr_th]:border-b [&_tr_th]:border-sf-fill [&_tr_th]:p-3 [&_tr_th]:font-semibold", "[&_tr_th]:bg-sf-base", "text-left text-sf-default", props.className);
+	return /* @__PURE__ */ jsx("table", {
+		ref,
+		...props,
+		className
+	});
+});
+var TableHeader = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		...props
+	});
+});
+var TableHead = forwardRef((props, ref) => {
+	const className = cn("group relative", props.className);
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		...props,
+		className
+	});
+});
+var TableRow = forwardRef(({ variant = SF_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {
+	const className = cn(SF_TABLE_VARIANTS.variant[variant].classes, props.className);
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		...props,
+		className
+	});
+});
+var TableBody = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		...props
+	});
+});
+var TableCell = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		...props
+	});
+});
+var TableFooter = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx("tfoot", {
+		ref,
+		...props
+	});
+});
+var TableResizeHandle = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		...props,
+		type: "button",
+		"aria-label": "Resize column",
+		className: cn("invisible h-full group-hover:visible", "w-[10px]", "flex items-center justify-center", "cursor-col-resize touch-none select-none", "absolute top-0 right-0", "m-0 bg-sf-base p-0"),
+		children: /* @__PURE__ */ jsx("span", { className: "h-5 w-[2px] rounded bg-sf-ring" })
+	});
+});
+/**
+* Special cell that makes the entire cell area a hit target for the checkbox.
+*/
+var TableCheckCell = forwardRef(({ checked, indeterminate, onValueChange, label, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(TableCell, {
+		ref,
+		...props,
+		className: cn("w-10 leading-none", props.className),
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked,
+			indeterminate,
+			onCheckedChange: (newChecked) => {
+				onValueChange?.(newChecked);
+			},
+			"aria-label": label ?? "Select row",
+			disabled,
+			className: "relative before:absolute before:-inset-3 before:content-['']"
+		})
+	});
+});
+var TableCheckHead = forwardRef(({ checked, indeterminate, onValueChange, label, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(TableHead, {
+		ref,
+		...props,
+		className: cn("w-10 leading-none", props.className),
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked,
+			indeterminate,
+			onCheckedChange: (newChecked) => {
+				onValueChange?.(newChecked);
+			},
+			"aria-label": label ?? "Select all rows",
+			disabled,
+			className: "relative before:absolute before:-inset-3 before:content-['']"
+		})
+	});
+});
+TableRoot.displayName = "Table";
+TableBody.displayName = "Table.Body";
+TableHead.displayName = "Table.Head";
+TableRow.displayName = "Table.Row";
+TableCell.displayName = "Table.Cell";
+TableFooter.displayName = "Table.Footer";
+TableHeader.displayName = "Table.Header";
+TableResizeHandle.displayName = "Table.ResizeHandle";
+TableCheckCell.displayName = "Table.CheckCell";
+TableCheckHead.displayName = "Table.CheckHead";
+/**
+* Table — semantic HTML table with styled rows, cells, and selection support.
+*
+* Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,
+* `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.
+*
+* @example
+* ```tsx
+* <Table>
+*   <Table.Header>
+*     <Table.Row>
+*       <Table.CheckHead checked={allSelected} onValueChange={toggleAll} />
+*       <Table.Head>Name</Table.Head>
+*     </Table.Row>
+*   </Table.Header>
+*   <Table.Body>
+*     {rows.map((row) => (
+*       <Table.Row key={row.id} variant={selected.has(row.id) ? "selected" : "default"}>
+*         <Table.CheckCell checked={selected.has(row.id)} onValueChange={() => toggle(row.id)} />
+*         <Table.Cell>{row.name}</Table.Cell>
+*       </Table.Row>
+*     ))}
+*   </Table.Body>
+* </Table>
+* ```
+*/
+var Table = Object.assign(TableRoot, {
+	Header: TableHeader,
+	Head: TableHead,
+	Row: TableRow,
+	Body: TableBody,
+	Cell: TableCell,
+	CheckCell: TableCheckCell,
+	CheckHead: TableCheckHead,
+	Footer: TableFooter,
+	ResizeHandle: TableResizeHandle
+});
+//#endregion
+export { SF_TABLE_VARIANTS as n, Table as r, SF_TABLE_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=table-CIMx0Oq0.js.map

package/dist/table-CIMx0Oq0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-CIMx0Oq0.js","names":[],"sources":["../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { cn } from \"../../utils\";\nimport { Checkbox } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const SF_TABLE_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto table layout - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description:\n        \"Fixed table layout - columns have equal width, controlled via colgroup\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default row variant\",\n    },\n    selected: {\n      classes: \"bg-sf-tint\",\n      description: \"Selected row variant\",\n    },\n  },\n} as const;\n\nexport const SF_TABLE_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n  variant: \"default\",\n} as const;\n\nexport type SFTableRowVariant = keyof typeof SF_TABLE_VARIANTS.variant;\nexport type SFTableLayout = keyof typeof SF_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.Head>Name</Table.Head>\n *       <Table.Head>Status</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row>\n *       <Table.Cell>Worker A</Table.Cell>\n *       <Table.Cell>Active</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & {\n    /**\n     * Table layout algorithm.\n     * - `\"auto\"` — columns resize based on content\n     * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n     * @default \"auto\"\n     */\n    layout?: SFTableLayout;\n  }\n>(({ layout = \"auto\", ...props }, ref) => {\n  const className = cn(\n    \"w-full\",\n    SF_TABLE_VARIANTS.layout[layout].classes,\n    \"[&_tr_td]:border-b [&_tr_td]:border-sf-fill [&_tr:last-child_td]:border-b-0\", // Row border\n    \"[&_tr_td]:p-3\", // Cell padding\n    \"[&_tr_th]:border-b [&_tr_th]:border-sf-fill [&_tr_th]:p-3 [&_tr_th]:font-semibold\", // Header styles\n    \"[&_tr_th]:bg-sf-base\", // Header background color\n    \"text-left text-sf-default\",\n    props.className\n  );\n\n  return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <thead ref={ref} {...props} />;\n});\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n  const className = cn(\"group relative\", props.className);\n  return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    variant?: SFTableRowVariant;\n  }\n>(({ variant = SF_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n  const className = cn(\n    SF_TABLE_VARIANTS.variant[variant].classes,\n    props.className\n  );\n\n  return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n  return <td ref={ref} {...props} />;\n});\n\nconst TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n  return (\n    <button\n      ref={ref}\n      {...props}\n      type=\"button\"\n      aria-label=\"Resize column\"\n      className={cn(\n        \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n        \"w-[10px]\", // Hitting area\n        \"flex items-center justify-center\", // Center the handle\n        \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n        \"absolute top-0 right-0\", // Position the handle\n        \"m-0 bg-sf-base p-0\" // Override the stratus button styles\n      )}\n    >\n      <span className=\"h-5 w-[2px] rounded bg-sf-ring\" />\n    </button>\n  );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    { checked, indeterminate, onValueChange, label, disabled, ...props },\n    ref\n  ) => {\n    return (\n      <TableCell\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked) => {\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select row\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableCell>\n    );\n  }\n);\n\nconst TableCheckHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    { checked, indeterminate, onValueChange, label, disabled, ...props },\n    ref\n  ) => {\n    return (\n      <TableHead\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked) => {\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select all rows\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableHead>\n    );\n  }\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.CheckHead checked={allSelected} onValueChange={toggleAll} />\n *       <Table.Head>Name</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     {rows.map((row) => (\n *       <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n *         <Table.CheckCell checked={selected.has(row.id)} onValueChange={() => toggle(row.id)} />\n *         <Table.Cell>{row.name}</Table.Cell>\n *       </Table.Row>\n *     ))}\n *   </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Head: TableHead,\n  Row: TableRow,\n  Body: TableBody,\n  Cell: TableCell,\n  CheckCell: TableCheckCell,\n  CheckHead: TableCheckHead,\n  Footer: TableFooter,\n  ResizeHandle: TableResizeHandle,\n});\n"],"mappings":";;;;;;;AAMA,IAAa,oBAAoB;CAC/B,QAAQ;EACN,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,OAAO;GACL,SAAS;GACT,aACE;GACH;EACF;CACD,SAAS;EACP,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,UAAU;GACR,SAAS;GACT,aAAa;GACd;EACF;CACF;AAED,IAAa,4BAA4B;CACvC,QAAQ;CACR,SAAS;CACV;;;;;;;;;;;;;;;;;;;;;;AA0BD,IAAM,YAAY,YAWf,EAAE,SAAS,QAAQ,GAAG,SAAS,QAAQ;CACxC,MAAM,YAAY,GAChB,UACA,kBAAkB,OAAO,QAAQ,SACjC,+EACA,iBACA,qFACA,wBACA,6BACA,MAAM,UACP;AAED,QAAO,oBAAC,SAAD;EAAY;EAAK,GAAI;EAAkB;EAAa,CAAA;EAC3D;AAEF,IAAM,cAAc,YAGjB,OAAO,QAAQ;AAChB,QAAO,oBAAC,SAAD;EAAY;EAAK,GAAI;EAAS,CAAA;EACrC;AAEF,IAAM,YAAY,YAGf,OAAO,QAAQ;CAChB,MAAM,YAAY,GAAG,kBAAkB,MAAM,UAAU;AACvD,QAAO,oBAAC,MAAD;EAAS;EAAK,GAAI;EAAkB;EAAa,CAAA;EACxD;AAEF,IAAM,WAAW,YAKd,EAAE,UAAU,0BAA0B,SAAS,GAAG,SAAS,QAAQ;CACpE,MAAM,YAAY,GAChB,kBAAkB,QAAQ,SAAS,SACnC,MAAM,UACP;AAED,QAAO,oBAAC,MAAD;EAAS;EAAK,GAAI;EAAkB;EAAa,CAAA;EACxD;AAEF,IAAM,YAAY,YAGf,OAAO,QAAQ;AAChB,QAAO,oBAAC,SAAD;EAAY;EAAK,GAAI;EAAS,CAAA;EACrC;AAEF,IAAM,YAAY,YAGf,OAAO,QAAQ;AAChB,QAAO,oBAAC,MAAD;EAAS;EAAK,GAAI;EAAS,CAAA;EAClC;AAEF,IAAM,cAAc,YAGjB,OAAO,QAAQ;AAChB,QAAO,oBAAC,SAAD;EAAY;EAAK,GAAI;EAAS,CAAA;EACrC;AAEF,IAAM,oBAAoB,YAGvB,OAAO,QAAQ;AAChB,QACE,oBAAC,UAAD;EACO;EACL,GAAI;EACJ,MAAK;EACL,cAAW;EACX,WAAW,GACT,wCACA,YACA,oCACA,4CACA,0BACA,qBACD;YAED,oBAAC,QAAD,EAAM,WAAU,kCAAmC,CAAA;EAC5C,CAAA;EAEX;;;;AAMF,IAAM,iBAAiB,YAWnB,EAAE,SAAS,eAAe,eAAe,OAAO,UAAU,GAAG,SAC7D,QACG;AACH,QACE,oBAAC,WAAD;EACO;EACL,GAAI;EACJ,WAAW,GAAG,qBAAqB,MAAM,UAAU;YAEnD,oBAAC,UAAD;GACW;GACM;GACf,kBAAkB,eAAe;AAC/B,oBAAgB,WAAW;;GAE7B,cAAY,SAAS;GACX;GACV,WAAU;GACV,CAAA;EACQ,CAAA;EAGjB;AAED,IAAM,iBAAiB,YAWnB,EAAE,SAAS,eAAe,eAAe,OAAO,UAAU,GAAG,SAC7D,QACG;AACH,QACE,oBAAC,WAAD;EACO;EACL,GAAI;EACJ,WAAW,GAAG,qBAAqB,MAAM,UAAU;YAEnD,oBAAC,UAAD;GACW;GACM;GACf,kBAAkB,eAAe;AAC/B,oBAAgB,WAAW;;GAE7B,cAAY,SAAS;GACX;GACV,WAAU;GACV,CAAA;EACQ,CAAA;EAGjB;AAED,UAAU,cAAc;AACxB,UAAU,cAAc;AACxB,UAAU,cAAc;AACxB,SAAS,cAAc;AACvB,UAAU,cAAc;AACxB,YAAY,cAAc;AAC1B,YAAY,cAAc;AAC1B,kBAAkB,cAAc;AAChC,eAAe,cAAc;AAC7B,eAAe,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B7B,IAAa,QAAQ,OAAO,OAAO,WAAW;CAC5C,QAAQ;CACR,MAAM;CACN,KAAK;CACL,MAAM;CACN,MAAM;CACN,WAAW;CACX,WAAW;CACX,QAAQ;CACR,cAAc;CACf,CAAC"}

package/dist/tabs-1cHrYoel.js

@@ -0,0 +1,54 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.tsx
+var SF_TABS_DEFAULT_VARIANTS = { variant: "segmented" };
+/**
+* Tab navigation component with segmented, underline, or pill style.
+* Built on Base UI Tabs with animated active indicator.
+*
+* @example
+* ```tsx
+* <Tabs
+*   variant="segmented"
+*   tabs={[{ value: "tab1", label: "Tab 1" }, { value: "tab2", label: "Tab 2" }]}
+*   value={active}
+*   onValueChange={setActive}
+* />
+* <Tabs variant="pill" tabs={[...]} value={active} />
+* ```
+*/
+function Tabs$1({ tabs, value, selectedValue, onValueChange, activateOnFocus, className, listClassName, indicatorClassName, variant = SF_TABS_DEFAULT_VARIANTS.variant }) {
+	const items = tabs ?? [];
+	if (items.length === 0) return null;
+	const fallbackValue = items[0]?.value;
+	const isControlled = value !== void 0;
+	const rootProps = {
+		value: isControlled ? value : void 0,
+		defaultValue: isControlled ? void 0 : selectedValue ?? fallbackValue
+	};
+	const isSegmented = variant === "segmented";
+	const isUnderline = variant === "underline";
+	const isPill = variant === "pill";
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
+		...rootProps,
+		className: cn("relative min-w-0 font-medium", className),
+		onValueChange: (nextValue) => {
+			onValueChange?.(String(nextValue));
+		},
+		children: [(isSegmented || isPill) && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-x-0 top-1/2 -z-10 h-8.5 -translate-y-1/2 rounded-lg", isSegmented && "bg-sf-tint", isPill && "hidden") }), /* @__PURE__ */ jsxs(Tabs.List, {
+			activateOnFocus,
+			className: cn("scrollbar-hide relative flex min-w-0 shrink items-stretch", isSegmented && "h-8.5 rounded-lg bg-sf-tint px-px", isUnderline && "h-7 gap-4 border-b border-sf-line pb-2", isPill && "h-9 gap-1", listClassName),
+			children: [items.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, {
+				value: tab.value,
+				className: cn("relative z-10 flex cursor-pointer items-center whitespace-nowrap hover:border-sf-tint focus-visible:rounded-none focus-visible:ring-sf-ring focus-visible:outline-offset-3", isSegmented && "my-px rounded-lg bg-transparent px-2.5 text-base text-sf-strong aria-selected:text-sf-default", isUnderline && "mb-2 text-base text-sf-strong hover:text-sf-subtle aria-selected:font-medium aria-selected:text-sf-default", isPill && "rounded-full px-3 text-sm text-sf-strong transition-colors hover:bg-sf-tint/50 hover:text-sf-subtle aria-selected:bg-sf-tint aria-selected:font-medium aria-selected:text-sf-default", tab.className),
+				children: tab.label
+			}, tab.value)), /* @__PURE__ */ jsx(Tabs.Indicator, { className: cn("absolute z-0 transition-[left,width,transform] duration-200 ease-out", "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0", "left-(--active-tab-left) w-(--active-tab-width)", isSegmented && "top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-sf-overlay shadow-sm ring ring-sf-fill-hover", isUnderline && "bottom-0 h-0.5 bg-sf-brand", isPill && "hidden", indicatorClassName) })]
+		})]
+	});
+}
+//#endregion
+export { Tabs$1 as t };
+
+//# sourceMappingURL=tabs-1cHrYoel.js.map

package/dist/tabs-1cHrYoel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-1cHrYoel.js","names":[],"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const SF_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\", \"pill\"],\n} as const;\n\nexport const SF_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n} as const;\n\nexport const SF_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from SF_TABS_VARIANTS\nexport interface SFTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * - `\"pill\"` — Fully rounded tabs, only selected has background\n   * @default \"segmented\"\n   */\n  variant?: (typeof SF_TABS_VARIANTS.variant)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /** Custom render function to replace the tab element (e.g. for link-based tabs). */\n  render?: (props: Record<string, unknown>) => React.ReactElement;\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = SFTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented, underline, or pill style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * <Tabs variant=\"pill\" tabs={[...]} value={active} />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = SF_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n  const isPill = variant === \"pill\";\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant only */}\n      {(isSegmented || isPill) && (\n        <div\n          className={cn(\n            \"absolute inset-x-0 top-1/2 -z-10 h-8.5 -translate-y-1/2 rounded-lg\",\n            isSegmented && \"bg-sf-tint\",\n            isPill && \"hidden\"\n          )}\n        />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-8.5 rounded-lg bg-sf-tint px-px\",\n          isUnderline && \"h-7 gap-4 border-b border-sf-line pb-2\",\n          isPill && \"h-9 gap-1\",\n          listClassName\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            value={tab.value}\n            className={cn(\n              \"relative z-10 flex cursor-pointer items-center whitespace-nowrap hover:border-sf-tint focus-visible:rounded-none focus-visible:ring-sf-ring focus-visible:outline-offset-3\",\n              isSegmented &&\n                \"my-px rounded-lg bg-transparent px-2.5 text-base text-sf-strong aria-selected:text-sf-default\",\n              isUnderline &&\n                \"mb-2 text-base text-sf-strong hover:text-sf-subtle aria-selected:font-medium aria-selected:text-sf-default\",\n              isPill &&\n                \"rounded-full px-3 text-sm text-sf-strong transition-colors hover:bg-sf-tint/50 hover:text-sf-subtle aria-selected:bg-sf-tint aria-selected:font-medium aria-selected:text-sf-default\",\n              tab.className\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          className={cn(\n            \"absolute z-0 transition-[left,width,transform] duration-200 ease-out\",\n            \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n            \"left-(--active-tab-left) w-(--active-tab-width)\",\n            isSegmented &&\n              \"top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-sf-overlay shadow-sm ring ring-sf-fill-hover\",\n            isUnderline && \"bottom-0 h-0.5 bg-sf-brand\",\n            isPill && \"hidden\",\n            indicatorClassName\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;AAUA,IAAa,2BAA2B,EACtC,SAAS,aACV;;;;;;;;;;;;;;;;AAsGD,SAAgB,OAAK,EACnB,MACA,OACA,eACA,eACA,iBACA,WACA,eACA,oBACA,UAAU,yBAAyB,WACvB;CACZ,MAAM,QAAoB,QAAQ,EAAE;AAEpC,KAAI,MAAM,WAAW,EACnB,QAAO;CAGT,MAAM,gBAAgB,MAAM,IAAI;CAChC,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,YAAY;EAChB,OAAO,eAAe,QAAQ,KAAA;EAC9B,cAAc,eAAe,KAAA,IAAa,iBAAiB;EAC5D;CAED,MAAM,cAAc,YAAY;CAChC,MAAM,cAAc,YAAY;CAChC,MAAM,SAAS,YAAY;AAE3B,QACE,qBAAC,KAAc,MAAf;EACE,GAAI;EACJ,WAAW,GAAG,gCAAgC,UAAU;EACxD,gBAAgB,cAAc;AAE5B,mBADoB,OAAO,UAAU,CACT;;YALhC,EASI,eAAe,WACf,oBAAC,OAAD,EACE,WAAW,GACT,sEACA,eAAe,cACf,UAAU,SACX,EACD,CAAA,EAEJ,qBAAC,KAAc,MAAf;GACmB;GACjB,WAAW,GACT,6DACA,eAAe,qCACf,eAAe,0CACf,UAAU,aACV,cACD;aARH,CAUG,MAAM,KAAK,QACV,oBAAC,KAAc,KAAf;IAEE,OAAO,IAAI;IACX,WAAW,GACT,8KACA,eACE,iGACF,eACE,8GACF,UACE,wLACF,IAAI,UACL;cAEA,IAAI;IACa,EAdb,IAAI,MAcS,CACpB,EACF,oBAAC,KAAc,WAAf,EACE,WAAW,GACT,wEACA,kEACA,mDACA,eACE,6GACF,eAAe,8BACf,UAAU,UACV,mBACD,EACD,CAAA,CACiB;KACF"}

package/dist/text-KJmGkwnf.js

@@ -0,0 +1,103 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text/text.tsx
+/** Text variant and size definitions mapping names to their Tailwind classes. */
+var SF_TEXT_VARIANTS = {
+	variant: {
+		heading1: {
+			classes: "text-3xl font-semibold",
+			description: "Large heading for page titles"
+		},
+		heading2: {
+			classes: "text-2xl font-semibold",
+			description: "Medium heading for section titles"
+		},
+		heading3: {
+			classes: "text-lg font-semibold",
+			description: "Small heading for subsections"
+		},
+		body: {
+			classes: "text-sf-default",
+			description: "Default body text"
+		},
+		secondary: {
+			classes: "text-sf-subtle",
+			description: "Muted text for secondary information"
+		},
+		success: {
+			classes: "text-sf-link",
+			description: "Success state text"
+		},
+		error: {
+			classes: "text-sf-danger",
+			description: "Error state text"
+		},
+		mono: {
+			classes: "font-mono",
+			description: "Monospace text for code"
+		},
+		"mono-secondary": {
+			classes: "font-mono text-sf-subtle",
+			description: "Muted monospace text"
+		}
+	},
+	size: {
+		xs: {
+			classes: "text-xs",
+			description: "Extra small text"
+		},
+		sm: {
+			classes: "text-sm",
+			description: "Small text"
+		},
+		base: {
+			classes: "text-base",
+			description: "Default text size"
+		},
+		lg: {
+			classes: "text-lg",
+			description: "Large text"
+		}
+	}
+};
+/**
+* Typography component for rendering text with consistent styling.
+* Automatically selects the appropriate HTML element based on variant
+* (`h1`/`h2`/`h3` for headings, `p` for body, `span` for mono).
+*
+* @example
+* ```tsx
+* <Text variant="heading1">Dashboard</Text>
+* <Text>Default body text</Text>
+* ```
+*/
+function _Text({ variant = "body", bold = false, size = "base", children, DANGEROUS_className, DANGEROUS_style, as, ...props }, ref) {
+	const isCopy = [
+		"body",
+		"secondary",
+		"success",
+		"error"
+	].includes(variant);
+	const isMono = ["mono", "mono-secondary"].includes(variant);
+	return /* @__PURE__ */ jsx(useMemo(() => {
+		if (as) return as;
+		if (variant === "heading1") return "h1";
+		if (variant === "heading2") return "h2";
+		if (variant === "heading3") return "h3";
+		if (["mono", "mono-secondary"].includes(variant)) return "span";
+		return "p";
+	}, [variant, as]), {
+		ref,
+		className: cn("text-sf-default", SF_TEXT_VARIANTS.variant[variant].classes, isCopy ? SF_TEXT_VARIANTS.size[size].classes : "", isCopy && bold ? "font-medium" : "", isMono && (size === "lg" ? SF_TEXT_VARIANTS.size.base.classes : SF_TEXT_VARIANTS.size.sm.classes), DANGEROUS_className),
+		style: DANGEROUS_style,
+		...props,
+		children
+	});
+}
+var Text = forwardRef(_Text);
+//#endregion
+export { Text as t };
+
+//# sourceMappingURL=text-KJmGkwnf.js.map

package/dist/text-KJmGkwnf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-KJmGkwnf.js","names":[],"sources":["../src/components/text/text.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ForwardedRef,\n  forwardRef,\n  useMemo,\n  type ElementType,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Text variant and size definitions mapping names to their Tailwind classes. */\nexport const SF_TEXT_VARIANTS = {\n  variant: {\n    heading1: {\n      classes: \"text-3xl font-semibold\",\n      description: \"Large heading for page titles\",\n    },\n    heading2: {\n      classes: \"text-2xl font-semibold\",\n      description: \"Medium heading for section titles\",\n    },\n    heading3: {\n      classes: \"text-lg font-semibold\",\n      description: \"Small heading for subsections\",\n    },\n    body: {\n      classes: \"text-sf-default\",\n      description: \"Default body text\",\n    },\n    secondary: {\n      classes: \"text-sf-subtle\",\n      description: \"Muted text for secondary information\",\n    },\n    success: {\n      classes: \"text-sf-link\",\n      description: \"Success state text\",\n    },\n    error: {\n      classes: \"text-sf-danger\",\n      description: \"Error state text\",\n    },\n    mono: {\n      classes: \"font-mono\",\n      description: \"Monospace text for code\",\n    },\n    \"mono-secondary\": {\n      classes: \"font-mono text-sf-subtle\",\n      description: \"Muted monospace text\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"text-xs\",\n      description: \"Extra small text\",\n    },\n    sm: {\n      classes: \"text-sm\",\n      description: \"Small text\",\n    },\n    base: {\n      classes: \"text-base\",\n      description: \"Default text size\",\n    },\n    lg: {\n      classes: \"text-lg\",\n      description: \"Large text\",\n    },\n  },\n} as const;\n\nexport const SF_TEXT_DEFAULT_VARIANTS = {\n  variant: \"body\",\n  size: \"base\",\n} as const;\n\n/**\n * SF_TEXT_STYLING - Typography metadata for Figma generator\n *\n * This export provides structured styling information extracted from text.tsx\n * for use by the Figma plugin generator. It documents font sizes, weights,\n * colors, and font families used across all Text variants.\n *\n * Source of truth chain:\n * text.tsx (this file) → component-registry.json → text.ts (Figma generator)\n */\nexport const SF_TEXT_STYLING = {\n  fontSizes: {\n    xs: 12,\n    sm: 14,\n    base: 16,\n    lg: 18,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 30,\n  },\n  fontWeights: {\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n  },\n  baseColor: \"text-sf-default\",\n  variantColors: {\n    body: \"text-sf-default\",\n    secondary: \"text-sf-subtle\",\n    success: \"text-sf-link\",\n    error: \"text-sf-danger\",\n    mono: \"text-sf-default\",\n    \"mono-secondary\": \"text-sf-subtle\",\n  },\n  fontFamilies: {\n    default: \"sans-serif\",\n    mono: \"monospace\",\n  },\n} as const;\n\n// Derived types from SF_TEXT_VARIANTS\nexport type SFTextVariant = keyof typeof SF_TEXT_VARIANTS.variant;\nexport type SFTextSize = keyof typeof SF_TEXT_VARIANTS.size;\n\nexport interface SFTextVariantsProps {\n  variant?: SFTextVariant;\n  size?: SFTextSize;\n}\n\nexport function textVariants({\n  variant = SF_TEXT_DEFAULT_VARIANTS.variant,\n  size = SF_TEXT_DEFAULT_VARIANTS.size,\n}: SFTextVariantsProps = {}) {\n  return cn(\n    SF_TEXT_VARIANTS.variant[variant].classes,\n    SF_TEXT_VARIANTS.size[size].classes\n  );\n}\n\n// Legacy types for backwards compatibility\ntype Heading = \"heading1\" | \"heading2\" | \"heading3\";\ntype Copy = \"body\" | \"secondary\" | \"success\" | \"error\";\ntype Monospace = \"mono\" | \"mono-secondary\";\ntype TextSize = SFTextSize;\ntype TextVariant = SFTextVariant;\n\ntype BaseTextProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  \"className\" | \"style\"\n> & {\n  DANGEROUS_className?: string;\n  DANGEROUS_style?: CSSProperties;\n  as?: ElementType;\n};\n\ntype TextPropsInternal<Variant extends TextVariant = \"body\"> = BaseTextProps &\n  (Variant extends Copy\n    ? {\n        variant?: Variant;\n        bold?: boolean;\n        size?: TextSize;\n      }\n    : Variant extends Monospace\n      ? {\n          variant?: Variant;\n          bold?: never;\n          size?: \"lg\";\n        }\n      : Variant extends Heading\n        ? {\n            variant?: Variant;\n            bold?: never;\n            size?: never;\n          }\n        : never);\n\n/**\n * Text component props.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\">Page Title</Text>\n * <Text variant=\"body\">Default paragraph text.</Text>\n * <Text variant=\"secondary\" size=\"sm\">Muted helper text</Text>\n * <Text variant=\"error\">Something went wrong</Text>\n * <Text variant=\"mono\">console.log(\"code\")</Text>\n * ```\n */\nexport interface TextProps {\n  /**\n   * Text style variant. Determines color, font, and weight.\n   * - `\"heading1\"` — Large page title (30px, semibold)\n   * - `\"heading2\"` — Section title (24px, semibold)\n   * - `\"heading3\"` — Subsection title (18px, semibold)\n   * - `\"body\"` — Default body text\n   * - `\"secondary\"` — Muted text for secondary information\n   * - `\"success\"` — Success state text\n   * - `\"error\"` — Error state text\n   * - `\"mono\"` — Monospace text for code\n   * - `\"mono-secondary\"` — Muted monospace text\n   * @default \"body\"\n   */\n  variant?: SFTextVariant;\n  /**\n   * Text size (only applies to body/secondary/success/error variants).\n   * - `\"xs\"` — 12px\n   * - `\"sm\"` — 14px\n   * - `\"base\"` — 16px\n   * - `\"lg\"` — 18px\n   * @default \"base\"\n   */\n  size?: SFTextSize;\n  /** Whether to use bold font weight (only applies to body variants). */\n  bold?: boolean;\n  /** The HTML element type to render as (e.g. `\"span\"`, `\"p\"`, `\"h1\"`). Auto-selected based on variant if omitted. */\n  as?: ElementType;\n  /** Text content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Typography component for rendering text with consistent styling.\n * Automatically selects the appropriate HTML element based on variant\n * (`h1`/`h2`/`h3` for headings, `p` for body, `span` for mono).\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\">Dashboard</Text>\n * <Text>Default body text</Text>\n * ```\n */\nfunction _Text<Variant extends TextVariant = \"body\">(\n  {\n    variant = \"body\" as Variant,\n    bold = false,\n    size = \"base\",\n    children,\n    DANGEROUS_className,\n    DANGEROUS_style,\n    as,\n    ...props\n  }: TextPropsInternal<Variant>,\n  ref: ForwardedRef<HTMLHeadingElement>\n) {\n  const isCopy = [\"body\", \"secondary\", \"success\", \"error\"].includes(variant);\n  const isMono = [\"mono\", \"mono-secondary\"].includes(variant);\n\n  const Component = useMemo(() => {\n    if (as) return as;\n    if (variant === \"heading1\") return \"h1\";\n    if (variant === \"heading2\") return \"h2\";\n    if (variant === \"heading3\") return \"h3\";\n    if ([\"mono\", \"mono-secondary\"].includes(variant)) return \"span\";\n    return \"p\";\n  }, [variant, as]);\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        \"text-sf-default\",\n        SF_TEXT_VARIANTS.variant[variant].classes,\n        isCopy ? SF_TEXT_VARIANTS.size[size].classes : \"\",\n        isCopy && bold ? \"font-medium\" : \"\",\n        // Monospace fonts need to be 1pt smaller than body text to optically match\n        isMono &&\n          (size === \"lg\"\n            ? SF_TEXT_VARIANTS.size.base.classes\n            : SF_TEXT_VARIANTS.size.sm.classes),\n        DANGEROUS_className\n      )}\n      style={DANGEROUS_style}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n\nexport const Text = forwardRef(_Text) as <Variant extends TextVariant = \"body\">(\n  props: TextPropsInternal<Variant> & {\n    ref?: ForwardedRef<ElementRef<\"span\">>;\n  }\n) => React.ReactElement;\n"],"mappings":";;;;;;AAaA,IAAa,mBAAmB;CAC9B,SAAS;EACP,UAAU;GACR,SAAS;GACT,aAAa;GACd;EACD,UAAU;GACR,SAAS;GACT,aAAa;GACd;EACD,UAAU;GACR,SAAS;GACT,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,WAAW;GACT,SAAS;GACT,aAAa;GACd;EACD,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,OAAO;GACL,SAAS;GACT,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,kBAAkB;GAChB,SAAS;GACT,aAAa;GACd;EACF;CACD,MAAM;EACJ,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACF;CACF;;;;;;;;;;;;AA8JD,SAAS,MACP,EACE,UAAU,QACV,OAAO,OACP,OAAO,QACP,UACA,qBACA,iBACA,IACA,GAAG,SAEL,KACA;CACA,MAAM,SAAS;EAAC;EAAQ;EAAa;EAAW;EAAQ,CAAC,SAAS,QAAQ;CAC1E,MAAM,SAAS,CAAC,QAAQ,iBAAiB,CAAC,SAAS,QAAQ;AAW3D,QACE,oBAVgB,cAAc;AAC9B,MAAI,GAAI,QAAO;AACf,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,CAAC,QAAQ,iBAAiB,CAAC,SAAS,QAAQ,CAAE,QAAO;AACzD,SAAO;IACN,CAAC,SAAS,GAAG,CAAC,EAGf;EACO;EACL,WAAW,GACT,mBACA,iBAAiB,QAAQ,SAAS,SAClC,SAAS,iBAAiB,KAAK,MAAM,UAAU,IAC/C,UAAU,OAAO,gBAAgB,IAEjC,WACG,SAAS,OACN,iBAAiB,KAAK,KAAK,UAC3B,iBAAiB,KAAK,GAAG,UAC/B,oBACD;EACD,OAAO;EACP,GAAI;EAEH;EACS,CAAA;;AAIhB,IAAa,OAAO,WAAW,MAAM"}

package/dist/theme-toggle-Dpgnoj_Q.js

@@ -0,0 +1,129 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Button } from "./button-De0267YU.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from "@phosphor-icons/react";
+//#region src/components/theme-toggle/theme-toggle.tsx
+var SF_THEME_TOGGLE_VARIANTS = { mode: {
+	light: {
+		classes: "",
+		description: "Light mode"
+	},
+	dark: {
+		classes: "",
+		description: "Dark mode"
+	},
+	system: {
+		classes: "",
+		description: "Follow system preference"
+	}
+} };
+var SF_THEME_TOGGLE_DEFAULT_VARIANTS = { mode: "system" };
+var STORAGE_KEY = "theme";
+function getSystemTheme() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveMode(mode) {
+	return mode === "system" ? getSystemTheme() : mode;
+}
+function applyTheme(mode) {
+	const resolved = resolveMode(mode);
+	document.documentElement.dataset.mode = resolved;
+	if (mode === "system") localStorage.removeItem(STORAGE_KEY);
+	else localStorage.setItem(STORAGE_KEY, mode);
+}
+/**
+* Read the current persisted mode preference from localStorage.
+* Returns "system" if nothing is stored.
+*/
+function getStoredThemeMode() {
+	if (typeof window === "undefined") return "system";
+	const stored = localStorage.getItem(STORAGE_KEY);
+	if (stored === "light" || stored === "dark") return stored;
+	return "system";
+}
+/**
+* Theme toggle button. Cycles through light → dark → system (follows OS) modes.
+*
+* Reads from and writes to `localStorage` under the key `"theme"`. When set to
+* `"system"` the key is removed so the OS preference takes over automatically.
+* Applies the resolved mode to `document.documentElement.dataset.mode`.
+*
+* @example
+* ```tsx
+* // Simple uncontrolled — manages localStorage automatically
+* <ThemeToggle />
+*
+* // Controlled
+* const [mode, setMode] = useState<SFThemeMode>("system");
+* <ThemeToggle mode={mode} onModeChange={setMode} />
+*
+* // Light/dark only (no system option)
+* <ThemeToggle cycle={["light", "dark"]} />
+* ```
+*/
+function ThemeToggle({ className, mode: controlledMode, onModeChange, cycle = [
+	"light",
+	"dark",
+	"system"
+], tooltip = true }) {
+	const isControlled = controlledMode !== void 0;
+	const [internalMode, setInternalMode] = useState("system");
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+		if (!isControlled) setInternalMode(getStoredThemeMode());
+	}, [isControlled]);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mq = window.matchMedia("(prefers-color-scheme: dark)");
+		if ((isControlled ? controlledMode : internalMode) !== "system") return;
+		const handler = () => applyTheme("system");
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, [
+		isControlled,
+		controlledMode,
+		internalMode
+	]);
+	const activeMode = isControlled ? controlledMode ?? "system" : internalMode;
+	const resolvedActive = resolveMode(activeMode);
+	const handleClick = () => {
+		const next = cycle[(cycle.indexOf(activeMode) + 1) % cycle.length] ?? cycle[0] ?? "system";
+		applyTheme(next);
+		if (!isControlled) setInternalMode(next);
+		onModeChange?.(next);
+	};
+	const tooltipLabel = activeMode === "light" ? "Switch to dark mode" : activeMode === "dark" ? "Use system theme" : "Switch to light mode";
+	if (!mounted) return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Toggle theme",
+		className: cn("text-sf-subtle", className),
+		shape: "square",
+		size: "sm",
+		type: "button",
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(SunIcon, { className: "size-4" })
+	});
+	const button = /* @__PURE__ */ jsx(Button, {
+		"aria-label": tooltipLabel,
+		className: cn("text-sf-subtle hover:text-sf-default", className),
+		onClick: handleClick,
+		shape: "square",
+		size: "sm",
+		type: "button",
+		variant: "ghost",
+		children: resolvedActive === "dark" ? /* @__PURE__ */ jsx(MoonIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(SunIcon, { className: "size-4" })
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltipLabel,
+		children: button
+	});
+}
+//#endregion
+export { getStoredThemeMode as i, SF_THEME_TOGGLE_VARIANTS as n, ThemeToggle as r, SF_THEME_TOGGLE_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=theme-toggle-Dpgnoj_Q.js.map

package/dist/theme-toggle-Dpgnoj_Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle-Dpgnoj_Q.js","names":[],"sources":["../src/components/theme-toggle/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { MoonIcon, SunIcon } from \"@phosphor-icons/react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type SFThemeMode = \"light\" | \"dark\" | \"system\";\n\nexport const SF_THEME_TOGGLE_VARIANTS = {\n  mode: {\n    light: { classes: \"\", description: \"Light mode\" },\n    dark: { classes: \"\", description: \"Dark mode\" },\n    system: { classes: \"\", description: \"Follow system preference\" },\n  },\n} as const;\n\nexport const SF_THEME_TOGGLE_DEFAULT_VARIANTS = {\n  mode: \"system\",\n} as const;\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst STORAGE_KEY = \"theme\";\n\nfunction getSystemTheme(): \"light\" | \"dark\" {\n  if (typeof window === \"undefined\") return \"light\";\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction resolveMode(mode: SFThemeMode): \"light\" | \"dark\" {\n  return mode === \"system\" ? getSystemTheme() : mode;\n}\n\nfunction applyTheme(mode: SFThemeMode) {\n  const resolved = resolveMode(mode);\n  document.documentElement.dataset.mode = resolved;\n  if (mode === \"system\") {\n    localStorage.removeItem(STORAGE_KEY);\n  } else {\n    localStorage.setItem(STORAGE_KEY, mode);\n  }\n}\n\n/**\n * Read the current persisted mode preference from localStorage.\n * Returns \"system\" if nothing is stored.\n */\nexport function getStoredThemeMode(): SFThemeMode {\n  if (typeof window === \"undefined\") return \"system\";\n  const stored = localStorage.getItem(STORAGE_KEY);\n  if (stored === \"light\" || stored === \"dark\") return stored;\n  return \"system\";\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface ThemeToggleProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /**\n   * Controlled mode. When provided the component acts as a controlled input —\n   * pair with `onModeChange`.\n   */\n  mode?: SFThemeMode;\n  /**\n   * Called when the user cycles to a new mode.\n   * Receives the new mode value.\n   */\n  onModeChange?: (mode: SFThemeMode) => void;\n  /**\n   * Cycle order for clicking. Defaults to `[\"light\", \"dark\", \"system\"]`.\n   * Remove `\"system\"` to limit to a simple light/dark toggle.\n   */\n  cycle?: SFThemeMode[];\n  /** Show a tooltip labelling the current action. Defaults to true. */\n  tooltip?: boolean;\n}\n\n/**\n * Theme toggle button. Cycles through light → dark → system (follows OS) modes.\n *\n * Reads from and writes to `localStorage` under the key `\"theme\"`. When set to\n * `\"system\"` the key is removed so the OS preference takes over automatically.\n * Applies the resolved mode to `document.documentElement.dataset.mode`.\n *\n * @example\n * ```tsx\n * // Simple uncontrolled — manages localStorage automatically\n * <ThemeToggle />\n *\n * // Controlled\n * const [mode, setMode] = useState<SFThemeMode>(\"system\");\n * <ThemeToggle mode={mode} onModeChange={setMode} />\n *\n * // Light/dark only (no system option)\n * <ThemeToggle cycle={[\"light\", \"dark\"]} />\n * ```\n */\nexport function ThemeToggle({\n  className,\n  mode: controlledMode,\n  onModeChange,\n  cycle = [\"light\", \"dark\", \"system\"],\n  tooltip = true,\n}: ThemeToggleProps) {\n  const isControlled = controlledMode !== undefined;\n\n  const [internalMode, setInternalMode] = useState<SFThemeMode>(\"system\");\n  const [mounted, setMounted] = useState(false);\n\n  // Hydrate from localStorage on mount\n  useEffect(() => {\n    setMounted(true);\n    if (!isControlled) {\n      setInternalMode(getStoredThemeMode());\n    }\n  }, [isControlled]);\n\n  // Keep in sync if system preference changes while in \"system\" mode\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const activeMode = isControlled ? controlledMode : internalMode;\n    if (activeMode !== \"system\") return;\n\n    const handler = () => applyTheme(\"system\");\n    mq.addEventListener(\"change\", handler);\n    return () => mq.removeEventListener(\"change\", handler);\n  }, [isControlled, controlledMode, internalMode]);\n\n  const activeMode = isControlled ? (controlledMode ?? \"system\") : internalMode;\n  const resolvedActive = resolveMode(activeMode);\n\n  const handleClick = () => {\n    const idx = cycle.indexOf(activeMode);\n    const next = cycle[(idx + 1) % cycle.length] ?? cycle[0] ?? \"system\";\n    applyTheme(next);\n    if (!isControlled) setInternalMode(next);\n    onModeChange?.(next);\n  };\n\n  const tooltipLabel =\n    activeMode === \"light\"\n      ? \"Switch to dark mode\"\n      : activeMode === \"dark\"\n        ? \"Use system theme\"\n        : \"Switch to light mode\";\n\n  // SSR / pre-mount: render a stable placeholder to avoid hydration mismatch\n  if (!mounted) {\n    return (\n      <Button\n        aria-label=\"Toggle theme\"\n        className={cn(\"text-sf-subtle\", className)}\n        shape=\"square\"\n        size=\"sm\"\n        type=\"button\"\n        variant=\"ghost\"\n      >\n        <SunIcon className=\"size-4\" />\n      </Button>\n    );\n  }\n\n  const button = (\n    <Button\n      aria-label={tooltipLabel}\n      className={cn(\"text-sf-subtle hover:text-sf-default\", className)}\n      onClick={handleClick}\n      shape=\"square\"\n      size=\"sm\"\n      type=\"button\"\n      variant=\"ghost\"\n    >\n      {resolvedActive === \"dark\" ? (\n        <MoonIcon className=\"size-4\" />\n      ) : (\n        <SunIcon className=\"size-4\" />\n      )}\n    </Button>\n  );\n\n  if (!tooltip) return button;\n\n  return <Tooltip content={tooltipLabel}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,2BAA2B,EACtC,MAAM;CACJ,OAAO;EAAE,SAAS;EAAI,aAAa;EAAc;CACjD,MAAM;EAAE,SAAS;EAAI,aAAa;EAAa;CAC/C,QAAQ;EAAE,SAAS;EAAI,aAAa;EAA4B;CACjE,EACF;AAED,IAAa,mCAAmC,EAC9C,MAAM,UACP;AAID,IAAM,cAAc;AAEpB,SAAS,iBAAmC;AAC1C,KAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAO,OAAO,WAAW,+BAA+B,CAAC,UACrD,SACA;;AAGN,SAAS,YAAY,MAAqC;AACxD,QAAO,SAAS,WAAW,gBAAgB,GAAG;;AAGhD,SAAS,WAAW,MAAmB;CACrC,MAAM,WAAW,YAAY,KAAK;AAClC,UAAS,gBAAgB,QAAQ,OAAO;AACxC,KAAI,SAAS,SACX,cAAa,WAAW,YAAY;KAEpC,cAAa,QAAQ,aAAa,KAAK;;;;;;AAQ3C,SAAgB,qBAAkC;AAChD,KAAI,OAAO,WAAW,YAAa,QAAO;CAC1C,MAAM,SAAS,aAAa,QAAQ,YAAY;AAChD,KAAI,WAAW,WAAW,WAAW,OAAQ,QAAO;AACpD,QAAO;;;;;;;;;;;;;;;;;;;;;;AA+CT,SAAgB,YAAY,EAC1B,WACA,MAAM,gBACN,cACA,QAAQ;CAAC;CAAS;CAAQ;CAAS,EACnC,UAAU,QACS;CACnB,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,CAAC,cAAc,mBAAmB,SAAsB,SAAS;CACvE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,iBAAgB;AACd,aAAW,KAAK;AAChB,MAAI,CAAC,aACH,iBAAgB,oBAAoB,CAAC;IAEtC,CAAC,aAAa,CAAC;AAGlB,iBAAgB;AACd,MAAI,OAAO,WAAW,YAAa;EACnC,MAAM,KAAK,OAAO,WAAW,+BAA+B;AAE5D,OADmB,eAAe,iBAAiB,kBAChC,SAAU;EAE7B,MAAM,gBAAgB,WAAW,SAAS;AAC1C,KAAG,iBAAiB,UAAU,QAAQ;AACtC,eAAa,GAAG,oBAAoB,UAAU,QAAQ;IACrD;EAAC;EAAc;EAAgB;EAAa,CAAC;CAEhD,MAAM,aAAa,eAAgB,kBAAkB,WAAY;CACjE,MAAM,iBAAiB,YAAY,WAAW;CAE9C,MAAM,oBAAoB;EAExB,MAAM,OAAO,OADD,MAAM,QAAQ,WAAW,GACX,KAAK,MAAM,WAAW,MAAM,MAAM;AAC5D,aAAW,KAAK;AAChB,MAAI,CAAC,aAAc,iBAAgB,KAAK;AACxC,iBAAe,KAAK;;CAGtB,MAAM,eACJ,eAAe,UACX,wBACA,eAAe,SACb,qBACA;AAGR,KAAI,CAAC,QACH,QACE,oBAAC,QAAD;EACE,cAAW;EACX,WAAW,GAAG,kBAAkB,UAAU;EAC1C,OAAM;EACN,MAAK;EACL,MAAK;EACL,SAAQ;YAER,oBAAC,SAAD,EAAS,WAAU,UAAW,CAAA;EACvB,CAAA;CAIb,MAAM,SACJ,oBAAC,QAAD;EACE,cAAY;EACZ,WAAW,GAAG,wCAAwC,UAAU;EAChE,SAAS;EACT,OAAM;EACN,MAAK;EACL,MAAK;EACL,SAAQ;YAEP,mBAAmB,SAClB,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA,GAE/B,oBAAC,SAAD,EAAS,WAAU,UAAW,CAAA;EAEzB,CAAA;AAGX,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,oBAAC,SAAD;EAAS,SAAS;YAAe;EAAiB,CAAA"}