@cocso-ui/react 0.1.9 → 0.1.11

package/dist/cjs/modal/Modal.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var ModalPrimitive = require('@radix-ui/react-dialog');
+var clsx = require('clsx');
+var react = require('react');
+var Modal_module = require('./Modal.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../typography/Typography.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 ModalPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ModalPrimitive);
+
+const ModalContent = /*#__PURE__*/react.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsxs(ModalPrimitive__namespace.Portal, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ModalPrimitive__namespace.Overlay, {
+      className: Modal_module.overlay
+    }), /*#__PURE__*/jsxRuntime.jsx(ModalPrimitive__namespace.Content, {
+      ref: ref,
+      className: clsx.clsx(Modal_module.content, className),
+      ...props,
+      children: children
+    })]
+  });
+});
+const ModalClose = /*#__PURE__*/react.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(ModalPrimitive__namespace.Close, {
+    ref: ref,
+    className: clsx.clsx(Modal_module.close, className),
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.CloseIcon, {
+      size: 24
+    })
+  });
+});
+const ModalTitle = /*#__PURE__*/react.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(ModalPrimitive__namespace.Title, {
+    ref: ref,
+    className: clsx.clsx(Modal_module.title, className),
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+      type: "heading",
+      color: "text.basic",
+      children: children
+    })
+  });
+});
+const ModalDescription = /*#__PURE__*/react.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(ModalPrimitive__namespace.Description, {
+    ref: ref,
+    className: clsx.clsx(Modal_module.description, className),
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+      type: "body",
+      size: "sm",
+      color: "text.subtle",
+      children: children
+    })
+  });
+});
+const Modal = Object.assign(ModalPrimitive__namespace.Root, {
+  Trigger: ModalPrimitive__namespace.Trigger,
+  Content: ModalContent,
+  Close: ModalClose,
+  Title: ModalTitle,
+  Description: ModalDescription
+});
+
+exports.Modal = Modal;

package/dist/cjs/modal/Modal.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 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_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,28 @@
+'use strict';
+
+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));
+  }
+}
+
+module.exports = styleInject;

package/dist/cjs/one-time-password-field/OneTimePasswordField.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import * as OneTimePasswordFieldPrimitive from '@radix-ui/react-one-time-password-field';
+
+declare const OneTimePasswordField: react.ForwardRefExoticComponent<Omit<Omit<OneTimePasswordFieldPrimitive.OneTimePasswordFieldProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>> & {
+    Input: react.ForwardRefExoticComponent<Omit<Omit<OneTimePasswordFieldPrimitive.OneTimePasswordFieldInputProps, "ref"> & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
+};
+
+export { OneTimePasswordField };

package/dist/cjs/one-time-password-field/OneTimePasswordField.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var OneTimePasswordFieldPrimitive = require('@radix-ui/react-one-time-password-field');
+var clsx = require('clsx');
+var react = require('react');
+var OneTimePasswordField_module = require('./OneTimePasswordField.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 OneTimePasswordFieldPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(OneTimePasswordFieldPrimitive);
+
+const OneTimePasswordFieldRoot = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(OneTimePasswordFieldPrimitive__namespace.Root, {
+    ref: ref,
+    className: clsx.clsx(OneTimePasswordField_module.otp, className),
+    ...props
+  });
+});
+const OneTimePasswordFieldInput = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(OneTimePasswordFieldPrimitive__namespace.Input, {
+    ref: ref,
+    className: clsx.clsx(OneTimePasswordField_module.input, className),
+    ...props
+  });
+});
+const OneTimePasswordField = Object.assign(OneTimePasswordFieldRoot, {
+  Input: OneTimePasswordFieldInput
+});
+
+exports.OneTimePasswordField = OneTimePasswordField;

package/dist/cjs/one-time-password-field/OneTimePasswordField.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 = ".OneTimePasswordField-module_otp__zoWO7{align-items:center;display:flex;gap:var(--ds-spacing-5)}.OneTimePasswordField-module_input__owV9H{align-items:center;background-color:var(--ds-color-neutral-50);border:none;border-radius:var(--ds-spacing-2);box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-50);color:var(--ds-color-neutral-950);display:inline-flex;flex:1;font-size:16px;font-weight:500;height:100%;justify-content:center;line-height:1;outline:none;text-align:center;text-transform:uppercase;transition:background-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.OneTimePasswordField-module_input__owV9H:focus,.OneTimePasswordField-module_input__owV9H:hover{box-shadow:0 0 0 var(--ds-spacing-1,1px) var(--ds-color-neutral-200)}.OneTimePasswordField-module_input__owV9H::selection{background-color:var(--ds-color-neutral-400)}";
+var styles = {"otp":"OneTimePasswordField-module_otp__zoWO7","input":"OneTimePasswordField-module_input__owV9H"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/pagination/Pagination.d.ts

@@ -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/cjs/pagination/Pagination.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var clsx = require('clsx');
+var react = require('react');
+var Pagination_module = require('./Pagination.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Pagination = /*#__PURE__*/react.forwardRef(({
+  className,
+  page,
+  totalPages,
+  maxVisible = 5,
+  onChange,
+  ...props
+}, ref) => {
+  const halfVisible = Math.ceil(maxVisible / 2);
+  const renderPageButton = pageNumber => /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    className: Pagination_module.item,
+    onClick: () => onChange(pageNumber),
+    "data-active": page === pageNumber,
+    children: pageNumber
+  }, pageNumber);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: clsx.clsx(Pagination_module.pagination, className),
+    ...props,
+    children: [totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
+      className: Pagination_module.arrow,
+      type: "button",
+      disabled: page === 1,
+      onClick: () => page > 1 && onChange(page - 1),
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("path", {
+          d: "m15 18-6-6 6-6"
+        })
+      })
+    }), totalPages <= maxVisible + 2 ? Array(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: Pagination_module.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__*/jsxRuntime.jsx("span", {
+        className: Pagination_module.trunc,
+        children: "..."
+      }), renderPageButton(totalPages)]
+    }), totalPages > 1 && /*#__PURE__*/jsxRuntime.jsx("button", {
+      className: Pagination_module.arrow,
+      type: "button",
+      disabled: page === totalPages,
+      onClick: () => page < totalPages && onChange(page + 1),
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("path", {
+          d: "m9 18 6-6-6-6"
+        })
+      })
+    })]
+  });
+});
+
+exports.Pagination = Pagination;

package/dist/cjs/pagination/Pagination.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 = ".Pagination-module_pagination__viYLy{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:center;margin-inline:auto}.Pagination-module_arrow__YYkob,.Pagination-module_item__uVIra{--cocso-pagination-font-color:var(--ds-color-neutral-950);--cocso-pagination-font-weight:inherit;--cocso-pagination-bg-color:inherit;align-items:center;background-color:var(--cocso-pagination-bg-color);border-radius:var(--ds-spacing-4);color:var(--cocso-pagination-font-color);cursor:pointer;display:inline-flex;font-size:16px;font-weight:var(--cocso-pagination-font-weight);height:var(--ds-spacing-13);justify-content:center;transition:background-color .15s ease-in-out;width:var(--ds-spacing-13)}.Pagination-module_arrow__YYkob:disabled{cursor:not-allowed;opacity:.4}.Pagination-module_arrow__YYkob:not([disabled]):hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_arrow__YYkob:not([disabled]):active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_arrow__YYkob>svg{flex-shrink:0;height:var(--ds-spacing-8);width:var(--ds-spacing-8)}.Pagination-module_item__uVIra[data-active=true]{--cocso-pagination-font-color:var(--ds-color-white);--cocso-pagination-bg-color:var(--ds-color-primary-500);--cocso-pagination-font-weight:600}.Pagination-module_item__uVIra[data-active=false]:hover{--cocso-pagination-bg-color:var(--ds-color-neutral-50)}.Pagination-module_item__uVIra[data-active=false]:active{--cocso-pagination-bg-color:var(--ds-color-neutral-100)}.Pagination-module_trunc__-ZgYQ{align-items:center;color:var(--ds-color-neutral-950);display:inline-flex;font-size:16px;height:var(--ds-spacing-13);justify-content:center;width:var(--ds-spacing-13)}";
+var styles = {"pagination":"Pagination-module_pagination__viYLy","arrow":"Pagination-module_arrow__YYkob","item":"Pagination-module_item__uVIra","trunc":"Pagination-module_trunc__-ZgYQ"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/popover/Popover.d.ts

@@ -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/cjs/popover/Popover.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var clsx = require('clsx');
+var react = require('react');
+var Popover_module = require('./Popover.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 PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
+
+const PopoverContent = /*#__PURE__*/react.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(PopoverPrimitive__namespace.Content, {
+    ref: ref,
+    className: clsx.clsx(Popover_module.content, className),
+    ...props
+  });
+});
+const Popover = Object.assign(PopoverPrimitive__namespace.Root, {
+  Trigger: PopoverPrimitive__namespace.Trigger,
+  Portal: PopoverPrimitive__namespace.Portal,
+  Content: PopoverContent
+});
+
+exports.Popover = Popover;

package/dist/cjs/popover/Popover.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 Popover-module_slide-up-and-fade__adQar{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-right-and-fade__br3DV{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes Popover-module_slide-down-and-fade__Lkl4N{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes Popover-module_slide-left-and-fade__yHinG{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}.Popover-module_content__ry9PF{animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);background-color:var(--ds-white);border:1px solid var(--ds-neutral-100);border-radius:var(--ds-spacing-4);box-shadow:var(--shadow-3);padding-block:var(--ds-spacing-6);padding-inline:var(--ds-spacing-8);will-change:transform,opacity}.Popover-module_content__ry9PF[data-state=open][data-side=top]{animation-name:Popover-module_slide-down-and-fade__Lkl4N}.Popover-module_content__ry9PF[data-state=open][data-side=right]{animation-name:Popover-module_slide-left-and-fade__yHinG}.Popover-module_content__ry9PF[data-state=open][data-side=bottom]{animation-name:Popover-module_slide-up-and-fade__adQar}.Popover-module_content__ry9PF[data-state=open][data-side=left]{animation-name:Popover-module_slide-right-and-fade__br3DV}";
+var styles = {"content":"Popover-module_content__ry9PF"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/select/Select.d.ts

@@ -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/cjs/select/Select.js

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

package/dist/cjs/select/Select.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 = ".Select-module_wrapper__4k8By{cursor:pointer;position:relative;width:fit-content}.Select-module_select__MUUdH{--cocso-select-min-width:inherit;--cocso-select-height:inherit;--cocso-select-padding-left:inherit;--cocso-select-padding-right:inherit;--cocso-select-font-size:inherit;--cocso-select-border-radius:inherit;--cocso-select-bg-color:var(--ds-color-white);appearance:none;-o-appearance:none;-moz-appearance:none;-webkit-appearance:none;background-color:var(--cocso-select-bg-color);border:1px solid var(--ds-color-neutral-100);border-radius:var(--cocso-select-border-radius);color:var(--ds-color-neutral-950);font-size:var(--cocso-select-font-size);height:var(--cocso-select-height);min-width:var(--cocso-select-min-width);padding-left:var(--cocso-select-padding-left);padding-right:var(--cocso-select-padding-right)}.Select-module_select__MUUdH[disabled]{cursor:not-allowed}.Select-module_icon__EuBJI{color:var(--ds-color-neutral-500);pointer-events:none;position:absolute;right:var(--ds-spacing-5);top:50%;transform:translateY(-50%)}.Select-module_icon__EuBJI[disabled]{cursor:not-allowed}";
+var styles = {"wrapper":"Select-module_wrapper__4k8By","select":"Select-module_select__MUUdH","icon":"Select-module_icon__EuBJI"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/spinner/Spinner.d.ts

@@ -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/cjs/spinner/Spinner.js

@@ -0,0 +1,40 @@
+'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 tsPattern = require('ts-pattern');
+var Spinner_module = require('./Spinner.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var color = require('../token/color.js');
+
+const Spinner = /*#__PURE__*/react.forwardRef(({
+  asChild,
+  className,
+  style: _style,
+  size = 'md',
+  color = 'primary',
+  ...props
+}, ref) => {
+  const Comp = asChild ? reactSlot.Slot : reactPrimitive.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__*/jsxRuntime.jsx(Comp, {
+    ref: ref,
+    className: clsx.clsx(Spinner_module.spinner, className),
+    style: style,
+    ...props
+  });
+});
+const getSize = size => tsPattern.match(size).with('xl', () => '40px').with('lg', () => '32px').with('md', () => '24px').with('sm', () => '20px').exhaustive();
+const getBorderWidth = size => tsPattern.match(size).with('xl', () => '5px').with('lg', () => '4px').with('md', () => '3px').with('sm', () => '2px').exhaustive();
+const getBorderColor = color$1 => tsPattern.match(color$1).with('primary', () => color.colors.primary500).with('neutral', () => color.colors.neutral600).with('white', () => color.colors.white).exhaustive();
+const getBackgroundColor = color$1 => tsPattern.match(color$1).with('primary', () => color.colors.primary100).with('neutral', () => color.colors.neutral100).with('white', () => color.colors.whiteAlpha20).exhaustive();
+
+exports.Spinner = Spinner;

package/dist/cjs/spinner/Spinner.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 Spinner-module_donut-spin__cBa-F{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Spinner-module_spinner__iIx6p{--cocso-spinner-size:inherit;--cocso-spinner-border-width:inherit;--cocso-spinner-border-color:inherit;--cocso-spinner-bg-color:inherit;animation:Spinner-module_donut-spin__cBa-F .75s linear infinite;border:var(--cocso-spinner-border-width) solid var(--cocso-spinner-bg-color);border-radius:50%;border-top-color:var(--cocso-spinner-border-color);display:inline-block;height:var(--cocso-spinner-size);position:relative;transform-origin:center center;width:var(--cocso-spinner-size)}";
+var styles = {"spinner":"Spinner-module_spinner__iIx6p"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/stock-quantity-status/StockQuantityStatus.d.ts

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