@cocso-ui/react 0.1.10 → 0.1.11

package/dist/cjs/accordion/Accordion.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+
+interface TriggerProps extends ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    chevron?: boolean;
+}
+declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref">, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & react.RefAttributes<HTMLHeadingElement>>;
+    Trigger: react.ForwardRefExoticComponent<TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Accordion };

package/dist/cjs/accordion/Accordion.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+var clsx = require('clsx');
+var react = require('react');
+var Accordion_module = require('./Accordion.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AccordionPrimitive);
+
+const AccordionItem = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AccordionPrimitive__namespace.Item, {
+    ref: ref,
+    className: clsx.clsx(Accordion_module.item, className),
+    ...props
+  });
+});
+const AccordionTrigger = /*#__PURE__*/react.forwardRef(({
+  className,
+  children,
+  chevron = true,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsxs(AccordionPrimitive__namespace.Trigger, {
+    ref: ref,
+    className: clsx.clsx(Accordion_module.trigger, className),
+    ...props,
+    children: [children, chevron && /*#__PURE__*/jsxRuntime.jsx(reactIcons.KeyboardArrowDownIcon, {
+      className: Accordion_module.chevron
+    })]
+  });
+});
+const AccordionContent = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(AccordionPrimitive__namespace.Content, {
+    ref: ref,
+    className: clsx.clsx(Accordion_module.content, className),
+    ...props
+  });
+});
+const Accordion = Object.assign(AccordionPrimitive__namespace.Root, {
+  Item: AccordionItem,
+  Header: AccordionPrimitive__namespace.Header,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+exports.Accordion = Accordion;

package/dist/cjs/accordion/Accordion.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Accordion-module_content__V9Ftc,.Accordion-module_item__iE3dq{overflow:hidden}.Accordion-module_content__V9Ftc[data-state=open]{animation:Accordion-module_slide-down__88c3a .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_content__V9Ftc[data-state=closed]{animation:Accordion-module_slide-up__hbYw7 .3s cubic-bezier(.87,0,.13,1)}.Accordion-module_trigger__6nu7o{cursor:pointer;display:flex;justify-content:space-between;width:100%}.Accordion-module_chevron__oFGVg{display:inline-block;height:var(--number-10);transition:transform .2s ease-in-out;width:var(--number-10)}.Accordion-module_trigger__6nu7o[data-state=closed]>.Accordion-module_chevron__oFGVg{transform:rotate(0deg)}.Accordion-module_trigger__6nu7o[data-state=open]>.Accordion-module_chevron__oFGVg{transform:rotate(180deg)}@keyframes Accordion-module_slide-up__hbYw7{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes Accordion-module_slide-down__88c3a{0%{height:0}to{height:var(--radix-accordion-content-height)}}";
+var styles = {"item":"Accordion-module_item__iE3dq","content":"Accordion-module_content__V9Ftc","trigger":"Accordion-module_trigger__6nu7o","chevron":"Accordion-module_chevron__oFGVg"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/button/Button.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { FontWeight } from '../token/typography.js';
+
+type ButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'warning' | 'neutral';
+type ButtonShape = 'square' | 'circle' | 'rounded';
+interface ButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'prefix'> {
+    asChild?: boolean;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    weight?: FontWeight;
+    shape?: ButtonShape;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    svgOnly?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Button };
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant };

package/dist/cjs/button/Button.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var reactPrimitive = require('@radix-ui/react-primitive');
+var clsx = require('clsx');
+var react = require('react');
+var tsPattern = require('ts-pattern');
+var Button_module = require('./Button.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../token/typography.js');
+var Spinner = require('../spinner/Spinner.js');
+var color = require('../token/color.js');
+
+const Button = /*#__PURE__*/react.forwardRef(({
+  asChild,
+  className,
+  style: _style,
+  children,
+  size = 'md',
+  variant = 'primary',
+  weight = 'medium',
+  shape = 'square',
+  prefix,
+  suffix,
+  svgOnly = false,
+  disabled = false,
+  loading = false,
+  ...props
+}, ref) => {
+  const style = {
+    ..._style,
+    ...getSizeStyles(size),
+    '--cocso-button-font-color': getColor(variant),
+    '--cocso-button-font-weight': typography.fontWeight[weight],
+    '--cocso-button-border': getBorder(variant),
+    '--cocso-button-border-radius': getBorderRadius(shape, size),
+    '--cocso-button-bg-color': getBackgroundColor(variant),
+    '--cocso-button-bg-color-hover': getBackgroundColorHover(variant),
+    '--cocso-button-bg-color-active': getBackgroundColorActive(variant)
+  };
+  const isDisabled = disabled || loading;
+  const cn = clsx.clsx(Button_module.button, isDisabled && Button_module.disabled, svgOnly && Button_module.svgOnly, className);
+  const renderButtonContent = ctx => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [loading && /*#__PURE__*/jsxRuntime.jsx(Spinner.Spinner, {
+      size: "sm",
+      color: "white"
+    }), prefix && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Button_module.prefix,
+      children: prefix
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Button_module.content,
+      children: ctx
+    }), suffix && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: Button_module.suffix,
+      children: suffix
+    })]
+  });
+  if (asChild) {
+    if (! /*#__PURE__*/react.isValidElement(children)) {
+      throw new Error('Button: asChild requires a single React element as a child');
+    }
+    const target = children;
+    const ctx = target.props.children;
+    return /*#__PURE__*/react.cloneElement(target, {
+      ref,
+      ...props,
+      ...target.props,
+      className: clsx.clsx(cn, target.props.className),
+      style: {
+        ...style,
+        ...target.props.style
+      },
+      children: renderButtonContent(ctx)
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+    ref: ref,
+    className: cn,
+    disabled: isDisabled,
+    style: style,
+    ...props,
+    children: renderButtonContent(children)
+  });
+});
+const getSizeStyles = size => {
+  const height = tsPattern.match(size).with('xl', () => 56).with('lg', () => 48).with('md', () => 40).with('sm', () => 32).with('xs', () => 24).exhaustive();
+  const inlinePadding = tsPattern.match(size).with('xl', () => 16).with('lg', () => 14).with('md', () => 10).with('sm', () => 6).with('xs', () => 0).exhaustive();
+  const fontSize = tsPattern.match(size).with('xl', () => 16).with('lg', () => 16).with('xs', () => 12).otherwise(() => 14);
+  return {
+    '--cocso-button-height': `${height}px`,
+    '--cocso-button-padding-inline': `${inlinePadding}px`,
+    '--cocso-button-font-size': `${fontSize}px`
+  };
+};
+const getBorderRadius = (shape, size) => {
+  return tsPattern.match(shape).with('square', () => {
+    return tsPattern.match(size).with('xs', () => '4px').otherwise(() => '6px');
+  }).with('circle', () => '100%').with('rounded', () => '100px').exhaustive();
+};
+const getColor = variant => {
+  return tsPattern.match(variant).with('primary', 'success', 'error', 'neutral', () => color.colors.white).with('secondary', 'tertiary', 'warning', () => color.colors.neutral950).exhaustive();
+};
+const getBorder = variant => {
+  return tsPattern.match(variant).with('tertiary', () => `1px solid ${color.colors.neutral100}`).otherwise(() => 'none');
+};
+const getBackgroundColor = variant => {
+  return tsPattern.match(variant).with('primary', () => color.colors.primary500).with('secondary', () => color.colors.white).with('tertiary', () => color.colors.transparent).with('success', () => color.colors.success500).with('error', () => color.colors.danger500).with('warning', () => color.colors.warning300).with('neutral', () => color.colors.neutral950).exhaustive();
+};
+const getBackgroundColorHover = variant => {
+  return tsPattern.match(variant).with('primary', () => color.colors.primary600).with('secondary', () => color.colors.neutral50).with('tertiary', () => color.colors.neutral50).with('success', () => color.colors.success600).with('error', () => color.colors.danger600).with('warning', () => color.colors.warning400).with('neutral', () => color.colors.neutral800).exhaustive();
+};
+const getBackgroundColorActive = variant => {
+  return tsPattern.match(variant).with('primary', () => color.colors.primary700).with('secondary', () => color.colors.neutral100).with('tertiary', () => color.colors.neutral100).with('success', () => color.colors.success700).with('error', () => color.colors.danger700).with('warning', () => color.colors.warning500).with('neutral', () => color.colors.neutral700).exhaustive();
+};
+
+exports.Button = Button;

package/dist/cjs/button/Button.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Button-module_button__eiKKZ{--cocso-button-height:inherit;--cocso-button-padding-inline:inherit;--cocso-button-font-color:inherit;--cocso-button-font-size:inherit;--cocso-button-font-weight:inherit;--cocso-button-border:inherit;--cocso-button-border-radius:inherit;--cocso-button-bg-color:inherit;align-items:center;background-color:var(--cocso-button-bg-color);border:var(--cocso-button-border);border-radius:var(--cocso-button-border-radius);color:var(--cocso-button-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-button-font-size);font-weight:var(--cocso-button-font-weight);height:var(--cocso-button-height);justify-content:center;opacity:1;padding-inline:var(--cocso-button-padding-inline);position:relative;transform:translateZ(0);transition:background-color .15s ease-in-out}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):hover{--cocso-button-bg-color-hover:inherit;background-color:var(--cocso-button-bg-color-hover)}.Button-module_button__eiKKZ:not(.Button-module_disabled__M6r1w):active{--cocso-button-bg-color-active:inherit;background-color:var(--cocso-button-bg-color-active)}.Button-module_content__SVjwi{padding:0 6px}.Button-module_prefix__d7ljt{margin-right:2px}.Button-module_prefix__d7ljt,.Button-module_suffix__9oysT{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;min-width:20px}.Button-module_suffix__9oysT{margin-left:2px}.Button-module_disabled__M6r1w{cursor:not-allowed;opacity:.4}.Button-module_svgOnly__8RcZ7{aspect-ratio:1/1;padding:0}";
+var styles = {"button":"Button-module_button__eiKKZ","disabled":"Button-module_disabled__M6r1w","content":"Button-module_content__SVjwi","prefix":"Button-module_prefix__d7ljt","suffix":"Button-module_suffix__9oysT","svgOnly":"Button-module_svgOnly__8RcZ7"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+type CheckboxSize = 'lg' | 'md' | 'sm';
+type CheckboxStatus = 'on' | 'off' | 'intermediate';
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'onCheckedChange' | 'onChange'> {
+    id?: string;
+    size?: CheckboxSize;
+    status: CheckboxStatus;
+    onChange: (status: CheckboxStatus) => void;
+    label?: string;
+    disabled?: boolean;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize, CheckboxStatus };

package/dist/cjs/checkbox/Checkbox.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var clsx = require('clsx');
+var react = require('react');
+var tsPattern = require('ts-pattern');
+var Checkbox_module = require('./Checkbox.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../typography/Typography.js');
+var spacing = require('../token/spacing.js');
+var color = require('../token/color.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
+
+const Checkbox = /*#__PURE__*/react.forwardRef(({
+  id: _id,
+  className,
+  style: _style,
+  size = 'md',
+  status,
+  onChange,
+  label,
+  disabled,
+  ...props
+}, ref) => {
+  const generatedId = react.useId();
+  const id = _id ?? generatedId;
+  const handleCheckedChange = checked => {
+    if (!disabled) {
+      const nextStatus = tsPattern.match(checked).with(true, () => 'on').with('indeterminate', () => 'intermediate').with(false, () => 'off').exhaustive();
+      onChange(nextStatus);
+    }
+  };
+  const getCheckedState = () => {
+    return tsPattern.match(status).with('on', () => true).with('intermediate', () => 'indeterminate').with('off', () => false).exhaustive();
+  };
+  const style = {
+    ..._style,
+    '--cocso-checkbox-size': getSize(size),
+    '--cocso-checkbox-color': color.colors.white,
+    '--cocso-checkbox-border-color': getBorderColor(status),
+    '--cocso-checkbox-bg-color': getBackgroundColor(status)
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: clsx.clsx(Checkbox_module.wrapper, className),
+    style: style,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(CheckboxPrimitive__namespace.Root, {
+      ref: ref,
+      id: id,
+      className: Checkbox_module.checkbox,
+      checked: getCheckedState(),
+      onCheckedChange: handleCheckedChange,
+      disabled: disabled,
+      ...props,
+      children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, {
+        className: Checkbox_module.indicator,
+        style: {
+          opacity: status === 'on' ? 1 : 0
+        },
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.CheckIcon, {
+          size: 24
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: Checkbox_module.indicator,
+        style: {
+          opacity: status === 'intermediate' ? 1 : 0
+        },
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.CheckIcon, {
+          size: 24
+        })
+      })]
+    }), label && /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+      type: "body",
+      className: Checkbox_module.label,
+      size: size,
+      "aria-disabled": disabled,
+      asChild: true,
+      children: /*#__PURE__*/jsxRuntime.jsx("label", {
+        htmlFor: id,
+        children: label
+      })
+    })]
+  });
+});
+const getSize = size => {
+  return tsPattern.match(size).with('lg', () => spacing.spacing.s10).with('md', () => spacing.spacing.s9).with('sm', () => spacing.spacing.s8).exhaustive();
+};
+const getBorderColor = status => {
+  return tsPattern.match(status).with('on', () => color.colors.primary500).with('intermediate', () => color.colors.primary500).with('off', () => color.colors.neutral100).exhaustive();
+};
+const getBackgroundColor = status => {
+  return tsPattern.match(status).with('on', () => color.colors.primary500).with('intermediate', () => color.colors.primary500).with('off', () => color.colors.white).exhaustive();
+};
+
+exports.Checkbox = Checkbox;

package/dist/cjs/checkbox/Checkbox.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Checkbox-module_wrapper__5uqJp{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Checkbox-module_checkbox__05Z5t{--cocso-checkbox-size:inherit;--cocso-checkbox-color:inherit;--cocso-checkbox-border-color:inherit;--cocso-checkbox-bg-color:inherit;align-items:center;background-color:var(--cocso-checkbox-bg-color);border:1px solid var(--cocso-checkbox-border-color);border-radius:4px;color:var(--cocso-checkbox-color);cursor:pointer;display:inline-flex;height:var(--cocso-checkbox-size);justify-content:center;opacity:1;position:relative;transition:color .15s ease-in-out,border-color .15s ease-in-out,background-color .15s ease-in-out;width:var(--cocso-checkbox-size)}.Checkbox-module_checkbox__05Z5t>svg{stroke:var(--cocso-checkbox-color);display:block;height:auto;max-width:100%;transition:stroke .15s ease-in-out}.Checkbox-module_checkbox__05Z5t input[type=checkbox]{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.Checkbox-module_indicator__MLpNt{bottom:var(--number-1);left:var(--number-1);position:absolute;right:var(--number-1);top:var(--number-1);transition:opacity .15s ease-in-out}.Checkbox-module_label__ubb5U{cursor:pointer;opacity:1}.Checkbox-module_checkbox__05Z5t[disabled],.Checkbox-module_label__ubb5U[aria-disabled=true]{cursor:not-allowed;opacity:.5}";
+var styles = {"wrapper":"Checkbox-module_wrapper__5uqJp","checkbox":"Checkbox-module_checkbox__05Z5t","indicator":"Checkbox-module_indicator__MLpNt","label":"Checkbox-module_label__ubb5U"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/dropdown/Dropdown.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+
+declare const Dropdown: react.FC<DropdownPrimitive.DropdownMenuProps> & {
+    Trigger: react.ForwardRefExoticComponent<DropdownPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Portal: react.FC<DropdownPrimitive.DropdownMenuPortalProps>;
+    Content: react.ForwardRefExoticComponent<Omit<Omit<DropdownPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref">, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Dropdown };

package/dist/cjs/dropdown/Dropdown.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var DropdownPrimitive = require('@radix-ui/react-dropdown-menu');
+var clsx = require('clsx');
+var react = require('react');
+var Dropdown_module = require('./Dropdown.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var DropdownPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownPrimitive);
+
+const DropdownContent = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DropdownPrimitive__namespace.Content, {
+    ref: ref,
+    className: clsx.clsx(Dropdown_module.content, className),
+    ...props
+  });
+});
+const DropdownItem = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DropdownPrimitive__namespace.Item, {
+    ref: ref,
+    className: clsx.clsx(Dropdown_module.item, className),
+    ...props
+  });
+});
+const Dropdown = Object.assign(DropdownPrimitive__namespace.Root, {
+  Trigger: DropdownPrimitive__namespace.Trigger,
+  Portal: DropdownPrimitive__namespace.Portal,
+  Content: DropdownContent,
+  Item: DropdownItem
+});
+
+exports.Dropdown = Dropdown;

package/dist/cjs/dropdown/Dropdown.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@keyframes Dropdown-module_dropdown-slide-up__2uVH3{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Dropdown-module_dropdown-slide-down__T5LLc{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.Dropdown-module_content__S3TRi{background-color:var(--color-background-white);border-radius:var(--ds-spacing-3);box-shadow:var(--shadow-1);display:flex;flex-direction:column;will-change:transform,opacity;z-index:var(--z-index-overlay)}.Dropdown-module_content__S3TRi[data-side=top]{animation:Dropdown-module_dropdown-slide-up__2uVH3 .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_content__S3TRi[data-side=bottom]{animation:Dropdown-module_dropdown-slide-down__T5LLc .4s cubic-bezier(.16,1,.3,1)}.Dropdown-module_item__MIltz{display:flex;flex-direction:column}";
+var styles = {"content":"Dropdown-module_content__S3TRi","item":"Dropdown-module_item__MIltz"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/index.d.ts

@@ -0,0 +1,19 @@
+export { Accordion } from './accordion/Accordion.js';
+export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './button/Button.js';
+export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './checkbox/Checkbox.js';
+export { Dropdown } from './dropdown/Dropdown.js';
+export { Link, LinkProps, LinkSize } from './link/Link.js';
+export { Modal } from './modal/Modal.js';
+export { OneTimePasswordField } from './one-time-password-field/OneTimePasswordField.js';
+export { Pagination, PaginationProps } from './pagination/Pagination.js';
+export { Popover } from './popover/Popover.js';
+export { Select, SelectProps } from './select/Select.js';
+export { Spinner, SpinnerColor, SpinnerProps, SpinnerSize } from './spinner/Spinner.js';
+export { QuantityStatus, QuantityStatusProps, StockQuantityStatus, getColor } from './stock-quantity-status/StockQuantityStatus.js';
+export { Switch, SwitchProps, SwitchSize } from './switch/Switch.js';
+export { Tab } from './tab/Tab.js';
+export { Toaster, toast } from 'sonner';
+export { colors } from './token/color.js';
+export { spacing } from './token/spacing.js';
+export { FontSize, FontWeight, LineHeight, ResponsiveFontSize, fontSize, fontWeight, lineHeight } from './token/typography.js';
+export { BodySize, DisplaySize, HeadingSize, Typography, TypographyProps } from './typography/Typography.js';

package/dist/cjs/index.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var Accordion = require('./accordion/Accordion.js');
+var Button = require('./button/Button.js');
+var Checkbox = require('./checkbox/Checkbox.js');
+var Dropdown = require('./dropdown/Dropdown.js');
+var Link = require('./link/Link.js');
+var Modal = require('./modal/Modal.js');
+var OneTimePasswordField = require('./one-time-password-field/OneTimePasswordField.js');
+var Pagination = require('./pagination/Pagination.js');
+var Popover = require('./popover/Popover.js');
+var Select = require('./select/Select.js');
+var Spinner = require('./spinner/Spinner.js');
+var StockQuantityStatus = require('./stock-quantity-status/StockQuantityStatus.js');
+var Switch = require('./switch/Switch.js');
+var Tab = require('./tab/Tab.js');
+var sonner = require('sonner');
+var color = require('./token/color.js');
+var spacing = require('./token/spacing.js');
+var typography = require('./token/typography.js');
+var Typography = require('./typography/Typography.js');
+
+
+
+exports.Accordion = Accordion.Accordion;
+exports.Button = Button.Button;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Dropdown = Dropdown.Dropdown;
+exports.Link = Link.Link;
+exports.Modal = Modal.Modal;
+exports.OneTimePasswordField = OneTimePasswordField.OneTimePasswordField;
+exports.Pagination = Pagination.Pagination;
+exports.Popover = Popover.Popover;
+exports.Select = Select.Select;
+exports.Spinner = Spinner.Spinner;
+exports.StockQuantityStatus = StockQuantityStatus.StockQuantityStatus;
+exports.getColor = StockQuantityStatus.getColor;
+exports.Switch = Switch.Switch;
+exports.Tab = Tab.Tab;
+Object.defineProperty(exports, "Toaster", {
+	enumerable: true,
+	get: function () { return sonner.Toaster; }
+});
+Object.defineProperty(exports, "toast", {
+	enumerable: true,
+	get: function () { return sonner.toast; }
+});
+exports.colors = color.colors;
+exports.spacing = spacing.spacing;
+exports.fontSize = typography.fontSize;
+exports.fontWeight = typography.fontWeight;
+exports.lineHeight = typography.lineHeight;
+exports.Typography = Typography.Typography;

package/dist/cjs/link/Link.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { FontWeight, LineHeight } from '../token/typography.js';
+
+type LinkSize = 'lg' | 'md' | 'sm' | 'xs';
+interface LinkProps extends ComponentPropsWithoutRef<'a'> {
+    asChild?: boolean;
+    size?: LinkSize;
+    weight?: FontWeight;
+    lineHeight?: LineHeight;
+    indicator?: boolean;
+}
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+export { Link };
+export type { LinkProps, LinkSize };

package/dist/cjs/link/Link.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var reactPrimitive = require('@radix-ui/react-primitive');
+var reactSlot = require('@radix-ui/react-slot');
+var clsx = require('clsx');
+var react = require('react');
+var Link_module = require('./Link.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../typography/Typography.js');
+
+const Link = /*#__PURE__*/react.forwardRef(({
+  asChild,
+  className,
+  size,
+  weight,
+  lineHeight,
+  indicator = true,
+  ...props
+}, ref) => {
+  const Comp = asChild ? reactSlot.Slot : reactPrimitive.Primitive.a;
+  return /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+    type: "body",
+    size: size,
+    weight: weight,
+    lineHeight: lineHeight,
+    asChild: true,
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ref: ref,
+      className: clsx.clsx(Link_module.link, indicator && Link_module.indicator, className),
+      ...props
+    })
+  });
+});
+
+exports.Link = Link;

package/dist/cjs/link/Link.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Link-module_link__J9CFb{align-items:center;cursor:pointer;display:inline-flex;gap:var(--ds-spacing-2);justify-content:center;text-decoration:none;transition:color .15s ease-in-out;width:fit-content}.Link-module_link__J9CFb>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Link-module_indicator__DIUaW{text-decoration:underline}";
+var styles = {"link":"Link-module_link__J9CFb","indicator":"Link-module_indicator__DIUaW"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import * as ModalPrimitive from '@radix-ui/react-dialog';
+
+declare const Modal: react.FC<ModalPrimitive.DialogProps> & {
+    Trigger: react.ForwardRefExoticComponent<ModalPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: react.ForwardRefExoticComponent<Omit<Omit<ModalPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref">, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Close: react.ForwardRefExoticComponent<Omit<ModalPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Title: react.ForwardRefExoticComponent<Omit<ModalPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<Omit<ModalPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+};
+
+export { Modal };