@signalflare-ai/ui 1.0.0 → 1.2.0

package/dist/styles/theme-minimal.css

@@ -7,36 +7,114 @@
  */
 
 [data-theme="minimal"] {
-  --text-color-sf-strong: light-dark(oklch(0.5 0 0), oklch(0.55 0 0));
-  --text-color-sf-subtle: light-dark(oklch(0.55 0 0), oklch(0.45 0 0));
-  --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-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-brand: light-dark(oklch(0.55 0.06 260), oklch(0.55 0.06 260));
+  --text-color-sf-strong: light-dark(
+    oklch(0.50 0 0),
+    oklch(0.55 0 0)
+  );
+  --text-color-sf-subtle: light-dark(
+    oklch(0.55 0 0),
+    oklch(0.45 0 0)
+  );
+  --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.10 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.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.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),
     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-ring: light-dark(oklch(0.65 0 0), oklch(0.45 0 0));
-  --color-sf-tip-shadow: light-dark(transparent, transparent);
-  --color-sf-tip-stroke: light-dark(transparent, transparent);
-  --color-sf-info: light-dark(oklch(0.55 0.06 260), oklch(0.55 0.06 260));
-  --color-sf-info-tint: light-dark(oklch(0.94 0.01 260), oklch(0.2 0.02 260));
-  --color-sf-warning: light-dark(oklch(0.55 0.08 66), oklch(0.65 0.08 66));
-  --color-sf-warning-tint: light-dark(oklch(0.94 0.02 60), oklch(0.22 0.03 60));
-  --color-sf-danger: light-dark(oklch(0.55 0.12 25), oklch(0.55 0.1 25));
-  --color-sf-danger-tint: light-dark(oklch(0.94 0.02 25), oklch(0.2 0.04 25));
+  --color-sf-line: light-dark(
+    oklch(0.85 0 0 / 0.5),
+    oklch(0.25 0 0 / 0.5)
+  );
+  --color-sf-ring: light-dark(
+    oklch(0.65 0 0),
+    oklch(0.45 0 0)
+  );
+  --color-sf-tip-shadow: light-dark(
+    transparent,
+    transparent
+  );
+  --color-sf-tip-stroke: light-dark(
+    transparent,
+    transparent
+  );
+  --color-sf-info: light-dark(
+    oklch(0.55 0.06 260),
+    oklch(0.55 0.06 260)
+  );
+  --color-sf-info-tint: light-dark(
+    oklch(0.94 0.01 260),
+    oklch(0.20 0.02 260)
+  );
+  --color-sf-warning: light-dark(
+    oklch(0.55 0.08 66),
+    oklch(0.65 0.08 66)
+  );
+  --color-sf-warning-tint: light-dark(
+    oklch(0.94 0.02 60),
+    oklch(0.22 0.03 60)
+  );
+  --color-sf-danger: light-dark(
+    oklch(0.55 0.12 25),
+    oklch(0.55 0.10 25)
+  );
+  --color-sf-danger-tint: light-dark(
+    oklch(0.94 0.02 25),
+    oklch(0.20 0.04 25)
+  );
 
   /* Shadow overrides — flatten all elevation */
   --shadow-2xs: 0 0 0 0 transparent;

package/dist/styles/theme-sf.css

@@ -6,18 +6,37 @@
  * Then run: bun run codegen:themes
  */
 
+
 @theme {
-  --text-color-sf-default: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --text-color-sf-default: light-dark(
+    oklch(0.145 0 0),
+    oklch(0.985 0 0)
+  );
 
-  --text-color-sf-inverse: light-dark(oklch(0.985 0 0), oklch(0.145 0 0));
+  --text-color-sf-inverse: light-dark(
+    oklch(0.985 0 0),
+    oklch(0.145 0 0)
+  );
 
-  --text-color-sf-strong: light-dark(oklch(0.45 0 0), oklch(0.8 0 0));
+  --text-color-sf-strong: light-dark(
+    oklch(0.45 0 0),
+    oklch(0.80 0 0)
+  );
 
-  --text-color-sf-subtle: light-dark(oklch(0.45 0 0), oklch(0.72 0 0));
+  --text-color-sf-subtle: light-dark(
+    oklch(0.45 0 0),
+    oklch(0.72 0 0)
+  );
 
-  --text-color-sf-inactive: light-dark(oklch(0.55 0 0), oklch(0.6 0 0));
+  --text-color-sf-inactive: light-dark(
+    oklch(0.55 0 0),
+    oklch(0.60 0 0)
+  );
 
-  --text-color-sf-brand: light-dark(#f6821f, #f6821f);
+  --text-color-sf-brand: light-dark(
+    #f6821f,
+    #f6821f
+  );
 
   --text-color-sf-link: light-dark(
     var(--color-blue-800, oklch(42.4% 0.199 265.638)),
@@ -25,68 +44,141 @@
   );
 
   --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))
+    #99ffe4,
+    #99ffe4
+  );
+
+  --text-color-sf-danger: light-dark(
+    oklch(0.50 0.15 25),
+    oklch(0.68 0.16 25)
   );
 
-  --text-color-sf-danger: light-dark(oklch(0.5 0.15 25), oklch(0.68 0.16 25));
+  --text-color-sf-warning: light-dark(
+    oklch(0.45 0.10 66),
+    oklch(0.78 0.12 80)
+  );
 
-  --text-color-sf-warning: light-dark(oklch(0.45 0.1 66), oklch(0.78 0.12 80));
 }
 
 @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-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.80 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));
+  --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),
     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-ring: light-dark(
+    oklch(0.55 0 0),
+    oklch(0.60 0 0)
+  );
 
-  --color-sf-tip-shadow: light-dark(transparent, transparent);
+  --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));
+  --color-sf-info: light-dark(
+    oklch(0.55 0.06 260),
+    oklch(0.55 0.06 260)
+  );
 
-  --color-sf-info-tint: light-dark(oklch(0.88 0.02 260), oklch(0.12 0.03 260));
+  --color-sf-info-tint: light-dark(
+    oklch(0.88 0.02 260),
+    oklch(0.12 0.03 260)
+  );
 
-  --color-sf-warning: light-dark(oklch(0.55 0.08 66), oklch(0.65 0.08 66));
+  --color-sf-warning: light-dark(
+    oklch(0.55 0.08 66),
+    oklch(0.65 0.08 66)
+  );
 
-  --color-sf-warning-tint: light-dark(oklch(0.94 0.02 60), oklch(0.22 0.03 60));
+  --color-sf-warning-tint: light-dark(
+    oklch(0.94 0.02 60),
+    oklch(0.22 0.03 60)
+  );
 
-  --color-sf-danger: light-dark(oklch(0.55 0.12 25), oklch(0.55 0.1 25));
+  --color-sf-danger: light-dark(
+    oklch(0.55 0.12 25),
+    oklch(0.55 0.10 25)
+  );
 
-  --color-sf-danger-tint: light-dark(oklch(0.94 0.02 25), oklch(0.16 0.04 25));
+  --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)
+    #99ffe4,
+    #99ffe4
   );
 
   --color-sf-chart-1: light-dark(
@@ -115,7 +207,7 @@
   );
 
   --color-sf-syntax-keyword: light-dark(
-    oklch(0.52 0.2 265),
+    oklch(0.52 0.20 265),
     oklch(0.72 0.19 255)
   );
 
@@ -129,10 +221,13 @@
     oklch(0.72 0.14 60)
   );
 
-  --color-sf-syntax-comment: light-dark(oklch(0.62 0 0), oklch(0.55 0 0));
+  --color-sf-syntax-comment: light-dark(
+    oklch(0.62 0 0),
+    oklch(0.55 0 0)
+  );
 
   --color-sf-syntax-jsxliterals: light-dark(
-    oklch(0.52 0.2 265),
+    oklch(0.52 0.20 265),
     oklch(0.72 0.19 255)
   );
 
@@ -146,7 +241,11 @@
     oklch(0.75 0.15 55)
   );
 
-  --color-sf-syntax-sign: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
+  --color-sf-syntax-sign: light-dark(
+    oklch(0.45 0 0),
+    oklch(0.70 0 0)
+  );
+
 }
 
 @theme {
@@ -170,4 +269,4 @@
   --shadow-lg: 0 0 0 0 transparent;
   --shadow-xl: 0 0 0 0 transparent;
   --shadow-2xl: 0 0 0 0 transparent;
-}
+}

package/dist/styles/theme-vesper.css

@@ -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-DGwRlC0o.js}

@@ -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-DGwRlC0o.js.map

package/dist/{surface-BduI7Ehl.js.map → surface-DGwRlC0o.js.map}

@@ -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"}
+{"version":3,"file":"surface-DGwRlC0o.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"}

package/dist/{switch-CzZBRBL7.js → switch-BxAMfHdt.js}

@@ -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 Field } from "./field-B_yVof52.js";
 import { createContext, forwardRef, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react/fieldset";
@@ -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-BxAMfHdt.js.map

package/dist/{switch-CzZBRBL7.js.map → switch-BxAMfHdt.js.map}

@@ -1 +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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"}
+{"version":3,"file":"switch-BxAMfHdt.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":";;;;;;;;;AAeA,IAAa,qBAAqB;CAChC,MAAM;EACJ,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACF;CACD,SAAS;EACP,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,OAAO;GACL,SAAS;GACT,aAAa;GACd;EACF;CACF;AAED,IAAa,6BAA6B;CACxC,MAAM;CACN,SAAS;CACV;AAwBD,SAAgB,eAAe,EAC7B,OAAO,2BAA2B,MAClC,UAAU,2BAA2B,YACZ,EAAE,EAAE;AAC7B,QAAO,GACL,mBAAmB,KAAK,MAAM,SAC9B,mBAAmB,QAAQ,SAAS,QACrC;;AAQH,IAAM,qBAAqB,cAAyC,EAClE,cAAc,MACf,CAAC;AAkGF,IAAM,aAAa,YAEf,EACE,WACA,SACA,UACA,OAAO,QACP,UAAU,WACV,OACA,cACA,UACA,eAAe,MACf,iBACA,eACA,GAAG,SAEL,QACG;CAEH,MAAM,oBAAoB,OAAO,UAAU,WAAW,QAAQ;CAC9D,MAAM,gBACJ,oBAAC,OAAW,MAAZ;EACO;EACI;EACC;EACO;EACjB,cAAA;EACA,SAAS,WAAW,UAAU;GAC5B,MAAM,EACJ,KAAK,SACL,WAAW,eACX,MAAM,UACN,gBAAgB,cAChB,gBAAgB,cAChB,GAAG,kBACD;GAQJ,MAAM,kBAAkB,GACtB,mHACA,eAAe;IAAE;IAAM;IAAS,CAAC,EACjC;IACE,eAAe,MAAM,WAAW,CAAC,YAAY,YAAY;IACzD,gBAAgB,MAAM,WAAW,CAAC,YAAY,YAAY;IAC1D,2BACE,MAAM,WACN,CAAC,iBACD,CAAC,YACD,YAAY;IACd,yBACE,MAAM,WACN,CAAC,iBACD,CAAC,YACD,YAAY;IACd,wBACE,CAAC,MAAM,WAAW,CAAC,iBAAiB,CAAC;IACvC,iCAAiC;IAClC,EACD,gBAAgB,gBAAgB,CAAC,WAAW,mBAAmB,IAC/D,WACA,cACD;GAED,MAAM,OACH,MAAM,QAA+B,YAAY;GACpD,MAAM,mBACJ,SAAS,WACL,EAAE,gBAAgB,MAAM,SAAS,GACjC,EAAE,gBAAgB,MAAM,SAAS;AAEvC,UACE,oBAAC,UAAD;IACE,GAAI;IACJ,GAAI;IACJ,KAAK;IACL,MAAK;IACC;IACN,GAAI;IACJ,aAAW,iBAAiB,KAAA;IAC5B,cAAY,MAAM,iBAAiB;IACnC,WAAW;cAEX,oBAAC,OAAW,OAAZ,EACE,WAAW,GACT,iFACA,EACE,4CAA4C,MAAM,SACnD,CACF,EACD,CAAA;IACK,CAAA;;EAGb,CAAA;AAKJ,KAAI,CAAC,MACH,QAAO;AAGT,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACA;YAEb;EACK,CAAA;EAGb;AAED,WAAW,cAAc;AAGzB,IAAM,aAAa,YAEf,EACE,WACA,SACA,UACA,OAAO,QACP,UAAU,WACV,OACA,iBACA,iBAEF,QACG;CACH,MAAM,EAAE,iBAAiB,WAAW,mBAAmB;AAEvD,QACE,qBAAC,SAAD;EACE,WAAW,GACT,2CAGA,CAAC,gBAAgB,gCACjB,WAAW,kCAAkC,kBAC7C,UACD;YARH,CAUE,oBAAC,OAAW,MAAZ;GACO;GACI;GACC;GACO;GACjB,cAAA;GACA,SAAS,WAAW,UAAU;IAC5B,MAAM,EACJ,KAAK,SACL,WAAW,eACX,MAAM,UACN,gBAAgB,cAChB,gBAAgB,cAChB,GAAG,kBACD;IAQJ,MAAM,kBAAkB,GACtB,mHACA,eAAe;KAAE;KAAM;KAAS,CAAC,EACjC;KACE,eACE,MAAM,WAAW,CAAC,YAAY,YAAY;KAC5C,gBACE,MAAM,WAAW,CAAC,YAAY,YAAY;KAC5C,2BACE,MAAM,WACN,CAAC,iBACD,CAAC,YACD,YAAY;KACd,yBACE,MAAM,WACN,CAAC,iBACD,CAAC,YACD,YAAY;KACd,wBACE,CAAC,MAAM,WAAW,CAAC,iBAAiB,CAAC;KACvC,iCAAiC;KAClC,EACD,gBAAgB,gBAAgB,CAAC,WAAW,mBAAmB,IAC/D,cACD;IAED,MAAM,OAAO,YAAY;IACzB,MAAM,mBACJ,SAAS,WACL,EAAE,gBAAgB,MAAM,SAAS,GACjC,EAAE,gBAAgB,MAAM,SAAS;AAEvC,WACE,oBAAC,UAAD;KACE,GAAI;KACJ,KAAK;KACL,MAAK;KACC;KACN,GAAI;KACJ,aAAW,iBAAiB,KAAA;KAC5B,WAAW;eAEX,oBAAC,OAAW,OAAZ,EACE,WAAW,GACT,iFACA,EACE,4CAA4C,MAAM,SACnD,CACF,EACD,CAAA;KACK,CAAA;;GAGb,CAAA,EACF,oBAAC,QAAD;GAAM,WAAU;aAAyC;GAAa,CAAA,CAChE;;EAGb;AAED,WAAW,cAAc;AAGzB,SAAS,YAAY,EACnB,QACA,UACA,OACA,aACA,UACA,eAAe,MACf,aACmB;AACnB,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO,EAAE,cAAc;YAClD,qBAAC,SAAS,MAAV;GACE,WAAW,GACT,4DACA,UACD;GACS;aALZ;IAOE,oBAAC,SAAS,QAAV;KAAiB,WAAU;eACxB;KACe,CAAA;IAClB,oBAAC,OAAD;KAAK,WAAU;KAAuB;KAAe,CAAA;IACpD,SAAS,oBAAC,KAAD;KAAG,WAAU;eAA0B;KAAU,CAAA;IAC1D,eAAe,oBAAC,KAAD;KAAG,WAAU;eAA0B;KAAgB,CAAA;IACzD;;EACY,CAAA;;AAKlC,IAAa,WAAS,OAAO,OAAO,YAAY;CAC9C,MAAM;CACN,OAAO;CACR,CAAC;AAEF,SAAO,cAAc"}

package/dist/{table-Rv4JMy0B.js → table-BBeAtYVZ.js}

@@ -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 Checkbox } from "./checkbox-D7p4QKsC.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-BBeAtYVZ.js.map