@cocso-ui/react 0.2.21 → 1.0.1

package/dist/esm/components/popover/popover.mjs

@@ -0,0 +1,47 @@
+import { cn } from '../../cn.mjs';
+import styles from './popover.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+
+function PopoverArrow({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Popover$1.Arrow, {
+    className: cn(styles.arrow, className),
+    ...props
+  });
+}
+function PopoverContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Popover$1.Portal, {
+    children: /*#__PURE__*/jsx(Popover$1.Positioner, {
+      align: align,
+      alignOffset: alignOffset,
+      arrowPadding: arrowPadding,
+      className: styles.positioner,
+      side: side,
+      sideOffset: sideOffset,
+      children: /*#__PURE__*/jsx(Popover$1.Popup, {
+        className: cn(styles.content, className),
+        "data-cocso-component": "popover-content",
+        ...props
+      })
+    })
+  });
+}
+const Popover = Object.assign(Popover$1.Root, {
+  displayName: "Popover",
+  Trigger: Popover$1.Trigger,
+  Content: PopoverContent,
+  Arrow: PopoverArrow
+});
+
+export { Popover };

package/dist/esm/components/popover/popover.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"content":"popover-module_content__TwOg0","positioner":"popover-module_positioner__TnQeH","arrow":"popover-module_arrow__zZuHF"};
+
+export { styles as default };

package/dist/esm/components/progress/progress.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type ProgressVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends ComponentProps<"div"> {
+    max?: number;
+    size?: ProgressSize;
+    value: number;
+    variant?: ProgressVariant;
+}
+/** Determinate progress indicator showing completion percentage. */
+declare function Progress({ ref, className, style, variant, size, value, max, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Progress };
+export type { ProgressProps, ProgressSize, ProgressVariant };

package/dist/esm/components/progress/progress.mjs

@@ -0,0 +1,40 @@
+import { progress } from '../../ecosystem/codegen/generated/progress.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './progress.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+/** Determinate progress indicator showing completion percentage. */
+function Progress({
+  ref,
+  className,
+  style,
+  variant = "primary",
+  size = "md",
+  value,
+  max = 100,
+  ...props
+}) {
+  const safeMax = max > 0 ? max : 100;
+  const percentage = Math.min(100, Math.max(0, value / safeMax * 100));
+  return /*#__PURE__*/jsx("div", {
+    "aria-valuemax": safeMax,
+    "aria-valuemin": 0,
+    "aria-valuenow": Math.min(Math.max(0, value), safeMax),
+    className: cn(progress({
+      variant,
+      size
+    }), styles.track, className),
+    ref: ref,
+    role: "progressbar",
+    style: style,
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      className: styles.fill,
+      style: {
+        width: `${percentage}%`
+      }
+    })
+  });
+}
+
+export { Progress };

package/dist/esm/components/progress/progress.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"track":"progress-module_track__gM0oV","fill":"progress-module_fill__aLAbp"};
+
+export { styles as default };

package/dist/esm/components/radio-group/radio-group.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+
+/** Inline type alias — codegen is a devDependency and must not leak into published .d.ts */
+type RadioSize = "large" | "medium" | "small";
+declare function RadioGroupRoot({ className, ...props }: ComponentProps<typeof RadioGroup$1>): react_jsx_runtime.JSX.Element;
+declare function RadioGroupItem({ className, size, style, ...props }: ComponentProps<typeof Radio.Root> & {
+    size?: RadioSize;
+}): react_jsx_runtime.JSX.Element;
+declare function RadioGroupIndicator({ className, ...props }: ComponentProps<typeof Radio.Indicator>): react_jsx_runtime.JSX.Element;
+/**
+ * Single-selection radio group. Compose with `RadioGroup.Item` and `RadioGroup.Indicator`.
+ */
+declare const RadioGroup: typeof RadioGroupRoot & {
+    displayName: "RadioGroup";
+    Item: typeof RadioGroupItem;
+    Indicator: typeof RadioGroupIndicator;
+};
+
+export { RadioGroup };
+export type { RadioSize };

package/dist/esm/components/radio-group/radio-group.mjs

@@ -0,0 +1,50 @@
+import { radio } from '../../ecosystem/codegen/generated/radio.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './radio-group.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+
+function RadioGroupRoot({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(RadioGroup$1, {
+    className: cn(styles.root, className),
+    ...props
+  });
+}
+function RadioGroupItem({
+  className,
+  size = "medium",
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Radio.Root, {
+    className: cn(radio({
+      size
+    }), styles.item, className),
+    style: style,
+    ...props
+  });
+}
+function RadioGroupIndicator({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Radio.Indicator, {
+    className: cn(styles.indicator, className),
+    ...props
+  });
+}
+
+/**
+ * Single-selection radio group. Compose with `RadioGroup.Item` and `RadioGroup.Indicator`.
+ */
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  displayName: "RadioGroup",
+  Item: RadioGroupItem,
+  Indicator: RadioGroupIndicator
+});
+
+export { RadioGroup };

package/dist/esm/components/radio-group/radio-group.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"radio-group-module_root__b8W35","item":"radio-group-module_item__QAyhl","indicator":"radio-group-module_indicator__I0Col"};
+
+export { styles as default };

package/dist/esm/components/select/select.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type SelectSize = "large" | "medium" | "small" | "x-small";
+interface SelectProps extends Omit<ComponentProps<"select">, "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: boolean | string;
+    label?: string;
+    size?: SelectSize;
+    stretch?: boolean;
+}
+/** Dropdown select component wrapping native select. */
+declare function Select({ ref, className, style: _style, size, disabled, error, stretch, label, description, id: _id, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+export { Select };
+export type { SelectProps, SelectSize };

package/dist/esm/components/select/select.mjs

@@ -0,0 +1,83 @@
+"use client";
+import { select } from '../../ecosystem/codegen/generated/select.mjs';
+import { SelectorIcon } from '@cocso-ui/react-icons';
+import { useId } from 'react';
+import { cn } from '../../cn.mjs';
+import styles from './select.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field, useField } from '../field/field.mjs';
+
+const ICON_SIZES = {
+  "x-small": 10,
+  small: 12,
+  medium: 14,
+  large: 14
+};
+/** Dropdown select component wrapping native select. */
+function Select({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  disabled = false,
+  error = false,
+  stretch = false,
+  label,
+  description,
+  id: _id,
+  children,
+  ...props
+}) {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const hasError = !!error;
+  const errorMessage = typeof error === "string" ? error : undefined;
+  const wrapperStyle = {};
+  const select$1 = /*#__PURE__*/jsxs("div", {
+    className: cn(select({
+      size
+    }), styles.wrapper, stretch && styles.stretch, hasError && styles.error, className),
+    "data-cocso-component": "select",
+    style: wrapperStyle,
+    children: [/*#__PURE__*/jsx(FieldAwareSelect, {
+      "aria-invalid": hasError || undefined,
+      className: styles.select,
+      disabled: disabled,
+      id: id,
+      ref: ref,
+      style: _style,
+      ...props,
+      children: children
+    }), /*#__PURE__*/jsx("span", {
+      className: styles.icon,
+      children: /*#__PURE__*/jsx(SelectorIcon, {
+        size: ICON_SIZES[size]
+      })
+    })]
+  });
+  if (label) {
+    return /*#__PURE__*/jsx(Field, {
+      description: description,
+      error: errorMessage,
+      htmlFor: id,
+      label: label,
+      required: props.required,
+      children: select$1
+    });
+  }
+  return select$1;
+}
+function FieldAwareSelect({
+  "aria-describedby": callerDescribedBy,
+  ...props
+}) {
+  const field = useField();
+  const fieldDescribedBy = field.errorId ?? field.descriptionId;
+  const describedBy = [fieldDescribedBy, callerDescribedBy].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/jsx("select", {
+    "aria-describedby": describedBy,
+    ...props
+  });
+}
+
+export { Select };

package/dist/esm/components/select/select.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"select-module_wrapper__7szq0","stretch":"select-module_stretch__mQv7N","select":"select-module_select__RLsWH","error":"select-module_error__4KQv3","icon":"select-module_icon__K93bs"};
+
+export { styles as default };

package/dist/esm/components/skeleton/skeleton.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type SkeletonVariant = "text" | "circular" | "rectangular";
+type SkeletonAnimation = "pulse" | "wave" | "none";
+interface SkeletonProps extends ComponentProps<"div"> {
+    animation?: SkeletonAnimation;
+    variant?: SkeletonVariant;
+}
+/** Loading placeholder with configurable shape and animation. */
+declare function Skeleton({ ref, className, style, variant, animation, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Skeleton };
+export type { SkeletonAnimation, SkeletonProps, SkeletonVariant };

package/dist/esm/components/skeleton/skeleton.mjs

@@ -0,0 +1,27 @@
+import { skeleton } from '../../ecosystem/codegen/generated/skeleton.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './skeleton.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+/** Loading placeholder with configurable shape and animation. */
+function Skeleton({
+  ref,
+  className,
+  style,
+  variant = "text",
+  animation = "pulse",
+  ...props
+}) {
+  return /*#__PURE__*/jsx("div", {
+    "aria-hidden": "true",
+    className: cn(skeleton({
+      variant,
+      animation
+    }), styles.skeleton, animation === "pulse" && styles.pulse, animation === "wave" && styles.wave, className),
+    ref: ref,
+    style: style,
+    ...props
+  });
+}
+
+export { Skeleton };

package/dist/esm/components/skeleton/skeleton.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"skeleton":"skeleton-module_skeleton__fula5","pulse":"skeleton-module_pulse__YLysm","wave":"skeleton-module_wave__GxWJ1"};
+
+export { styles as default };

package/dist/esm/components/spinner/spinner.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type SpinnerVariant = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "white";
+type SpinnerSize = "large" | "medium" | "small";
+
+interface SpinnerProps extends Omit<ComponentProps<"output">, "size"> {
+    label?: string;
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+}
+/** Loading indicator rendered as an accessible output element. */
+declare function Spinner({ ref, className, style: _style, size, variant, label, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+export { Spinner };
+export type { SpinnerProps, SpinnerSize, SpinnerVariant };

package/dist/esm/components/spinner/spinner.mjs

@@ -0,0 +1,67 @@
+import { spinner } from '../../ecosystem/codegen/generated/spinner.mjs';
+import { getSpinnerGeometry } from '../../ecosystem/codegen/generated/spinner-geometry.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './spinner.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+/** Loading indicator rendered as an accessible output element. */
+function Spinner({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  variant = "primary",
+  label = "Loading",
+  ...props
+}) {
+  const {
+    blades: bladeCount,
+    bladeWidth: width,
+    bladeHeight: height,
+    bladeRadius: radius,
+    output
+  } = getSpinnerGeometry(size);
+  const container = output;
+  const left = (container - width) / 2;
+  const originY = height - container / 2;
+  const step = 360 / bladeCount;
+  const blades = Array.from({
+    length: bladeCount
+  }, (_, i) => ({
+    angle: i * step,
+    delay: -((bladeCount - 1 - i) * (0.75 / bladeCount))
+  }));
+  return /*#__PURE__*/jsx("output", {
+    "aria-label": label,
+    "aria-live": "polite",
+    className: cn(spinner({
+      variant,
+      size
+    }), styles.spinner, className),
+    ref: ref,
+    style: {
+      width: `${container}px`,
+      height: `${container}px`,
+      ..._style
+    },
+    ...props,
+    children: blades.map(({
+      angle,
+      delay
+    }) => /*#__PURE__*/jsx("div", {
+      className: styles.blade,
+      style: {
+        left: `${left}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        borderRadius: `${radius}px`,
+        backgroundColor: "currentColor",
+        transformOrigin: `center ${originY}px`,
+        animationDelay: `${delay}s`,
+        transform: `rotate(${angle}deg)`
+      }
+    }, `blade-${angle}`))
+  });
+}
+
+export { Spinner };

package/dist/esm/components/spinner/spinner.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"spinner":"spinner-module_spinner__28e7a","blade":"spinner-module_blade__EIEE6"};
+
+export { styles as default };

package/dist/esm/components/stock-quantity-status/stock-quantity-status.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type QuantityStatus = "normal" | "sufficient" | "insufficient";
+interface StockQuantityStatusProps extends ComponentProps<"div"> {
+    quantity: QuantityStatus;
+}
+/** Displays a stock quantity status indicator with icon and label. */
+declare function StockQuantityStatus({ ref, className, style: _style, quantity, ...props }: StockQuantityStatusProps): react_jsx_runtime.JSX.Element;
+
+export { StockQuantityStatus };
+export type { QuantityStatus, StockQuantityStatusProps };

package/dist/esm/components/stock-quantity-status/stock-quantity-status.mjs

@@ -0,0 +1,116 @@
+import { stockQuantityStatus } from '../../ecosystem/codegen/generated/stock-quantity-status.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './stock-quantity-status.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { spacing } from '../../token/spacing.mjs';
+import { Typography } from '../typography/typography.mjs';
+
+const DISPLAY_LABELS = {
+  normal: "보통",
+  sufficient: "여유",
+  insufficient: "부족"
+};
+const renderIndicator = quantity => {
+  if (quantity === "sufficient") {
+    return /*#__PURE__*/jsxs("svg", {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsx("path", {
+        clipRule: "evenodd",
+        d: "M7.06494 13.0754C4.26764 13.0754 1.99999 10.8199 2 8.03765C2.00001 5.25543 4.26766 3 7.06494 3L9.48051 3V6.10011L7.06494 6.10011C5.98906 6.10011 5.11689 6.96758 5.11689 8.03767C5.11688 9.10776 5.98906 9.97524 7.06494 9.97524L9.48051 9.97524V13.0754H7.06494Z",
+        fill: "#D9D9D9",
+        fillOpacity: "0.85098",
+        fillRule: "evenodd"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M9.48051 9.97524L9.48051 6.10011L12.0519 6.10026C13.1278 6.10026 14 6.96774 14 8.03783C14 9.10792 13.1278 9.9754 12.0519 9.9754L9.48051 9.97524Z",
+        fill: "#D9D9D9",
+        fillOpacity: "0.85098"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M9.48047 6.10059H7.06543C5.98955 6.10059 5.11719 6.968 5.11719 8.03809C5.11741 9.10782 5.98893 9.97532 7.06445 9.97559H9.48047V13.0752H7.06445C4.35911 13.0749 2.14983 10.9652 2.00781 8.30957V7.76465C2.15041 5.10939 4.36025 3 7.06543 3H9.48047V6.10059ZM12.0518 6.10059C13.1276 6.10059 14 6.968 14 8.03809C13.9999 9.10806 13.1276 9.97559 12.0518 9.97559H9.48047V6.10059H12.0518Z",
+        fill: "currentColor"
+      })]
+    });
+  }
+  if (quantity === "normal") {
+    return /*#__PURE__*/jsxs("svg", {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsx("path", {
+        clipRule: "evenodd",
+        d: "M7.06494 13.0754C4.26764 13.0754 1.99999 10.8199 2 8.03765C2.00001 5.25543 4.26766 3 7.06494 3L9.48051 3V6.10011L7.06494 6.10011C5.98906 6.10011 5.11689 6.96758 5.11689 8.03767C5.11688 9.10776 5.98906 9.97524 7.06494 9.97524L9.48051 9.97524V13.0754H7.06494Z",
+        fill: "#D9D9D9",
+        fillOpacity: "0.85098",
+        fillRule: "evenodd"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M9.48051 9.97524L9.48051 6.10011L12.0519 6.10026C13.1278 6.10026 14 6.96774 14 8.03783C14 9.10792 13.1278 9.9754 12.0519 9.9754L9.48051 9.97524Z",
+        fill: "#D9D9D9",
+        fillOpacity: "0.85098"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M9.48145 6.0752V6.10059H7.06641C5.99053 6.10059 5.11817 6.968 5.11816 8.03809C5.11839 9.10782 5.98991 9.97532 7.06543 9.97559H9.48145V13.0752H7.06543C4.35577 13.0749 2.14345 10.9585 2.00781 8.29688V7.77832C2.03849 7.17662 2.17568 6.60303 2.40039 6.0752H9.48145ZM12.0527 6.10059C13.1286 6.10059 14.001 6.968 14.001 8.03809C14.0008 9.10806 13.1285 9.97559 12.0527 9.97559H9.48145V6.10059H12.0527Z",
+        fill: "currentColor"
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs("svg", {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("path", {
+      clipRule: "evenodd",
+      d: "M7.06494 13.0754C4.26764 13.0754 1.99999 10.8199 2 8.03765C2.00001 5.25543 4.26766 3 7.06494 3L9.48051 3V6.10011L7.06494 6.10011C5.98906 6.10011 5.11689 6.96758 5.11689 8.03767C5.11688 9.10776 5.98906 9.97524 7.06494 9.97524L9.48051 9.97524V13.0754H7.06494Z",
+      fill: "#D9D9D9",
+      fillOpacity: "0.85098",
+      fillRule: "evenodd"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M9.48051 9.97524L9.48051 6.10011L12.0519 6.10026C13.1278 6.10026 14 6.96774 14 8.03783C14 9.10792 13.1278 9.9754 12.0519 9.9754L9.48051 9.97524Z",
+      fill: "#D9D9D9",
+      fillOpacity: "0.85098"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M7.04688 9.97461C7.05273 9.97466 7.05859 9.97558 7.06445 9.97559H9.48047V13.0752H7.06445C4.95754 13.075 3.15182 11.7952 2.38867 9.97461H7.04688ZM12.0713 9.97461C12.0648 9.97467 12.0582 9.97559 12.0518 9.97559H9.48047V9.97461H12.0713Z",
+      fill: "currentColor"
+    })]
+  });
+};
+/** Displays a stock quantity status indicator with icon and label. */
+function StockQuantityStatus({
+  ref,
+  className,
+  style: _style,
+  quantity,
+  ...props
+}) {
+  const style = {
+    ..._style,
+    "--cocso-stock-quantity-status-indicator-width": spacing.s9
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: cn(stockQuantityStatus({
+      quantity
+    }), styles.stock, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: [/*#__PURE__*/jsx("span", {
+      className: styles.indicator,
+      children: renderIndicator(quantity)
+    }), /*#__PURE__*/jsx(Typography, {
+      color: "currentColor",
+      size: "small",
+      type: "body",
+      children: DISPLAY_LABELS[quantity]
+    })]
+  });
+}
+
+export { StockQuantityStatus };

package/dist/esm/components/stock-quantity-status/stock-quantity-status.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"stock":"stock-quantity-status-module_stock__vGdTq","indicator":"stock-quantity-status-module_indicator__AerLT"};
+
+export { styles as default };

package/dist/esm/components/switch/switch.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+
+type SwitchSize = "large" | "medium" | "small";
+type SwitchVariant = "primary" | "success" | "error" | "warning" | "info";
+interface SwitchProps extends ComponentProps<typeof Switch$1.Root> {
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    position?: "left" | "right";
+    size?: SwitchSize;
+    variant?: SwitchVariant;
+}
+/** Toggle switch component with optional label and size options. */
+declare function Switch({ ref, id: _id, className, style: _style, size, variant, position, disabled, checked, label, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+export { Switch };
+export type { SwitchProps, SwitchSize, SwitchVariant };

package/dist/esm/components/switch/switch.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { switchStyles } from '../../ecosystem/codegen/generated/switch.mjs';
+import { useId } from 'react';
+import { cn } from '../../cn.mjs';
+import styles from './switch.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { colors } from '../../token/color.mjs';
+import { Typography } from '../typography/typography.mjs';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+
+const UNCHECKED_BG = colors.neutral100;
+/** Toggle switch component with optional label and size options. */
+function Switch({
+  ref,
+  id: _id,
+  className,
+  style: _style,
+  size = "medium",
+  variant = "primary",
+  position = "right",
+  disabled,
+  checked,
+  label,
+  ...props
+}) {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const switchStylesName = switchStyles({
+    variant,
+    size,
+    checked: String(!!checked)
+  });
+  const style = {
+    ..._style,
+    "--cocso-switch-bg-color": UNCHECKED_BG
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: cn(switchStylesName, styles.wrapper, className),
+    "data-disabled": disabled || undefined,
+    style: style,
+    children: [position === "left" && label && /*#__PURE__*/jsx(Typography, {
+      "aria-disabled": disabled,
+      render: /*#__PURE__*/jsx("label", {
+        htmlFor: id,
+        children: label
+      }),
+      size: size,
+      type: "body"
+    }), /*#__PURE__*/jsx(Switch$1.Root, {
+      checked: checked,
+      className: styles.switch,
+      disabled: disabled,
+      id: id,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/jsx(Switch$1.Thumb, {
+        className: styles.thumb
+      })
+    }), position === "right" && label && /*#__PURE__*/jsx(Typography, {
+      "aria-disabled": disabled,
+      render: /*#__PURE__*/jsx("label", {
+        htmlFor: id,
+        children: label
+      }),
+      size: size,
+      type: "body"
+    })]
+  });
+}
+
+export { Switch };