npm - @signalflare-ai/ui - Versions diffs - 1.1.0 → 1.3.0 - Mend

@signalflare-ai/ui 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (362) hide show

package/dist/styles/shadcn.css CHANGED Viewed

@@ -7,7 +7,7 @@
  *
  * All values reference sf tokens by `var(--color-sf-*)` — there are zero
  * hardcoded literals in this file. That means applying
- * `[data-theme="fedramp"]` / `[data-theme="minimal"]` / `[data-theme="blue-tint"]`
+ * `[data-theme="fedramp"]` / `[data-theme="minimal"]` / `[data-theme="vesper"]`
  * automatically restyles shadcn components too, because the cascade re-resolves
  * the sf token at use time.
  *

package/dist/styles/theme-minimal.css CHANGED Viewed

@@ -12,16 +12,16 @@
   --text-color-sf-inactive: light-dark(oklch(0.65 0 0), oklch(0.35 0 0));
   --text-color-sf-danger: light-dark(oklch(0.55 0.12 25), oklch(0.55 0.1 25));
   --text-color-sf-warning: light-dark(oklch(0.55 0.08 66), oklch(0.65 0.08 66));
-  --color-sf-canvas: light-dark(oklch(0.95 0 0), oklch(0.1 0 0));
-  --color-sf-base: light-dark(oklch(0.97 0 0), oklch(0.14 0 0));
-  --color-sf-elevated: light-dark(oklch(1 0 0), oklch(0.22 0 0));
-  --color-sf-recessed: light-dark(oklch(0.92 0 0), oklch(0.1 0 0));
-  --color-sf-overlay: light-dark(oklch(0.93 0 0), oklch(0.1 0 0));
+  --color-sf-canvas: light-dark(oklch(0.95 0 0), oklch(0.173 0 0));
+  --color-sf-base: light-dark(oklch(0.97 0 0), oklch(0.1913 0 0));
+  --color-sf-elevated: light-dark(oklch(1 0 0), oklch(0.2002 0 0));
+  --color-sf-recessed: light-dark(oklch(0.92 0 0), oklch(0.173 0 0));
+  --color-sf-overlay: light-dark(oklch(0.93 0 0), oklch(0.173 0 0));
   --color-sf-contrast: light-dark(oklch(0.35 0 0), oklch(0.75 0 0));
-  --color-sf-control: light-dark(oklch(0.95 0 0), oklch(0.17 0 0));
-  --color-sf-tint: light-dark(oklch(0.94 0 0), oklch(0.19 0 0));
-  --color-sf-fill: light-dark(oklch(0.91 0 0), oklch(0.27 0 0));
-  --color-sf-fill-hover: light-dark(oklch(0.88 0 0), oklch(0.31 0 0));
+  --color-sf-control: light-dark(oklch(0.95 0 0), oklch(0.2264 0 0));
+  --color-sf-tint: light-dark(oklch(0.94 0 0), oklch(0.2562 0 0));
+  --color-sf-fill: light-dark(oklch(0.91 0 0), oklch(0.2562 0 0));
+  --color-sf-fill-hover: light-dark(oklch(0.88 0 0), oklch(0.2768 0 0));
   --color-sf-brand: light-dark(oklch(0.55 0.06 260), oklch(0.55 0.06 260));
   --color-sf-brand-hover: light-dark(
     oklch(0.48 0.05 264),

package/dist/styles/theme-sf.css CHANGED Viewed

@@ -24,10 +24,7 @@
     var(--color-blue-400, oklch(70.7% 0.165 254.624))
   );
-  --text-color-sf-success: light-dark(
-    var(--color-green-500, oklch(72.3% 0.219 149.579)),
-    var(--color-green-500, oklch(72.3% 0.219 149.579))
-  );
+  --text-color-sf-success: light-dark(#99ffe4, #99ffe4);
   --text-color-sf-danger: light-dark(oklch(0.5 0.15 25), oklch(0.68 0.16 25));
@@ -35,27 +32,27 @@
 }
 @theme {
-  --color-sf-canvas: light-dark(oklch(0.95 0 0), oklch(0.1 0 0));
+  --color-sf-canvas: light-dark(oklch(0.95 0 0), oklch(0.173 0 0));
-  --color-sf-base: light-dark(oklch(0.97 0 0), oklch(0.14 0 0));
+  --color-sf-base: light-dark(oklch(0.97 0 0), oklch(0.1913 0 0));
-  --color-sf-elevated: light-dark(oklch(1 0 0), oklch(0.22 0 0));
+  --color-sf-elevated: light-dark(oklch(1 0 0), oklch(0.2002 0 0));
-  --color-sf-recessed: light-dark(oklch(0.92 0 0), oklch(0.1 0 0));
+  --color-sf-recessed: light-dark(oklch(0.92 0 0), oklch(0.173 0 0));
-  --color-sf-overlay: light-dark(oklch(0.93 0 0), oklch(0.1 0 0));
+  --color-sf-overlay: light-dark(oklch(0.93 0 0), oklch(0.173 0 0));
   --color-sf-contrast: light-dark(oklch(0.35 0 0), oklch(0.75 0 0));
-  --color-sf-control: light-dark(oklch(0.95 0 0), oklch(0.17 0 0));
+  --color-sf-control: light-dark(oklch(0.95 0 0), oklch(0.2264 0 0));
-  --color-sf-tint: light-dark(oklch(0.94 0 0), oklch(0.19 0 0));
+  --color-sf-tint: light-dark(oklch(0.94 0 0), oklch(0.2562 0 0));
-  --color-sf-interact: light-dark(oklch(0.8 0 0), oklch(0.38 0 0));
+  --color-sf-interact: light-dark(oklch(0.8 0 0), oklch(0.2768 0 0));
-  --color-sf-fill: light-dark(oklch(0.91 0 0), oklch(0.27 0 0));
+  --color-sf-fill: light-dark(oklch(0.91 0 0), oklch(0.2562 0 0));
-  --color-sf-fill-hover: light-dark(oklch(0.88 0 0), oklch(0.31 0 0));
+  --color-sf-fill-hover: light-dark(oklch(0.88 0 0), oklch(0.2768 0 0));
   --color-sf-brand: light-dark(oklch(0.55 0.06 260), oklch(0.55 0.06 260));
@@ -64,13 +61,13 @@
     oklch(0.48 0.05 264)
   );
-  --color-sf-line: light-dark(oklch(0.85 0 0 / 0.5), oklch(0.25 0 0 / 0.5));
+  --color-sf-line: light-dark(oklch(0.85 0 0 / 0.5), #282828);
   --color-sf-ring: light-dark(oklch(0.55 0 0), oklch(0.6 0 0));
   --color-sf-tip-shadow: light-dark(transparent, transparent);
-  --color-sf-tip-stroke: light-dark(transparent, transparent);
+  --color-sf-tip-stroke: light-dark(transparent, #282828);
   --color-sf-info: light-dark(oklch(0.55 0.06 260), oklch(0.55 0.06 260));
@@ -84,10 +81,7 @@
   --color-sf-danger-tint: light-dark(oklch(0.94 0.02 25), oklch(0.16 0.04 25));
-  --color-sf-success: light-dark(
-    oklch(0.723 0.219 149.579),
-    oklch(0.723 0.219 149.579)
-  );
+  --color-sf-success: light-dark(#99ffe4, #99ffe4);
   --color-sf-chart-1: light-dark(
     oklch(0.646 0.222 41.116),

package/dist/styles/theme-vesper.css ADDED Viewed

@@ -0,0 +1,91 @@
+/**
+ * Vesper theme for SignalFlare AI
+ *
+ * Ported from the Vesper VS Code theme by raunofreiberg.
+ * Signature palette: near-black surfaces, warm peach accent (#FFC799),
+ * mint green strings (#99FFE4), and coral errors (#FF8080).
+ *
+ * Light mode intentionally falls back to the default SignalFlare palette.
+ * Vesper overrides only apply in dark mode.
+ */
+[data-theme="vesper"][data-mode="dark"] {
+  /* ── Text ────────────────────────────────────────────────────────── */
+  --text-color-sf-default: light-dark(#fff, #fff);
+  --text-color-sf-inverse: light-dark(#101010, #101010);
+  --text-color-sf-strong: light-dark(#fff, #fff);
+  /* A0A0A0 ≈ oklch(0.647 0 0) */
+  --text-color-sf-subtle: light-dark(#a0a0a0, #a0a0a0);
+  --text-color-sf-inactive: light-dark(#505050, #505050);
+  /* Brand text = peach */
+  --text-color-sf-brand: light-dark(#ffc799, #ffc799);
+  /* Links = peach */
+  --text-color-sf-link: light-dark(#ffc799, #ffc799);
+  /* Success/inserted = mint */
+  --text-color-sf-success: light-dark(#99ffe4, #99ffe4);
+  /* Danger = coral */
+  --text-color-sf-danger: light-dark(#ff8080, #ff8080);
+  /* Warning = amber (distinct from peach brand) */
+  --text-color-sf-warning: light-dark(#e8a84a, #e8a84a);
+  /* ── Surfaces ────────────────────────────────────────────────────── */
+  /* #101010 ≈ oklch(0.088 0 0) */
+  --color-sf-canvas: light-dark(#101010, #101010);
+  /* slightly lighter base */
+  --color-sf-base: light-dark(#141414, #141414);
+  /* #161616 = card / tab active */
+  --color-sf-elevated: light-dark(#161616, #161616);
+  --color-sf-recessed: light-dark(#101010, #101010);
+  --color-sf-overlay: light-dark(#101010, #101010);
+  /* for contrast text on surfaces */
+  --color-sf-contrast: light-dark(#a0a0a0, #a0a0a0);
+  /* ── Controls & fills ────────────────────────────────────────────── */
+  /* #1C1C1C = input background */
+  --color-sf-control: light-dark(#1c1c1c, #1c1c1c);
+  --color-sf-tint: light-dark(#1c1c1c, #1c1c1c);
+  /* #232323 = selected list item */
+  --color-sf-interact: light-dark(#282828, #282828);
+  --color-sf-fill: light-dark(#232323, #232323);
+  /* #282828 = list hover */
+  --color-sf-fill-hover: light-dark(#282828, #282828);
+  /* ── Brand / accent (peach) ──────────────────────────────────────── */
+  --color-sf-brand: light-dark(#ffc799, #ffc799);
+  --color-sf-brand-hover: light-dark(#ffcfa8, #ffcfa8);
+  /* ── Borders / rings ─────────────────────────────────────────────── */
+  /* ~#282828 at 60% opacity */
+  --color-sf-line: light-dark(#282828, #282828);
+  /* ring = peach on focus */
+  --color-sf-ring: light-dark(#ffc799, #ffc799);
+  /* ── Tooltip chrome ──────────────────────────────────────────────── */
+  --color-sf-tip-shadow: light-dark(transparent, transparent);
+  --color-sf-tip-stroke: light-dark(#282828, #282828);
+  /* ── Semantic: info (mint) ───────────────────────────────────────── */
+  --color-sf-info: light-dark(#99ffe4, #99ffe4);
+  --color-sf-info-tint: light-dark(#99ffe415, #99ffe415);
+  /* ── Semantic: warning (amber — distinct from peach brand) ─────────── */
+  --color-sf-warning: light-dark(#e8a84a, #e8a84a);
+  --color-sf-warning-tint: light-dark(#e8a84a20, #e8a84a20);
+  /* ── Semantic: danger (coral) ────────────────────────────────────── */
+  --color-sf-danger: light-dark(#ff8080, #ff8080);
+  --color-sf-danger-tint: light-dark(#ff808015, #ff808015);
+  /* ── Semantic: success (mint) ────────────────────────────────────── */
+  --color-sf-success: light-dark(#99ffe4, #99ffe4);
+  /* ── Syntax highlighting (sugar-high / shiki) ────────────────────── */
+  --color-sf-syntax-keyword: #a0a0a0;
+  --color-sf-syntax-identifier: #fff;
+  --color-sf-syntax-string: #99ffe4;
+  --color-sf-syntax-comment: #8b8b8b94;
+  --color-sf-syntax-jsxliterals: #ffc799;
+  --color-sf-syntax-property: #ffc799;
+  --color-sf-syntax-entity: #ffc799;
+  --color-sf-syntax-sign: #a0a0a0;
+}

package/dist/{surface-BduI7Ehl.js → surface-CWdSFVUx.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/surface/surface.tsx
 var defaultElement = "div";
-var Surface = forwardRef(function Surface({ as, children, className, ...restProps }, ref) {
+var Surface = forwardRef(function SurfaceImpl({ as, children, className, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx(as ?? defaultElement, {
 		ref,
 		...restProps,
@@ -15,4 +15,4 @@ var Surface = forwardRef(function Surface({ as, children, className, ...restProp
 //#endregion
 export { Surface as t };
-//# sourceMappingURL=surface-BduI7Ehl.js.map
+//# sourceMappingURL=surface-CWdSFVUx.js.map

package/dist/{surface-BduI7Ehl.js.map → surface-CWdSFVUx.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"surface-~~BduI7Ehl~~.js","names":[],"sources":["../src/components/surface/surface.tsx"],"sourcesContent":["import React, {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type ElementType,\n type PropsWithChildren,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Surface color variant definitions. /\nexport const SF_SURFACE_VARIANTS = {\n color: {\n primary: {\n classes: \"\",\n description: \"Primary surface color\",\n },\n secondary: {\n classes: \"\",\n description: \"Secondary surface color\",\n },\n },\n} as const;\n\nexport const SF_SURFACE_DEFAULT_VARIANTS = {\n color: \"primary\",\n} as const;\n\n// Derived types from SF_SURFACE_VARIANTS\nexport type SFSurfaceColor = keyof typeof SF_SURFACE_VARIANTS.color;\n\nexport interface SFSurfaceVariantsProps {\n /\n Surface color variant.\n * - `\"primary\"` — Primary surface color\n * - `\"secondary\"` — Secondary surface color\n * @default \"primary\"\n /\n color?: SFSurfaceColor;\n}\n\nexport function surfaceVariants({\n color = SF_SURFACE_DEFAULT_VARIANTS.color,\n}: SFSurfaceVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-xs ring ring-sf-line\",\n // Apply color-specific styles\n SF_SURFACE_VARIANTS.color[color].classes\n );\n}\n\ntype PolymorphicAsProp<E extends ElementType> = {\n as?: E;\n};\n\ntype PolymorphicProps<E extends ElementType> = PropsWithChildren<\n ComponentPropsWithoutRef<E> & PolymorphicAsProp<E>\n>;\n\ntype PolymorphicRef<E extends ElementType> = ComponentPropsWithRef<E>[\"ref\"];\n\nconst defaultElement = \"div\";\n\ntype SurfacePropsGeneric<E extends ElementType = typeof defaultElement> =\n PolymorphicProps<E> & SFSurfaceVariantsProps;\n\n/\n Surface component props.\n \n @example\n * ```tsx\n * <Surface className=\"rounded-lg p-4\">Card content</Surface>\n * <Surface as=\"section\" className=\"rounded-lg p-6\">Section content</Surface>\n * ```\n /\nexport interface SurfaceProps {\n /* The HTML element type to render as (e.g. `\"div\"`, `\"section\"`, `\"article\"`). @default \"div\" /\n as?: ElementType;\n /* Surface color variant. @default \"primary\" /\n color?: SFSurfaceColor;\n /* Additional CSS classes merged via `cn()`. /\n className?: string;\n /* Content rendered inside the surface. /\n children?: React.ReactNode;\n}\n\ntype SurfaceComponent = <E extends ElementType = typeof defaultElement>(\n props: SurfacePropsGeneric<E> & { ref?: PolymorphicRef<E> }\n) => React.JSX.Element;\n\n/\n Polymorphic container with consistent background, shadow, and border styling.\n \n @example\n * ```tsx\n * <Surface className=\"rounded-lg p-4\">Card content</Surface>\n * ```\n */\nconst SurfaceImpl = function ~~Surface~~<\n E extends ElementType = typeof defaultElement,\n>(\n { as, children, className, ...restProps }: SurfacePropsGeneric<E>,\n ref: PolymorphicRef<E>\n) {\n const Component = as ?? defaultElement;\n return (\n <Component\n ref={ref}\n {...restProps}\n className={cn(\"bg-sf-base shadow-xs ring ring-sf-line\", className)}\n >\n {children}\n </Component>\n );\n};\n\nexport const Surface = forwardRef(\n SurfaceImpl as any\n) as unknown as SurfaceComponent;\n"],"mappings":";;;;;AA8DA,IAAM,iBAAiB;AAuDvB,IAAa,UAAU,~~WAlBH~~,~~SAAS~~,~~QAG3B~~,EAAE,IAAI,UAAU,WAAW,GAAG,aAC9B,KACA;~~AAEA~~,~~QACE~~,oBAFgB,MAAM,gBAEtB;EACO;EACL,GAAI;EACJ,WAAW,GAAG,0CAA0C,~~UAAU~~;~~EAEjE~~;~~EACS~~,CAAA;~~EAMf~~"}
1	+ {"version":3,"file":"surface-CWdSFVUx.js","names":[],"sources":["../src/components/surface/surface.tsx"],"sourcesContent":["import React, {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type ElementType,\n type PropsWithChildren,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Surface color variant definitions. /\nexport const SF_SURFACE_VARIANTS = {\n color: {\n primary: {\n classes: \"\",\n description: \"Primary surface color\",\n },\n secondary: {\n classes: \"\",\n description: \"Secondary surface color\",\n },\n },\n} as const;\n\nexport const SF_SURFACE_DEFAULT_VARIANTS = {\n color: \"primary\",\n} as const;\n\n// Derived types from SF_SURFACE_VARIANTS\nexport type SFSurfaceColor = keyof typeof SF_SURFACE_VARIANTS.color;\n\nexport interface SFSurfaceVariantsProps {\n /\n Surface color variant.\n * - `\"primary\"` — Primary surface color\n * - `\"secondary\"` — Secondary surface color\n * @default \"primary\"\n /\n color?: SFSurfaceColor;\n}\n\nexport function surfaceVariants({\n color = SF_SURFACE_DEFAULT_VARIANTS.color,\n}: SFSurfaceVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-xs ring ring-sf-line\",\n // Apply color-specific styles\n SF_SURFACE_VARIANTS.color[color].classes\n );\n}\n\ntype PolymorphicAsProp<E extends ElementType> = {\n as?: E;\n};\n\ntype PolymorphicProps<E extends ElementType> = PropsWithChildren<\n ComponentPropsWithoutRef<E> & PolymorphicAsProp<E>\n>;\n\ntype PolymorphicRef<E extends ElementType> = ComponentPropsWithRef<E>[\"ref\"];\n\nconst defaultElement = \"div\";\n\ntype SurfacePropsGeneric<E extends ElementType = typeof defaultElement> =\n PolymorphicProps<E> & SFSurfaceVariantsProps;\n\n/\n Surface component props.\n \n @example\n * ```tsx\n * <Surface className=\"rounded-lg p-4\">Card content</Surface>\n * <Surface as=\"section\" className=\"rounded-lg p-6\">Section content</Surface>\n * ```\n /\nexport interface SurfaceProps {\n /* The HTML element type to render as (e.g. `\"div\"`, `\"section\"`, `\"article\"`). @default \"div\" /\n as?: ElementType;\n /* Surface color variant. @default \"primary\" /\n color?: SFSurfaceColor;\n /* Additional CSS classes merged via `cn()`. /\n className?: string;\n /* Content rendered inside the surface. /\n children?: React.ReactNode;\n}\n\ntype SurfaceComponent = <E extends ElementType = typeof defaultElement>(\n props: SurfacePropsGeneric<E> & { ref?: PolymorphicRef<E> }\n) => React.JSX.Element;\n\n/\n Polymorphic container with consistent background, shadow, and border styling.\n \n @example\n * ```tsx\n * <Surface className=\"rounded-lg p-4\">Card content</Surface>\n * ```\n */\nconst SurfaceImpl = function SurfaceImpl<\n E extends ElementType = typeof defaultElement,\n>(\n { as, children, className, ...restProps }: SurfacePropsGeneric<E>,\n ref: PolymorphicRef<E>\n) {\n const Component = as ?? defaultElement;\n return (\n <Component\n ref={ref}\n {...restProps}\n className={cn(\"bg-sf-base shadow-xs ring ring-sf-line\", className)}\n >\n {children}\n </Component>\n );\n};\n\nexport const Surface = forwardRef(\n SurfaceImpl as any\n) as unknown as SurfaceComponent;\n"],"mappings":";;;;;AA8DA,IAAM,iBAAiB;AAuDvB,IAAa,UAAU,WACrB,SAnB2B,YAG3B,EAAE,IAAI,UAAU,WAAW,GAAG,aAC9B,KACA;CAEA,OACE,oBAFgB,MAAM,gBAEtB;EACO;EACL,GAAI;EACJ,WAAW,GAAG,0CAA0C,SAAS;EAEhE;CACQ,CAAA;AAEf,CAIA"}

package/dist/{switch-CzZBRBL7.js → switch-TA4cByCJ.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Field } from "./field-Y_UK1_Cg.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Field } from "./field-DBpFzzBS.js";
 import { createContext, forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react/fieldset";
@@ -61,7 +61,7 @@ var SwitchBase = forwardRef(({ className, checked, disabled, size = "base", vari
 				"hover:bg-sf-danger/90": state.checked && !transitioning && !disabled && variant === "error",
 				"hover:bg-sf-interact": !state.checked && !transitioning && !disabled,
 				"cursor-not-allowed opacity-50": disabled
-			}, transitioning ? "cursor-wait" : !disabled ? "cursor-pointer" : "", className, baseClassName);
+			}, transitioning ? "cursor-wait" : disabled ? "" : "cursor-pointer", className, baseClassName);
 			const role = props.role ?? baseRole ?? "switch";
 			const checkedA11yProps = role === "switch" ? { "aria-checked": state.checked } : { "aria-pressed": state.checked };
 			return /* @__PURE__ */ jsx("button", {
@@ -110,7 +110,7 @@ var SwitchItem = forwardRef(({ className, checked, disabled, size = "base", vari
 					"hover:bg-sf-danger/90": state.checked && !transitioning && !disabled && variant === "error",
 					"hover:bg-sf-interact": !state.checked && !transitioning && !disabled,
 					"cursor-not-allowed opacity-50": disabled
-				}, transitioning ? "cursor-wait" : !disabled ? "cursor-pointer" : "", baseClassName);
+				}, transitioning ? "cursor-wait" : disabled ? "" : "cursor-pointer", baseClassName);
 				const role = baseRole ?? "switch";
 				const checkedA11yProps = role === "switch" ? { "aria-checked": state.checked } : { "aria-pressed": state.checked };
 				return /* @__PURE__ */ jsx("button", {
@@ -166,4 +166,4 @@ Switch$1.displayName = "Switch";
 //#endregion
 export { SF_SWITCH_VARIANTS as n, Switch$1 as r, SF_SWITCH_DEFAULT_VARIANTS as t };
-//# sourceMappingURL=switch-CzZBRBL7.js.map
+//# sourceMappingURL=switch-TA4cByCJ.js.map

package/dist/switch-TA4cByCJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"switch-TA4cByCJ.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-Rv4JMy0B.js → table-BM8JBGBs.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Checkbox } from "./checkbox-DYhUmZNw.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Checkbox } from "./checkbox-Cy_OCyay.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table/table.tsx
@@ -197,4 +197,4 @@ var Table = Object.assign(TableRoot, {
 //#endregion
 export { SF_TABLE_VARIANTS as n, Table as r, SF_TABLE_DEFAULT_VARIANTS as t };
-//# sourceMappingURL=table-Rv4JMy0B.js.map
+//# sourceMappingURL=table-BM8JBGBs.js.map

package/dist/{table-Rv4JMy0B.js.map → table-BM8JBGBs.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-Rv4JMy0B.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":"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"}
1	+ {"version":3,"file":"table-BM8JBGBs.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":"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"}

package/dist/{tabs-1cHrYoel.js → tabs-bnH2vGLv.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/tabs.tsx
@@ -51,4 +51,4 @@ function Tabs$1({ tabs, value, selectedValue, onValueChange, activateOnFocus, cl
 //#endregion
 export { Tabs$1 as t };
-//# sourceMappingURL=tabs-1cHrYoel.js.map
+//# sourceMappingURL=tabs-bnH2vGLv.js.map

package/dist/{tabs-1cHrYoel.js.map → tabs-bnH2vGLv.js.map} RENAMED Viewed

	@@ -1 +1 @@
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~~"}
1	+ {"version":3,"file":"tabs-bnH2vGLv.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,YACX;;;;;;;;;;;;;;;;AAsGA,SAAgB,OAAK,EACnB,MACA,OACA,eACA,eACA,iBACA,WACA,eACA,oBACA,UAAU,yBAAyB,WACvB;CACZ,MAAM,QAAoB,QAAQ,CAAC;CAEnC,IAAI,MAAM,WAAW,GACnB,OAAO;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;CAC7D;CAEA,MAAM,cAAc,YAAY;CAChC,MAAM,cAAc,YAAY;CAChC,MAAM,SAAS,YAAY;CAE3B,OACE,qBAAC,KAAc,MAAf;EACE,GAAI;EACJ,WAAW,GAAG,gCAAgC,SAAS;EACvD,gBAAgB,cAAc;GAE5B,gBADoB,OAAO,SACX,CAAW;EAC7B;YANF,EASI,eAAe,WACf,oBAAC,OAAD,EACE,WAAW,GACT,sEACA,eAAe,cACf,UAAU,QACZ,EACD,CAAA,GAEH,qBAAC,KAAc,MAAf;GACmB;GACjB,WAAW,GACT,6DACA,eAAe,qCACf,eAAe,0CACf,UAAU,aACV,aACF;aARF,CAUG,MAAM,KAAK,QACV,oBAAC,KAAc,KAAf;IAEE,OAAO,IAAI;IACX,WAAW,GACT,8KACA,eACE,iGACF,eACE,8GACF,UACE,wLACF,IAAI,SACN;cAEC,IAAI;GACY,GAdZ,IAAI,KAcQ,CACpB,GACD,oBAAC,KAAc,WAAf,EACE,WAAW,GACT,wEACA,kEACA,mDACA,eACE,6GACF,eAAe,8BACf,UAAU,UACV,kBACF,EACD,CAAA,CACiB;IACF;;AAExB"}

package/dist/{text-KJmGkwnf.js → text-iQ0YUFNg.js} RENAMED Viewed

@@ -1,5 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as MeasuredText } from "./measured-text-CXkdw9Yr.js";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text/text.tsx
@@ -62,18 +63,24 @@ var SF_TEXT_VARIANTS = {
 		}
 	}
 };
+function getDefaultWrap(_variant) {
+	return "natural";
+}
 /**
 * 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).
 *
+* Now includes pretext-driven layout for precise wrapping and spacing.
+*
 * @example
 * ```tsx
 * <Text variant="heading1">Dashboard</Text>
 * <Text>Default body text</Text>
+* <Text wrap="shrink">Compact bubble</Text>
 * ```
 */
-function _Text({ variant = "body", bold = false, size = "base", children, DANGEROUS_className, DANGEROUS_style, as, ...props }, ref) {
+function _Text({ variant = "body", bold = false, size = "base", children, DANGEROUS_className, DANGEROUS_style, as, wrap, reserveLines, ...props }, ref) {
 	const isCopy = [
 		"body",
 		"secondary",
@@ -81,23 +88,37 @@ function _Text({ variant = "body", bold = false, size = "base", children, DANGER
 		"error"
 	].includes(variant);
 	const isMono = ["mono", "mono-secondary"].includes(variant);
-	return /* @__PURE__ */ jsx(useMemo(() => {
+	const Component = 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]), {
+	}, [variant, as]);
+	const effectiveWrap = wrap ?? getDefaultWrap(variant);
+	const 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);
+	if (effectiveWrap !== "natural" && effectiveWrap !== false) return /* @__PURE__ */ jsx(MeasuredText, {
+		ref,
+		as: Component,
+		wrap: effectiveWrap,
+		reserveLines,
+		className,
+		style: DANGEROUS_style,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Component, {
 		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),
+		className,
 		style: DANGEROUS_style,
 		...props,
 		children
 	});
 }
 var Text = forwardRef(_Text);
+Text.displayName = "Text";
 //#endregion
 export { Text as t };
-//# sourceMappingURL=text-KJmGkwnf.js.map
+//# sourceMappingURL=text-iQ0YUFNg.js.map

package/dist/text-iQ0YUFNg.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"text-iQ0YUFNg.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\";\nimport { MeasuredText, type MeasuredTextMode } from \"../../utils/measured-text\";\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 * Text layout strategy using pretext-driven measurement.\n * - `\"natural\"` — No measurement, normal browser wrapping (default for body).\n * - `\"balance\"` — Even wrapping, smallest maxWidth without adding lines (default for headings).\n * - `\"shrink\"` — Hug widest natural line (maxWidth = line width). Good for chat bubbles.\n * - `\"reserve\"` — Reserve height based on line count. Good for streaming text.\n * - `false` — Same as `\"natural\"`, explicit opt-out.\n * @default \"balance\" for headings, \"natural\" for body/mono/secondary.\n */\n wrap?: MeasuredTextMode | false;\n /**\n * For `wrap=\"reserve\"`: reserve this many lines of height.\n * If omitted, measures current content to determine line count.\n */\n reserveLines?: number;\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 * <Text wrap=\"shrink\">Hug content width</Text>\n * <Text wrap=\"reserve\" reserveLines={3}>Streaming content...</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 * Text layout strategy using pretext-driven measurement.\n * - `\"natural\"` — No measurement, normal browser wrapping (default for body).\n * - `\"balance\"` — Even wrapping, smallest maxWidth without adding lines (default for headings).\n * - `\"shrink\"` — Hug widest natural line (maxWidth = line width). Good for chat bubbles.\n * - `\"reserve\"` — Reserve height based on line count. Good for streaming text.\n * @default \"natural\" for all variants. Set `wrap=\"balance\"` explicitly to\n * enable balanced wrapping (only reliable inside width-constrained containers).\n */\n wrap?: MeasuredTextMode | false;\n /**\n * For `wrap=\"reserve\"`: reserve this many lines of height.\n * If omitted, measures current content to determine line count.\n */\n reserveLines?: number;\n}\n\nfunction getDefaultWrap(_variant: TextVariant): MeasuredTextMode | false {\n return \"natural\";\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 * Now includes pretext-driven layout for precise wrapping and spacing.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\">Dashboard</Text>\n * <Text>Default body text</Text>\n * <Text wrap=\"shrink\">Compact bubble</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 wrap,\n reserveLines,\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 const effectiveWrap = wrap ?? getDefaultWrap(variant);\n const 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\n // Use MeasuredText for non-natural modes, or when reserveLines is set\n if (effectiveWrap !== \"natural\" && effectiveWrap !== false) {\n return (\n <MeasuredText\n ref={ref as React.RefObject<HTMLElement>}\n as={Component}\n wrap={effectiveWrap}\n reserveLines={reserveLines}\n className={className}\n style={DANGEROUS_style}\n {...props}\n >\n {children}\n </MeasuredText>\n );\n }\n\n // Natural mode: render directly without measurement overhead\n return (\n <Component\n ref={ref}\n className={className}\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 & { displayName?: string };\n\n// Cast needed because of the complex forwardRef type signature\n(Text as { displayName?: string }).displayName = \"Text\";\n"],"mappings":";;;;;;;AAcA,IAAa,mBAAmB;CAC9B,SAAS;EACP,UAAU;GACR,SAAS;GACT,aAAa;EACf;EACA,UAAU;GACR,SAAS;GACT,aAAa;EACf;EACA,UAAU;GACR,SAAS;GACT,aAAa;EACf;EACA,MAAM;GACJ,SAAS;GACT,aAAa;EACf;EACA,WAAW;GACT,SAAS;GACT,aAAa;EACf;EACA,SAAS;GACP,SAAS;GACT,aAAa;EACf;EACA,OAAO;GACL,SAAS;GACT,aAAa;EACf;EACA,MAAM;GACJ,SAAS;GACT,aAAa;EACf;EACA,kBAAkB;GAChB,SAAS;GACT,aAAa;EACf;CACF;CACA,MAAM;EACJ,IAAI;GACF,SAAS;GACT,aAAa;EACf;EACA,IAAI;GACF,SAAS;GACT,aAAa;EACf;EACA,MAAM;GACJ,SAAS;GACT,aAAa;EACf;EACA,IAAI;GACF,SAAS;GACT,aAAa;EACf;CACF;AACF;AAmLA,SAAS,eAAe,UAAiD;CACvE,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAS,MACP,EACE,UAAU,QACV,OAAO,OACP,OAAO,QACP,UACA,qBACA,iBACA,IACA,MACA,cACA,GAAG,SAEL,KACA;CACA,MAAM,SAAS;EAAC;EAAQ;EAAa;EAAW;CAAO,EAAE,SAAS,OAAO;CACzE,MAAM,SAAS,CAAC,QAAQ,gBAAgB,EAAE,SAAS,OAAO;CAE1D,MAAM,YAAY,cAAc;EAC9B,IAAI,IAAI,OAAO;EACf,IAAI,YAAY,YAAY,OAAO;EACnC,IAAI,YAAY,YAAY,OAAO;EACnC,IAAI,YAAY,YAAY,OAAO;EACnC,IAAI,CAAC,QAAQ,gBAAgB,EAAE,SAAS,OAAO,GAAG,OAAO;EACzD,OAAO;CACT,GAAG,CAAC,SAAS,EAAE,CAAC;CAEhB,MAAM,gBAAgB,QAAQ,eAAe,OAAO;CACpD,MAAM,YAAY,GAChB,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,mBACF;CAGA,IAAI,kBAAkB,aAAa,kBAAkB,OACnD,OACE,oBAAC,cAAD;EACO;EACL,IAAI;EACJ,MAAM;EACQ;EACH;EACX,OAAO;EACP,GAAI;EAEH;CACW,CAAA;CAKlB,OACE,oBAAC,WAAD;EACO;EACM;EACX,OAAO;EACP,GAAI;EAEH;CACQ,CAAA;AAEf;AAEA,IAAa,OAAO,WAAW,KAAK;AAOpC,KAAmC,cAAc"}

package/dist/{text-roll-BZ3I1umc.js → text-roll-C3U2jd2u.js} RENAMED Viewed

@@ -12,6 +12,9 @@ var DEFAULT_VARIANTS = {
 		animate: { rotateX: 0 }
 	}
 };
+var DEFAULT_TRANSITION = { ease: "easeIn" };
+var defaultEnterDelay = (index) => index * .1;
+var defaultExitDelay = (index) => index * .1 + .2;
 /**
 * Letter-by-letter roll animation. Each character flips on the X axis: the
 * current letter rolls up and out, the new letter rolls in from below.
@@ -27,7 +30,7 @@ var DEFAULT_VARIANTS = {
 * <TextRoll key={title}>{title}</TextRoll>
 * ```
 */
-function TextRoll({ children, duration = .5, getEnterDelay = (i) => i * .1, getExitDelay = (i) => i * .1 + .2, className, transition = { ease: "easeIn" }, variants, onAnimationComplete }) {
+function TextRoll({ children, duration = .5, getEnterDelay = defaultEnterDelay, getExitDelay = defaultExitDelay, className, transition = DEFAULT_TRANSITION, variants, onAnimationComplete }) {
 	const letters = children.split("");
 	return /* @__PURE__ */ jsxs("span", {
 		className,
@@ -76,4 +79,4 @@ TextRoll.displayName = "TextRoll";
 //#endregion
 export { TextRoll as t };
-//# sourceMappingURL=text-roll-BZ3I1umc.js.map
+//# sourceMappingURL=text-roll-C3U2jd2u.js.map

package/dist/text-roll-C3U2jd2u.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"text-roll-C3U2jd2u.js","names":[],"sources":["../src/components/text-roll/text-roll.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n motion,\n type Target,\n type TargetAndTransition,\n type Transition,\n type VariantLabels,\n} from \"motion/react\";\n\nexport type TextRollVariants = {\n enter: {\n initial: Target | VariantLabels | boolean;\n animate: TargetAndTransition | VariantLabels;\n };\n exit: {\n initial: Target | VariantLabels | boolean;\n animate: TargetAndTransition | VariantLabels;\n };\n};\n\nexport type TextRollProps = {\n /** Text to animate. Each character rolls in / out independently. */\n children: string;\n /** Duration (seconds) of each letter's enter and exit tween. */\n duration?: number;\n /** Per-letter delay for the enter animation. */\n getEnterDelay?: (index: number) => number;\n /** Per-letter delay for the exit animation. */\n getExitDelay?: (index: number) => number;\n /** Additional CSS classes merged via `cn()`. Use sf semantic tokens only. */\n className?: string;\n /** Shared transition for both enter and exit tweens. */\n transition?: Transition;\n /** Override the default rotate-X roll with custom enter/exit variants. */\n variants?: TextRollVariants;\n /** Fires once the last letter's exit animation finishes. */\n onAnimationComplete?: () => void;\n};\n\nconst DEFAULT_VARIANTS: TextRollVariants = {\n enter: {\n initial: { rotateX: 0 },\n animate: { rotateX: 90 },\n },\n exit: {\n initial: { rotateX: 90 },\n animate: { rotateX: 0 },\n },\n};\n\nconst DEFAULT_TRANSITION: Transition = { ease: \"easeIn\" };\nconst defaultEnterDelay = (index: number) => index * 0.1;\nconst defaultExitDelay = (index: number) => index * 0.1 + 0.2;\n\n/**\n * Letter-by-letter roll animation. Each character flips on the X axis: the\n * current letter rolls up and out, the new letter rolls in from below.\n * Good for title changes (e.g. a streaming activity group swapping its\n * current-step label) where the text content is short and the change should\n * register visually.\n *\n * Wraps the string in an `aria-hidden` visual stack with a screen-reader-only\n * copy of the full text so a11y tools always read the real content.\n *\n * @example\n * ```tsx\n * <TextRoll key={title}>{title}</TextRoll>\n * ```\n */\nexport function TextRoll({\n children,\n duration = 0.5,\n getEnterDelay = defaultEnterDelay,\n getExitDelay = defaultExitDelay,\n className,\n transition = DEFAULT_TRANSITION,\n variants,\n onAnimationComplete,\n}: TextRollProps) {\n const letters = children.split(\"\");\n\n return (\n <span className={className}>\n {letters.map((letter, i) => {\n const display = letter === \" \" ? \"\\u00A0\" : letter;\n return (\n <span\n aria-hidden=\"true\"\n className=\"relative inline-block [perspective:10000px] [transform-style:preserve-3d] [width:auto]\"\n // Using index is intentional — letters are positional.\n // biome-ignore lint/suspicious/noArrayIndexKey: positional char animation\n key={i}\n >\n <motion.span\n animate={\n variants?.enter?.animate ?? DEFAULT_VARIANTS.enter.animate\n }\n className=\"absolute inline-block [backface-visibility:hidden] [transform-origin:50%_25%]\"\n initial={\n variants?.enter?.initial ?? DEFAULT_VARIANTS.enter.initial\n }\n transition={{\n ...transition,\n duration,\n delay: getEnterDelay(i),\n }}\n >\n {display}\n </motion.span>\n <motion.span\n animate={variants?.exit?.animate ?? DEFAULT_VARIANTS.exit.animate}\n className=\"absolute inline-block [backface-visibility:hidden] [transform-origin:50%_100%]\"\n initial={variants?.exit?.initial ?? DEFAULT_VARIANTS.exit.initial}\n onAnimationComplete={\n letters.length === i + 1 ? onAnimationComplete : undefined\n }\n transition={{\n ...transition,\n duration,\n delay: getExitDelay(i),\n }}\n >\n {display}\n </motion.span>\n <span className=\"invisible\">{display}</span>\n </span>\n );\n })}\n <span className=\"sr-only\">{children}</span>\n </span>\n );\n}\n\nTextRoll.displayName = \"TextRoll\";\n"],"mappings":";;;;AAwCA,IAAM,mBAAqC;CACzC,OAAO;EACL,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS,EAAE,SAAS,GAAG;CACzB;CACA,MAAM;EACJ,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,EAAE;CACxB;AACF;AAEA,IAAM,qBAAiC,EAAE,MAAM,SAAS;AACxD,IAAM,qBAAqB,UAAkB,QAAQ;AACrD,IAAM,oBAAoB,UAAkB,QAAQ,KAAM;;;;;;;;;;;;;;;;AAiB1D,SAAgB,SAAS,EACvB,UACA,WAAW,IACX,gBAAgB,mBAChB,eAAe,kBACf,WACA,aAAa,oBACb,UACA,uBACgB;CAChB,MAAM,UAAU,SAAS,MAAM,EAAE;CAEjC,OACE,qBAAC,QAAD;EAAiB;YAAjB,CACG,QAAQ,KAAK,QAAQ,MAAM;GAC1B,MAAM,UAAU,WAAW,MAAM,SAAW;GAC5C,OACE,qBAAC,QAAD;IACE,eAAY;IACZ,WAAU;cAFZ;KAOE,oBAAC,OAAO,MAAR;MACE,SACE,UAAU,OAAO,WAAW,iBAAiB,MAAM;MAErD,WAAU;MACV,SACE,UAAU,OAAO,WAAW,iBAAiB,MAAM;MAErD,YAAY;OACV,GAAG;OACH;OACA,OAAO,cAAc,CAAC;MACxB;gBAEC;KACU,CAAA;KACb,oBAAC,OAAO,MAAR;MACE,SAAS,UAAU,MAAM,WAAW,iBAAiB,KAAK;MAC1D,WAAU;MACV,SAAS,UAAU,MAAM,WAAW,iBAAiB,KAAK;MAC1D,qBACE,QAAQ,WAAW,IAAI,IAAI,sBAAsB,KAAA;MAEnD,YAAY;OACV,GAAG;OACH;OACA,OAAO,aAAa,CAAC;MACvB;gBAEC;KACU,CAAA;KACb,oBAAC,QAAD;MAAM,WAAU;gBAAa;KAAc,CAAA;IACvC;MAlCC,CAkCD;EAEV,CAAC,GACD,oBAAC,QAAD;GAAM,WAAU;GAAW;EAAe,CAAA,CACtC;;AAEV;AAEA,SAAS,cAAc"}