@cocso-ui/react 0.2.20 → 1.0.0

package/dist/cjs/ecosystem/codegen/generated/spinner.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function spinner(props = {}) {
+  const {
+    variant = "primary",
+    size = "medium"
+  } = props;
+  return ["cocso-spinner", variant && `cocso-spinner--variant-${variant}`, size && `cocso-spinner--size-${size}`].filter(Boolean).join(" ");
+}
+
+exports.spinner = spinner;

package/dist/cjs/ecosystem/codegen/generated/stock-quantity-status.css.js

@@ -0,0 +1,6 @@
+'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 = ".cocso-stock-quantity-status.cocso-stock-quantity-status--quantity-sufficient{--cocso-stock-quantity-status-color:var(--cocso-color-feedback-info)}.cocso-stock-quantity-status.cocso-stock-quantity-status--quantity-normal{--cocso-stock-quantity-status-color:var(--cocso-color-feedback-success-muted)}.cocso-stock-quantity-status.cocso-stock-quantity-status--quantity-insufficient{--cocso-stock-quantity-status-color:var(--cocso-color-feedback-danger)}";
+styleInject_es(css_248z);

package/dist/cjs/ecosystem/codegen/generated/stock-quantity-status.js

@@ -0,0 +1,12 @@
+'use strict';
+
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function stockQuantityStatus(props = {}) {
+  const {
+    quantity = "sufficient"
+  } = props;
+  return ["cocso-stock-quantity-status", quantity && `cocso-stock-quantity-status--quantity-${quantity}`].filter(Boolean).join(" ");
+}
+
+exports.stockQuantityStatus = stockQuantityStatus;

package/dist/cjs/ecosystem/codegen/generated/switch.css.js

@@ -0,0 +1,6 @@
+'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 = ".cocso-switch{--cocso-switch-switch-bg-color:var(--cocso-color-surface-neutral)}.cocso-switch.cocso-switch--variant-primary{--cocso-switch-checked-bg-color:var(--cocso-color-interactive-primary);--cocso-switch-switch-bg-color-hover:var(--cocso-color-interactive-primary-hover)}.cocso-switch.cocso-switch--variant-success{--cocso-switch-checked-bg-color:var(--cocso-color-interactive-success);--cocso-switch-switch-bg-color-hover:var(--cocso-color-interactive-success-hover-subtle)}.cocso-switch.cocso-switch--variant-error{--cocso-switch-checked-bg-color:var(--cocso-color-interactive-danger);--cocso-switch-switch-bg-color-hover:var(--cocso-color-interactive-danger-hover-subtle)}.cocso-switch.cocso-switch--variant-warning{--cocso-switch-checked-bg-color:var(--cocso-color-interactive-warning-active);--cocso-switch-switch-bg-color-hover:var(--cocso-color-interactive-warning-hover-subtle)}.cocso-switch.cocso-switch--variant-info{--cocso-switch-checked-bg-color:var(--cocso-color-interactive-info);--cocso-switch-switch-bg-color-hover:var(--cocso-color-interactive-info-hover-subtle)}.cocso-switch.cocso-switch--size-large{--cocso-switch-width:40px;--cocso-switch-height:22px;--cocso-switch-thumb-size:18px;--cocso-switch-thumb-offset:2px}.cocso-switch.cocso-switch--size-medium{--cocso-switch-width:36px;--cocso-switch-height:20px;--cocso-switch-thumb-size:16px;--cocso-switch-thumb-offset:2px}.cocso-switch.cocso-switch--size-small{--cocso-switch-width:32px;--cocso-switch-height:18px;--cocso-switch-thumb-size:14px;--cocso-switch-thumb-offset:2px}.cocso-switch.cocso-switch--variant-primary.cocso-switch--checked-true{--cocso-switch-switch-bg-color:var(--cocso-color-interactive-primary)}.cocso-switch.cocso-switch--variant-success.cocso-switch--checked-true{--cocso-switch-switch-bg-color:var(--cocso-color-interactive-success)}.cocso-switch.cocso-switch--variant-error.cocso-switch--checked-true{--cocso-switch-switch-bg-color:var(--cocso-color-interactive-danger)}.cocso-switch.cocso-switch--variant-warning.cocso-switch--checked-true{--cocso-switch-switch-bg-color:var(--cocso-color-interactive-warning-active)}.cocso-switch.cocso-switch--variant-info.cocso-switch--checked-true{--cocso-switch-switch-bg-color:var(--cocso-color-interactive-info)}.cocso-switch.cocso-switch--checked-false{--cocso-switch-switch-bg-color-hover:var(--cocso-color-interactive-secondary-hover)}";
+styleInject_es(css_248z);

package/dist/cjs/ecosystem/codegen/generated/switch.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/* Generated by @cocso-ui/codegen — do not edit */
+
+function switchStyles(props = {}) {
+  const {
+    variant = "primary",
+    size = "medium",
+    checked = "true"
+  } = props;
+  return ["cocso-switch", variant && `cocso-switch--variant-${variant}`, size && `cocso-switch--size-${size}`, checked && `cocso-switch--checked-${checked}`].filter(Boolean).join(" ");
+}
+
+exports.switchStyles = switchStyles;

package/dist/cjs/index.d.ts

@@ -1,23 +1,34 @@
-export { Accordion } from './accordion/Accordion.js';
-export { Badge, BadgeProps } from './badge/Badge.js';
-export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './button/Button.js';
-export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './checkbox/Checkbox.js';
-export { DayPicker, DayPickerProps } from './day-picker/DayPicker.js';
-export { Dropdown } from './dropdown/Dropdown.js';
-export { Link, LinkProps, LinkSize } from './link/Link.js';
-export { Modal } from './modal/Modal.js';
-export { MonthPicker, MonthPickerProps } from './month-picker/MonthPicker.js';
-export { OneTimePasswordField } from './one-time-password-field/OneTimePasswordField.js';
-export { Pagination, PaginationProps } from './pagination/Pagination.js';
-export { Popover } from './popover/Popover.js';
-export { RadioGroup } from './radio-group/RadioGroup.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 { cn } from './cn.js';
+export { Accordion, AccordionTriggerProps } from './components/accordion/accordion.js';
+export { Alert, AlertProps, AlertVariant } from './components/alert/alert.js';
+export { Avatar, AvatarProps, AvatarShape, AvatarSize } from './components/avatar/avatar.js';
+export { Badge, BadgeProps, BadgeSize } from './components/badge/badge.js';
+export { Breadcrumb, BreadcrumbProps, BreadcrumbSize } from './components/breadcrumb/breadcrumb.js';
+export { Button, ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './components/button/button.js';
+export { Card, CardPadding, CardProps, CardVariant } from './components/card/card.js';
+export { Checkbox, CheckboxProps, CheckboxSize, CheckboxStatus } from './components/checkbox/checkbox.js';
+export { DayPicker, DayPickerProps } from './components/day-picker/day-picker.js';
+export { Dialog, DialogCloseProps, DialogSize } from './components/dialog/dialog.js';
+export { Dropdown } from './components/dropdown/dropdown.js';
+export { Field, FieldProps, useField } from './components/field/field.js';
+export { Input, InputProps, InputSize } from './components/input/input.js';
+export { Link, LinkProps, LinkSize, LinkVariant } from './components/link/link.js';
+export { MonthPicker, MonthPickerProps } from './components/month-picker/month-picker.js';
+export { OneTimePasswordField, OneTimePasswordFieldProps } from './components/one-time-password-field/one-time-password-field.js';
+export { Pagination, PaginationLabels, PaginationProps } from './components/pagination/pagination.js';
+export { Popover } from './components/popover/popover.js';
+export { Progress, ProgressProps, ProgressSize, ProgressVariant } from './components/progress/progress.js';
+export { RadioGroup, RadioSize } from './components/radio-group/radio-group.js';
+export { Select, SelectProps, SelectSize } from './components/select/select.js';
+export { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonVariant } from './components/skeleton/skeleton.js';
+export { Spinner, SpinnerProps, SpinnerSize, SpinnerVariant } from './components/spinner/spinner.js';
+export { QuantityStatus, StockQuantityStatus, StockQuantityStatusProps } from './components/stock-quantity-status/stock-quantity-status.js';
+export { Switch, SwitchProps, SwitchSize, SwitchVariant } from './components/switch/switch.js';
+export { Tab } from './components/tab/tab.js';
 export { Toaster, toast } from 'sonner';
+export { Tooltip } from './components/tooltip/tooltip.js';
+export { BodySize, HeadingSize, Typography, TypographyProps } from './components/typography/typography.js';
 export { colors } from './token/color.js';
+export { radius } from './token/radius.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

@@ -1,50 +1,70 @@
 'use strict';
 
-var Accordion = require('./accordion/Accordion.js');
-var Badge = require('./badge/Badge.js');
-var Button = require('./button/Button.js');
-var Checkbox = require('./checkbox/Checkbox.js');
-var DayPicker = require('./day-picker/DayPicker.js');
-var Dropdown = require('./dropdown/Dropdown.js');
-var Link = require('./link/Link.js');
-var Modal = require('./modal/Modal.js');
-var MonthPicker = require('./month-picker/MonthPicker.js');
-var OneTimePasswordField = require('./one-time-password-field/OneTimePasswordField.js');
-var Pagination = require('./pagination/Pagination.js');
-var Popover = require('./popover/Popover.js');
-var RadioGroup = require('./radio-group/RadioGroup.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 cn = require('./cn.js');
+var accordion = require('./components/accordion/accordion.js');
+var alert = require('./components/alert/alert.js');
+var avatar = require('./components/avatar/avatar.js');
+var badge = require('./components/badge/badge.js');
+var breadcrumb = require('./components/breadcrumb/breadcrumb.js');
+var button = require('./components/button/button.js');
+var card = require('./components/card/card.js');
+var checkbox = require('./components/checkbox/checkbox.js');
+var dayPicker = require('./components/day-picker/day-picker.js');
+var dialog = require('./components/dialog/dialog.js');
+var dropdown = require('./components/dropdown/dropdown.js');
+var field = require('./components/field/field.js');
+var input = require('./components/input/input.js');
+var link = require('./components/link/link.js');
+var monthPicker = require('./components/month-picker/month-picker.js');
+var oneTimePasswordField = require('./components/one-time-password-field/one-time-password-field.js');
+var pagination = require('./components/pagination/pagination.js');
+var popover = require('./components/popover/popover.js');
+var progress = require('./components/progress/progress.js');
+var radioGroup = require('./components/radio-group/radio-group.js');
+var select = require('./components/select/select.js');
+var skeleton = require('./components/skeleton/skeleton.js');
+var spinner = require('./components/spinner/spinner.js');
+var stockQuantityStatus = require('./components/stock-quantity-status/stock-quantity-status.js');
+var _switch = require('./components/switch/switch.js');
+var tab = require('./components/tab/tab.js');
 var sonner = require('sonner');
+var tooltip = require('./components/tooltip/tooltip.js');
+var typography = require('./components/typography/typography.js');
 var color = require('./token/color.js');
+var typography$1 = require('./token/typography.js');
+var radius = require('./token/radius.js');
 var spacing = require('./token/spacing.js');
-var typography = require('./token/typography.js');
-var Typography = require('./typography/Typography.js');
 
 
 
-exports.Accordion = Accordion.Accordion;
-exports.Badge = Badge.Badge;
-exports.Button = Button.Button;
-exports.Checkbox = Checkbox.Checkbox;
-exports.DayPicker = DayPicker.DayPicker;
-exports.Dropdown = Dropdown.Dropdown;
-exports.Link = Link.Link;
-exports.Modal = Modal.Modal;
-exports.MonthPicker = MonthPicker.MonthPicker;
-exports.OneTimePasswordField = OneTimePasswordField.OneTimePasswordField;
-exports.Pagination = Pagination.Pagination;
-exports.Popover = Popover.Popover;
-exports.RadioGroup = RadioGroup.RadioGroup;
-exports.Select = Select.Select;
-exports.Spinner = Spinner.Spinner;
-exports.StockQuantityStatus = StockQuantityStatus.StockQuantityStatus;
-exports.getColor = StockQuantityStatus.getColor;
-exports.Switch = Switch.Switch;
-exports.Tab = Tab.Tab;
+exports.cn = cn.cn;
+exports.Accordion = accordion.Accordion;
+exports.Alert = alert.Alert;
+exports.Avatar = avatar.Avatar;
+exports.Badge = badge.Badge;
+exports.Breadcrumb = breadcrumb.Breadcrumb;
+exports.Button = button.Button;
+exports.Card = card.Card;
+exports.Checkbox = checkbox.Checkbox;
+exports.DayPicker = dayPicker.DayPicker;
+exports.Dialog = dialog.Dialog;
+exports.Dropdown = dropdown.Dropdown;
+exports.Field = field.Field;
+exports.useField = field.useField;
+exports.Input = input.Input;
+exports.Link = link.Link;
+exports.MonthPicker = monthPicker.MonthPicker;
+exports.OneTimePasswordField = oneTimePasswordField.OneTimePasswordField;
+exports.Pagination = pagination.Pagination;
+exports.Popover = popover.Popover;
+exports.Progress = progress.Progress;
+exports.RadioGroup = radioGroup.RadioGroup;
+exports.Select = select.Select;
+exports.Skeleton = skeleton.Skeleton;
+exports.Spinner = spinner.Spinner;
+exports.StockQuantityStatus = stockQuantityStatus.StockQuantityStatus;
+exports.Switch = _switch.Switch;
+exports.Tab = tab.Tab;
 Object.defineProperty(exports, "Toaster", {
 	enumerable: true,
 	get: function () { return sonner.Toaster; }
@@ -53,9 +73,11 @@ Object.defineProperty(exports, "toast", {
 	enumerable: true,
 	get: function () { return sonner.toast; }
 });
+exports.Tooltip = tooltip.Tooltip;
+exports.Typography = typography.Typography;
 exports.colors = color.colors;
+exports.fontSize = typography$1.fontSize;
+exports.fontWeight = typography$1.fontWeight;
+exports.lineHeight = typography$1.lineHeight;
+exports.radius = radius.radius;
 exports.spacing = spacing.spacing;
-exports.fontSize = typography.fontSize;
-exports.fontWeight = typography.fontWeight;
-exports.lineHeight = typography.lineHeight;
-exports.Typography = Typography.Typography;

package/dist/cjs/token/color.d.ts

@@ -1,3 +1,4 @@
+/** Cocso design system color token map keyed by semantic name. */
 declare const colors: {
     transparent: string;
     white: string;
@@ -77,6 +78,17 @@ declare const colors: {
     success800: string;
     success900: string;
     success950: string;
+    info50: string;
+    info100: string;
+    info200: string;
+    info300: string;
+    info400: string;
+    info500: string;
+    info600: string;
+    info700: string;
+    info800: string;
+    info900: string;
+    info950: string;
     textPrimary: string;
     textSecondary: string;
     textTertiary: string;

package/dist/cjs/token/color.js

@@ -1,87 +1,99 @@
 'use strict';
 
+/** Cocso design system color token map keyed by semantic name. */
 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)',
-  textPrimary: 'var(--ds-color-text-primary)',
-  textSecondary: 'var(--ds-color-text-secondary)',
-  textTertiary: 'var(--ds-color-text-tertiary)'
+  transparent: "var(--cocso-color-transparent)",
+  white: "var(--cocso-color-white)",
+  whiteAlpha5: "var(--cocso-color-white-alpha-5)",
+  whiteAlpha10: "var(--cocso-color-white-alpha-10)",
+  whiteAlpha20: "var(--cocso-color-white-alpha-20)",
+  whiteAlpha30: "var(--cocso-color-white-alpha-30)",
+  whiteAlpha40: "var(--cocso-color-white-alpha-40)",
+  whiteAlpha50: "var(--cocso-color-white-alpha-50)",
+  whiteAlpha60: "var(--cocso-color-white-alpha-60)",
+  whiteAlpha70: "var(--cocso-color-white-alpha-70)",
+  whiteAlpha80: "var(--cocso-color-white-alpha-80)",
+  whiteAlpha90: "var(--cocso-color-white-alpha-90)",
+  black: "var(--cocso-color-black)",
+  blackAlpha5: "var(--cocso-color-black-alpha-5)",
+  blackAlpha10: "var(--cocso-color-black-alpha-10)",
+  blackAlpha20: "var(--cocso-color-black-alpha-20)",
+  blackAlpha30: "var(--cocso-color-black-alpha-30)",
+  blackAlpha40: "var(--cocso-color-black-alpha-40)",
+  blackAlpha50: "var(--cocso-color-black-alpha-50)",
+  blackAlpha60: "var(--cocso-color-black-alpha-60)",
+  blackAlpha70: "var(--cocso-color-black-alpha-70)",
+  blackAlpha80: "var(--cocso-color-black-alpha-80)",
+  blackAlpha90: "var(--cocso-color-black-alpha-90)",
+  neutral50: "var(--cocso-color-neutral-50)",
+  neutral100: "var(--cocso-color-neutral-100)",
+  neutral200: "var(--cocso-color-neutral-200)",
+  neutral300: "var(--cocso-color-neutral-300)",
+  neutral400: "var(--cocso-color-neutral-400)",
+  neutral500: "var(--cocso-color-neutral-500)",
+  neutral600: "var(--cocso-color-neutral-600)",
+  neutral700: "var(--cocso-color-neutral-700)",
+  neutral800: "var(--cocso-color-neutral-800)",
+  neutral900: "var(--cocso-color-neutral-900)",
+  neutral950: "var(--cocso-color-neutral-950)",
+  primary50: "var(--cocso-color-primary-50)",
+  primary100: "var(--cocso-color-primary-100)",
+  primary200: "var(--cocso-color-primary-200)",
+  primary300: "var(--cocso-color-primary-300)",
+  primary400: "var(--cocso-color-primary-400)",
+  primary500: "var(--cocso-color-primary-500)",
+  primary600: "var(--cocso-color-primary-600)",
+  primary700: "var(--cocso-color-primary-700)",
+  primary800: "var(--cocso-color-primary-800)",
+  primary900: "var(--cocso-color-primary-900)",
+  primary950: "var(--cocso-color-primary-950)",
+  danger50: "var(--cocso-color-danger-50)",
+  danger100: "var(--cocso-color-danger-100)",
+  danger200: "var(--cocso-color-danger-200)",
+  danger300: "var(--cocso-color-danger-300)",
+  danger400: "var(--cocso-color-danger-400)",
+  danger500: "var(--cocso-color-danger-500)",
+  danger600: "var(--cocso-color-danger-600)",
+  danger700: "var(--cocso-color-danger-700)",
+  danger800: "var(--cocso-color-danger-800)",
+  danger900: "var(--cocso-color-danger-900)",
+  danger950: "var(--cocso-color-danger-950)",
+  warning50: "var(--cocso-color-warning-50)",
+  warning100: "var(--cocso-color-warning-100)",
+  warning200: "var(--cocso-color-warning-200)",
+  warning300: "var(--cocso-color-warning-300)",
+  warning400: "var(--cocso-color-warning-400)",
+  warning500: "var(--cocso-color-warning-500)",
+  warning600: "var(--cocso-color-warning-600)",
+  warning700: "var(--cocso-color-warning-700)",
+  warning800: "var(--cocso-color-warning-800)",
+  warning900: "var(--cocso-color-warning-900)",
+  warning950: "var(--cocso-color-warning-950)",
+  success50: "var(--cocso-color-success-50)",
+  success100: "var(--cocso-color-success-100)",
+  success200: "var(--cocso-color-success-200)",
+  success300: "var(--cocso-color-success-300)",
+  success400: "var(--cocso-color-success-400)",
+  success500: "var(--cocso-color-success-500)",
+  success600: "var(--cocso-color-success-600)",
+  success700: "var(--cocso-color-success-700)",
+  success800: "var(--cocso-color-success-800)",
+  success900: "var(--cocso-color-success-900)",
+  success950: "var(--cocso-color-success-950)",
+  info50: "var(--cocso-color-info-50)",
+  info100: "var(--cocso-color-info-100)",
+  info200: "var(--cocso-color-info-200)",
+  info300: "var(--cocso-color-info-300)",
+  info400: "var(--cocso-color-info-400)",
+  info500: "var(--cocso-color-info-500)",
+  info600: "var(--cocso-color-info-600)",
+  info700: "var(--cocso-color-info-700)",
+  info800: "var(--cocso-color-info-800)",
+  info900: "var(--cocso-color-info-900)",
+  info950: "var(--cocso-color-info-950)",
+  textPrimary: "var(--cocso-color-text-primary)",
+  textSecondary: "var(--cocso-color-text-secondary)",
+  textTertiary: "var(--cocso-color-text-tertiary)"
 };
 
 exports.colors = colors;

package/dist/cjs/token/radius.d.ts

@@ -0,0 +1,12 @@
+/** Border radius token scale from none to full. */
+declare const radius: {
+    readonly r1: "var(--cocso-radius-1)";
+    readonly r2: "var(--cocso-radius-2)";
+    readonly r3: "var(--cocso-radius-3)";
+    readonly r4: "var(--cocso-radius-4)";
+    readonly r5: "var(--cocso-radius-5)";
+    readonly r6: "var(--cocso-radius-6)";
+    readonly full: "var(--cocso-radius-full)";
+};
+
+export { radius };

package/dist/cjs/token/radius.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/** Border radius token scale from none to full. */
+const radius = {
+  r1: "var(--cocso-radius-1)",
+  r2: "var(--cocso-radius-2)",
+  r3: "var(--cocso-radius-3)",
+  r4: "var(--cocso-radius-4)",
+  r5: "var(--cocso-radius-5)",
+  r6: "var(--cocso-radius-6)",
+  full: "var(--cocso-radius-full)"
+};
+
+exports.radius = radius;

package/dist/cjs/token/spacing.d.ts

@@ -1,27 +1,28 @@
+/** Spacing token scale from s0 (0) to max (80px). */
 declare const spacing: {
-    readonly s0: "var(--ds-spacing-0)";
-    readonly s1: "var(--ds-spacing-1)";
-    readonly s2: "var(--ds-spacing-2)";
-    readonly s3: "var(--ds-spacing-3)";
-    readonly s4: "var(--ds-spacing-4)";
-    readonly s5: "var(--ds-spacing-5)";
-    readonly s6: "var(--ds-spacing-6)";
-    readonly s7: "var(--ds-spacing-7)";
-    readonly s8: "var(--ds-spacing-8)";
-    readonly s9: "var(--ds-spacing-9)";
-    readonly s10: "var(--ds-spacing-10)";
-    readonly s11: "var(--ds-spacing-11)";
-    readonly s12: "var(--ds-spacing-12)";
-    readonly s13: "var(--ds-spacing-13)";
-    readonly s14: "var(--ds-spacing-14)";
-    readonly s15: "var(--ds-spacing-15)";
-    readonly s16: "var(--ds-spacing-16)";
-    readonly s17: "var(--ds-spacing-17)";
-    readonly s18: "var(--ds-spacing-18)";
-    readonly s19: "var(--ds-spacing-19)";
-    readonly s20: "var(--ds-spacing-20)";
-    readonly s21: "var(--ds-spacing-21)";
-    readonly max: "var(--ds-spacing-max)";
+    readonly s0: "var(--cocso-spacing-0)";
+    readonly s1: "var(--cocso-spacing-1)";
+    readonly s2: "var(--cocso-spacing-2)";
+    readonly s3: "var(--cocso-spacing-3)";
+    readonly s4: "var(--cocso-spacing-4)";
+    readonly s5: "var(--cocso-spacing-5)";
+    readonly s6: "var(--cocso-spacing-6)";
+    readonly s7: "var(--cocso-spacing-7)";
+    readonly s8: "var(--cocso-spacing-8)";
+    readonly s9: "var(--cocso-spacing-9)";
+    readonly s10: "var(--cocso-spacing-10)";
+    readonly s11: "var(--cocso-spacing-11)";
+    readonly s12: "var(--cocso-spacing-12)";
+    readonly s13: "var(--cocso-spacing-13)";
+    readonly s14: "var(--cocso-spacing-14)";
+    readonly s15: "var(--cocso-spacing-15)";
+    readonly s16: "var(--cocso-spacing-16)";
+    readonly s17: "var(--cocso-spacing-17)";
+    readonly s18: "var(--cocso-spacing-18)";
+    readonly s19: "var(--cocso-spacing-19)";
+    readonly s20: "var(--cocso-spacing-20)";
+    readonly s21: "var(--cocso-spacing-21)";
+    readonly max: "var(--cocso-spacing-max)";
 };
 
 export { spacing };

package/dist/cjs/token/spacing.js

@@ -1,29 +1,30 @@
 'use strict';
 
+/** Spacing token scale from s0 (0) to max (80px). */
 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)'
+  s0: "var(--cocso-spacing-0)",
+  s1: "var(--cocso-spacing-1)",
+  s2: "var(--cocso-spacing-2)",
+  s3: "var(--cocso-spacing-3)",
+  s4: "var(--cocso-spacing-4)",
+  s5: "var(--cocso-spacing-5)",
+  s6: "var(--cocso-spacing-6)",
+  s7: "var(--cocso-spacing-7)",
+  s8: "var(--cocso-spacing-8)",
+  s9: "var(--cocso-spacing-9)",
+  s10: "var(--cocso-spacing-10)",
+  s11: "var(--cocso-spacing-11)",
+  s12: "var(--cocso-spacing-12)",
+  s13: "var(--cocso-spacing-13)",
+  s14: "var(--cocso-spacing-14)",
+  s15: "var(--cocso-spacing-15)",
+  s16: "var(--cocso-spacing-16)",
+  s17: "var(--cocso-spacing-17)",
+  s18: "var(--cocso-spacing-18)",
+  s19: "var(--cocso-spacing-19)",
+  s20: "var(--cocso-spacing-20)",
+  s21: "var(--cocso-spacing-21)",
+  max: "var(--cocso-spacing-max)"
 };
 
 exports.spacing = spacing;