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

@signalflare-ai/ui 1.2.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 (317) hide show

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

@@ -7,114 +7,36 @@
  */
 [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.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)
-  );
+  --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.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.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)
-  );
+  --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));
   /* Shadow overrides — flatten all elevation */
   --shadow-2xs: 0 0 0 0 transparent;

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

@@ -6,180 +6,82 @@
  * 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.80 0 0)
-  );
+  --text-color-sf-strong: light-dark(oklch(0.45 0 0), oklch(0.8 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.60 0 0)
-  );
+  --text-color-sf-inactive: light-dark(oklch(0.55 0 0), oklch(0.6 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)),
     var(--color-blue-400, oklch(70.7% 0.165 254.624))
   );
-  --text-color-sf-success: light-dark(
-    #99ffe4,
-    #99ffe4
-  );
+  --text-color-sf-success: light-dark(#99ffe4, #99ffe4);
-  --text-color-sf-danger: light-dark(
-    oklch(0.50 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-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.1 66), oklch(0.78 0.12 80));
 }
 @theme {
-  --color-sf-canvas: light-dark(
-    oklch(0.95 0 0),
-    oklch(0.173 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-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-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-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-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.2264 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-tint: light-dark(oklch(0.94 0 0), oklch(0.2562 0 0));
-  --color-sf-interact: light-dark(
-    oklch(0.80 0 0),
-    oklch(0.2768 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.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-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),
-    #282828
-  );
+  --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.60 0 0)
-  );
+  --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-shadow: light-dark(transparent, transparent);
-  --color-sf-tip-stroke: light-dark(
-    transparent,
-    #282828
-  );
+  --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.10 25)
-  );
+  --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.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(
-    #99ffe4,
-    #99ffe4
-  );
+  --color-sf-success: light-dark(#99ffe4, #99ffe4);
   --color-sf-chart-1: light-dark(
     oklch(0.646 0.222 41.116),
@@ -207,7 +109,7 @@
   );
   --color-sf-syntax-keyword: light-dark(
-    oklch(0.52 0.20 265),
+    oklch(0.52 0.2 265),
     oklch(0.72 0.19 255)
   );
@@ -221,13 +123,10 @@
     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.20 265),
+    oklch(0.52 0.2 265),
     oklch(0.72 0.19 255)
   );
@@ -241,11 +140,7 @@
     oklch(0.75 0.15 55)
   );
-  --color-sf-syntax-sign: light-dark(
-    oklch(0.45 0 0),
-    oklch(0.70 0 0)
-  );
+  --color-sf-syntax-sign: light-dark(oklch(0.45 0 0), oklch(0.7 0 0));
 }
 @theme {
@@ -269,4 +164,4 @@
   --shadow-lg: 0 0 0 0 transparent;
   --shadow-xl: 0 0 0 0 transparent;
   --shadow-2xl: 0 0 0 0 transparent;
-}
+}

package/dist/{surface-DGwRlC0o.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-DGwRlC0o.js.map
+//# sourceMappingURL=surface-CWdSFVUx.js.map

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

	@@ -1 +1 @@
1	- {"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~~"}
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-BxAMfHdt.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-B_yVof52.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-BxAMfHdt.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-BBeAtYVZ.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-D7p4QKsC.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-BBeAtYVZ.js.map
+//# sourceMappingURL=table-BM8JBGBs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"table-BBeAtYVZ.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-CeHu7Scn.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-CeHu7Scn.js.map
+//# sourceMappingURL=tabs-bnH2vGLv.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-~~CeHu7Scn~~.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"}