@signalflare-ai/ui 0.5.0

package/dist/styles/theme-minimal.css

@@ -0,0 +1,127 @@
+/**
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * This file is generated by the theme generator.
+ * To modify tokens, edit: scripts/theme-generator/config.ts
+ * Then run: bun run codegen:themes
+ */
+
+[data-theme="minimal"] {
+  --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.10 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.10 0 0)
+  );
+  --color-sf-overlay: light-dark(
+    oklch(0.93 0 0),
+    oklch(0.10 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)
+  );
+  --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.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;
+  --shadow-xs: 0 0 0 0 transparent;
+  --shadow-sm: 0 0 0 0 transparent;
+  --shadow-md: 0 0 0 0 transparent;
+  --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-navigator.css

@@ -0,0 +1,137 @@
+/**
+ * Navigator Compatibility Layer
+ *
+ * Defines shadcn-style CSS variables so components copied from navigator's
+ * @repo/design-system work without class-name changes.
+ *
+ * Values sourced from navigator/packages/design-system/styles/globals.css.
+ * sf-* tokens in theme-sf.css reference some of these via var().
+ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* ─── Light mode ──────────────────────────────────────────────────────── */
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-900);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-900);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-900);
+}
+
+/* ─── Dark mode ───────────────────────────────────────────────────────── */
+
+.dark,
+[data-mode="dark"] {
+  --background: oklch(0.21 0.005 252);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.24 0.006 250);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.24 0.012 250);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.55 0.01 40);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.19 0.008 140);
+  --secondary-foreground: oklch(0.85 0 0);
+  --muted: oklch(0.22 0.01 250);
+  --muted-foreground: oklch(0.65 0 0);
+  --accent: oklch(0.26 0.015 250);
+  --accent-foreground: oklch(0.95 0 0);
+  --destructive: oklch(0.55 0.18 25);
+  --destructive-foreground: oklch(0.95 0 0);
+  --border: oklch(0.3 0.015 250);
+  --input: oklch(0.38 0.015 250);
+  --ring: oklch(0.439 0 0);
+  --sidebar: oklch(0.18 0.006 250);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-600);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-600);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-600);
+}

package/dist/styles/theme-sf.css

@@ -0,0 +1,191 @@
+/**
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * This file is generated by the theme generator.
+ * To modify tokens, edit: scripts/theme-generator/config.ts
+ * Then run: bun run codegen:themes
+ */
+
+
+@theme {
+  --text-color-sf-default: light-dark(
+    var(--foreground, oklch(0.145 0 0)),
+    var(--foreground, oklch(0.985 0 0))
+  );
+
+  --text-color-sf-inverse: light-dark(
+    var(--primary-foreground, oklch(0.985 0 0)),
+    var(--primary-foreground, oklch(0.145 0 0))
+  );
+
+  --text-color-sf-strong: light-dark(
+    var(--muted-foreground, oklch(0.556 0 0)),
+    var(--muted-foreground, oklch(0.65 0 0))
+  );
+
+  --text-color-sf-subtle: light-dark(
+    var(--color-neutral-500, oklch(55.6% 0 0)),
+    var(--color-neutral-50, oklch(98.5% 0 0))
+  );
+
+  --text-color-sf-inactive: light-dark(
+    var(--color-neutral-400, oklch(70.8% 0 0)),
+    var(--color-neutral-600, oklch(70.8% 0 0))
+  );
+
+  --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)),
+    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-danger: light-dark(
+    var(--destructive, oklch(0.577 0.245 27.325)),
+    var(--destructive, oklch(0.55 0.18 25))
+  );
+
+  --text-color-sf-warning: light-dark(
+    var(--color-yellow-800, oklch(47.6% 0.114 61.907)),
+    var(--color-yellow-400, oklch(85.2% 0.199 91.936))
+  );
+
+}
+
+@theme {
+  --color-sf-canvas: light-dark(
+    var(--color-neutral-50, oklch(0.985 0 0)),
+    var(--color-neutral-950, oklch(0.14 0 0))
+  );
+
+  --color-sf-base: light-dark(
+    var(--background, oklch(1 0 0)),
+    var(--background, oklch(0.21 0.005 252))
+  );
+
+  --color-sf-elevated: light-dark(
+    var(--color-neutral-25, oklch(0.99 0 0)),
+    var(--background, oklch(0.21 0.005 252))
+  );
+
+  --color-sf-recessed: light-dark(
+    var(--color-neutral-250, oklch(0.9 0 0)),
+    var(--color-neutral-750, oklch(0.31 0 0))
+  );
+
+  --color-sf-overlay: light-dark(
+    var(--color-neutral-50, oklch(98.5% 0 0)),
+    var(--color-neutral-950, oklch(0.10 0 0))
+  );
+
+  --color-sf-contrast: light-dark(
+    var(--primary, oklch(0.205 0 0)),
+    var(--primary, oklch(0.55 0.01 40))
+  );
+
+  --color-sf-control: light-dark(
+    var(--color-white, #fff),
+    var(--color-neutral-900, oklch(21% 0.006 285.885))
+  );
+
+  --color-sf-tint: light-dark(
+    var(--color-neutral-150, oklch(0.96 0 0)),
+    var(--color-neutral-850, oklch(0.23 0 0))
+  );
+
+  --color-sf-interact: light-dark(
+    var(--border, oklch(0.922 0 0)),
+    var(--border, oklch(0.3 0.015 250))
+  );
+
+  --color-sf-fill: light-dark(
+    var(--color-neutral-200, oklch(92.2% 0 0)),
+    var(--color-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-sf-fill-hover: light-dark(
+    var(--color-neutral-200, oklch(92.2% 0 0)),
+    var(--color-neutral-700, oklch(37.1% 0 0))
+  );
+
+  --color-sf-brand: light-dark(
+    oklch(0.5772 0.2324 260),
+    oklch(0.5772 0.2324 260)
+  );
+
+  --color-sf-brand-hover: light-dark(
+    var(--color-blue-700, oklch(48.8% 0.243 264.376)),
+    var(--color-blue-700, oklch(48.8% 0.243 264.376))
+  );
+
+  --color-sf-line: light-dark(
+    var(--border, oklch(0.922 0 0)),
+    var(--border, oklch(0.3 0.015 250))
+  );
+
+  --color-sf-ring: light-dark(
+    var(--ring, oklch(0.708 0 0)),
+    var(--ring, oklch(0.465 0.015 250))
+  );
+
+  --color-sf-tip-shadow: light-dark(
+    var(--color-gray-200, oklch(92.8% 0.006 264.531)),
+    transparent
+  );
+
+  --color-sf-tip-stroke: light-dark(
+    transparent,
+    var(--color-neutral-800, oklch(26.9% 0 0))
+  );
+
+  --color-sf-info: light-dark(
+    var(--color-blue-500, oklch(62.3% 0.214 259.815)),
+    var(--color-blue-700, oklch(48.8% 0.243 264.376))
+  );
+
+  --color-sf-info-tint: light-dark(
+    var(--color-blue-300, oklch(80.9% 0.105 251.813)),
+    var(--color-blue-900, oklch(37.9% 0.146 265.522))
+  );
+
+  --color-sf-warning: light-dark(
+    var(--color-yellow-500, oklch(79.5% 0.184 86.047)),
+    var(--color-yellow-700, oklch(55.4% 0.135 66.442))
+  );
+
+  --color-sf-warning-tint: light-dark(
+    var(--color-yellow-300, oklch(90.5% 0.182 98.111)),
+    var(--color-yellow-900, oklch(42.1% 0.095 57.708))
+  );
+
+  --color-sf-danger: light-dark(
+    var(--destructive, oklch(0.577 0.245 27.325)),
+    var(--destructive, oklch(0.55 0.18 25))
+  );
+
+  --color-sf-danger-tint: light-dark(
+    var(--color-red-300, oklch(80.8% 0.114 19.571)),
+    var(--color-red-900, oklch(39.6% 0.141 25.723))
+  );
+
+}
+
+@theme {
+  /* Typography - text sizes and line heights */
+  --text-xs: 12px;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 13px;
+  --text-sm--line-height: calc(1 / 0.85);
+  --text-base: 14px;
+  --text-base--line-height: calc(1.25 / 0.875);
+  --text-lg: 16px;
+  --text-lg--line-height: calc(1.25 / 1);
+}

package/dist/surface-BduI7Ehl.js

@@ -0,0 +1,18 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.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) {
+	return /* @__PURE__ */ jsx(as ?? defaultElement, {
+		ref,
+		...restProps,
+		className: cn("bg-sf-base shadow-xs ring ring-sf-line", className),
+		children
+	});
+});
+//#endregion
+export { Surface as t };
+
+//# sourceMappingURL=surface-BduI7Ehl.js.map

package/dist/surface-BduI7Ehl.js.map

@@ -0,0 +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"}

package/dist/switch-CzZBRBL7.js

@@ -0,0 +1,169 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Field } from "./field-Y_UK1_Cg.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch/switch.tsx
+/** Switch size and variant definitions mapping names to their Tailwind classes. */
+var SF_SWITCH_VARIANTS = {
+	size: {
+		sm: {
+			classes: "h-5.5 w-8.5",
+			description: "Small switch for compact UIs"
+		},
+		base: {
+			classes: "h-6.5 w-10.5",
+			description: "Default switch size"
+		},
+		lg: {
+			classes: "h-7.5 w-12.5",
+			description: "Large switch for prominent toggles"
+		}
+	},
+	variant: {
+		default: {
+			classes: "",
+			description: "Default switch appearance"
+		},
+		error: {
+			classes: "ring-sf-danger",
+			description: "Error state for validation failures"
+		}
+	}
+};
+var SF_SWITCH_DEFAULT_VARIANTS = {
+	size: "base",
+	variant: "default"
+};
+function switchVariants({ size = SF_SWITCH_DEFAULT_VARIANTS.size, variant = SF_SWITCH_DEFAULT_VARIANTS.variant } = {}) {
+	return cn(SF_SWITCH_VARIANTS.size[size].classes, SF_SWITCH_VARIANTS.variant[variant].classes);
+}
+var SwitchGroupContext = createContext({ controlFirst: true });
+var SwitchBase = forwardRef(({ className, checked, disabled, size = "base", variant = "default", label, labelTooltip, required, controlFirst = true, onCheckedChange, transitioning, ...props }, ref) => {
+	const ariaLabelFallback = typeof label === "string" ? label : "Switch";
+	const switchControl = /* @__PURE__ */ jsx(Switch.Root, {
+		ref,
+		checked,
+		disabled,
+		onCheckedChange,
+		nativeButton: true,
+		render: (rootProps, state) => {
+			const { ref: rootRef, className: baseClassName, role: baseRole, "aria-checked": _ariaChecked, "aria-pressed": _ariaPressed, ...restRootProps } = rootProps;
+			const mergedClassName = cn("interactive flex items-center gap-2 rounded-full border border-transparent bg-sf-recessed p-1 transition-colors", switchVariants({
+				size,
+				variant
+			}), {
+				"bg-sf-brand": state.checked && !disabled && variant !== "error",
+				"bg-sf-danger": state.checked && !disabled && variant === "error",
+				"hover:bg-sf-brand-hover": state.checked && !transitioning && !disabled && variant !== "error",
+				"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);
+			const role = props.role ?? baseRole ?? "switch";
+			const checkedA11yProps = role === "switch" ? { "aria-checked": state.checked } : { "aria-pressed": state.checked };
+			return /* @__PURE__ */ jsx("button", {
+				...restRootProps,
+				...props,
+				ref: rootRef,
+				type: "button",
+				role,
+				...checkedA11yProps,
+				"aria-busy": transitioning || void 0,
+				"aria-label": props["aria-label"] ?? ariaLabelFallback,
+				className: mergedClassName,
+				children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cn("pointer-events-none aspect-square h-full rounded-full bg-white transition-all", { "translate-x-full rtl:translate-x-[-100%]": state.checked }) })
+			});
+		}
+	});
+	if (!label) return switchControl;
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		required,
+		labelTooltip,
+		controlFirst,
+		children: switchControl
+	});
+});
+SwitchBase.displayName = "Switch";
+var SwitchItem = forwardRef(({ className, checked, disabled, size = "base", variant = "default", label, onCheckedChange, transitioning }, ref) => {
+	const { controlFirst } = useContext(SwitchGroupContext);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("relative inline-flex items-center gap-2", !controlFirst && "flex-row-reverse justify-end", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx(Switch.Root, {
+			ref,
+			checked,
+			disabled,
+			onCheckedChange,
+			nativeButton: true,
+			render: (rootProps, state) => {
+				const { ref: rootRef, className: baseClassName, role: baseRole, "aria-checked": _ariaChecked, "aria-pressed": _ariaPressed, ...restRootProps } = rootProps;
+				const mergedClassName = cn("interactive flex items-center gap-2 rounded-full border border-transparent bg-sf-recessed p-1 transition-colors", switchVariants({
+					size,
+					variant
+				}), {
+					"bg-sf-brand": state.checked && !disabled && variant !== "error",
+					"bg-sf-danger": state.checked && !disabled && variant === "error",
+					"hover:bg-sf-brand-hover": state.checked && !transitioning && !disabled && variant !== "error",
+					"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);
+				const role = baseRole ?? "switch";
+				const checkedA11yProps = role === "switch" ? { "aria-checked": state.checked } : { "aria-pressed": state.checked };
+				return /* @__PURE__ */ jsx("button", {
+					...restRootProps,
+					ref: rootRef,
+					type: "button",
+					role,
+					...checkedA11yProps,
+					"aria-busy": transitioning || void 0,
+					className: mergedClassName,
+					children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cn("pointer-events-none aspect-square h-full rounded-full bg-white transition-all", { "translate-x-full rtl:translate-x-[-100%]": state.checked }) })
+				});
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-base font-medium text-sf-default",
+			children: label
+		})]
+	});
+});
+SwitchItem.displayName = "Switch.Item";
+function SwitchGroup({ legend, children, error, description, disabled, controlFirst = true, className }) {
+	return /* @__PURE__ */ jsx(SwitchGroupContext.Provider, {
+		value: { controlFirst },
+		children: /* @__PURE__ */ jsxs(Fieldset.Root, {
+			className: cn("flex flex-col gap-4 rounded-lg border border-sf-line p-4", className),
+			disabled,
+			children: [
+				/* @__PURE__ */ jsx(Fieldset.Legend, {
+					className: "text-lg font-medium text-sf-default",
+					children: legend
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-sf-danger",
+					children: error
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-sf-subtle",
+					children: description
+				})
+			]
+		})
+	});
+}
+var Switch$1 = Object.assign(SwitchBase, {
+	Item: SwitchItem,
+	Group: SwitchGroup
+});
+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