@tosui/react 0.1.0 → 0.1.2

package/dist/components/Select/Select.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./select.module.css.js";
+const sizeConfig = {
+  sm: { h: 8, px: 2, fontSize: "sm", rounded: "sm" },
+  md: { h: 10, px: 3, fontSize: "md", rounded: "md" },
+  lg: { h: 12, px: 4, fontSize: "lg", rounded: "md" }
+};
+function Select({
+  as,
+  size = "md",
+  variant = "outline",
+  disabled = false,
+  isInvalid = false,
+  className,
+  ...rest
+}) {
+  const Component = as || "select";
+  const sizeProps = sizeConfig[size];
+  const variantStyles = variant === "outline" ? {
+    bg: "transparent",
+    border: "thin",
+    borderColor: "border"
+  } : {
+    bg: "surface",
+    border: "thin",
+    borderColor: "border-muted"
+  };
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: Component,
+        h: sizeProps.h,
+        px: sizeProps.px,
+        fontSize: sizeProps.fontSize,
+        rounded: sizeProps.rounded,
+        bg: variantStyles.bg,
+        border: variantStyles.border,
+        borderColor: variantStyles.borderColor,
+        w: "100%",
+        color: "foreground",
+        className: clsx(styles.select, isInvalid && styles.invalid, className),
+        disabled,
+        "aria-invalid": isInvalid || void 0,
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport clsx from \"clsx\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport styles from \"./select.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\nexport type SelectVariant = \"outline\" | \"filled\";\n\nexport type SelectOwnProps = Omit<\n  BoxOwnProps,\n  \"as\" | \"h\" | \"fontSize\" | \"rounded\" | \"border\" | \"borderColor\" | \"bg\"\n> & {\n  /** Select size affecting height and font size */\n  size?: SelectSize;\n  /** Visual variant: outline (border) or filled (surface background) */\n  variant?: SelectVariant;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is in an invalid state */\n  isInvalid?: boolean;\n};\n\nexport type SelectProps<T extends ElementType = \"select\"> = Polymorphic<\n  T,\n  SelectOwnProps\n>;\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { h: 8, px: 2, fontSize: \"sm\", rounded: \"sm\" },\n  md: { h: 10, px: 3, fontSize: \"md\", rounded: \"md\" },\n  lg: { h: 12, px: 4, fontSize: \"lg\", rounded: \"md\" },\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Select - Dropdown select component\n *\n * A polymorphic select component that provides:\n * - Default element: <select>\n * - Sizes: sm, md (default), lg\n * - Variants: outline (default), filled\n * - Disabled and invalid states\n * - Custom dropdown arrow\n * - Focus ring styling\n */\nexport function Select<T extends ElementType = \"select\">({\n  as,\n  size = \"md\",\n  variant = \"outline\",\n  disabled = false,\n  isInvalid = false,\n  className,\n  ...rest\n}: SelectProps<T>) {\n  const Component = as || \"select\";\n  const sizeProps = sizeConfig[size];\n\n  // Variant-specific styling\n  const variantStyles =\n    variant === \"outline\"\n      ? {\n          bg: \"transparent\" as const,\n          border: \"thin\" as const,\n          borderColor: \"border\" as const,\n        }\n      : {\n          bg: \"surface\" as const,\n          border: \"thin\" as const,\n          borderColor: \"border-muted\" as const,\n        };\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={Component}\n      // Size props\n      h={sizeProps.h}\n      px={sizeProps.px}\n      fontSize={sizeProps.fontSize}\n      rounded={sizeProps.rounded}\n      // Variant props\n      bg={variantStyles.bg}\n      border={variantStyles.border}\n      borderColor={variantStyles.borderColor}\n      // Full width by default\n      w=\"100%\"\n      // Colors\n      color=\"foreground\"\n      // CSS module for states and custom arrow\n      className={clsx(styles.select, isInvalid && styles.invalid, className)}\n      // Native disabled\n      disabled={disabled}\n      aria-invalid={isInvalid || undefined}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAoCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,GAAG,GAAG,IAAI,GAAG,UAAU,MAAM,SAAS,KAAA;AAAA,EAC5C,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,UAAU,MAAM,SAAS,KAAA;AAAA,EAC7C,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,UAAU,MAAM,SAAS,KAAA;AAC/C;AAiBO,SAAS,OAAyC;AAAA,EACvD;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,WAAW,IAAI;AAGjC,QAAM,gBACJ,YAAY,YACR;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA;AAGrB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QAEJ,GAAG,UAAU;AAAA,QACb,IAAI,UAAU;AAAA,QACd,UAAU,UAAU;AAAA,QACpB,SAAS,UAAU;AAAA,QAEnB,IAAI,cAAc;AAAA,QAClB,QAAQ,cAAc;AAAA,QACtB,aAAa,cAAc;AAAA,QAE3B,GAAE;AAAA,QAEF,OAAM;AAAA,QAEN,WAAW,KAAK,OAAO,QAAQ,aAAa,OAAO,SAAS,SAAS;AAAA,QAErE;AAAA,QACA,gBAAc,aAAa;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Select/select.module.css

@@ -0,0 +1,43 @@
+._select_1fgij_1 {
+  /* Remove default browser styling */
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  /* Custom dropdown arrow */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 12px;
+
+  /* Extra right padding for arrow */
+  padding-right: 2.5rem;
+
+  /* Cursor */
+  cursor: pointer;
+
+  /* Transitions */
+  transition-duration: 150ms;
+  transition-property: border-color, background-color, box-shadow;
+  transition-timing-function: ease-in-out;
+}
+
+._select_1fgij_1:focus-visible {
+  outline: none;
+  border-color: var(--t-color-primary-default);
+  box-shadow: 0 0 0 3px var(--t-color-primary-subtle);
+}
+
+._select_1fgij_1:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+._select_1fgij_1._invalid_1fgij_36 {
+  border-color: var(--t-color-error-default);
+}
+
+._select_1fgij_1._invalid_1fgij_36:focus-visible {
+  border-color: var(--t-color-error-default);
+  box-shadow: 0 0 0 3px var(--t-color-error-subtle);
+}

package/dist/components/Select/select.module.css.js

@@ -0,0 +1,12 @@
+const select = "_select_1fgij_1";
+const invalid = "_invalid_1fgij_36";
+const styles = {
+  select,
+  invalid
+};
+export {
+  styles as default,
+  invalid,
+  select
+};
+//# sourceMappingURL=select.module.css.js.map

package/dist/components/Select/select.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,37 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./skeleton.module.css.js";
+function Skeleton({
+  w,
+  h,
+  rounded = "md",
+  isLoaded = false,
+  children,
+  className
+}) {
+  if (isLoaded) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "inline-block",
+      position: "relative",
+      overflow: "hidden",
+      rounded,
+      bg: "surface",
+      className: clsx(styles.skeleton, className),
+      style: {
+        "--skeleton-width": w,
+        "--skeleton-height": h
+      },
+      "aria-hidden": "true"
+    }
+  );
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { type ReactNode, type CSSProperties } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport type { RoundedValue } from \"@/components/Box/roundness/roundness\";\nimport styles from \"./skeleton.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type SkeletonProps = {\n  /** Width (CSS value) */\n  w?: string;\n  /** Height (CSS value) */\n  h?: string;\n  /** Border radius */\n  rounded?: RoundedValue;\n  /** When true, shows children instead of skeleton */\n  isLoaded?: boolean;\n  /** Content to show when loaded */\n  children?: ReactNode;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Skeleton - Loading placeholder\n *\n * A shimmer animation placeholder for content:\n * - Shows animated skeleton when loading\n * - Reveals children when isLoaded is true\n *\n * Features:\n * - Configurable width and height\n * - Rounded corners\n * - Shimmer animation\n */\nexport function Skeleton({\n  w,\n  h,\n  rounded = \"md\",\n  isLoaded = false,\n  children,\n  className,\n}: SkeletonProps) {\n  if (isLoaded) {\n    return <>{children}</>;\n  }\n\n  return (\n    <Box\n      display=\"inline-block\"\n      position=\"relative\"\n      overflow=\"hidden\"\n      rounded={rounded}\n      bg=\"surface\"\n      className={clsx(styles.skeleton, className)}\n      style={\n        {\n          \"--skeleton-width\": w,\n          \"--skeleton-height\": h,\n        } as CSSProperties\n      }\n      aria-hidden=\"true\"\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAyCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAkB;AAChB,MAAI,UAAU;AACZ,2CAAU,UAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,UAAS;AAAA,MACT;AAAA,MACA,IAAG;AAAA,MACH,WAAW,KAAK,OAAO,UAAU,SAAS;AAAA,MAC1C,OACE;AAAA,QACE,oBAAoB;AAAA,QACpB,qBAAqB;AAAA,MAAA;AAAA,MAGzB,eAAY;AAAA,IAAA;AAAA,EAAA;AAGlB;"}

package/dist/components/Skeleton/skeleton.module.css

@@ -0,0 +1,26 @@
+._skeleton_vtgbo_1 {
+  width: var(--skeleton-width, 100%);
+  height: var(--skeleton-height, 1em);
+}
+
+._skeleton_vtgbo_1::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--t-skeleton-shimmer) 50%,
+    transparent 100%
+  );
+  animation: _shimmer_vtgbo_1 1.5s infinite;
+}
+
+@keyframes _shimmer_vtgbo_1 {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/dist/components/Skeleton/skeleton.module.css.js

@@ -0,0 +1,9 @@
+const skeleton = "_skeleton_vtgbo_1";
+const styles = {
+  skeleton
+};
+export {
+  styles as default,
+  skeleton
+};
+//# sourceMappingURL=skeleton.module.css.js.map

package/dist/components/Skeleton/skeleton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Spacer/Spacer.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+function Spacer({
+  as,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(Box, { as: as || "div", flex: 1, ...rest })
+  );
+}
+export {
+  Spacer
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/components/Spacer/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type SpacerOwnProps = Omit<BoxOwnProps, \"flex\">;\n\nexport type SpacerProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  SpacerOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Spacer - Flexible space filler for flex layouts\n *\n * A polymorphic spacer component that fills available flex space:\n * - Default element: <div>\n * - Always has flex: 1 to fill available space\n * - Use to push items apart in flex containers (e.g., logo left, nav right)\n */\nexport function Spacer<T extends ElementType = \"div\">({\n  as,\n  ...rest\n}: SpacerProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box as={as || \"div\"} flex={1} {...rest} />\n  );\n}\n"],"names":[],"mappings":";;;AA2BO,SAAS,OAAsC;AAAA,EACpD;AAAA,EACA,GAAG;AACL,GAAmB;AACjB;AAAA;AAAA,IAEE,oBAAC,OAAI,IAAI,MAAM,OAAO,MAAM,GAAI,GAAG,KAAA,CAAM;AAAA;AAE7C;"}

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./spinner.module.css.js";
+const sizeConfig = {
+  sm: { w: "1em", h: "1em", borderWidth: "2px" },
+  md: { w: "1.5em", h: "1.5em", borderWidth: "2px" },
+  lg: { w: "2em", h: "2em", borderWidth: "3px" }
+};
+function Spinner({
+  as,
+  size = "md",
+  className,
+  style,
+  ...rest
+}) {
+  const Component = as || "span";
+  const sizeProps = sizeConfig[size];
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: Component,
+        display: "inline-block",
+        w: sizeProps.w,
+        h: sizeProps.h,
+        style: { borderWidth: sizeProps.borderWidth, ...style },
+        className: clsx(styles.spinner, className),
+        role: "status",
+        "aria-label": "Loading",
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport clsx from \"clsx\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport styles from \"./spinner.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type SpinnerSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SpinnerOwnProps = Omit<BoxOwnProps, \"as\"> & {\n  size?: SpinnerSize;\n};\n\nexport type SpinnerProps<T extends ElementType = \"span\"> = Polymorphic<\n  T,\n  SpinnerOwnProps\n>;\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { w: \"1em\", h: \"1em\", borderWidth: \"2px\" },\n  md: { w: \"1.5em\", h: \"1.5em\", borderWidth: \"2px\" },\n  lg: { w: \"2em\", h: \"2em\", borderWidth: \"3px\" },\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Spinner - Loading indicator component\n *\n * A simple spinning indicator that inherits color from its parent.\n * Uses CSS animation for smooth performance.\n */\nexport function Spinner<T extends ElementType = \"span\">({\n  as,\n  size = \"md\",\n  className,\n  style,\n  ...rest\n}: SpinnerProps<T>) {\n  const Component = as || \"span\";\n  const sizeProps = sizeConfig[size];\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={Component}\n      display=\"inline-block\"\n      w={sizeProps.w}\n      h={sizeProps.h}\n      style={{ borderWidth: sizeProps.borderWidth, ...style }}\n      className={clsx(styles.spinner, className)}\n      role=\"status\"\n      aria-label=\"Loading\"\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAyBA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,GAAG,OAAO,GAAG,OAAO,aAAa,MAAA;AAAA,EACvC,IAAI,EAAE,GAAG,SAAS,GAAG,SAAS,aAAa,MAAA;AAAA,EAC3C,IAAI,EAAE,GAAG,OAAO,GAAG,OAAO,aAAa,MAAA;AACzC;AAYO,SAAS,QAAwC;AAAA,EACtD;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,WAAW,IAAI;AAEjC;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACJ,SAAQ;AAAA,QACR,GAAG,UAAU;AAAA,QACb,GAAG,UAAU;AAAA,QACb,OAAO,EAAE,aAAa,UAAU,aAAa,GAAG,MAAA;AAAA,QAChD,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,QACzC,MAAK;AAAA,QACL,cAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Spinner/spinner.module.css

@@ -0,0 +1,21 @@
+@keyframes _spin_1i3mx_10 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+._spinner_1i3mx_10 {
+  animation-duration: 0.6s;
+  animation-iteration-count: infinite;
+  animation-name: _spin_1i3mx_10;
+  animation-timing-function: linear;
+  border-bottom-color: currentColor;
+  border-left-color: currentColor;
+  border-radius: 50%;
+  border-right-color: currentColor;
+  border-style: solid;
+  border-top-color: transparent;
+}

package/dist/components/Spinner/spinner.module.css.js

@@ -0,0 +1,9 @@
+const spinner = "_spinner_1i3mx_10";
+const styles = {
+  spinner
+};
+export {
+  styles as default,
+  spinner
+};
+//# sourceMappingURL=spinner.module.css.js.map

package/dist/components/Spinner/spinner.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Stack/Stack.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+function Stack({
+  as,
+  direction = "column",
+  gap,
+  align,
+  justify,
+  wrap,
+  children,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: as || "div",
+        display: "flex",
+        flexDirection: direction,
+        gap,
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap ? "wrap" : void 0,
+        ...rest,
+        children
+      }
+    )
+  );
+}
+export {
+  Stack
+};
+//# sourceMappingURL=Stack.js.map

package/dist/components/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  FlexDirectionValue,\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type StackOwnProps = Omit<\n  BoxOwnProps,\n  \"display\" | \"flexDirection\" | \"justifyContent\" | \"alignItems\" | \"flexWrap\" | \"gap\"\n> & {\n  /** Stack direction: row, column, row-reverse, column-reverse */\n  direction?: FlexDirectionValue;\n  /** Gap between children (0-32 spacing multiplier) */\n  gap?: SpacingValue;\n  /** Align items along the cross axis */\n  align?: AlignItemsValue;\n  /** Justify content along the main axis */\n  justify?: JustifyContentValue;\n  /** Enable flex wrapping */\n  wrap?: boolean;\n};\n\nexport type StackProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  StackOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Stack - Flex-based layout component\n *\n * A polymorphic flex container that provides:\n * - Default element: <div>\n * - Direction: column (default), row, row-reverse, column-reverse\n * - Gap: spacing multiplier (0-32)\n * - Align: cross-axis alignment\n * - Justify: main-axis alignment\n * - Wrap: enable flex wrapping\n */\nexport function Stack<T extends ElementType = \"div\">({\n  as,\n  direction = \"column\",\n  gap,\n  align,\n  justify,\n  wrap,\n  children,\n  ...rest\n}: StackProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"flex\"\n      flexDirection={direction}\n      gap={gap}\n      alignItems={align}\n      justifyContent={justify}\n      flexWrap={wrap ? \"wrap\" : undefined}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAkDO,SAAS,MAAqC;AAAA,EACnD;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,eAAe;AAAA,QACf;AAAA,QACA,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,UAAU,OAAO,SAAS;AAAA,QACzB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/Switch/Switch.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./switch.module.css.js";
+const sizeConfig = {
+  sm: { trackWidth: 32, trackHeight: 18, thumb: 14, fontSize: "sm" },
+  md: { trackWidth: 40, trackHeight: 22, thumb: 18, fontSize: "md" },
+  lg: { trackWidth: 48, trackHeight: 26, thumb: 22, fontSize: "lg" }
+};
+const Switch = forwardRef(function Switch2({
+  size = "md",
+  disabled = false,
+  isChecked,
+  label,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const sizeProps = sizeConfig[size];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "label",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 2,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? "faint" : void 0,
+      className: clsx(styles.wrapper, className),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            ref,
+            checked: isChecked,
+            disabled,
+            className: styles.input,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            display: "inline-flex",
+            alignItems: "center",
+            rounded: "full",
+            flexShrink: 0,
+            className: styles.track,
+            style: {
+              width: sizeProps.trackWidth,
+              height: sizeProps.trackHeight,
+              "--switch-thumb-size": `${sizeProps.thumb}px`,
+              "--switch-track-width": `${sizeProps.trackWidth}px`
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: "span",
+                rounded: "full",
+                bg: "background",
+                className: styles.thumb,
+                style: {
+                  width: sizeProps.thumb,
+                  height: sizeProps.thumb
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx(Box, { as: "span", fontSize: sizeProps.fontSize, color: "foreground", children: label })
+      ]
+    }
+  );
+});
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./switch.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type SwitchSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SwitchProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\"\n> & {\n  /** Switch size affecting track and thumb dimensions */\n  size?: SwitchSize;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Controlled checked state */\n  isChecked?: boolean;\n  /** Optional label text displayed to the right */\n  label?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { trackWidth: 32, trackHeight: 18, thumb: 14, fontSize: \"sm\" },\n  md: { trackWidth: 40, trackHeight: 22, thumb: 18, fontSize: \"md\" },\n  lg: { trackWidth: 48, trackHeight: 26, thumb: 22, fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Switch - Toggle switch component\n *\n * A styled switch component that provides:\n * - Sizes: sm, md (default), lg\n * - Sliding thumb animation\n * - Optional inline label\n * - Disabled state\n * - Focus ring styling\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    disabled = false,\n    isChecked,\n    label,\n    className,\n    style,\n    ...rest\n  },\n  ref\n) {\n  const sizeProps = sizeConfig[size];\n\n  return (\n    <Box\n      as=\"label\"\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      gap={2}\n      cursor={disabled ? \"not-allowed\" : \"pointer\"}\n      opacity={disabled ? \"faint\" : undefined}\n      className={clsx(styles.wrapper, className)}\n      style={style}\n    >\n      {/* Hidden native checkbox with switch role */}\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        ref={ref}\n        checked={isChecked}\n        disabled={disabled}\n        className={styles.input}\n        {...rest}\n      />\n\n      {/* Custom track */}\n      <Box\n        as=\"span\"\n        display=\"inline-flex\"\n        alignItems=\"center\"\n        rounded=\"full\"\n        flexShrink={0}\n        className={styles.track}\n        style={\n          {\n            width: sizeProps.trackWidth,\n            height: sizeProps.trackHeight,\n            \"--switch-thumb-size\": `${sizeProps.thumb}px`,\n            \"--switch-track-width\": `${sizeProps.trackWidth}px`,\n          } as React.CSSProperties\n        }\n      >\n        {/* Thumb */}\n        <Box\n          as=\"span\"\n          rounded=\"full\"\n          bg=\"background\"\n          className={styles.thumb}\n          style={{\n            width: sizeProps.thumb,\n            height: sizeProps.thumb,\n          }}\n        />\n      </Box>\n\n      {/* Optional label */}\n      {label && (\n        <Box as=\"span\" fontSize={sizeProps.fontSize} color=\"foreground\">\n          {label}\n        </Box>\n      )}\n    </Box>\n  );\n});\n"],"names":["Switch"],"mappings":";;;;;AA6BA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,YAAY,IAAI,aAAa,IAAI,OAAO,IAAI,UAAU,KAAA;AAAA,EAC5D,IAAI,EAAE,YAAY,IAAI,aAAa,IAAI,OAAO,IAAI,UAAU,KAAA;AAAA,EAC5D,IAAI,EAAE,YAAY,IAAI,aAAa,IAAI,OAAO,IAAI,UAAU,KAAA;AAC9D;AAgBO,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,WAAW,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,KAAK;AAAA,MACL,QAAQ,WAAW,gBAAgB;AAAA,MACnC,SAAS,WAAW,UAAU;AAAA,MAC9B,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,MACzC;AAAA,MAGA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,WAAW,OAAO;AAAA,YACjB,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAIN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,WAAW,OAAO;AAAA,YAClB,OACE;AAAA,cACE,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,uBAAuB,GAAG,UAAU,KAAK;AAAA,cACzC,wBAAwB,GAAG,UAAU,UAAU;AAAA,YAAA;AAAA,YAKnD,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,WAAW,OAAO;AAAA,gBAClB,OAAO;AAAA,kBACL,OAAO,UAAU;AAAA,kBACjB,QAAQ,UAAU;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAID,SACC,oBAAC,KAAA,EAAI,IAAG,QAAO,UAAU,UAAU,UAAU,OAAM,cAChD,UAAA,MAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/Switch/switch.module.css

@@ -0,0 +1,48 @@
+/* Hidden native checkbox */
+._input_1kbg8_2 {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Track (pill shape) */
+._track_1kbg8_12 {
+  background-color: var(--t-color-border-muted);
+  transition-duration: 150ms;
+  transition-property: background-color, box-shadow;
+  transition-timing-function: ease-in-out;
+  padding: 2px;
+}
+
+/* Thumb (sliding circle) */
+._thumb_1kbg8_21 {
+  transition-duration: 150ms;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  transform: translateX(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+/* Focus ring on track when input is focused */
+._input_1kbg8_2:focus-visible ~ ._track_1kbg8_12 {
+  box-shadow: 0 0 0 3px var(--t-color-primary-subtle);
+}
+
+/* Checked state - track becomes primary color */
+._input_1kbg8_2:checked ~ ._track_1kbg8_12 {
+  background-color: var(--t-color-primary-default);
+}
+
+/* Checked state - thumb slides right */
+._input_1kbg8_2:checked ~ ._track_1kbg8_12 ._thumb_1kbg8_21 {
+  /* Translate by: track width - thumb size - padding (2px each side = 4px) */
+  transform: translateX(calc(var(--switch-track-width) - var(--switch-thumb-size) - 4px));
+}
+
+/* Disabled state (handled via opacity on wrapper) */
+._input_1kbg8_2:disabled ~ ._track_1kbg8_12 {
+  cursor: not-allowed;
+}

package/dist/components/Switch/switch.module.css.js

@@ -0,0 +1,15 @@
+const input = "_input_1kbg8_2";
+const track = "_track_1kbg8_12";
+const thumb = "_thumb_1kbg8_21";
+const styles = {
+  input,
+  track,
+  thumb
+};
+export {
+  styles as default,
+  input,
+  thumb,
+  track
+};
+//# sourceMappingURL=switch.module.css.js.map

package/dist/components/Switch/switch.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AA0B5E,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,YAAgB,EAChB,KAAK,EACL,QAAQ,EACR,OAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,SAAS,2CAgBX;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAc5D;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAS,EACT,QAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,QAAQ,2CA2BV;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,kDAUzE"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AA0B5E,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,YAAgB,EAChB,KAAK,EACL,QAAQ,EACR,OAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,SAAS,2CAgBX;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAc5D;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAS,EACT,QAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,QAAQ,2CA2BV;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,kDAUzE"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useContext } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./tabs.module.css.js";
+const TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error("Tab components must be used within Tabs");
+  return context;
+}
+function Tabs({
+  defaultIndex = 0,
+  index,
+  onChange,
+  variant = "line",
+  className,
+  children
+}) {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const activeIndex = index ?? internalIndex;
+  const setActiveIndex = (newIndex) => {
+    if (index === void 0) setInternalIndex(newIndex);
+    onChange?.(newIndex);
+  };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeIndex, setActiveIndex }, children: /* @__PURE__ */ jsx(Box, { className: clsx(styles.tabs, styles[variant], className), children }) });
+}
+function TabList({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "div",
+      role: "tablist",
+      display: "flex",
+      gap: 0,
+      borderBottom: "thin",
+      borderColor: "border",
+      className: clsx(styles.tabList, className),
+      children
+    }
+  );
+}
+function Tab({
+  index = 0,
+  disabled = false,
+  className,
+  children
+}) {
+  const { activeIndex, setActiveIndex } = useTabsContext();
+  const isActive = activeIndex === index;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "button",
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-disabled": disabled,
+      disabled,
+      onClick: () => !disabled && setActiveIndex(index),
+      py: 2,
+      px: 4,
+      fontSize: "sm",
+      fontWeight: isActive ? "medium" : "normal",
+      color: isActive ? "primary" : "foreground-muted",
+      bg: "transparent",
+      border: "none",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? "faint" : void 0,
+      className: clsx(styles.tab, isActive && styles.active, className),
+      children
+    }
+  );
+}
+function TabPanel({ index = 0, className, children }) {
+  const { activeIndex } = useTabsContext();
+  if (activeIndex !== index) return null;
+  return /* @__PURE__ */ jsx(Box, { role: "tabpanel", p: 4, className: clsx(styles.tabPanel, className), children });
+}
+export {
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, createContext, useContext, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./tabs.module.css\";\n\n// ============================================================================\n// Context\n// ============================================================================\n\ntype TabsContextValue = {\n  activeIndex: number;\n  setActiveIndex: (index: number) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) throw new Error(\"Tab components must be used within Tabs\");\n  return context;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type TabsVariant = \"line\" | \"enclosed\";\n\nexport type TabsProps = {\n  /** Default active tab index */\n  defaultIndex?: number;\n  /** Controlled active index */\n  index?: number;\n  /** Callback when tab changes */\n  onChange?: (index: number) => void;\n  /** Visual variant */\n  variant?: TabsVariant;\n  /** Additional class name */\n  className?: string;\n  /** Tab components */\n  children?: ReactNode;\n};\n\nexport type TabListProps = {\n  /** Additional class name */\n  className?: string;\n  /** Tab buttons */\n  children?: ReactNode;\n};\n\nexport type TabProps = {\n  /** Tab index (set automatically or manually) */\n  index?: number;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Tab label */\n  children?: ReactNode;\n};\n\nexport type TabPanelProps = {\n  /** Panel index (set automatically or manually) */\n  index?: number;\n  /** Additional class name */\n  className?: string;\n  /** Panel content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Tabs - Tab container with state management\n *\n * Provides context for Tab and TabPanel components.\n * Supports controlled (index prop) and uncontrolled (defaultIndex) modes.\n */\nexport function Tabs({\n  defaultIndex = 0,\n  index,\n  onChange,\n  variant = \"line\",\n  className,\n  children,\n}: TabsProps) {\n  const [internalIndex, setInternalIndex] = useState(defaultIndex);\n  const activeIndex = index ?? internalIndex;\n\n  const setActiveIndex = (newIndex: number) => {\n    if (index === undefined) setInternalIndex(newIndex);\n    onChange?.(newIndex);\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>\n      <Box className={clsx(styles.tabs, styles[variant], className)}>\n        {children}\n      </Box>\n    </TabsContext.Provider>\n  );\n}\n\n/**\n * TabList - Horizontal container for Tab buttons\n */\nexport function TabList({ className, children }: TabListProps) {\n  return (\n    <Box\n      as=\"div\"\n      role=\"tablist\"\n      display=\"flex\"\n      gap={0}\n      borderBottom=\"thin\"\n      borderColor=\"border\"\n      className={clsx(styles.tabList, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Tab - Individual tab button\n */\nexport function Tab({\n  index = 0,\n  disabled = false,\n  className,\n  children,\n}: TabProps) {\n  const { activeIndex, setActiveIndex } = useTabsContext();\n  const isActive = activeIndex === index;\n\n  return (\n    <Box\n      as=\"button\"\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onClick={() => !disabled && setActiveIndex(index)}\n      py={2}\n      px={4}\n      fontSize=\"sm\"\n      fontWeight={isActive ? \"medium\" : \"normal\"}\n      color={isActive ? \"primary\" : \"foreground-muted\"}\n      bg=\"transparent\"\n      border=\"none\"\n      cursor={disabled ? \"not-allowed\" : \"pointer\"}\n      opacity={disabled ? \"faint\" : undefined}\n      className={clsx(styles.tab, isActive && styles.active, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * TabPanel - Content panel for a tab\n *\n * Only renders when its index matches the active tab.\n */\nexport function TabPanel({ index = 0, className, children }: TabPanelProps) {\n  const { activeIndex } = useTabsContext();\n\n  if (activeIndex !== index) return null;\n\n  return (\n    <Box role=\"tabpanel\" p={4} className={clsx(styles.tabPanel, className)}>\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,SAAS,iBAAiB;AACxB,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,yCAAyC;AACvE,SAAO;AACT;AA4DO,SAAS,KAAK;AAAA,EACnB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAc;AACZ,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAC/D,QAAM,cAAc,SAAS;AAE7B,QAAM,iBAAiB,CAAC,aAAqB;AAC3C,QAAI,UAAU,OAAW,kBAAiB,QAAQ;AAClD,eAAW,QAAQ;AAAA,EACrB;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,kBAC1C,UAAA,oBAAC,OAAI,WAAW,KAAK,OAAO,MAAM,OAAO,OAAO,GAAG,SAAS,GACzD,SAAA,CACH,GACF;AAEJ;AAKO,SAAS,QAAQ,EAAE,WAAW,YAA0B;AAC7D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,KAAK;AAAA,MACL,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,MAExC;AAAA,IAAA;AAAA,EAAA;AAGP;AAKO,SAAS,IAAI;AAAA,EAClB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAa;AACX,QAAM,EAAE,aAAa,eAAA,IAAmB,eAAA;AACxC,QAAM,WAAW,gBAAgB;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf;AAAA,MACA,SAAS,MAAM,CAAC,YAAY,eAAe,KAAK;AAAA,MAChD,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,UAAS;AAAA,MACT,YAAY,WAAW,WAAW;AAAA,MAClC,OAAO,WAAW,YAAY;AAAA,MAC9B,IAAG;AAAA,MACH,QAAO;AAAA,MACP,QAAQ,WAAW,gBAAgB;AAAA,MACnC,SAAS,WAAW,UAAU;AAAA,MAC9B,WAAW,KAAK,OAAO,KAAK,YAAY,OAAO,QAAQ,SAAS;AAAA,MAE/D;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAAS,SAAS,EAAE,QAAQ,GAAG,WAAW,YAA2B;AAC1E,QAAM,EAAE,YAAA,IAAgB,eAAA;AAExB,MAAI,gBAAgB,MAAO,QAAO;AAElC,SACE,oBAAC,KAAA,EAAI,MAAK,YAAW,GAAG,GAAG,WAAW,KAAK,OAAO,UAAU,SAAS,GAClE,SAAA,CACH;AAEJ;"}