@cocso-ui/react 0.2.21 → 1.0.1

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

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+
+type SwitchSize = "large" | "medium" | "small";
+type SwitchVariant = "primary" | "success" | "error" | "warning" | "info";
+interface SwitchProps extends ComponentProps<typeof Switch$1.Root> {
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    position?: "left" | "right";
+    size?: SwitchSize;
+    variant?: SwitchVariant;
+}
+/** Toggle switch component with optional label and size options. */
+declare function Switch({ ref, id: _id, className, style: _style, size, variant, position, disabled, checked, label, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+export { Switch };
+export type { SwitchProps, SwitchSize, SwitchVariant };

package/dist/cjs/components/switch/switch.js

@@ -0,0 +1,74 @@
+"use client";
+'use strict';
+
+var _switch = require('../../ecosystem/codegen/generated/switch.js');
+require('../../ecosystem/codegen/generated/switch.css.js');
+var react = require('react');
+var cn = require('../../cn.js');
+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 _switch$1 = require('@base-ui/react/switch');
+
+const UNCHECKED_BG = color.colors.neutral100;
+/** Toggle switch component with optional label and size options. */
+function Switch({
+  ref,
+  id: _id,
+  className,
+  style: _style,
+  size = "medium",
+  variant = "primary",
+  position = "right",
+  disabled,
+  checked,
+  label,
+  ...props
+}) {
+  const generatedId = react.useId();
+  const id = _id ?? generatedId;
+  const switchStylesName = _switch.switchStyles({
+    variant,
+    size,
+    checked: String(!!checked)
+  });
+  const style = {
+    ..._style,
+    "--cocso-switch-bg-color": UNCHECKED_BG
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: cn.cn(switchStylesName, switch_module.wrapper, className),
+    "data-disabled": disabled || undefined,
+    style: style,
+    children: [position === "left" && label && /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      "aria-disabled": disabled,
+      render: /*#__PURE__*/jsxRuntime.jsx("label", {
+        htmlFor: id,
+        children: label
+      }),
+      size: size,
+      type: "body"
+    }), /*#__PURE__*/jsxRuntime.jsx(_switch$1.Switch.Root, {
+      checked: checked,
+      className: switch_module.switch,
+      disabled: disabled,
+      id: id,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/jsxRuntime.jsx(_switch$1.Switch.Thumb, {
+        className: switch_module.thumb
+      })
+    }), position === "right" && label && /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      "aria-disabled": disabled,
+      render: /*#__PURE__*/jsxRuntime.jsx("label", {
+        htmlFor: id,
+        children: label
+      }),
+      size: size,
+      type: "body"
+    })]
+  });
+}
+
+exports.Switch = Switch;

package/dist/cjs/components/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 = "@layer components{.switch-module_wrapper__mB3eH{align-items:center;display:flex;gap:var(--cocso-spacing-5)}.switch-module_wrapper__mB3eH[data-disabled]{cursor:not-allowed;opacity:.4}.switch-module_switch__KrHDz{--cocso-switch-width:inherit;--cocso-switch-height:inherit;--cocso-switch-bg-color:inherit;background-color:var(--cocso-switch-bg-color);border-radius:var(--cocso-radius-full);cursor:pointer;height:var(--cocso-switch-height);opacity:1;position:relative;width:var(--cocso-switch-width)}.switch-module_switch__KrHDz:focus-visible{outline:2px solid var(--cocso-color-primary-950);outline-offset:2px}.switch-module_switch__KrHDz[data-disabled]{cursor:not-allowed;opacity:.4}.switch-module_switch__KrHDz[data-checked]{--cocso-switch-bg-color:var(--cocso-switch-checked-bg-color)}.switch-module_thumb__sXgSl{--cocso-switch-thumb-size:inherit;background-color:var(--cocso-color-white);border-radius:var(--cocso-radius-full);box-shadow:var(--cocso-shadow-thumb);display:block;height:var(--cocso-switch-thumb-size);position:absolute;top:50%;transform:translate(var(--cocso-switch-thumb-offset),-50%);transition:transform var(--cocso-duration-fast) var(--cocso-easing-soft);width:var(--cocso-switch-thumb-size);will-change:transform}.switch-module_thumb__sXgSl[data-checked]{transform:translate(calc(var(--cocso-switch-width) - var(--cocso-switch-thumb-size) - var(--cocso-switch-thumb-offset)),-50%)}}";
+var styles = {"wrapper":"switch-module_wrapper__mB3eH","switch":"switch-module_switch__KrHDz","thumb":"switch-module_thumb__sXgSl"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Tabs } from '@base-ui/react/tabs';
+
+type TabProps = ComponentProps<typeof Tabs.Root>;
+type TabListProps = ComponentProps<typeof Tabs.List>;
+type TabTriggerProps = ComponentProps<typeof Tabs.Tab>;
+type TabContentProps = ComponentProps<typeof Tabs.Panel>;
+declare function TabRoot(props: TabProps): react_jsx_runtime.JSX.Element;
+declare function TabList(props: TabListProps): react_jsx_runtime.JSX.Element;
+declare function TabTrigger(props: TabTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabContent(props: TabContentProps): react_jsx_runtime.JSX.Element;
+declare const Tab: typeof TabRoot & {
+    displayName: "Tab";
+    List: typeof TabList;
+    Trigger: typeof TabTrigger;
+    Content: typeof TabContent;
+};
+
+export { Tab };
+export type { TabContentProps, TabListProps, TabProps, TabTriggerProps };

package/dist/cjs/components/tab/tab.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var tabs = require('@base-ui/react/tabs');
+
+function TabRoot(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(tabs.Tabs.Root, {
+    ...props
+  });
+}
+function TabList(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(tabs.Tabs.List, {
+    ...props
+  });
+}
+function TabTrigger(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(tabs.Tabs.Tab, {
+    ...props
+  });
+}
+function TabContent(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(tabs.Tabs.Panel, {
+    ...props
+  });
+}
+const Tab = Object.assign(TabRoot, {
+  displayName: "Tab",
+  List: TabList,
+  Trigger: TabTrigger,
+  Content: TabContent
+});
+
+exports.Tab = Tab;

package/dist/cjs/components/tooltip/tooltip.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+
+declare function TooltipArrow({ className, ...props }: ComponentProps<typeof Tooltip$1.Arrow>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, arrowPadding, ...props }: ComponentProps<typeof Tooltip$1.Popup> & Pick<ComponentProps<typeof Tooltip$1.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding">): react_jsx_runtime.JSX.Element;
+declare const Tooltip: (<Payload>(props: Tooltip$1.Root.Props<Payload>) => react_jsx_runtime.JSX.Element) & {
+    displayName: "Tooltip";
+    Trigger: Tooltip$1.Trigger;
+    Content: typeof TooltipContent;
+    Arrow: typeof TooltipArrow;
+    Provider: react.FC<_base_ui_react.TooltipProviderProps>;
+};
+
+export { Tooltip };

package/dist/cjs/components/tooltip/tooltip.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var cn = require('../../cn.js');
+var tooltip_module = require('./tooltip.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var tooltip = require('@base-ui/react/tooltip');
+
+function TooltipArrow({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip.Arrow, {
+    className: cn.cn(tooltip_module.arrow, className),
+    ...props
+  });
+}
+function TooltipContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip.Portal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip.Positioner, {
+      align: align,
+      alignOffset: alignOffset,
+      arrowPadding: arrowPadding,
+      className: tooltip_module.positioner,
+      side: side,
+      sideOffset: sideOffset,
+      children: /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip.Popup, {
+        className: cn.cn(tooltip_module.content, className),
+        "data-cocso-component": "tooltip-content",
+        ...props
+      })
+    })
+  });
+}
+const Tooltip = Object.assign(tooltip.Tooltip.Root, {
+  displayName: "Tooltip",
+  Trigger: tooltip.Tooltip.Trigger,
+  Content: TooltipContent,
+  Arrow: TooltipArrow,
+  Provider: tooltip.Tooltip.Provider
+});
+
+exports.Tooltip = Tooltip;

package/dist/cjs/components/tooltip/tooltip.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 = "@layer components{@keyframes tooltip-module_slide-up-and-fade__DiOEq{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes tooltip-module_slide-right-and-fade__o6cCB{0%{opacity:0;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes tooltip-module_slide-down-and-fade__HJFYG{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes tooltip-module_slide-left-and-fade__ghuNp{0%{opacity:0;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.tooltip-module_content__gv0-E{animation:none}}.tooltip-module_positioner__iuJEP{z-index:var(--cocso-z-index-overlay)}.tooltip-module_content__gv0-E{animation-duration:var(--cocso-duration-fast);animation-timing-function:var(--cocso-easing-entrance);background-color:var(--cocso-color-surface-inverse);border-radius:var(--cocso-radius-2);color:var(--cocso-color-surface-primary);font-size:var(--cocso-text-xs);line-height:1.5;overflow:visible;padding-block:var(--cocso-spacing-3);padding-inline:var(--cocso-spacing-5);position:relative;will-change:transform,opacity}.tooltip-module_content__gv0-E[data-open][data-side=top]{animation-name:tooltip-module_slide-up-and-fade__DiOEq;margin-bottom:var(--cocso-spacing-5)}.tooltip-module_content__gv0-E[data-open][data-side=right]{animation-name:tooltip-module_slide-right-and-fade__o6cCB;margin-left:var(--cocso-spacing-5)}.tooltip-module_content__gv0-E[data-open][data-side=bottom]{animation-name:tooltip-module_slide-down-and-fade__HJFYG;margin-top:var(--cocso-spacing-5)}.tooltip-module_content__gv0-E[data-open][data-side=left]{animation-name:tooltip-module_slide-left-and-fade__ghuNp;margin-right:var(--cocso-spacing-5)}.tooltip-module_arrow__HFT-V{background-color:var(--cocso-color-surface-inverse);height:6px;width:6px}.tooltip-module_arrow__HFT-V[data-side=bottom]{top:0;transform:translateY(-50%) rotate(45deg)}.tooltip-module_arrow__HFT-V[data-side=top]{bottom:0;transform:translateY(50%) rotate(45deg)}.tooltip-module_arrow__HFT-V[data-side=right]{left:0;transform:translateX(-50%) rotate(45deg)}.tooltip-module_arrow__HFT-V[data-side=left]{right:0;transform:translateX(50%) rotate(45deg)}}";
+var styles = {"content":"tooltip-module_content__gv0-E","positioner":"tooltip-module_positioner__iuJEP","arrow":"tooltip-module_arrow__HFT-V"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { Ref, ComponentProps } from 'react';
+import { RenderProp } from '../../primitives/use-render.js';
+import { FontWeight, LineHeight, ResponsiveFontSize } from '../../token/typography.js';
+
+type BodySize = "large" | "medium" | "small" | "x-small";
+type HeadingSize = "x-large" | "large" | "medium" | "small" | "x-small";
+type TypographyPropsBase = {
+    ref?: Ref<HTMLElement>;
+    render?: RenderProp;
+    weight?: FontWeight;
+    lineHeight?: LineHeight;
+} & Omit<ComponentProps<"p">, "ref">;
+type CustomTypographyProps = TypographyPropsBase & {
+    type: "custom";
+    size?: ResponsiveFontSize | "current";
+};
+type BodyTypographyProps = TypographyPropsBase & {
+    type?: "body";
+    size?: BodySize;
+};
+type HeadingTypographyProps = TypographyPropsBase & {
+    type: "heading";
+    size?: HeadingSize;
+};
+type TypographyProps = CustomTypographyProps | BodyTypographyProps | HeadingTypographyProps;
+declare function Typography({ ref, render: renderProp, className, style: _style, color, type, weight, lineHeight, ...props }: TypographyProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+export { Typography };
+export type { BodySize, HeadingSize, TypographyProps };

package/dist/cjs/components/typography/typography.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var tsPattern = require('ts-pattern');
+var cn = require('../../cn.js');
+var typography_module = require('./typography.module.css.js');
+var typography = require('../../token/typography.js');
+var useRender = require('@base-ui/react/use-render');
+var mergeProps = require('@base-ui/react/merge-props');
+
+function Typography({
+  ref,
+  render: renderProp,
+  className,
+  style: _style,
+  color,
+  type = "body",
+  weight = type === "heading" ? "bold" : "normal",
+  lineHeight = "normal",
+  ...props
+}) {
+  const defaultTagName = getDefaultTagName(type);
+  const rawSize = props.size;
+  const isCurrent = rawSize === "current";
+  const fontSizeStyles = {};
+  if (!isCurrent) {
+    const fontSize = getFontSize(type, props);
+    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;
+    }
+    fontSizeStyles["--cocso-typography-font-size"] = `${typography.fontSize[base]}px`;
+    if (tablet !== undefined) {
+      fontSizeStyles["--cocso-tablet-typography-font-size"] = `${typography.fontSize[tablet]}px`;
+    }
+    if (desktop !== undefined) {
+      fontSizeStyles["--cocso-desktop-typography-font-size"] = `${typography.fontSize[desktop]}px`;
+    }
+  }
+  const style = {
+    ..._style,
+    "--cocso-typography-font-color": color,
+    ...fontSizeStyles,
+    "--cocso-typography-font-weight": typography.fontWeight[weight],
+    "--cocso-typography-line-height": typography.lineHeight[lineHeight]
+  };
+  const mergedClassName = cn.cn(typography_module.typography, className);
+  return useRender.useRender({
+    render: renderProp,
+    ref,
+    props: mergeProps.mergeProps({
+      className: mergedClassName,
+      style
+    }, props),
+    defaultTagName
+  });
+}
+const getDefaultTagName = type => tsPattern.match(type).with("heading", () => "h2").otherwise(() => "p");
+const getBodyFontSize = size => tsPattern.match(size).with("large", () => 18).with("medium", () => 16).with("small", () => 14).with("x-small", () => 12).exhaustive();
+const getHeadingFontSize = size => tsPattern.match(size).with("x-large", () => ({
+  base: 28,
+  tablet: 36
+})).with("large", () => ({
+  base: 24,
+  tablet: 32
+})).with("medium", () => ({
+  base: 20,
+  tablet: 28
+})).with("small", () => 16).with("x-small", () => 14).exhaustive();
+const getFontSize = (type, props) => tsPattern.match(type).with("custom", () => props.size ?? 16).with("body", () => getBodyFontSize(props.size ?? "medium")).with("heading", () => getHeadingFontSize(props.size ?? "medium")).otherwise(() => 16);
+
+exports.Typography = Typography;

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

package/dist/cjs/ecosystem/codegen/generated/alert.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-alert{--cocso-alert-border-radius:var(--cocso-radius-4);--cocso-alert-padding:12px 16px;--cocso-alert-font-size:14px}.cocso-alert.cocso-alert--variant-info{--cocso-alert-bg-color:var(--cocso-color-feedback-info-subtle);--cocso-alert-font-color:var(--cocso-color-feedback-info-text);--cocso-alert-border-color:var(--cocso-color-feedback-info-border)}.cocso-alert.cocso-alert--variant-success{--cocso-alert-bg-color:var(--cocso-color-feedback-success-subtle);--cocso-alert-font-color:var(--cocso-color-feedback-success-text);--cocso-alert-border-color:var(--cocso-color-feedback-success-border)}.cocso-alert.cocso-alert--variant-warning{--cocso-alert-bg-color:var(--cocso-color-feedback-warning-subtle);--cocso-alert-font-color:var(--cocso-color-feedback-warning-text);--cocso-alert-border-color:var(--cocso-color-feedback-warning-border)}.cocso-alert.cocso-alert--variant-error{--cocso-alert-bg-color:var(--cocso-color-feedback-danger-subtle);--cocso-alert-font-color:var(--cocso-color-feedback-danger-text);--cocso-alert-border-color:var(--cocso-color-feedback-danger-border)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/avatar.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-avatar{--cocso-avatar-bg-color:var(--cocso-color-surface-neutral);--cocso-avatar-font-color:var(--cocso-color-text-secondary);--cocso-avatar-font-weight:500}.cocso-avatar.cocso-avatar--size-xs{--cocso-avatar-height:24px;--cocso-avatar-width:24px;--cocso-avatar-font-size:10px}.cocso-avatar.cocso-avatar--size-sm{--cocso-avatar-height:32px;--cocso-avatar-width:32px;--cocso-avatar-font-size:12px}.cocso-avatar.cocso-avatar--size-md{--cocso-avatar-height:40px;--cocso-avatar-width:40px;--cocso-avatar-font-size:14px}.cocso-avatar.cocso-avatar--size-lg{--cocso-avatar-height:48px;--cocso-avatar-width:48px;--cocso-avatar-font-size:16px}.cocso-avatar.cocso-avatar--size-xl{--cocso-avatar-height:64px;--cocso-avatar-width:64px;--cocso-avatar-font-size:20px}.cocso-avatar.cocso-avatar--shape-circle{--cocso-avatar-border-radius:100%}.cocso-avatar.cocso-avatar--shape-square.cocso-avatar--size-xs{--cocso-avatar-border-radius:var(--cocso-radius-2)}.cocso-avatar.cocso-avatar--shape-square.cocso-avatar--size-sm{--cocso-avatar-border-radius:var(--cocso-radius-3)}.cocso-avatar.cocso-avatar--shape-square.cocso-avatar--size-lg,.cocso-avatar.cocso-avatar--shape-square.cocso-avatar--size-md{--cocso-avatar-border-radius:var(--cocso-radius-4)}.cocso-avatar.cocso-avatar--shape-square.cocso-avatar--size-xl{--cocso-avatar-border-radius:var(--cocso-radius-5)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/badge.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-badge.cocso-badge--variant-primary{--cocso-badge-bg-color:var(--cocso-color-interactive-primary);--cocso-badge-font-color:var(--cocso-color-text-on-primary)}.cocso-badge.cocso-badge--variant-secondary{--cocso-badge-bg-color:var(--cocso-color-surface-secondary);--cocso-badge-font-color:var(--cocso-color-text-secondary)}.cocso-badge.cocso-badge--variant-success{--cocso-badge-bg-color:var(--cocso-color-feedback-success-subtle);--cocso-badge-font-color:var(--cocso-color-feedback-success-text)}.cocso-badge.cocso-badge--variant-error{--cocso-badge-bg-color:var(--cocso-color-feedback-danger-subtle);--cocso-badge-font-color:var(--cocso-color-feedback-danger-text)}.cocso-badge.cocso-badge--variant-warning{--cocso-badge-bg-color:var(--cocso-color-feedback-warning-subtle);--cocso-badge-font-color:var(--cocso-color-feedback-warning-text)}.cocso-badge.cocso-badge--variant-info{--cocso-badge-bg-color:var(--cocso-color-feedback-info-subtle);--cocso-badge-font-color:var(--cocso-color-feedback-info-text)}.cocso-badge.cocso-badge--variant-outline{--cocso-badge-bg-color:var(--cocso-color-transparent);--cocso-badge-font-color:var(--cocso-color-text-primary);--cocso-badge-border:1px solid var(--cocso-color-border-secondary)}.cocso-badge.cocso-badge--size-large{--cocso-badge-padding:5px 10px;--cocso-badge-font-size:14px}.cocso-badge.cocso-badge--size-medium{--cocso-badge-padding:4px 8px;--cocso-badge-font-size:12px}.cocso-badge.cocso-badge--size-small{--cocso-badge-padding:3px 6px;--cocso-badge-font-size:11px}.cocso-badge.cocso-badge--shape-circle{--cocso-badge-border-radius:100%}.cocso-badge.cocso-badge--shape-rounded{--cocso-badge-border-radius:var(--cocso-radius-full)}.cocso-badge.cocso-badge--shape-square.cocso-badge--size-small{--cocso-badge-border-radius:var(--cocso-radius-3)}.cocso-badge.cocso-badge--shape-square.cocso-badge--size-large,.cocso-badge.cocso-badge--shape-square.cocso-badge--size-medium{--cocso-badge-border-radius:var(--cocso-radius-4)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/breadcrumb.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-breadcrumb{--cocso-breadcrumb-font-color:var(--cocso-color-text-muted)}.cocso-breadcrumb.cocso-breadcrumb--size-sm{--cocso-breadcrumb-font-size:12px}.cocso-breadcrumb.cocso-breadcrumb--size-md{--cocso-breadcrumb-font-size:14px}.cocso-breadcrumb.cocso-breadcrumb--size-lg{--cocso-breadcrumb-font-size:16px}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/button.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-button.cocso-button--variant-primary{--cocso-button-bg-color:var(--cocso-color-interactive-primary);--cocso-button-font-color:var(--cocso-color-text-on-primary);--cocso-button-bg-color-hover:var(--cocso-color-interactive-primary-hover);--cocso-button-bg-color-active:var(--cocso-color-interactive-primary-active)}.cocso-button.cocso-button--variant-secondary{--cocso-button-bg-color:var(--cocso-color-surface-secondary);--cocso-button-font-color:var(--cocso-color-text-secondary);--cocso-button-bg-color-hover:var(--cocso-color-interactive-secondary);--cocso-button-bg-color-active:var(--cocso-color-interactive-secondary-hover)}.cocso-button.cocso-button--variant-outline{--cocso-button-bg-color:var(--cocso-color-transparent);--cocso-button-font-color:var(--cocso-color-text-primary);--cocso-button-border:1px solid var(--cocso-color-border-secondary);--cocso-button-bg-color-hover:var(--cocso-color-surface-secondary);--cocso-button-bg-color-active:var(--cocso-color-interactive-secondary)}.cocso-button.cocso-button--variant-ghost{--cocso-button-bg-color:var(--cocso-color-surface-primary);--cocso-button-font-color:var(--cocso-color-text-primary);--cocso-button-bg-color-hover:var(--cocso-color-surface-secondary);--cocso-button-bg-color-active:var(--cocso-color-interactive-secondary)}.cocso-button.cocso-button--variant-success{--cocso-button-bg-color:var(--cocso-color-interactive-success);--cocso-button-font-color:var(--cocso-color-text-on-primary);--cocso-button-bg-color-hover:var(--cocso-color-interactive-success-hover);--cocso-button-bg-color-active:var(--cocso-color-interactive-success-active)}.cocso-button.cocso-button--variant-error{--cocso-button-bg-color:var(--cocso-color-interactive-danger);--cocso-button-font-color:var(--cocso-color-text-on-primary);--cocso-button-bg-color-hover:var(--cocso-color-interactive-danger-hover);--cocso-button-bg-color-active:var(--cocso-color-interactive-danger-active)}.cocso-button.cocso-button--variant-warning{--cocso-button-bg-color:var(--cocso-color-interactive-warning);--cocso-button-font-color:var(--cocso-color-text-primary);--cocso-button-bg-color-hover:var(--cocso-color-interactive-warning-hover);--cocso-button-bg-color-active:var(--cocso-color-interactive-warning-active)}.cocso-button.cocso-button--variant-info{--cocso-button-bg-color:var(--cocso-color-interactive-info);--cocso-button-font-color:var(--cocso-color-text-on-primary);--cocso-button-bg-color-hover:var(--cocso-color-interactive-info-hover);--cocso-button-bg-color-active:var(--cocso-color-interactive-info-active)}.cocso-button.cocso-button--size-large{--cocso-button-height:40px;--cocso-button-padding-inline:14px;--cocso-button-content-padding:0 6px;--cocso-button-font-size:14px}.cocso-button.cocso-button--size-medium{--cocso-button-height:36px;--cocso-button-padding-inline:12px;--cocso-button-content-padding:0 6px;--cocso-button-font-size:14px}.cocso-button.cocso-button--size-small{--cocso-button-height:32px;--cocso-button-padding-inline:10px;--cocso-button-content-padding:0 2px;--cocso-button-font-size:14px}.cocso-button.cocso-button--size-x-small{--cocso-button-height:28px;--cocso-button-padding-inline:8px;--cocso-button-content-padding:0;--cocso-button-font-size:12px}.cocso-button.cocso-button--shape-circle{--cocso-button-border-radius:100%}.cocso-button.cocso-button--shape-rounded{--cocso-button-border-radius:var(--cocso-radius-full)}.cocso-button.cocso-button--shape-square.cocso-button--size-x-small{--cocso-button-border-radius:var(--cocso-radius-3)}.cocso-button.cocso-button--shape-square.cocso-button--size-large,.cocso-button.cocso-button--shape-square.cocso-button--size-medium,.cocso-button.cocso-button--shape-square.cocso-button--size-small{--cocso-button-border-radius:var(--cocso-radius-4)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/card.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-card.cocso-card--variant-elevated,.cocso-card.cocso-card--variant-outlined{--cocso-card-bg-color:var(--cocso-color-surface-primary);--cocso-card-border-radius:var(--cocso-radius-4)}.cocso-card.cocso-card--variant-outlined{--cocso-card-border:1px solid var(--cocso-color-border-secondary)}.cocso-card.cocso-card--variant-filled{--cocso-card-bg-color:var(--cocso-color-surface-secondary);--cocso-card-border-radius:var(--cocso-radius-4)}.cocso-card.cocso-card--padding-sm{--cocso-card-padding:12px}.cocso-card.cocso-card--padding-md{--cocso-card-padding:16px}.cocso-card.cocso-card--padding-lg{--cocso-card-padding:24px}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/checkbox.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-checkbox.cocso-checkbox--size-large{--cocso-checkbox-size:18px;--cocso-checkbox-radius:var(--cocso-radius-3)}.cocso-checkbox.cocso-checkbox--size-medium{--cocso-checkbox-size:16px;--cocso-checkbox-radius:var(--cocso-radius-2)}.cocso-checkbox.cocso-checkbox--size-small{--cocso-checkbox-size:14px;--cocso-checkbox-radius:var(--cocso-radius-1)}.cocso-checkbox.cocso-checkbox--status-on{--cocso-checkbox-border-color:var(--cocso-color-interactive-primary);--cocso-checkbox-bg-color:var(--cocso-color-interactive-primary);--cocso-checkbox-bg-color-hover:var(--cocso-color-interactive-primary-hover);--cocso-checkbox-border-color-hover:var(--cocso-color-interactive-primary-hover)}.cocso-checkbox.cocso-checkbox--status-off{--cocso-checkbox-border-color:var(--cocso-color-border-secondary);--cocso-checkbox-bg-color:var(--cocso-color-surface-primary);--cocso-checkbox-bg-color-hover:var(--cocso-color-interactive-secondary-hover);--cocso-checkbox-border-color-hover:var(--cocso-color-interactive-secondary-hover)}.cocso-checkbox.cocso-checkbox--status-intermediate{--cocso-checkbox-border-color:var(--cocso-color-interactive-primary);--cocso-checkbox-bg-color:var(--cocso-color-interactive-primary);--cocso-checkbox-bg-color-hover:var(--cocso-color-interactive-primary-hover);--cocso-checkbox-border-color-hover:var(--cocso-color-interactive-primary-hover)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/input.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-input{--cocso-input-border-color:var(--cocso-color-border-primary)}.cocso-input.cocso-input--size-x-small{--cocso-input-height:28px;--cocso-input-padding-x:8px;--cocso-input-font-size:12px;--cocso-input-border-radius:var(--cocso-radius-3);--cocso-input-border-color-hover:var(--cocso-color-interactive-primary-muted);--cocso-input-border-color-focus:var(--cocso-color-interactive-primary-active)}.cocso-input.cocso-input--size-small{--cocso-input-height:32px;--cocso-input-padding-x:10px;--cocso-input-font-size:12px;--cocso-input-border-radius:var(--cocso-radius-3);--cocso-input-border-color-hover:var(--cocso-color-interactive-primary-muted);--cocso-input-border-color-focus:var(--cocso-color-interactive-primary-active)}.cocso-input.cocso-input--size-medium{--cocso-input-height:36px;--cocso-input-padding-x:12px;--cocso-input-font-size:14px;--cocso-input-border-radius:var(--cocso-radius-4);--cocso-input-border-color-hover:var(--cocso-color-interactive-primary-muted);--cocso-input-border-color-focus:var(--cocso-color-interactive-primary-active)}.cocso-input.cocso-input--size-large{--cocso-input-height:40px;--cocso-input-padding-x:14px;--cocso-input-font-size:14px;--cocso-input-border-radius:var(--cocso-radius-4);--cocso-input-border-color-hover:var(--cocso-color-interactive-primary-muted);--cocso-input-border-color-focus:var(--cocso-color-interactive-primary-active)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/link.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-link.cocso-link--variant-inline{--cocso-link-color:var(--cocso-color-interactive-info);--cocso-link-color-hover:var(--cocso-color-interactive-info-active)}.cocso-link.cocso-link--variant-current{--cocso-link-color:currentColor;--cocso-link-color-hover:currentColor}.cocso-link.cocso-link--variant-plain{--cocso-link-color:var(--cocso-color-interactive-info);--cocso-link-color-hover:var(--cocso-color-interactive-info-active)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/progress.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-progress{--cocso-progress-bg-color:var(--cocso-color-surface-neutral)}.cocso-progress.cocso-progress--variant-primary{--cocso-progress-fill-color:var(--cocso-color-interactive-primary)}.cocso-progress.cocso-progress--variant-secondary{--cocso-progress-fill-color:var(--cocso-color-text-muted)}.cocso-progress.cocso-progress--variant-success{--cocso-progress-fill-color:var(--cocso-color-feedback-success)}.cocso-progress.cocso-progress--variant-danger{--cocso-progress-fill-color:var(--cocso-color-feedback-danger)}.cocso-progress.cocso-progress--variant-warning{--cocso-progress-fill-color:var(--cocso-color-feedback-warning)}.cocso-progress.cocso-progress--variant-info{--cocso-progress-fill-color:var(--cocso-color-feedback-info)}.cocso-progress.cocso-progress--size-sm{--cocso-progress-height:4px;--cocso-progress-border-radius:var(--cocso-radius-1)}.cocso-progress.cocso-progress--size-md{--cocso-progress-height:8px;--cocso-progress-border-radius:var(--cocso-radius-2)}.cocso-progress.cocso-progress--size-lg{--cocso-progress-height:12px;--cocso-progress-border-radius:var(--cocso-radius-3)}";
+styleInject_es(css_248z);

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

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

package/dist/cjs/ecosystem/codegen/generated/radio.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-radio.cocso-radio--size-large{--cocso-radio-size:18px;--cocso-radio-dot-size:8px}.cocso-radio.cocso-radio--size-medium{--cocso-radio-size:16px;--cocso-radio-dot-size:7px}.cocso-radio.cocso-radio--size-small{--cocso-radio-size:14px;--cocso-radio-dot-size:6px}.cocso-radio.cocso-radio--selected-true{--cocso-radio-bg-color:var(--cocso-color-interactive-primary);--cocso-radio-border-color:var(--cocso-color-interactive-primary);--cocso-radio-bg-color-hover:var(--cocso-color-interactive-primary-hover);--cocso-radio-border-color-hover:var(--cocso-color-interactive-primary-hover)}.cocso-radio.cocso-radio--selected-false{--cocso-radio-bg-color:var(--cocso-color-surface-primary);--cocso-radio-border-color:var(--cocso-color-border-primary);--cocso-radio-border-color-hover:var(--cocso-color-interactive-primary-muted)}";
+styleInject_es(css_248z);

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

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