@cocso-ui/react 0.1.9 → 0.1.11

package/dist/cjs/stock-quantity-status/StockQuantityStatus.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var clsx = require('clsx');
+var react = require('react');
+var tsPattern = require('ts-pattern');
+var StockQuantityStatus_module = require('./StockQuantityStatus.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var spacing = require('../token/spacing.js');
+var Typography = require('../typography/Typography.js');
+var color = require('../token/color.js');
+
+const StockQuantityStatus = /*#__PURE__*/react.forwardRef(({
+  className,
+  style: _style,
+  quantity,
+  ...props
+}, ref) => {
+  const style = {
+    ..._style,
+    '--cocso-stock-quantity-status-color': getColor(quantity),
+    '--cocso-stock-quantity-status-indicator-width': spacing.spacing.s9
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: clsx.clsx(StockQuantityStatus_module.stock, className),
+    style: style,
+    ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: StockQuantityStatus_module.indicator,
+      children: quantity === '여유' ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography.Typography, {
+      type: "body",
+      size: "sm",
+      color: "currentColor",
+      children: quantity
+    })]
+  });
+});
+const getColor = quantity => tsPattern.match(quantity).with('여유', () => color.colors.primary500).with('보통', () => color.colors.success400).with('부족', () => color.colors.danger500).exhaustive();
+
+exports.StockQuantityStatus = StockQuantityStatus;
+exports.getColor = getColor;

package/dist/cjs/stock-quantity-status/StockQuantityStatus.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 = ".StockQuantityStatus-module_stock__mWbqI{--cocso-stock-quantity-status-color:inherit;align-items:center;color:var(--cocso-stock-quantity-status-color);display:inline-flex;gap:var(--ds-spacing-2)}.StockQuantityStatus-module_indicator__inaKv{--cocso-stock-quantity-status-indicator-width:inherit;flex-shrink:0;height:auto;width:var(--cocso-stock-quantity-status-indicator-width)}.StockQuantityStatus-module_indicator__inaKv>svg{height:100%;width:100%}";
+var styles = {"stock":"StockQuantityStatus-module_stock__mWbqI","indicator":"StockQuantityStatus-module_indicator__inaKv"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/switch/Switch.d.ts

@@ -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/cjs/switch/Switch.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var reactPrimitive = require('@radix-ui/react-primitive');
+var SwitchPrimitive = require('@radix-ui/react-switch');
+var clsx = require('clsx');
+var react = require('react');
+var tsPattern = require('ts-pattern');
+var Switch_module = require('./Switch.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var color = require('../token/color.js');
+var Typography = require('../typography/Typography.js');
+var spacing = require('../token/spacing.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 SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitive);
+
+const Switch = /*#__PURE__*/react.forwardRef(({
+  id: _id,
+  className,
+  style: _style,
+  size = 'md',
+  position = 'right',
+  disabled,
+  label,
+  ...props
+}, ref) => {
+  const generatedId = react.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': color.colors.neutral100
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(reactPrimitive.Primitive.div, {
+    className: clsx.clsx(Switch_module.wrapper, className),
+    "aria-disabled": disabled,
+    style: style,
+    children: [position === 'left' && /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+      type: "body",
+      size: size,
+      asChild: true,
+      children: /*#__PURE__*/jsxRuntime.jsx("label", {
+        htmlFor: id,
+        children: label
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(SwitchPrimitive__namespace.Root, {
+      ref: ref,
+      className: Switch_module.switch,
+      disabled: disabled,
+      ...props,
+      children: /*#__PURE__*/jsxRuntime.jsx(SwitchPrimitive__namespace.Thumb, {
+        className: Switch_module.thumb
+      })
+    }), position === 'right' && /*#__PURE__*/jsxRuntime.jsx(Typography.Typography, {
+      type: "body",
+      size: size,
+      "aria-disabled": disabled,
+      asChild: true,
+      children: /*#__PURE__*/jsxRuntime.jsx("label", {
+        htmlFor: id,
+        children: label
+      })
+    })]
+  });
+});
+const getSwitchWidth = size => tsPattern.match(size).with('lg', () => spacing.spacing.s14).with('md', () => spacing.spacing.s12).exhaustive();
+const getSwitchHeight = size => tsPattern.match(size).with('lg', () => spacing.spacing.s10).with('md', () => spacing.spacing.s9).exhaustive();
+const getThumbSize = size => tsPattern.match(size).with('lg', () => spacing.spacing.s9).with('md', () => spacing.spacing.s8).exhaustive();
+
+exports.Switch = Switch;

package/dist/cjs/switch/Switch.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 = ".Switch-module_wrapper__qcI9-{align-items:center;display:flex;gap:var(--ds-spacing-5)}.Switch-module_wrapper__qcI9-[aria-disabled=true]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft{--cocso-switch-width:inherit;--cocso-switch-height:inherit;--cocso-switch-bg-color:inherit;background-color:var(--cocso-switch-bg-color);border-radius:var(--ds-spacing-max);cursor:pointer;height:var(--cocso-switch-height);opacity:1;position:relative;width:var(--cocso-switch-width)}.Switch-module_switch__pwmft[data-disabled=true],.Switch-module_switch__pwmft[disabled]{cursor:not-allowed;opacity:.4}.Switch-module_switch__pwmft[data-state=checked]{--cocso-switch-bg-color:var(--ds-color-primary-500)}.Switch-module_thumb__pQGDy{--cocso-switch-thumb-width:inherit;--cocso-switch-thumb-height:inherit;background-color:var(--ds-color-white);border-radius:var(--ds-spacing-max);display:block;height:var(--cocso-switch-thumb-width);transform:translateX(var(--ds-spacing-2));transition:transform .15s ease;width:var(--cocso-switch-thumb-width);will-change:transform}.Switch-module_thumb__pQGDy[data-state=checked]{transform:translateX(calc(var(--cocso-switch-width) - var(--cocso-switch-thumb-width) - var(--ds-spacing-2)))}";
+var styles = {"wrapper":"Switch-module_wrapper__qcI9-","switch":"Switch-module_switch__pwmft","thumb":"Switch-module_thumb__pQGDy"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/tab/Tab.d.ts

@@ -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/cjs/tab/Tab.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var TabPrimitive = require('@radix-ui/react-tabs');
+var react = require('react');
+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 TabPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabPrimitive);
+
+const TabPrimitiveRoot = /*#__PURE__*/react.forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TabPrimitive__namespace.Root, {
+    ref: ref,
+    ...props
+  });
+});
+const TabPrimitiveList = /*#__PURE__*/react.forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TabPrimitive__namespace.List, {
+    ref: ref,
+    ...props
+  });
+});
+const TabPrimitiveTrigger = /*#__PURE__*/react.forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TabPrimitive__namespace.Trigger, {
+    ref: ref,
+    ...props
+  });
+});
+const TabPrimitiveContent = /*#__PURE__*/react.forwardRef(({
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(TabPrimitive__namespace.Content, {
+    ref: ref,
+    ...props
+  });
+});
+const Tab = Object.assign(TabPrimitiveRoot, {
+  List: TabPrimitiveList,
+  Trigger: TabPrimitiveTrigger,
+  Content: TabPrimitiveContent
+});
+
+exports.Tab = Tab;

package/dist/{token → cjs/token}/color.d.ts

@@ -1,4 +1,4 @@
-export declare const colors: {
+declare const colors: {
     transparent: string;
     white: string;
     whiteAlpha5: string;
@@ -78,3 +78,5 @@ export declare const colors: {
     success900: string;
     success950: string;
 };
+
+export { colors };

package/dist/cjs/token/color.js

@@ -0,0 +1,84 @@
+'use strict';
+
+const colors = {
+  transparent: 'var(--ds-color-transparent)',
+  white: 'var(--ds-color-white)',
+  whiteAlpha5: 'var(--ds-color-white-alpha-5)',
+  whiteAlpha10: 'var(--ds-color-white-alpha-10)',
+  whiteAlpha20: 'var(--ds-color-white-alpha-20)',
+  whiteAlpha30: 'var(--ds-color-white-alpha-30)',
+  whiteAlpha40: 'var(--ds-color-white-alpha-40)',
+  whiteAlpha50: 'var(--ds-color-white-alpha-50)',
+  whiteAlpha60: 'var(--ds-color-white-alpha-60)',
+  whiteAlpha70: 'var(--ds-color-white-alpha-70)',
+  whiteAlpha80: 'var(--ds-color-white-alpha-80)',
+  whiteAlpha90: 'var(--ds-color-white-alpha-90)',
+  black: 'var(--ds-color-black)',
+  blackAlpha5: 'var(--ds-color-black-alpha-5)',
+  blackAlpha10: 'var(--ds-color-black-alpha-10)',
+  blackAlpha20: 'var(--ds-color-black-alpha-20)',
+  blackAlpha30: 'var(--ds-color-black-alpha-30)',
+  blackAlpha40: 'var(--ds-color-black-alpha-40)',
+  blackAlpha50: 'var(--ds-color-black-alpha-50)',
+  blackAlpha60: 'var(--ds-color-black-alpha-60)',
+  blackAlpha70: 'var(--ds-color-black-alpha-70)',
+  blackAlpha80: 'var(--ds-color-black-alpha-80)',
+  blackAlpha90: 'var(--ds-color-black-alpha-90)',
+  neutral50: 'var(--ds-color-neutral-50)',
+  neutral100: 'var(--ds-color-neutral-100)',
+  neutral200: 'var(--ds-color-neutral-200)',
+  neutral300: 'var(--ds-color-neutral-300)',
+  neutral400: 'var(--ds-color-neutral-400)',
+  neutral500: 'var(--ds-color-neutral-500)',
+  neutral600: 'var(--ds-color-neutral-600)',
+  neutral700: 'var(--ds-color-neutral-700)',
+  neutral800: 'var(--ds-color-neutral-800)',
+  neutral900: 'var(--ds-color-neutral-900)',
+  neutral950: 'var(--ds-color-neutral-950)',
+  primary50: 'var(--ds-color-primary-50)',
+  primary100: 'var(--ds-color-primary-100)',
+  primary200: 'var(--ds-color-primary-200)',
+  primary300: 'var(--ds-color-primary-300)',
+  primary400: 'var(--ds-color-primary-400)',
+  primary500: 'var(--ds-color-primary-500)',
+  primary600: 'var(--ds-color-primary-600)',
+  primary700: 'var(--ds-color-primary-700)',
+  primary800: 'var(--ds-color-primary-800)',
+  primary900: 'var(--ds-color-primary-900)',
+  primary950: 'var(--ds-color-primary-950)',
+  danger50: 'var(--ds-color-danger-50)',
+  danger100: 'var(--ds-color-danger-100)',
+  danger200: 'var(--ds-color-danger-200)',
+  danger300: 'var(--ds-color-danger-300)',
+  danger400: 'var(--ds-color-danger-400)',
+  danger500: 'var(--ds-color-danger-500)',
+  danger600: 'var(--ds-color-danger-600)',
+  danger700: 'var(--ds-color-danger-700)',
+  danger800: 'var(--ds-color-danger-800)',
+  danger900: 'var(--ds-color-danger-900)',
+  danger950: 'var(--ds-color-danger-950)',
+  warning50: 'var(--ds-color-warning-50)',
+  warning100: 'var(--ds-color-warning-100)',
+  warning200: 'var(--ds-color-warning-200)',
+  warning300: 'var(--ds-color-warning-300)',
+  warning400: 'var(--ds-color-warning-400)',
+  warning500: 'var(--ds-color-warning-500)',
+  warning600: 'var(--ds-color-warning-600)',
+  warning700: 'var(--ds-color-warning-700)',
+  warning800: 'var(--ds-color-warning-800)',
+  warning900: 'var(--ds-color-warning-900)',
+  warning950: 'var(--ds-color-warning-950)',
+  success50: 'var(--ds-color-success-50)',
+  success100: 'var(--ds-color-success-100)',
+  success200: 'var(--ds-color-success-200)',
+  success300: 'var(--ds-color-success-300)',
+  success400: 'var(--ds-color-success-400)',
+  success500: 'var(--ds-color-success-500)',
+  success600: 'var(--ds-color-success-600)',
+  success700: 'var(--ds-color-success-700)',
+  success800: 'var(--ds-color-success-800)',
+  success900: 'var(--ds-color-success-900)',
+  success950: 'var(--ds-color-success-950)'
+};
+
+exports.colors = colors;

package/dist/{token → cjs/token}/spacing.d.ts

@@ -1,4 +1,4 @@
-export declare const spacing: {
+declare const spacing: {
     readonly s0: "var(--ds-spacing-0)";
     readonly s1: "var(--ds-spacing-1)";
     readonly s2: "var(--ds-spacing-2)";
@@ -23,3 +23,5 @@ export declare const spacing: {
     readonly s21: "var(--ds-spacing-21)";
     readonly max: "var(--ds-spacing-max)";
 };
+
+export { spacing };

package/dist/cjs/token/spacing.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const spacing = {
+  s0: 'var(--ds-spacing-0)',
+  s1: 'var(--ds-spacing-1)',
+  s2: 'var(--ds-spacing-2)',
+  s3: 'var(--ds-spacing-3)',
+  s4: 'var(--ds-spacing-4)',
+  s5: 'var(--ds-spacing-5)',
+  s6: 'var(--ds-spacing-6)',
+  s7: 'var(--ds-spacing-7)',
+  s8: 'var(--ds-spacing-8)',
+  s9: 'var(--ds-spacing-9)',
+  s10: 'var(--ds-spacing-10)',
+  s11: 'var(--ds-spacing-11)',
+  s12: 'var(--ds-spacing-12)',
+  s13: 'var(--ds-spacing-13)',
+  s14: 'var(--ds-spacing-14)',
+  s15: 'var(--ds-spacing-15)',
+  s16: 'var(--ds-spacing-16)',
+  s17: 'var(--ds-spacing-17)',
+  s18: 'var(--ds-spacing-18)',
+  s19: 'var(--ds-spacing-19)',
+  s20: 'var(--ds-spacing-20)',
+  s21: 'var(--ds-spacing-21)',
+  max: 'var(--ds-spacing-max)'
+};
+
+exports.spacing = spacing;

package/dist/{token → cjs/token}/typography.d.ts

@@ -1,4 +1,4 @@
-export declare const fontSize: {
+declare const fontSize: {
     readonly 10: 10;
     readonly 11: 11;
     readonly 12: 12;
@@ -15,13 +15,13 @@ export declare const fontSize: {
     readonly 44: 44;
     readonly 60: 60;
 };
-export type FontSize = keyof typeof fontSize;
-export type ResponsiveFontSize = FontSize | [FontSize, FontSize?, FontSize?] | {
+type FontSize = keyof typeof fontSize;
+type ResponsiveFontSize = FontSize | [FontSize, FontSize?, FontSize?] | {
     base: FontSize;
     tablet?: FontSize;
     desktop?: FontSize;
 };
-export declare const fontWeight: {
+declare const fontWeight: {
     readonly thin: 100;
     readonly extralight: 200;
     readonly light: 300;
@@ -32,8 +32,8 @@ export declare const fontWeight: {
     readonly extrabold: 800;
     readonly black: 900;
 };
-export type FontWeight = keyof typeof fontWeight;
-export declare const lineHeight: {
+type FontWeight = keyof typeof fontWeight;
+declare const lineHeight: {
     readonly none: 1;
     readonly tight: 1.25;
     readonly snug: 1.375;
@@ -41,4 +41,7 @@ export declare const lineHeight: {
     readonly relaxed: 1.625;
     readonly loose: 2;
 };
-export type LineHeight = keyof typeof lineHeight;
+type LineHeight = keyof typeof lineHeight;
+
+export { fontSize, fontWeight, lineHeight };
+export type { FontSize, FontWeight, LineHeight, ResponsiveFontSize };

package/dist/cjs/token/typography.js

@@ -0,0 +1,50 @@
+'use strict';
+
+const fontSize = {
+  10: 10,
+  11: 11,
+  12: 12,
+  13: 13,
+  14: 14,
+  15: 15,
+  16: 16,
+  18: 18,
+  20: 20,
+  24: 24,
+  28: 28,
+  32: 32,
+  36: 36,
+  44: 44,
+  60: 60
+};
+/*
+  Font weights as defined in the CSS specification.
+  @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+ */
+const fontWeight = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+/*
+  Line heights as defined in the tailwindcss documentation.
+  @see https://v3.tailwindcss.com/docs/line-height
+ */
+const lineHeight = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2
+};
+
+exports.fontSize = fontSize;
+exports.fontWeight = fontWeight;
+exports.lineHeight = lineHeight;

package/dist/cjs/typography/Typography.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { FontWeight, LineHeight, ResponsiveFontSize } from '../token/typography.js';
+
+type BodySize = 'lg' | 'md' | 'sm' | 'xs';
+type DisplaySize = 'lg' | 'md' | 'sm';
+type HeadingSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type TypographyPropsBase = {
+    asChild?: boolean;
+    weight?: FontWeight;
+    lineHeight?: LineHeight;
+} & ComponentPropsWithoutRef<'p'>;
+type CustomTypographyProps = TypographyPropsBase & {
+    type?: 'custom';
+    size?: ResponsiveFontSize;
+};
+type BodyTypographyProps = TypographyPropsBase & {
+    type: 'body';
+    size?: BodySize;
+};
+type DisplayTypographyProps = TypographyPropsBase & {
+    type: 'display';
+    size?: DisplaySize;
+};
+type HeadingTypographyProps = TypographyPropsBase & {
+    type: 'heading';
+    size?: HeadingSize;
+};
+type TypographyProps = CustomTypographyProps | BodyTypographyProps | DisplayTypographyProps | HeadingTypographyProps;
+declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
+
+export { Typography };
+export type { BodySize, DisplaySize, HeadingSize, TypographyProps };

package/dist/cjs/typography/Typography.js

@@ -0,0 +1,90 @@
+'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 Typography_module = require('./Typography.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../token/typography.js');
+
+const Typography = /*#__PURE__*/react.forwardRef(({
+  asChild,
+  className,
+  style: _style,
+  color,
+  type = 'custom',
+  weight = type === 'heading' ? 'bold' : 'normal',
+  lineHeight = 'normal',
+  ...props
+}, ref) => {
+  const Comp = tsPattern.match({
+    asChild,
+    type
+  }).with({
+    asChild: true
+  }, () => reactSlot.Slot).with({
+    type: 'display'
+  }, () => 'h1').with({
+    type: 'heading'
+  }, () => reactPrimitive.Primitive.h2).otherwise(() => reactPrimitive.Primitive.p);
+  const fontSize = tsPattern.match(type).with('custom', () => props.size ?? 16).with('body', () => tsPattern.match(props.size ?? 'md').with('lg', () => 18).with('md', () => 16).with('sm', () => 14).with('xs', () => 12).exhaustive()).with('display', () => tsPattern.match(props.size ?? 'md').with('lg', () => ({
+    base: 44,
+    tablet: 60
+  })).with('md', () => ({
+    base: 32,
+    tablet: 44
+  })).with('sm', () => ({
+    base: 28,
+    tablet: 36
+  })).exhaustive()).with('heading', () => tsPattern.match(props.size ?? 'md').with('xl', () => ({
+    base: 28,
+    tablet: 36
+  })).with('lg', () => ({
+    base: 24,
+    tablet: 32
+  })).with('md', () => ({
+    base: 20,
+    tablet: 24
+  })).with('sm', () => 18).with('xs', () => 16).exhaustive()).otherwise(() => 16);
+  let base;
+  let tablet;
+  let desktop;
+  if (Array.isArray(fontSize)) {
+    [base, tablet, desktop] = fontSize;
+  } else if (typeof fontSize === 'object') {
+    ({
+      base,
+      tablet,
+      desktop
+    } = fontSize);
+  } else {
+    base = fontSize;
+  }
+  const style = {
+    ..._style,
+    '--cocso-typography-font-color': color,
+    '--cocso-typography-font-size': `${typography.fontSize[base]}px`,
+    ...(tablet !== undefined && {
+      '--cocso-tablet-typography-font-size': `${typography.fontSize[tablet]}px`
+    }),
+    ...(desktop !== undefined && {
+      '--cocso-desktop-typography-font-size': `${typography.fontSize[desktop]}px`
+    }),
+    '--cocso-typography-font-weight': typography.fontWeight[weight],
+    '--cocso-typography-line-height': typography.lineHeight[lineHeight]
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Comp
+  // biome-ignore lint/suspicious/noExplicitAny: Polymorphic component with multiple element types (h1, h2, p, Slot) requires type assertion for ref compatibility
+  , {
+    ...(ref && {
+      ref: ref
+    }),
+    className: clsx.clsx(Typography_module.typography, className),
+    style: style,
+    ...props
+  });
+});
+
+exports.Typography = Typography;