@cocso-ui/react 0.1.10 → 0.1.12

package/dist/esm/one-time-password-field/OneTimePasswordField.mjs

@@ -0,0 +1,31 @@
+import * as OneTimePasswordFieldPrimitive from '@radix-ui/react-one-time-password-field';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './OneTimePasswordField.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const OneTimePasswordFieldRoot = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(OneTimePasswordFieldPrimitive.Root, {
+    ref: ref,
+    className: clsx(styles.otp, className),
+    ...props
+  });
+});
+const OneTimePasswordFieldInput = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(OneTimePasswordFieldPrimitive.Input, {
+    ref: ref,
+    className: clsx(styles.input, className),
+    ...props
+  });
+});
+const OneTimePasswordField = Object.assign(OneTimePasswordFieldRoot, {
+  Input: OneTimePasswordFieldInput
+});
+
+export { OneTimePasswordField };

package/dist/esm/one-time-password-field/OneTimePasswordField.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"otp":"OneTimePasswordField-module_otp__zoWO7","input":"OneTimePasswordField-module_input__owV9H"};
+
+export { styles as default };

package/dist/esm/pagination/Pagination.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+interface PaginationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    page: number;
+    totalPages: number;
+    maxVisible?: number;
+    onChange: (pageNumber: number) => void;
+}
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Pagination };
+export type { PaginationProps };

package/dist/esm/pagination/Pagination.mjs

@@ -0,0 +1,81 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './Pagination.module.css.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+const Pagination = /*#__PURE__*/forwardRef(({
+  className,
+  page,
+  totalPages,
+  maxVisible = 5,
+  onChange,
+  ...props
+}, ref) => {
+  const halfVisible = Math.ceil(maxVisible / 2);
+  const renderPageButton = pageNumber => /*#__PURE__*/jsx("button", {
+    type: "button",
+    className: styles.item,
+    onClick: () => onChange(pageNumber),
+    "data-active": page === pageNumber,
+    children: pageNumber
+  }, pageNumber);
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: clsx(styles.pagination, className),
+    ...props,
+    children: [totalPages > 1 && /*#__PURE__*/jsx("button", {
+      className: styles.arrow,
+      type: "button",
+      disabled: page === 1,
+      onClick: () => page > 1 && onChange(page - 1),
+      children: /*#__PURE__*/jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsx("path", {
+          d: "m15 18-6-6 6-6"
+        })
+      })
+    }), totalPages <= maxVisible + 2 ? Array(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxs(Fragment, {
+      children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsx("span", {
+        className: styles.trunc,
+        children: "..."
+      }), Array(maxVisible).fill(0).map((_, index) => {
+        const pageNumber = page - halfVisible + index + 1;
+        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : '';
+      }), page < totalPages - halfVisible && /*#__PURE__*/jsx("span", {
+        className: styles.trunc,
+        children: "..."
+      }), renderPageButton(totalPages)]
+    }), totalPages > 1 && /*#__PURE__*/jsx("button", {
+      className: styles.arrow,
+      type: "button",
+      disabled: page === totalPages,
+      onClick: () => page < totalPages && onChange(page + 1),
+      children: /*#__PURE__*/jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsx("path", {
+          d: "m9 18 6-6-6-6"
+        })
+      })
+    })]
+  });
+});
+
+export { Pagination };

package/dist/esm/pagination/Pagination.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"pagination":"Pagination-module_pagination__viYLy","arrow":"Pagination-module_arrow__YYkob","item":"Pagination-module_item__uVIra","trunc":"Pagination-module_trunc__-ZgYQ"};
+
+export { styles as default };

package/dist/esm/popover/Popover.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+declare const Popover: react.FC<PopoverPrimitive.PopoverProps> & {
+    Trigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Portal: react.FC<PopoverPrimitive.PopoverPortalProps>;
+    Content: react.ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref">, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Popover };

package/dist/esm/popover/Popover.mjs

@@ -0,0 +1,23 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './Popover.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const PopoverContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(PopoverPrimitive.Content, {
+    ref: ref,
+    className: clsx(styles.content, className),
+    ...props
+  });
+});
+const Popover = Object.assign(PopoverPrimitive.Root, {
+  Trigger: PopoverPrimitive.Trigger,
+  Portal: PopoverPrimitive.Portal,
+  Content: PopoverContent
+});
+
+export { Popover };

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

@@ -0,0 +1,3 @@
+var styles = {"content":"Popover-module_content__ry9PF"};
+
+export { styles as default };

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

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+type SelectSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+interface SelectProps extends Omit<ComponentPropsWithoutRef<'select'>, 'size'> {
+    size?: SelectSize;
+    disabled?: boolean;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+export { Select };
+export type { SelectProps };

package/dist/esm/select/Select.mjs

@@ -0,0 +1,82 @@
+import { KeyboardArrowDownIcon } from '@cocso-ui/react-icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { match } from 'ts-pattern';
+import styles from './Select.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { spacing } from '../token/spacing.mjs';
+
+const Select = /*#__PURE__*/forwardRef(({
+  className,
+  style: _style,
+  size = 'md',
+  disabled = false,
+  children,
+  ...props
+}, ref) => {
+  const style = {
+    ..._style,
+    ...getStyles(size)
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: styles.wrapper,
+    children: [/*#__PURE__*/jsx("select", {
+      ref: ref,
+      className: clsx(styles.select, className),
+      style: style,
+      disabled: disabled,
+      ...props,
+      children: children
+    }), /*#__PURE__*/jsx("span", {
+      className: styles.icon,
+      children: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {
+        size: 20
+      })
+    })]
+  });
+});
+const getStyles = size => match(size).with('2xs', () => ({
+  '--cocso-select-min-width': spacing.s11,
+  '--cocso-select-height': spacing.s11,
+  '--cocso-select-padding-left': spacing.s5,
+  '--cocso-select-padding-right': `calc(${spacing.s8} + 16px)`,
+  '--cocso-select-font-size': '12px',
+  '--cocso-select-border-radius': spacing.s3
+})).with('xs', () => ({
+  '--cocso-select-min-width': spacing.s12,
+  '--cocso-select-height': spacing.s12,
+  '--cocso-select-padding-left': spacing.s6,
+  '--cocso-select-padding-right': `calc(${spacing.s7} + 16px)`,
+  '--cocso-select-font-size': '14px',
+  '--cocso-select-border-radius': spacing.s3
+})).with('sm', () => ({
+  '--cocso-select-min-width': spacing.s14,
+  '--cocso-select-height': spacing.s14,
+  '--cocso-select-padding-left': spacing.s7,
+  '--cocso-select-padding-right': `calc(${spacing.s7} + 16px)`,
+  '--cocso-select-font-size': '14px',
+  '--cocso-select-border-radius': spacing.s3
+})).with('md', () => ({
+  '--cocso-select-min-width': spacing.s16,
+  '--cocso-select-height': spacing.s16,
+  '--cocso-select-padding-left': spacing.s8,
+  '--cocso-select-padding-right': `calc(${spacing.s8} + 16px)`,
+  '--cocso-select-font-size': '16px',
+  '--cocso-select-border-radius': spacing.s4
+})).with('lg', () => ({
+  '--cocso-select-min-width': spacing.s17,
+  '--cocso-select-height': spacing.s17,
+  '--cocso-select-padding-left': spacing.s9,
+  '--cocso-select-padding-right': `calc(${spacing.s9} + 16px)`,
+  '--cocso-select-font-size': '18px',
+  '--cocso-select-border-radius': spacing.s4
+})).with('xl', () => ({
+  '--cocso-select-min-width': spacing.s18,
+  '--cocso-select-height': spacing.s18,
+  '--cocso-select-padding-left': spacing.s10,
+  '--cocso-select-padding-right': `calc(${spacing.s10} + 16px)`,
+  '--cocso-select-font-size': '18px',
+  '--cocso-select-border-radius': spacing.s4
+})).exhaustive();
+
+export { Select };

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

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"Select-module_wrapper__4k8By","select":"Select-module_select__MUUdH","icon":"Select-module_icon__EuBJI"};
+
+export { styles as default };

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

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+type SpinnerSize = 'xl' | 'lg' | 'md' | 'sm';
+type SpinnerColor = 'primary' | 'neutral' | 'white';
+interface SpinnerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'size' | 'color'> {
+    asChild?: boolean;
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+}
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Spinner };
+export type { SpinnerColor, SpinnerProps, SpinnerSize };

package/dist/esm/spinner/Spinner.mjs

@@ -0,0 +1,38 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { match } from 'ts-pattern';
+import styles from './Spinner.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { colors } from '../token/color.mjs';
+
+const Spinner = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  style: _style,
+  size = 'md',
+  color = 'primary',
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : Primitive.div;
+  const style = {
+    ..._style,
+    '--cocso-spinner-size': getSize(size),
+    '--cocso-spinner-border-width': getBorderWidth(size),
+    '--cocso-spinner-border-color': getBorderColor(color),
+    '--cocso-spinner-bg-color': getBackgroundColor(color)
+  };
+  return /*#__PURE__*/jsx(Comp, {
+    ref: ref,
+    className: clsx(styles.spinner, className),
+    style: style,
+    ...props
+  });
+});
+const getSize = size => match(size).with('xl', () => '40px').with('lg', () => '32px').with('md', () => '24px').with('sm', () => '20px').exhaustive();
+const getBorderWidth = size => match(size).with('xl', () => '5px').with('lg', () => '4px').with('md', () => '3px').with('sm', () => '2px').exhaustive();
+const getBorderColor = color => match(color).with('primary', () => colors.primary500).with('neutral', () => colors.neutral600).with('white', () => colors.white).exhaustive();
+const getBackgroundColor = color => match(color).with('primary', () => colors.primary100).with('neutral', () => colors.neutral100).with('white', () => colors.whiteAlpha20).exhaustive();
+
+export { Spinner };

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

@@ -0,0 +1,3 @@
+var styles = {"spinner":"Spinner-module_spinner__iIx6p"};
+
+export { styles as default };

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

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+type QuantityStatus = '보통' | '여유' | '부족';
+interface QuantityStatusProps extends ComponentPropsWithoutRef<'div'> {
+    quantity: QuantityStatus;
+}
+declare const StockQuantityStatus: react.ForwardRefExoticComponent<QuantityStatusProps & react.RefAttributes<HTMLDivElement>>;
+declare const getColor: (quantity: QuantityStatus) => string;
+
+export { StockQuantityStatus, getColor };
+export type { QuantityStatus, QuantityStatusProps };

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

@@ -0,0 +1,102 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { match } from 'ts-pattern';
+import styles from './StockQuantityStatus.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { spacing } from '../token/spacing.mjs';
+import { Typography } from '../typography/Typography.mjs';
+import { colors } from '../token/color.mjs';
+
+const StockQuantityStatus = /*#__PURE__*/forwardRef(({
+  className,
+  style: _style,
+  quantity,
+  ...props
+}, ref) => {
+  const style = {
+    ..._style,
+    '--cocso-stock-quantity-status-color': getColor(quantity),
+    '--cocso-stock-quantity-status-indicator-width': spacing.s9
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: clsx(styles.stock, className),
+    style: style,
+    ...props,
+    children: [/*#__PURE__*/jsx("span", {
+      className: styles.indicator,
+      children: quantity === '여유' ? /*#__PURE__*/jsxs("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: [/*#__PURE__*/jsx("path", {
+          fillRule: "evenodd",
+          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"
+        }), /*#__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"
+        })]
+      }) : quantity === '보통' ? /*#__PURE__*/jsxs("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: [/*#__PURE__*/jsx("path", {
+          fillRule: "evenodd",
+          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"
+        }), /*#__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"
+        })]
+      }) : /*#__PURE__*/jsxs("svg", {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: [/*#__PURE__*/jsx("path", {
+          fillRule: "evenodd",
+          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"
+        }), /*#__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"
+        })]
+      })
+    }), /*#__PURE__*/jsx(Typography, {
+      type: "body",
+      size: "sm",
+      color: "currentColor",
+      children: quantity
+    })]
+  });
+});
+const getColor = quantity => match(quantity).with('여유', () => colors.primary500).with('보통', () => colors.success400).with('부족', () => colors.danger500).exhaustive();
+
+export { StockQuantityStatus, getColor };

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

@@ -0,0 +1,3 @@
+var styles = {"stock":"StockQuantityStatus-module_stock__mWbqI","indicator":"StockQuantityStatus-module_indicator__inaKv"};
+
+export { styles as default };

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

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+type SwitchSize = 'lg' | 'md';
+interface SwitchProps extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+    id?: string;
+    size?: SwitchSize;
+    disabled?: boolean;
+    label?: string;
+    position?: 'left' | 'right';
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Switch };
+export type { SwitchProps, SwitchSize };

package/dist/esm/switch/Switch.mjs

@@ -0,0 +1,68 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { clsx } from 'clsx';
+import { forwardRef, useId } from 'react';
+import { match } from 'ts-pattern';
+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 { spacing } from '../token/spacing.mjs';
+
+const Switch = /*#__PURE__*/forwardRef(({
+  id: _id,
+  className,
+  style: _style,
+  size = 'md',
+  position = 'right',
+  disabled,
+  label,
+  ...props
+}, ref) => {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const style = {
+    ..._style,
+    '--cocso-switch-width': getSwitchWidth(size),
+    '--cocso-switch-height': getSwitchHeight(size),
+    '--cocso-switch-thumb-width': getThumbSize(size),
+    '--cocso-switch-thumb-height': getThumbSize(size),
+    '--cocso-switch-bg-color': colors.neutral100
+  };
+  return /*#__PURE__*/jsxs(Primitive.div, {
+    className: clsx(styles.wrapper, className),
+    "aria-disabled": disabled,
+    style: style,
+    children: [position === 'left' && /*#__PURE__*/jsx(Typography, {
+      type: "body",
+      size: size,
+      asChild: true,
+      children: /*#__PURE__*/jsx("label", {
+        htmlFor: id,
+        children: label
+      })
+    }), /*#__PURE__*/jsx(SwitchPrimitive.Root, {
+      ref: ref,
+      className: styles.switch,
+      disabled: disabled,
+      ...props,
+      children: /*#__PURE__*/jsx(SwitchPrimitive.Thumb, {
+        className: styles.thumb
+      })
+    }), position === 'right' && /*#__PURE__*/jsx(Typography, {
+      type: "body",
+      size: size,
+      "aria-disabled": disabled,
+      asChild: true,
+      children: /*#__PURE__*/jsx("label", {
+        htmlFor: id,
+        children: label
+      })
+    })]
+  });
+});
+const getSwitchWidth = size => match(size).with('lg', () => spacing.s14).with('md', () => spacing.s12).exhaustive();
+const getSwitchHeight = size => match(size).with('lg', () => spacing.s10).with('md', () => spacing.s9).exhaustive();
+const getThumbSize = size => match(size).with('lg', () => spacing.s9).with('md', () => spacing.s8).exhaustive();
+
+export { Switch };

package/dist/esm/switch/Switch.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"Switch-module_wrapper__qcI9-","switch":"Switch-module_switch__pwmft","thumb":"Switch-module_thumb__pQGDy"};
+
+export { styles as default };

package/dist/esm/tab/Tab.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as TabPrimitive from '@radix-ui/react-tabs';
+
+declare const Tab: react.ForwardRefExoticComponent<Omit<TabPrimitive.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    List: react.ForwardRefExoticComponent<Omit<TabPrimitive.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<TabPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<TabPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Tab };

package/dist/esm/tab/Tab.mjs

@@ -0,0 +1,43 @@
+import * as TabPrimitive from '@radix-ui/react-tabs';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const TabPrimitiveRoot = /*#__PURE__*/forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(TabPrimitive.Root, {
+    ref: ref,
+    ...props
+  });
+});
+const TabPrimitiveList = /*#__PURE__*/forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(TabPrimitive.List, {
+    ref: ref,
+    ...props
+  });
+});
+const TabPrimitiveTrigger = /*#__PURE__*/forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(TabPrimitive.Trigger, {
+    ref: ref,
+    ...props
+  });
+});
+const TabPrimitiveContent = /*#__PURE__*/forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(TabPrimitive.Content, {
+    ref: ref,
+    ...props
+  });
+});
+const Tab = Object.assign(TabPrimitiveRoot, {
+  List: TabPrimitiveList,
+  Trigger: TabPrimitiveTrigger,
+  Content: TabPrimitiveContent
+});
+
+export { Tab };