@cocso-ui/react 0.2.21 → 1.0.1

package/dist/cjs/components/popover/popover.js

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

package/dist/cjs/components/popover/popover.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{@keyframes popover-module_slide-up-and-fade__Xlvb6{0%{opacity:.9;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-module_slide-right-and-fade__R8x1-{0%{opacity:.9;transform:translateX(-2px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-module_slide-down-and-fade__hwk68{0%{opacity:.9;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-module_slide-left-and-fade__dQXyx{0%{opacity:.9;transform:translateX(2px)}to{opacity:1;transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.popover-module_content__TwOg0{animation:none}}.popover-module_positioner__TnQeH{z-index:var(--cocso-z-index-overlay)}.popover-module_content__TwOg0{animation-duration:var(--cocso-duration-normal);animation-timing-function:var(--cocso-easing-entrance);background-color:var(--cocso-color-surface-primary);border:1px solid var(--cocso-color-border-secondary);border-radius:var(--cocso-radius-3);box-shadow:var(--cocso-shadow-popover);font-size:var(--cocso-text-sm);line-height:1.5;overflow:visible;padding-block:var(--cocso-spacing-4);padding-inline:var(--cocso-spacing-5);position:relative;will-change:transform,opacity}.popover-module_content__TwOg0[data-open][data-side=top]{animation-name:popover-module_slide-up-and-fade__Xlvb6;margin-bottom:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=right]{animation-name:popover-module_slide-right-and-fade__R8x1-;margin-left:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=bottom]{animation-name:popover-module_slide-down-and-fade__hwk68;margin-top:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=left]{animation-name:popover-module_slide-left-and-fade__dQXyx;margin-right:var(--cocso-spacing-3)}.popover-module_content__TwOg0[data-open][data-side=top]:has(.popover-module_arrow__zZuHF){margin-bottom:var(--cocso-spacing-6)}.popover-module_content__TwOg0[data-open][data-side=right]:has(.popover-module_arrow__zZuHF){margin-left:var(--cocso-spacing-6)}.popover-module_content__TwOg0[data-open][data-side=bottom]:has(.popover-module_arrow__zZuHF){margin-top:var(--cocso-spacing-6)}.popover-module_content__TwOg0[data-open][data-side=left]:has(.popover-module_arrow__zZuHF){margin-right:var(--cocso-spacing-6)}.popover-module_arrow__zZuHF{background-color:var(--cocso-color-surface-primary);border:1px solid var(--cocso-color-border-secondary);height:10px;width:10px}.popover-module_arrow__zZuHF[data-side=bottom]{border-bottom:none;border-right:none;top:0;transform:translateY(-50%) rotate(45deg)}.popover-module_arrow__zZuHF[data-side=top]{border-left:none;border-top:none;bottom:0;transform:translateY(50%) rotate(45deg)}.popover-module_arrow__zZuHF[data-side=right]{border-right:none;border-top:none;left:0;transform:translateX(-50%) rotate(45deg)}.popover-module_arrow__zZuHF[data-side=left]{border-bottom:none;border-left:none;right:0;transform:translateX(50%) rotate(45deg)}}";
+var styles = {"content":"popover-module_content__TwOg0","positioner":"popover-module_positioner__TnQeH","arrow":"popover-module_arrow__zZuHF"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type ProgressVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends ComponentProps<"div"> {
+    max?: number;
+    size?: ProgressSize;
+    value: number;
+    variant?: ProgressVariant;
+}
+/** Determinate progress indicator showing completion percentage. */
+declare function Progress({ ref, className, style, variant, size, value, max, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Progress };
+export type { ProgressProps, ProgressSize, ProgressVariant };

package/dist/cjs/components/progress/progress.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var progress = require('../../ecosystem/codegen/generated/progress.js');
+require('../../ecosystem/codegen/generated/progress.css.js');
+var cn = require('../../cn.js');
+var progress_module = require('./progress.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/** Determinate progress indicator showing completion percentage. */
+function Progress({
+  ref,
+  className,
+  style,
+  variant = "primary",
+  size = "md",
+  value,
+  max = 100,
+  ...props
+}) {
+  const safeMax = max > 0 ? max : 100;
+  const percentage = Math.min(100, Math.max(0, value / safeMax * 100));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    "aria-valuemax": safeMax,
+    "aria-valuemin": 0,
+    "aria-valuenow": Math.min(Math.max(0, value), safeMax),
+    className: cn.cn(progress.progress({
+      variant,
+      size
+    }), progress_module.track, className),
+    ref: ref,
+    role: "progressbar",
+    style: style,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: progress_module.fill,
+      style: {
+        width: `${percentage}%`
+      }
+    })
+  });
+}
+
+exports.Progress = Progress;

package/dist/cjs/components/progress/progress.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{.progress-module_track__gM0oV{background-color:var(--cocso-progress-bg-color);border-radius:var(--cocso-progress-border-radius);height:var(--cocso-progress-height);overflow:hidden;width:100%}.progress-module_fill__aLAbp{background-color:var(--cocso-progress-fill-color);border-radius:inherit;height:100%;transition:width var(--cocso-duration-normal) var(--cocso-easing-soft)}}";
+var styles = {"track":"progress-module_track__gM0oV","fill":"progress-module_fill__aLAbp"};
+styleInject_es(css_248z);
+
+module.exports = styles;

package/dist/cjs/components/radio-group/radio-group.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+
+/** Inline type alias — codegen is a devDependency and must not leak into published .d.ts */
+type RadioSize = "large" | "medium" | "small";
+declare function RadioGroupRoot({ className, ...props }: ComponentProps<typeof RadioGroup$1>): react_jsx_runtime.JSX.Element;
+declare function RadioGroupItem({ className, size, style, ...props }: ComponentProps<typeof Radio.Root> & {
+    size?: RadioSize;
+}): react_jsx_runtime.JSX.Element;
+declare function RadioGroupIndicator({ className, ...props }: ComponentProps<typeof Radio.Indicator>): react_jsx_runtime.JSX.Element;
+/**
+ * Single-selection radio group. Compose with `RadioGroup.Item` and `RadioGroup.Indicator`.
+ */
+declare const RadioGroup: typeof RadioGroupRoot & {
+    displayName: "RadioGroup";
+    Item: typeof RadioGroupItem;
+    Indicator: typeof RadioGroupIndicator;
+};
+
+export { RadioGroup };
+export type { RadioSize };

package/dist/cjs/components/radio-group/radio-group.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var radio$1 = require('../../ecosystem/codegen/generated/radio.js');
+require('../../ecosystem/codegen/generated/radio.css.js');
+var cn = require('../../cn.js');
+var radioGroup_module = require('./radio-group.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var radioGroup = require('@base-ui/react/radio-group');
+var radio = require('@base-ui/react/radio');
+
+function RadioGroupRoot({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(radioGroup.RadioGroup, {
+    className: cn.cn(radioGroup_module.root, className),
+    ...props
+  });
+}
+function RadioGroupItem({
+  className,
+  size = "medium",
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(radio.Radio.Root, {
+    className: cn.cn(radio$1.radio({
+      size
+    }), radioGroup_module.item, className),
+    style: style,
+    ...props
+  });
+}
+function RadioGroupIndicator({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(radio.Radio.Indicator, {
+    className: cn.cn(radioGroup_module.indicator, className),
+    ...props
+  });
+}
+
+/**
+ * Single-selection radio group. Compose with `RadioGroup.Item` and `RadioGroup.Indicator`.
+ */
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  displayName: "RadioGroup",
+  Item: RadioGroupItem,
+  Indicator: RadioGroupIndicator
+});
+
+exports.RadioGroup = RadioGroup;

package/dist/cjs/components/radio-group/radio-group.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{.radio-group-module_root__b8W35{display:flex;flex-direction:column;gap:var(--cocso-spacing-4)}.radio-group-module_root__b8W35[data-disabled]{cursor:not-allowed;opacity:.4}.radio-group-module_item__QAyhl{background-color:var(--cocso-color-white);border:var(--cocso-spacing-2) solid var(--cocso-color-text-primary);border-radius:100%;cursor:pointer;height:var(--cocso-radio-size,16px);width:var(--cocso-radio-size,16px)}.radio-group-module_item__QAyhl:focus-visible{outline:2px solid var(--cocso-color-primary-950);outline-offset:2px}.radio-group-module_item__QAyhl[data-checked]{border-color:var(--cocso-color-primary-950)}.radio-group-module_item__QAyhl[data-disabled]{cursor:not-allowed;opacity:.4}.radio-group-module_indicator__I0Col{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.radio-group-module_indicator__I0Col:after{background-color:var(--cocso-color-primary-950);border-radius:50%;content:\"\";display:block;height:var(--cocso-radio-dot-size,7px);width:var(--cocso-radio-dot-size,7px)}}";
+var styles = {"root":"radio-group-module_root__b8W35","item":"radio-group-module_item__QAyhl","indicator":"radio-group-module_indicator__I0Col"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type SelectSize = "large" | "medium" | "small" | "x-small";
+interface SelectProps extends Omit<ComponentProps<"select">, "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: boolean | string;
+    label?: string;
+    size?: SelectSize;
+    stretch?: boolean;
+}
+/** Dropdown select component wrapping native select. */
+declare function Select({ ref, className, style: _style, size, disabled, error, stretch, label, description, id: _id, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+export { Select };
+export type { SelectProps, SelectSize };

package/dist/cjs/components/select/select.js

@@ -0,0 +1,86 @@
+"use client";
+'use strict';
+
+var select = require('../../ecosystem/codegen/generated/select.js');
+var reactIcons = require('@cocso-ui/react-icons');
+require('../../ecosystem/codegen/generated/select.css.js');
+var react = require('react');
+var cn = require('../../cn.js');
+var select_module = require('./select.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var field = require('../field/field.js');
+
+const ICON_SIZES = {
+  "x-small": 10,
+  small: 12,
+  medium: 14,
+  large: 14
+};
+/** Dropdown select component wrapping native select. */
+function Select({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  disabled = false,
+  error = false,
+  stretch = false,
+  label,
+  description,
+  id: _id,
+  children,
+  ...props
+}) {
+  const generatedId = react.useId();
+  const id = _id ?? generatedId;
+  const hasError = !!error;
+  const errorMessage = typeof error === "string" ? error : undefined;
+  const wrapperStyle = {};
+  const select$1 = /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: cn.cn(select.select({
+      size
+    }), select_module.wrapper, stretch && select_module.stretch, hasError && select_module.error, className),
+    "data-cocso-component": "select",
+    style: wrapperStyle,
+    children: [/*#__PURE__*/jsxRuntime.jsx(FieldAwareSelect, {
+      "aria-invalid": hasError || undefined,
+      className: select_module.select,
+      disabled: disabled,
+      id: id,
+      ref: ref,
+      style: _style,
+      ...props,
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: select_module.icon,
+      children: /*#__PURE__*/jsxRuntime.jsx(reactIcons.SelectorIcon, {
+        size: ICON_SIZES[size]
+      })
+    })]
+  });
+  if (label) {
+    return /*#__PURE__*/jsxRuntime.jsx(field.Field, {
+      description: description,
+      error: errorMessage,
+      htmlFor: id,
+      label: label,
+      required: props.required,
+      children: select$1
+    });
+  }
+  return select$1;
+}
+function FieldAwareSelect({
+  "aria-describedby": callerDescribedBy,
+  ...props
+}) {
+  const field$1 = field.useField();
+  const fieldDescribedBy = field$1.errorId ?? field$1.descriptionId;
+  const describedBy = [fieldDescribedBy, callerDescribedBy].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/jsxRuntime.jsx("select", {
+    "aria-describedby": describedBy,
+    ...props
+  });
+}
+
+exports.Select = Select;

package/dist/cjs/components/select/select.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{.select-module_wrapper__7szq0{cursor:pointer;position:relative;width:fit-content}.select-module_wrapper__7szq0.select-module_stretch__mQv7N{width:100%}.select-module_select__RLsWH{--cocso-select-min-width:inherit;--cocso-select-height:inherit;--cocso-select-padding-left:inherit;--cocso-select-padding-right:inherit;--cocso-select-font-size:inherit;--cocso-select-border-radius:inherit;--cocso-select-bg-color:var(--cocso-color-white);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--cocso-select-bg-color);border:none;border-radius:var(--cocso-select-border-radius);box-shadow:0 0 0 1px var(--cocso-color-neutral-100),var(--cocso-shadow-xs);color:var(--cocso-color-neutral-950);font-size:var(--cocso-select-font-size);height:var(--cocso-select-height);min-width:var(--cocso-select-min-width);outline:none;padding-left:var(--cocso-select-padding-left);padding-right:var(--cocso-select-padding-right);transition:box-shadow var(--cocso-duration-fast) var(--cocso-easing-soft)}.select-module_select__RLsWH:focus-visible{box-shadow:0 0 0 1px var(--cocso-color-neutral-400),var(--cocso-shadow-xs);outline:2px solid transparent}.select-module_wrapper__7szq0.select-module_stretch__mQv7N .select-module_select__RLsWH{width:100%}.select-module_wrapper__7szq0:has(select:disabled){cursor:not-allowed}.select-module_select__RLsWH:disabled{cursor:not-allowed;opacity:.4}.select-module_wrapper__7szq0.select-module_error__4KQv3 .select-module_select__RLsWH{box-shadow:0 0 0 1px var(--cocso-color-danger-500),var(--cocso-shadow-xs)}.select-module_wrapper__7szq0.select-module_error__4KQv3 .select-module_select__RLsWH:focus-visible{box-shadow:0 0 0 1px var(--cocso-color-danger-500),var(--cocso-shadow-xs);outline:2px solid transparent}.select-module_icon__K93bs{color:var(--cocso-color-neutral-500);pointer-events:none;position:absolute;right:var(--cocso-select-icon-right,var(--cocso-spacing-5));top:50%;transform:translateY(-50%)}.select-module_wrapper__7szq0:has(select:disabled) .select-module_icon__K93bs{opacity:.4}}";
+var styles = {"wrapper":"select-module_wrapper__7szq0","stretch":"select-module_stretch__mQv7N","select":"select-module_select__RLsWH","error":"select-module_error__4KQv3","icon":"select-module_icon__K93bs"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type SkeletonVariant = "text" | "circular" | "rectangular";
+type SkeletonAnimation = "pulse" | "wave" | "none";
+interface SkeletonProps extends ComponentProps<"div"> {
+    animation?: SkeletonAnimation;
+    variant?: SkeletonVariant;
+}
+/** Loading placeholder with configurable shape and animation. */
+declare function Skeleton({ ref, className, style, variant, animation, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Skeleton };
+export type { SkeletonAnimation, SkeletonProps, SkeletonVariant };

package/dist/cjs/components/skeleton/skeleton.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var skeleton = require('../../ecosystem/codegen/generated/skeleton.js');
+require('../../ecosystem/codegen/generated/skeleton.css.js');
+var cn = require('../../cn.js');
+var skeleton_module = require('./skeleton.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/** Loading placeholder with configurable shape and animation. */
+function Skeleton({
+  ref,
+  className,
+  style,
+  variant = "text",
+  animation = "pulse",
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    "aria-hidden": "true",
+    className: cn.cn(skeleton.skeleton({
+      variant,
+      animation
+    }), skeleton_module.skeleton, animation === "pulse" && skeleton_module.pulse, animation === "wave" && skeleton_module.wave, className),
+    ref: ref,
+    style: style,
+    ...props
+  });
+}
+
+exports.Skeleton = Skeleton;

package/dist/cjs/components/skeleton/skeleton.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{.skeleton-module_skeleton__fula5{background-color:var(--cocso-skeleton-bg-color);border-radius:var(--cocso-skeleton-border-radius);height:var(--cocso-skeleton-height);width:var(--cocso-skeleton-width,100%)}.skeleton-module_pulse__YLysm{animation:skeleton-module_skeleton-pulse__Yp45W var(--cocso-duration-decorative-slow) var(--cocso-easing-default) infinite}.skeleton-module_wave__GxWJ1{overflow:hidden;position:relative}.skeleton-module_wave__GxWJ1:after{animation:skeleton-module_skeleton-wave__zaVNu var(--cocso-duration-decorative-slow) var(--cocso-easing-default) infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4),transparent);content:\"\";inset:0;position:absolute}@keyframes skeleton-module_skeleton-pulse__Yp45W{0%,to{opacity:1}50%{opacity:.4}}@keyframes skeleton-module_skeleton-wave__zaVNu{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}}";
+var styles = {"skeleton":"skeleton-module_skeleton__fula5","pulse":"skeleton-module_pulse__YLysm","wave":"skeleton-module_wave__GxWJ1"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type SpinnerVariant = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "white";
+type SpinnerSize = "large" | "medium" | "small";
+
+interface SpinnerProps extends Omit<ComponentProps<"output">, "size"> {
+    label?: string;
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+}
+/** Loading indicator rendered as an accessible output element. */
+declare function Spinner({ ref, className, style: _style, size, variant, label, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+export { Spinner };
+export type { SpinnerProps, SpinnerSize, SpinnerVariant };

package/dist/cjs/components/spinner/spinner.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var spinner = require('../../ecosystem/codegen/generated/spinner.js');
+var spinnerGeometry = require('../../ecosystem/codegen/generated/spinner-geometry.js');
+require('../../ecosystem/codegen/generated/spinner.css.js');
+var cn = require('../../cn.js');
+var spinner_module = require('./spinner.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/** Loading indicator rendered as an accessible output element. */
+function Spinner({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  variant = "primary",
+  label = "Loading",
+  ...props
+}) {
+  const {
+    blades: bladeCount,
+    bladeWidth: width,
+    bladeHeight: height,
+    bladeRadius: radius,
+    output
+  } = spinnerGeometry.getSpinnerGeometry(size);
+  const container = output;
+  const left = (container - width) / 2;
+  const originY = height - container / 2;
+  const step = 360 / bladeCount;
+  const blades = Array.from({
+    length: bladeCount
+  }, (_, i) => ({
+    angle: i * step,
+    delay: -((bladeCount - 1 - i) * (0.75 / bladeCount))
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx("output", {
+    "aria-label": label,
+    "aria-live": "polite",
+    className: cn.cn(spinner.spinner({
+      variant,
+      size
+    }), spinner_module.spinner, className),
+    ref: ref,
+    style: {
+      width: `${container}px`,
+      height: `${container}px`,
+      ..._style
+    },
+    ...props,
+    children: blades.map(({
+      angle,
+      delay
+    }) => /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: spinner_module.blade,
+      style: {
+        left: `${left}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        borderRadius: `${radius}px`,
+        backgroundColor: "currentColor",
+        transformOrigin: `center ${originY}px`,
+        animationDelay: `${delay}s`,
+        transform: `rotate(${angle}deg)`
+      }
+    }, `blade-${angle}`))
+  });
+}
+
+exports.Spinner = Spinner;

package/dist/cjs/components/spinner/spinner.module.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "@layer components{@keyframes spinner-module_spinner-blade-fade__Xtrit{0%{opacity:1}to{opacity:.15}}.spinner-module_spinner__28e7a{color:var(--cocso-spinner-blade-color);display:block;flex-shrink:0;position:relative}.spinner-module_blade__EIEE6{animation:spinner-module_spinner-blade-fade__Xtrit var(--cocso-duration-decorative) linear infinite;bottom:0;position:absolute}@keyframes spinner-module_spinner-reduced-pulse__-WlGM{0%,to{opacity:.4}50%{opacity:.8}}@media (prefers-reduced-motion:reduce){.spinner-module_blade__EIEE6{animation:spinner-module_spinner-reduced-pulse__-WlGM 2s ease-in-out infinite;animation-delay:0s!important}}}";
+var styles = {"spinner":"spinner-module_spinner__28e7a","blade":"spinner-module_blade__EIEE6"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type QuantityStatus = "normal" | "sufficient" | "insufficient";
+interface StockQuantityStatusProps extends ComponentProps<"div"> {
+    quantity: QuantityStatus;
+}
+/** Displays a stock quantity status indicator with icon and label. */
+declare function StockQuantityStatus({ ref, className, style: _style, quantity, ...props }: StockQuantityStatusProps): react_jsx_runtime.JSX.Element;
+
+export { StockQuantityStatus };
+export type { QuantityStatus, StockQuantityStatusProps };

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

@@ -0,0 +1,119 @@
+'use strict';
+
+var stockQuantityStatus = require('../../ecosystem/codegen/generated/stock-quantity-status.js');
+require('../../ecosystem/codegen/generated/stock-quantity-status.css.js');
+var cn = require('../../cn.js');
+var stockQuantityStatus_module = require('./stock-quantity-status.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var spacing = require('../../token/spacing.js');
+var typography = require('../typography/typography.js');
+
+const DISPLAY_LABELS = {
+  normal: "보통",
+  sufficient: "여유",
+  insufficient: "부족"
+};
+const renderIndicator = quantity => {
+  if (quantity === "sufficient") {
+    return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        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",
+        fillRule: "evenodd"
+      }), /*#__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"
+      })]
+    });
+  }
+  if (quantity === "normal") {
+    return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        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",
+        fillRule: "evenodd"
+      }), /*#__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"
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    "aria-hidden": "true",
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      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",
+      fillRule: "evenodd"
+    }), /*#__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"
+    })]
+  });
+};
+/** Displays a stock quantity status indicator with icon and label. */
+function StockQuantityStatus({
+  ref,
+  className,
+  style: _style,
+  quantity,
+  ...props
+}) {
+  const style = {
+    ..._style,
+    "--cocso-stock-quantity-status-indicator-width": spacing.spacing.s9
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: cn.cn(stockQuantityStatus.stockQuantityStatus({
+      quantity
+    }), stockQuantityStatus_module.stock, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: stockQuantityStatus_module.indicator,
+      children: renderIndicator(quantity)
+    }), /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      color: "currentColor",
+      size: "small",
+      type: "body",
+      children: DISPLAY_LABELS[quantity]
+    })]
+  });
+}
+
+exports.StockQuantityStatus = StockQuantityStatus;

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