@cocso-ui/react 0.1.10 → 0.1.11

package/dist/cjs/typography/Typography.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 = ".Typography-module_typography__45lnt{--cocso-typography-font-color:inherit;--cocso-typography-font-size:inherit;--cocso-typography-font-weight:inherit;--cocso-typography-line-height:inherit;color:var(--cocso-typography-font-color);font-size:var(--cocso-typography-font-size);font-weight:var(--cocso-typography-font-weight);line-height:var(--cocso-typography-line-height)}.Typography-module_typography__45lnt[aria-disabled=true]{cursor:not-allowed;opacity:.4}@media (min-width:768px){.Typography-module_typography__45lnt{font-size:var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size))}}@media (min-width:1024px){.Typography-module_typography__45lnt{font-size:var(--cocso-desktop-typography-font-size,var(--cocso-tablet-typography-font-size,var(--cocso-typography-font-size)))}}";
+var styles = {"typography":"Typography-module_typography__45lnt"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/esm/accordion/Accordion.d.mts

@@ -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/esm/accordion/Accordion.mjs

@@ -0,0 +1,50 @@
+import { KeyboardArrowDownIcon } from '@cocso-ui/react-icons';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './Accordion.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const AccordionItem = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(AccordionPrimitive.Item, {
+    ref: ref,
+    className: clsx(styles.item, className),
+    ...props
+  });
+});
+const AccordionTrigger = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  chevron = true,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs(AccordionPrimitive.Trigger, {
+    ref: ref,
+    className: clsx(styles.trigger, className),
+    ...props,
+    children: [children, chevron && /*#__PURE__*/jsx(KeyboardArrowDownIcon, {
+      className: styles.chevron
+    })]
+  });
+});
+const AccordionContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(AccordionPrimitive.Content, {
+    ref: ref,
+    className: clsx(styles.content, className),
+    ...props
+  });
+});
+const Accordion = Object.assign(AccordionPrimitive.Root, {
+  Item: AccordionItem,
+  Header: AccordionPrimitive.Header,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+export { Accordion };

package/dist/esm/accordion/Accordion.module.css.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs';
+
+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(css_248z);
+
+export { styles as default };

package/dist/esm/button/Button.d.mts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { FontWeight } from '../token/typography.mjs';
+
+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/esm/button/Button.mjs

@@ -0,0 +1,113 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import { clsx } from 'clsx';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import { match } from 'ts-pattern';
+import styles from './Button.module.css.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { fontWeight } from '../token/typography.mjs';
+import { Spinner } from '../spinner/Spinner.mjs';
+import { colors } from '../token/color.mjs';
+
+const Button = /*#__PURE__*/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': 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(styles.button, isDisabled && styles.disabled, svgOnly && styles.svgOnly, className);
+  const renderButtonContent = ctx => /*#__PURE__*/jsxs(Fragment, {
+    children: [loading && /*#__PURE__*/jsx(Spinner, {
+      size: "sm",
+      color: "white"
+    }), prefix && /*#__PURE__*/jsx("span", {
+      className: styles.prefix,
+      children: prefix
+    }), /*#__PURE__*/jsx("span", {
+      className: styles.content,
+      children: ctx
+    }), suffix && /*#__PURE__*/jsx("span", {
+      className: styles.suffix,
+      children: suffix
+    })]
+  });
+  if (asChild) {
+    if (! /*#__PURE__*/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__*/cloneElement(target, {
+      ref,
+      ...props,
+      ...target.props,
+      className: clsx(cn, target.props.className),
+      style: {
+        ...style,
+        ...target.props.style
+      },
+      children: renderButtonContent(ctx)
+    });
+  }
+  return /*#__PURE__*/jsx(Primitive.button, {
+    ref: ref,
+    className: cn,
+    disabled: isDisabled,
+    style: style,
+    ...props,
+    children: renderButtonContent(children)
+  });
+});
+const getSizeStyles = size => {
+  const height = match(size).with('xl', () => 56).with('lg', () => 48).with('md', () => 40).with('sm', () => 32).with('xs', () => 24).exhaustive();
+  const inlinePadding = match(size).with('xl', () => 16).with('lg', () => 14).with('md', () => 10).with('sm', () => 6).with('xs', () => 0).exhaustive();
+  const fontSize = 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 match(shape).with('square', () => {
+    return match(size).with('xs', () => '4px').otherwise(() => '6px');
+  }).with('circle', () => '100%').with('rounded', () => '100px').exhaustive();
+};
+const getColor = variant => {
+  return match(variant).with('primary', 'success', 'error', 'neutral', () => colors.white).with('secondary', 'tertiary', 'warning', () => colors.neutral950).exhaustive();
+};
+const getBorder = variant => {
+  return match(variant).with('tertiary', () => `1px solid ${colors.neutral100}`).otherwise(() => 'none');
+};
+const getBackgroundColor = variant => {
+  return match(variant).with('primary', () => colors.primary500).with('secondary', () => colors.white).with('tertiary', () => colors.transparent).with('success', () => colors.success500).with('error', () => colors.danger500).with('warning', () => colors.warning300).with('neutral', () => colors.neutral950).exhaustive();
+};
+const getBackgroundColorHover = variant => {
+  return match(variant).with('primary', () => colors.primary600).with('secondary', () => colors.neutral50).with('tertiary', () => colors.neutral50).with('success', () => colors.success600).with('error', () => colors.danger600).with('warning', () => colors.warning400).with('neutral', () => colors.neutral800).exhaustive();
+};
+const getBackgroundColorActive = variant => {
+  return match(variant).with('primary', () => colors.primary700).with('secondary', () => colors.neutral100).with('tertiary', () => colors.neutral100).with('success', () => colors.success700).with('error', () => colors.danger700).with('warning', () => colors.warning500).with('neutral', () => colors.neutral700).exhaustive();
+};
+
+export { Button };

package/dist/esm/button/Button.module.css.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs';
+
+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(css_248z);
+
+export { styles as default };

package/dist/esm/checkbox/Checkbox.d.mts

@@ -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/esm/checkbox/Checkbox.mjs

@@ -0,0 +1,94 @@
+import { CheckIcon } from '@cocso-ui/react-icons';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { clsx } from 'clsx';
+import { forwardRef, useId } from 'react';
+import { match } from 'ts-pattern';
+import styles from './Checkbox.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../typography/Typography.mjs';
+import { spacing } from '../token/spacing.mjs';
+import { colors } from '../token/color.mjs';
+
+const Checkbox = /*#__PURE__*/forwardRef(({
+  id: _id,
+  className,
+  style: _style,
+  size = 'md',
+  status,
+  onChange,
+  label,
+  disabled,
+  ...props
+}, ref) => {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const handleCheckedChange = checked => {
+    if (!disabled) {
+      const nextStatus = match(checked).with(true, () => 'on').with('indeterminate', () => 'intermediate').with(false, () => 'off').exhaustive();
+      onChange(nextStatus);
+    }
+  };
+  const getCheckedState = () => {
+    return match(status).with('on', () => true).with('intermediate', () => 'indeterminate').with('off', () => false).exhaustive();
+  };
+  const style = {
+    ..._style,
+    '--cocso-checkbox-size': getSize(size),
+    '--cocso-checkbox-color': colors.white,
+    '--cocso-checkbox-border-color': getBorderColor(status),
+    '--cocso-checkbox-bg-color': getBackgroundColor(status)
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: clsx(styles.wrapper, className),
+    style: style,
+    children: [/*#__PURE__*/jsxs(CheckboxPrimitive.Root, {
+      ref: ref,
+      id: id,
+      className: styles.checkbox,
+      checked: getCheckedState(),
+      onCheckedChange: handleCheckedChange,
+      disabled: disabled,
+      ...props,
+      children: [/*#__PURE__*/jsx(CheckboxPrimitive.Indicator, {
+        className: styles.indicator,
+        style: {
+          opacity: status === 'on' ? 1 : 0
+        },
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsx(CheckIcon, {
+          size: 24
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: styles.indicator,
+        style: {
+          opacity: status === 'intermediate' ? 1 : 0
+        },
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsx(CheckIcon, {
+          size: 24
+        })
+      })]
+    }), label && /*#__PURE__*/jsx(Typography, {
+      type: "body",
+      className: styles.label,
+      size: size,
+      "aria-disabled": disabled,
+      asChild: true,
+      children: /*#__PURE__*/jsx("label", {
+        htmlFor: id,
+        children: label
+      })
+    })]
+  });
+});
+const getSize = size => {
+  return match(size).with('lg', () => spacing.s10).with('md', () => spacing.s9).with('sm', () => spacing.s8).exhaustive();
+};
+const getBorderColor = status => {
+  return match(status).with('on', () => colors.primary500).with('intermediate', () => colors.primary500).with('off', () => colors.neutral100).exhaustive();
+};
+const getBackgroundColor = status => {
+  return match(status).with('on', () => colors.primary500).with('intermediate', () => colors.primary500).with('off', () => colors.white).exhaustive();
+};
+
+export { Checkbox };

package/dist/esm/checkbox/Checkbox.module.css.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs';
+
+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(css_248z);
+
+export { styles as default };

package/dist/esm/dropdown/Dropdown.d.mts

@@ -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/esm/dropdown/Dropdown.mjs

@@ -0,0 +1,34 @@
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './Dropdown.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const DropdownContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(DropdownPrimitive.Content, {
+    ref: ref,
+    className: clsx(styles.content, className),
+    ...props
+  });
+});
+const DropdownItem = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(DropdownPrimitive.Item, {
+    ref: ref,
+    className: clsx(styles.item, className),
+    ...props
+  });
+});
+const Dropdown = Object.assign(DropdownPrimitive.Root, {
+  Trigger: DropdownPrimitive.Trigger,
+  Portal: DropdownPrimitive.Portal,
+  Content: DropdownContent,
+  Item: DropdownItem
+});
+
+export { Dropdown };

package/dist/esm/dropdown/Dropdown.module.css.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs';
+
+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(css_248z);
+
+export { styles as default };

package/dist/esm/index.d.mts

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

package/dist/esm/index.mjs

@@ -0,0 +1,19 @@
+export { Accordion } from './accordion/Accordion.mjs';
+export { Button } from './button/Button.mjs';
+export { Checkbox } from './checkbox/Checkbox.mjs';
+export { Dropdown } from './dropdown/Dropdown.mjs';
+export { Link } from './link/Link.mjs';
+export { Modal } from './modal/Modal.mjs';
+export { OneTimePasswordField } from './one-time-password-field/OneTimePasswordField.mjs';
+export { Pagination } from './pagination/Pagination.mjs';
+export { Popover } from './popover/Popover.mjs';
+export { Select } from './select/Select.mjs';
+export { Spinner } from './spinner/Spinner.mjs';
+export { StockQuantityStatus, getColor } from './stock-quantity-status/StockQuantityStatus.mjs';
+export { Switch } from './switch/Switch.mjs';
+export { Tab } from './tab/Tab.mjs';
+export { Toaster, toast } from 'sonner';
+export { colors } from './token/color.mjs';
+export { spacing } from './token/spacing.mjs';
+export { fontSize, fontWeight, lineHeight } from './token/typography.mjs';
+export { Typography } from './typography/Typography.mjs';

package/dist/esm/link/Link.d.mts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { FontWeight, LineHeight } from '../token/typography.mjs';
+
+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/esm/link/Link.mjs

@@ -0,0 +1,33 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './Link.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../typography/Typography.mjs';
+
+const Link = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  size,
+  weight,
+  lineHeight,
+  indicator = true,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : Primitive.a;
+  return /*#__PURE__*/jsx(Typography, {
+    type: "body",
+    size: size,
+    weight: weight,
+    lineHeight: lineHeight,
+    asChild: true,
+    children: /*#__PURE__*/jsx(Comp, {
+      ref: ref,
+      className: clsx(styles.link, indicator && styles.indicator, className),
+      ...props
+    })
+  });
+});
+
+export { Link };

package/dist/esm/link/Link.module.css.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs';
+
+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(css_248z);
+
+export { styles as default };

package/dist/esm/modal/Modal.d.mts

@@ -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 };

package/dist/esm/modal/Modal.mjs

@@ -0,0 +1,82 @@
+import { CloseIcon } from '@cocso-ui/react-icons';
+import * as ModalPrimitive from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './Modal.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Typography } from '../typography/Typography.mjs';
+
+const ModalContent = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs(ModalPrimitive.Portal, {
+    children: [/*#__PURE__*/jsx(ModalPrimitive.Overlay, {
+      className: styles.overlay
+    }), /*#__PURE__*/jsx(ModalPrimitive.Content, {
+      ref: ref,
+      className: clsx(styles.content, className),
+      ...props,
+      children: children
+    })]
+  });
+});
+const ModalClose = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(ModalPrimitive.Close, {
+    ref: ref,
+    className: clsx(styles.close, className),
+    ...props,
+    children: /*#__PURE__*/jsx(CloseIcon, {
+      size: 24
+    })
+  });
+});
+const ModalTitle = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(ModalPrimitive.Title, {
+    ref: ref,
+    className: clsx(styles.title, className),
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/jsx(Typography, {
+      type: "heading",
+      color: "text.basic",
+      children: children
+    })
+  });
+});
+const ModalDescription = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(ModalPrimitive.Description, {
+    ref: ref,
+    className: clsx(styles.description, className),
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/jsx(Typography, {
+      type: "body",
+      size: "sm",
+      color: "text.subtle",
+      children: children
+    })
+  });
+});
+const Modal = Object.assign(ModalPrimitive.Root, {
+  Trigger: ModalPrimitive.Trigger,
+  Content: ModalContent,
+  Close: ModalClose,
+  Title: ModalTitle,
+  Description: ModalDescription
+});
+
+export { Modal };

package/dist/esm/modal/Modal.module.css.mjs

@@ -0,0 +1,7 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs';
+
+var css_248z = "@keyframes Modal-module_overlay-show__zyvAx{0%{opacity:0}to{opacity:1}}.Modal-module_overlay__7ZBDB{animation:Modal-module_overlay-show__zyvAx .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-black-alpha-30);inset:0;position:fixed;z-index:var(--z-index-overlay)}@keyframes Modal-module_content-show__anq3d{0%{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.Modal-module_content__M1b6Q{animation:Modal-module_content-show__anq3d .15s cubic-bezier(.16,1,.3,1);background-color:var(--ds-white);border-radius:8px;display:flex;flex-direction:column;left:50%;max-height:85vh;max-width:420px;padding:var(--number-8);position:fixed;top:50%;transform:translate(-50%,-50%);width:90vw;z-index:var(--z-index-modal)}.Modal-module_close__UbAF7{align-items:center;cursor:pointer;display:flex;height:var(--ds-spacing-10);justify-content:center;width:var(--ds-spacing-10)}.Modal-module_title__oTluo{text-align:center;word-break:keep-all}.Modal-module_description__RgMC5{margin-top:var(--ds-spacing-5);text-align:center}";
+var styles = {"overlay":"Modal-module_overlay__7ZBDB","content":"Modal-module_content__M1b6Q","close":"Modal-module_close__UbAF7","title":"Modal-module_title__oTluo","description":"Modal-module_description__RgMC5"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/esm/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.mjs

@@ -0,0 +1,26 @@
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };