@cocso-ui/react 0.2.21 → 1.0.0

package/README.md

@@ -1,6 +1,6 @@
 ## `@cocso-ui/react`
 
-이 Package는 리액트 기반 컴포넌트를 제공해요.
+이 Package는 리액트 기반 컴포넌트를 제공합니다.
 
 ### Installation
 
@@ -10,7 +10,7 @@ pnpm install @cocso-ui/react
 
 ### Usage
 
-컴포넌트를 아래와 같은 형태로 import 할 수 있어요.
+컴포넌트를 아래와 같은 형태로 import 할 수 있습니다.
 
 ```javascript
 import { Button } from '@cocso-ui/react';

package/dist/cjs/cn.d.ts

@@ -0,0 +1,12 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Merges class names using `clsx` for conditional joining and
+ * `tailwind-merge` to resolve Tailwind CSS class conflicts.
+ *
+ * @param inputs - Any number of class values (strings, arrays, objects).
+ * @returns A single deduplicated, conflict-resolved class name string.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/cjs/cn.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+/**
+ * Merges class names using `clsx` for conditional joining and
+ * `tailwind-merge` to resolve Tailwind CSS class conflicts.
+ *
+ * @param inputs - Any number of class values (strings, arrays, objects).
+ * @returns A single deduplicated, conflict-resolved class name string.
+ */
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;

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

@@ -0,0 +1,25 @@
+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 { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+
+declare function AccordionItem({ className, ...props }: ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime.JSX.Element;
+interface AccordionTriggerProps extends ComponentProps<typeof Accordion$1.Trigger> {
+    chevron?: boolean;
+}
+declare function AccordionTrigger({ className, children, chevron, ...props }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+declare function AccordionPanel({ className, ...props }: ComponentProps<typeof Accordion$1.Panel>): react_jsx_runtime.JSX.Element;
+/**
+ * Collapsible content sections. Compose with `Accordion.Item`, `Accordion.Header`,
+ * `Accordion.Trigger`, and `Accordion.Content`.
+ */
+declare const Accordion: (<Value = any>(props: Accordion$1.Root.Props<Value>) => React.JSX.Element) & {
+    Item: typeof AccordionItem;
+    Header: react.ForwardRefExoticComponent<Omit<_base_ui_react.AccordionHeaderProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionPanel;
+};
+
+export { Accordion };
+export type { AccordionTriggerProps };

package/dist/cjs/components/accordion/accordion.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var reactIcons = require('@cocso-ui/react-icons');
+var cn = require('../../cn.js');
+var accordion_module = require('./accordion.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var accordion = require('@base-ui/react/accordion');
+
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(accordion.Accordion.Item, {
+    className: cn.cn(accordion_module.item, className),
+    ...props
+  });
+}
+function AccordionTrigger({
+  className,
+  children,
+  chevron = true,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(accordion.Accordion.Trigger, {
+    className: cn.cn(accordion_module.trigger, className),
+    ...props,
+    children: [children, chevron && /*#__PURE__*/jsxRuntime.jsx(reactIcons.KeyboardArrowDownIcon, {
+      className: accordion_module.chevron
+    })]
+  });
+}
+function AccordionPanel({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(accordion.Accordion.Panel, {
+    className: cn.cn(accordion_module.content, className),
+    ...props
+  });
+}
+
+/**
+ * Collapsible content sections. Compose with `Accordion.Item`, `Accordion.Header`,
+ * `Accordion.Trigger`, and `Accordion.Content`.
+ */
+const Accordion = Object.assign(accordion.Accordion.Root, {
+  Item: AccordionItem,
+  Header: accordion.Accordion.Header,
+  Trigger: AccordionTrigger,
+  Content: AccordionPanel
+});
+Accordion.displayName = "Accordion";
+
+exports.Accordion = Accordion;

package/dist/cjs/components/accordion/accordion.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{.accordion-module_content__1WTaS,.accordion-module_item__qfZXb{overflow:hidden}.accordion-module_content__1WTaS[data-open]{animation:accordion-module_slide-down__0ZzAE var(--cocso-duration-slow) var(--cocso-easing-accordion)}.accordion-module_content__1WTaS:not([data-open]){animation:accordion-module_slide-up__txwke var(--cocso-duration-slow) var(--cocso-easing-accordion)}.accordion-module_trigger__p5Nek{cursor:pointer;display:flex;justify-content:space-between;width:100%}.accordion-module_trigger__p5Nek:focus-visible{outline:2px solid var(--cocso-color-focus-ring);outline-offset:2px}.accordion-module_chevron__yZOb8{display:inline-block;height:var(--cocso-spacing-10);transition:transform var(--cocso-duration-normal) var(--cocso-easing-default);width:var(--cocso-spacing-10)}.accordion-module_trigger__p5Nek:not([data-panel-open])>.accordion-module_chevron__yZOb8{transform:rotate(0deg)}.accordion-module_trigger__p5Nek[data-panel-open]>.accordion-module_chevron__yZOb8{transform:rotate(180deg)}@keyframes accordion-module_slide-up__txwke{0%{height:var(--accordion-panel-height);opacity:1;transform:perspective(800px) rotateX(0deg) translateZ(0)}to{height:0;opacity:0;transform:perspective(800px) rotateX(-3deg) translateZ(-10px)}}@keyframes accordion-module_slide-down__0ZzAE{0%{height:0;opacity:0;transform:perspective(800px) rotateX(-3deg) translateZ(-10px)}to{height:var(--accordion-panel-height);opacity:1;transform:perspective(800px) rotateX(0deg) translateZ(0)}}@media (prefers-reduced-motion:reduce){.accordion-module_content__1WTaS:not([data-open]),.accordion-module_content__1WTaS[data-open]{animation:none}}}";
+var styles = {"item":"accordion-module_item__qfZXb","content":"accordion-module_content__1WTaS","trigger":"accordion-module_trigger__p5Nek","chevron":"accordion-module_chevron__yZOb8"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+
+/** Inline type alias — codegen is a devDependency and must not leak into published .d.ts */
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertProps extends ComponentProps<"div"> {
+    icon?: ReactNode;
+    onClose?: () => void;
+    variant?: AlertVariant;
+}
+/** Contextual feedback message with optional icon and close button. */
+declare function Alert({ ref, className, style, variant, icon, onClose, children, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+export { Alert };
+export type { AlertProps, AlertVariant };

package/dist/cjs/components/alert/alert.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var alert = require('../../ecosystem/codegen/generated/alert.js');
+require('../../ecosystem/codegen/generated/alert.css.js');
+var cn = require('../../cn.js');
+var alert_module = require('./alert.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/** Contextual feedback message with optional icon and close button. */
+function Alert({
+  ref,
+  className,
+  style,
+  variant = "info",
+  icon,
+  onClose,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: cn.cn(alert.alert({
+      variant
+    }), alert_module.alert, className),
+    ref: ref,
+    role: "alert",
+    style: style,
+    ...props,
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: alert_module.icon,
+      children: icon
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: alert_module.content,
+      children: children
+    }), onClose && /*#__PURE__*/jsxRuntime.jsx("button", {
+      "aria-label": "Close",
+      className: alert_module.close,
+      onClick: onClose,
+      type: "button",
+      children: "\xD7"
+    })]
+  });
+}
+
+exports.Alert = Alert;

package/dist/cjs/components/alert/alert.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{.alert-module_alert__7Bt6c{align-items:flex-start;background-color:var(--cocso-alert-bg-color);border:1px solid var(--cocso-alert-border-color);border-radius:var(--cocso-alert-border-radius);color:var(--cocso-alert-font-color);display:flex;font-size:var(--cocso-alert-font-size);gap:var(--cocso-spacing-3);padding:var(--cocso-alert-padding)}.alert-module_icon__Ue8Rs{align-items:center;display:inline-flex;flex-shrink:0}.alert-module_content__-bCFU{flex:1;min-width:0}.alert-module_close__6VtOe{align-items:center;background:none;border:none;border-radius:var(--cocso-radius-2);color:currentColor;cursor:pointer;display:inline-flex;flex-shrink:0;height:20px;justify-content:center;opacity:.7;padding:0;width:20px}.alert-module_close__6VtOe:hover{opacity:1}}";
+var styles = {"alert":"alert-module_alert__7Bt6c","icon":"alert-module_icon__Ue8Rs","content":"alert-module_content__-bCFU","close":"alert-module_close__6VtOe"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,18 @@
+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 AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "square";
+interface AvatarProps extends ComponentProps<"div"> {
+    alt?: string;
+    fallback?: string;
+    shape?: AvatarShape;
+    size?: AvatarSize;
+    src?: string;
+}
+/** User or entity visual identifier with image, initials fallback, or icon. */
+declare function Avatar({ ref, className, style, size, shape, src, alt, fallback, children, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+export { Avatar };
+export type { AvatarProps, AvatarShape, AvatarSize };

package/dist/cjs/components/avatar/avatar.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var avatar = require('../../ecosystem/codegen/generated/avatar.js');
+require('../../ecosystem/codegen/generated/avatar.css.js');
+var cn = require('../../cn.js');
+var avatar_module = require('./avatar.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/** User or entity visual identifier with image, initials fallback, or icon. */
+function Avatar({
+  ref,
+  className,
+  style,
+  size = "md",
+  shape = "circle",
+  src,
+  alt,
+  fallback,
+  children,
+  ...props
+}) {
+  const initials = fallback ?? alt?.charAt(0).toUpperCase();
+  function renderContent() {
+    if (src) {
+      // biome-ignore lint/correctness/useImageSize: avatar image is sized by CSS (100% width/height)
+      return /*#__PURE__*/jsxRuntime.jsx("img", {
+        alt: alt ?? "",
+        className: avatar_module.image,
+        src: src
+      });
+    }
+    if (initials) {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: avatar_module.fallback,
+        children: initials
+      });
+    }
+    return children;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: cn.cn(avatar.avatar({
+      size,
+      shape
+    }), avatar_module.avatar, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: renderContent()
+  });
+}
+
+exports.Avatar = Avatar;

package/dist/cjs/components/avatar/avatar.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{.avatar-module_avatar__yPIOs{align-items:center;background-color:var(--cocso-avatar-bg-color);border-radius:var(--cocso-avatar-border-radius);color:var(--cocso-avatar-font-color);display:inline-flex;font-size:var(--cocso-avatar-font-size);font-weight:var(--cocso-avatar-font-weight);height:var(--cocso-avatar-height);justify-content:center;overflow:hidden;width:var(--cocso-avatar-width)}.avatar-module_image__Ngo7A{height:100%;object-fit:cover;width:100%}.avatar-module_fallback__Tf3oZ{align-items:center;display:inline-flex;justify-content:center;line-height:1;-moz-user-select:none;-webkit-user-select:none;user-select:none}}";
+var styles = {"avatar":"avatar-module_avatar__yPIOs","image":"avatar-module_image__Ngo7A","fallback":"avatar-module_fallback__Tf3oZ"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type BadgeSize = "large" | "medium" | "small";
+type BadgeVariant = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "outline";
+type BadgeShape = "square" | "circle" | "rounded";
+interface BadgeProps extends ComponentProps<"div"> {
+    shape?: BadgeShape;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+}
+/** Inline badge/tag component with color and variant options. */
+declare function Badge({ ref, className, children, size, variant, shape, style: _style, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge };
+export type { BadgeProps, BadgeSize };

package/dist/cjs/components/badge/badge.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var badge = require('../../ecosystem/codegen/generated/badge.js');
+require('../../ecosystem/codegen/generated/badge.css.js');
+var cn = require('../../cn.js');
+var badge_module = require('./badge.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../typography/typography.js');
+
+const BADGE_FONT_SIZES = {
+  large: 14,
+  medium: 12,
+  small: 11
+};
+const BADGE_PADDING_Y = {
+  large: "5px",
+  medium: "4px",
+  small: "3px"
+};
+
+/** Inline badge/tag component with color and variant options. */
+function Badge({
+  ref,
+  className,
+  children,
+  size = "medium",
+  variant = "secondary",
+  shape = "square",
+  style: _style,
+  ...props
+}) {
+  const style = {
+    ..._style,
+    "--cocso-badge-padding-y": BADGE_PADDING_Y[size]
+  };
+  const fontSize = BADGE_FONT_SIZES[size];
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: cn.cn(badge.badge({
+      variant,
+      size,
+      shape
+    }), badge_module.badge, shape === "circle" && badge_module.circle, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(typography.Typography, {
+      color: "currentColor",
+      lineHeight: "tight",
+      render: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: badge_module.inner,
+        children: children
+      }),
+      size: fontSize,
+      type: "custom",
+      weight: "medium"
+    })
+  });
+}
+
+exports.Badge = Badge;

package/dist/cjs/components/badge/badge.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{.badge-module_badge__4Tx0D{--cocso-badge-padding:inherit;--cocso-badge-border-radius:inherit;--cocso-badge-bg-color:inherit;--cocso-badge-border:none;background-color:var(--cocso-badge-bg-color);border:var(--cocso-badge-border);border-radius:var(--cocso-badge-border-radius);color:var(--cocso-badge-font-color);display:inline-flex;padding:var(--cocso-badge-padding);-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.badge-module_circle__NP4-2{aspect-ratio:1;justify-content:center;padding:var(--cocso-badge-padding-y)}.badge-module_inner__YYjpI{align-items:center;display:inline-flex;gap:var(--cocso-spacing-2)}}";
+var styles = {"badge":"badge-module_badge__4Tx0D","circle":"badge-module_circle__NP4-2","inner":"badge-module_inner__YYjpI"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type BreadcrumbSize = "sm" | "md" | "lg";
+interface BreadcrumbProps extends ComponentProps<"nav"> {
+    separator?: ReactNode;
+    size?: BreadcrumbSize;
+}
+/** Navigation hierarchy indicator with configurable separator. */
+declare function Breadcrumb({ ref, className, style, size, separator, children, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+export { Breadcrumb };
+export type { BreadcrumbProps, BreadcrumbSize };

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var breadcrumb = require('../../ecosystem/codegen/generated/breadcrumb.js');
+require('../../ecosystem/codegen/generated/breadcrumb.css.js');
+var reactIcons = require('@cocso-ui/react-icons');
+var react = require('react');
+var cn = require('../../cn.js');
+var breadcrumb_module = require('./breadcrumb.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/** Navigation hierarchy indicator with configurable separator. */
+function Breadcrumb({
+  ref,
+  className,
+  style,
+  size = "md",
+  separator = /*#__PURE__*/jsxRuntime.jsx(reactIcons.ChevronRightIcon, {
+    height: "1em",
+    width: "1em"
+  }),
+  children,
+  ...props
+}) {
+  const items = react.Children.toArray(children);
+  return /*#__PURE__*/jsxRuntime.jsx("nav", {
+    "aria-label": "Breadcrumb",
+    className: cn.cn(breadcrumb.breadcrumb({
+      size
+    }), breadcrumb_module.breadcrumb, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx("ol", {
+      className: breadcrumb_module.list,
+      children: items.map((child, index) =>
+      /*#__PURE__*/
+      // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items are ordered children without reordering
+      jsxRuntime.jsxs("li", {
+        className: breadcrumb_module.item,
+        children: [child, index < items.length - 1 && /*#__PURE__*/jsxRuntime.jsx("span", {
+          "aria-hidden": "true",
+          className: breadcrumb_module.separator,
+          children: separator
+        })]
+      }, index))
+    })
+  });
+}
+
+exports.Breadcrumb = Breadcrumb;

package/dist/cjs/components/breadcrumb/breadcrumb.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{.breadcrumb-module_breadcrumb__dW5v-{color:var(--cocso-breadcrumb-font-color);font-size:var(--cocso-breadcrumb-font-size)}.breadcrumb-module_list__mLCBo{align-items:center;display:flex;flex-wrap:wrap;gap:var(--cocso-spacing-2);list-style:none;margin:0;padding:0}.breadcrumb-module_item__G0t2y{align-items:center;display:inline-flex;gap:var(--cocso-spacing-2)}.breadcrumb-module_item__G0t2y:last-child{color:var(--cocso-color-neutral-950);font-weight:500}.breadcrumb-module_separator__wMAks{color:var(--cocso-color-neutral-300);user-select:none}}";
+var styles = {"breadcrumb":"breadcrumb-module_breadcrumb__dW5v-","list":"breadcrumb-module_list__mLCBo","item":"breadcrumb-module_item__G0t2y","separator":"breadcrumb-module_separator__wMAks"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { FontWeight } from '../../token/typography.js';
+import { SpinnerVariant } from '../spinner/spinner.js';
+
+type ButtonSize = "large" | "medium" | "small" | "x-small";
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "success" | "error" | "warning" | "info";
+type ButtonShape = "square" | "circle" | "rounded";
+interface ButtonProps extends Omit<ComponentProps<"button">, "prefix"> {
+    disabled?: boolean;
+    loading?: boolean;
+    prefix?: ReactNode;
+    render?: useRender.RenderProp;
+    shape?: ButtonShape;
+    size?: ButtonSize;
+    spinnerVariant?: SpinnerVariant;
+    suffix?: ReactNode;
+    svgOnly?: boolean;
+    variant?: ButtonVariant;
+    weight?: FontWeight;
+}
+/** Polymorphic button component with variant, color, and size options. */
+declare function Button({ render: renderProp, ref, className, style: _style, children, size, variant, weight, shape, prefix, suffix, svgOnly, disabled, loading, spinnerVariant, ...props }: ButtonProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+export { Button };
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant };

package/dist/cjs/components/button/button.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var button = require('../../ecosystem/codegen/generated/button.js');
+require('../../ecosystem/codegen/generated/button.css.js');
+var cn = require('../../cn.js');
+var button_module = require('./button.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../../token/typography.js');
+var spinner = require('../spinner/spinner.js');
+var useRender = require('@base-ui/react/use-render');
+var mergeProps = require('@base-ui/react/merge-props');
+
+function getButtonSpinnerVariant(variant) {
+  return ["primary", "success", "error", "info"].includes(variant) ? "white" : "secondary";
+}
+
+/** Polymorphic button component with variant, color, and size options. */
+function Button({
+  render: renderProp,
+  ref,
+  className,
+  style: _style,
+  children,
+  size = "medium",
+  variant = "primary",
+  weight = "medium",
+  shape = "square",
+  prefix,
+  suffix,
+  svgOnly = false,
+  disabled = false,
+  loading = false,
+  spinnerVariant,
+  ...props
+}) {
+  const style = {
+    ..._style,
+    "--cocso-button-font-weight": typography.fontWeight[weight]
+  };
+  const isDisabled = disabled || loading;
+  const mergedClassName = cn.cn(button.button({
+    variant,
+    size,
+    shape
+  }), button_module.button, svgOnly && button_module.svgOnly, className);
+  const renderButtonContent = ctx => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [loading && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: button_module.spinnerOverlay,
+      children: /*#__PURE__*/jsxRuntime.jsx(spinner.Spinner, {
+        size: "medium",
+        variant: spinnerVariant ?? getButtonSpinnerVariant(variant)
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: cn.cn(button_module.buttonInner, loading && button_module.invisible),
+      children: [prefix && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: button_module.prefix,
+        children: prefix
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: button_module.content,
+        children: ctx
+      }), suffix && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: button_module.suffix,
+        children: suffix
+      })]
+    })]
+  });
+  return useRender.useRender({
+    render: renderProp,
+    ref,
+    props: mergeProps.mergeProps({
+      className: mergedClassName,
+      style,
+      disabled: isDisabled,
+      "aria-busy": loading || undefined,
+      type: "button"
+    }, props, {
+      children: renderButtonContent(children)
+    }),
+    defaultTagName: "button"
+  });
+}
+
+exports.Button = Button;

package/dist/cjs/components/button/button.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{.button-module_button__5dzDN{--cocso-button-height:inherit;--cocso-button-padding-inline:inherit;--cocso-button-content-padding:inherit;--cocso-button-font-color:inherit;--cocso-button-font-size:inherit;--cocso-button-font-weight:inherit;--cocso-button-border:inherit;--cocso-button-border-radius:inherit;--cocso-button-bg-color:inherit;align-items:center;background-color:var(--cocso-button-bg-color);border:var(--cocso-button-border,none);border-radius:var(--cocso-button-border-radius);color:var(--cocso-button-font-color);cursor:pointer;display:inline-flex;font-size:var(--cocso-button-font-size);font-weight:var(--cocso-button-font-weight);height:var(--cocso-button-height);justify-content:center;opacity:1;padding-inline:var(--cocso-button-padding-inline);position:relative;transition:background-color var(--cocso-duration-fast) var(--cocso-easing-default)}@media (hover:hover) and (pointer:fine){.button-module_button__5dzDN:not([disabled]):hover{--cocso-button-bg-color-hover:inherit;background-color:var(--cocso-button-bg-color-hover)}}.button-module_button__5dzDN:not([disabled]):active{--cocso-button-bg-color-active:inherit;background-color:var(--cocso-button-bg-color-active)}.button-module_content__q0g4H{padding:var(--cocso-button-content-padding)}.button-module_prefix__836bE{margin-right:var(--cocso-spacing-2)}.button-module_prefix__836bE,.button-module_suffix__6k1TK{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.button-module_suffix__6k1TK{margin-left:var(--cocso-spacing-2)}.button-module_button__5dzDN:focus-visible{outline:2px solid var(--cocso-color-primary-950);outline-offset:2px}.button-module_button__5dzDN[disabled]{cursor:not-allowed;opacity:.4}.button-module_svgOnly__QHNx6{aspect-ratio:1/1;padding:0}.button-module_spinnerOverlay__kbemq{inset:0;position:absolute}.button-module_buttonInner__aXpaa,.button-module_spinnerOverlay__kbemq{align-items:center;display:inline-flex;justify-content:center}.button-module_invisible__esdRe{opacity:0}}";
+var styles = {"button":"button-module_button__5dzDN","content":"button-module_content__q0g4H","prefix":"button-module_prefix__836bE","suffix":"button-module_suffix__6k1TK","svgOnly":"button-module_svgOnly__QHNx6","spinnerOverlay":"button-module_spinnerOverlay__kbemq","buttonInner":"button-module_buttonInner__aXpaa","invisible":"button-module_invisible__esdRe"};
+styleInject_es(css_248z);
+
+module.exports = styles;

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type CardVariant = "elevated" | "outlined" | "filled";
+type CardPadding = "sm" | "md" | "lg";
+interface CardProps extends ComponentProps<"div"> {
+    padding?: CardPadding;
+    variant?: CardVariant;
+}
+declare function Card({ ref, className, style, variant, padding, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+export { Card };
+export type { CardPadding, CardProps, CardVariant };

package/dist/cjs/components/card/card.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var card = require('../../ecosystem/codegen/generated/card.js');
+require('../../ecosystem/codegen/generated/card.css.js');
+var cn = require('../../cn.js');
+var card_module = require('./card.module.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Card({
+  ref,
+  className,
+  style,
+  variant = "elevated",
+  padding = "md",
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: cn.cn(card.card({
+      variant,
+      padding
+    }), card_module.card, variant === "elevated" && card_module.elevated, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: children
+  });
+}
+
+exports.Card = Card;

package/dist/cjs/components/card/card.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{.card-module_card__ZPFTz{background-color:var(--cocso-card-bg-color);border:var(--cocso-card-border,none);border-radius:var(--cocso-card-border-radius);display:flex;flex-direction:column;padding:var(--cocso-card-padding)}.card-module_elevated__Gua8s{box-shadow:var(--cocso-shadow-card)}}";
+var styles = {"card":"card-module_card__ZPFTz","elevated":"card-module_elevated__Gua8s"};
+styleInject_es(css_248z);
+
+module.exports = styles;