@cocso-ui/react 0.2.21 → 1.0.1

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

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

package/dist/cjs/token/spacing.js

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

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

@@ -1,3 +1,4 @@
+/** Font size scale from 10 to 60. */
 declare const fontSize: {
     readonly 10: 10;
     readonly 11: 11;
@@ -16,11 +17,23 @@ declare const fontSize: {
     readonly 60: 60;
 };
 type FontSize = keyof typeof fontSize;
+/**
+ * A font size that can optionally vary across breakpoints.
+ *
+ * Accepted forms:
+ * - A single {@link FontSize} applied at all breakpoints.
+ * - A tuple `[base, tablet?, desktop?]` for ordered breakpoint overrides.
+ * - An object `{ base, tablet?, desktop? }` for named breakpoint overrides.
+ */
 type ResponsiveFontSize = FontSize | [FontSize, FontSize?, FontSize?] | {
     base: FontSize;
     tablet?: FontSize;
     desktop?: FontSize;
 };
+/**
+ * Font weights as defined in the CSS specification.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+ */
 declare const fontWeight: {
     readonly thin: 100;
     readonly extralight: 200;
@@ -33,6 +46,10 @@ declare const fontWeight: {
     readonly black: 900;
 };
 type FontWeight = keyof typeof fontWeight;
+/**
+ * Line heights as defined in the tailwindcss documentation.
+ * @see https://v3.tailwindcss.com/docs/line-height
+ */
 declare const lineHeight: {
     readonly none: 1;
     readonly tight: 1.25;

package/dist/cjs/token/typography.js

@@ -1,5 +1,6 @@
 'use strict';
 
+/** Font size scale from 10 to 60. */
 const fontSize = {
   10: 10,
   11: 11,
@@ -17,9 +18,19 @@ const fontSize = {
   44: 44,
   60: 60
 };
-/*
-  Font weights as defined in the CSS specification.
-  @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+
+/**
+ * A font size that can optionally vary across breakpoints.
+ *
+ * Accepted forms:
+ * - A single {@link FontSize} applied at all breakpoints.
+ * - A tuple `[base, tablet?, desktop?]` for ordered breakpoint overrides.
+ * - An object `{ base, tablet?, desktop? }` for named breakpoint overrides.
+ */
+
+/**
+ * Font weights as defined in the CSS specification.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
  */
 const fontWeight = {
   thin: 100,
@@ -32,9 +43,9 @@ const fontWeight = {
   extrabold: 800,
   black: 900
 };
-/*
-  Line heights as defined in the tailwindcss documentation.
-  @see https://v3.tailwindcss.com/docs/line-height
+/**
+ * Line heights as defined in the tailwindcss documentation.
+ * @see https://v3.tailwindcss.com/docs/line-height
  */
 const lineHeight = {
   none: 1,

package/dist/esm/cn.d.mts

@@ -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/esm/cn.mjs

@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import { twMerge } from '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 twMerge(clsx(inputs));
+}
+
+export { cn };

package/dist/esm/components/accordion/accordion.d.mts

@@ -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/esm/components/accordion/accordion.mjs

@@ -0,0 +1,52 @@
+import { KeyboardArrowDownIcon } from '@cocso-ui/react-icons';
+import { cn } from '../../cn.mjs';
+import styles from './accordion.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Accordion$1.Item, {
+    className: cn(styles.item, className),
+    ...props
+  });
+}
+function AccordionTrigger({
+  className,
+  children,
+  chevron = true,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(Accordion$1.Trigger, {
+    className: cn(styles.trigger, className),
+    ...props,
+    children: [children, chevron && /*#__PURE__*/jsx(KeyboardArrowDownIcon, {
+      className: styles.chevron
+    })]
+  });
+}
+function AccordionPanel({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Accordion$1.Panel, {
+    className: cn(styles.content, className),
+    ...props
+  });
+}
+
+/**
+ * Collapsible content sections. Compose with `Accordion.Item`, `Accordion.Header`,
+ * `Accordion.Trigger`, and `Accordion.Content`.
+ */
+const Accordion = Object.assign(Accordion$1.Root, {
+  Item: AccordionItem,
+  Header: Accordion$1.Header,
+  Trigger: AccordionTrigger,
+  Content: AccordionPanel
+});
+Accordion.displayName = "Accordion";
+
+export { Accordion };

package/dist/esm/components/accordion/accordion.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"item":"accordion-module_item__qfZXb","content":"accordion-module_content__1WTaS","trigger":"accordion-module_trigger__p5Nek","chevron":"accordion-module_chevron__yZOb8"};
+
+export { styles as default };

package/dist/esm/components/alert/alert.d.mts

@@ -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/esm/components/alert/alert.mjs

@@ -0,0 +1,41 @@
+import { alert } from '../../ecosystem/codegen/generated/alert.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './alert.module.css.mjs';
+import { jsxs, jsx } from '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__*/jsxs("div", {
+    className: cn(alert({
+      variant
+    }), styles.alert, className),
+    ref: ref,
+    role: "alert",
+    style: style,
+    ...props,
+    children: [icon && /*#__PURE__*/jsx("span", {
+      className: styles.icon,
+      children: icon
+    }), /*#__PURE__*/jsx("div", {
+      className: styles.content,
+      children: children
+    }), onClose && /*#__PURE__*/jsx("button", {
+      "aria-label": "Close",
+      className: styles.close,
+      onClick: onClose,
+      type: "button",
+      children: "\xD7"
+    })]
+  });
+}
+
+export { Alert };

package/dist/esm/components/alert/alert.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"alert":"alert-module_alert__7Bt6c","icon":"alert-module_icon__Ue8Rs","content":"alert-module_content__-bCFU","close":"alert-module_close__6VtOe"};
+
+export { styles as default };

package/dist/esm/components/avatar/avatar.d.mts

@@ -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/esm/components/avatar/avatar.mjs

@@ -0,0 +1,49 @@
+import { avatar } from '../../ecosystem/codegen/generated/avatar.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './avatar.module.css.mjs';
+import { jsx } from '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__*/jsx("img", {
+        alt: alt ?? "",
+        className: styles.image,
+        src: src
+      });
+    }
+    if (initials) {
+      return /*#__PURE__*/jsx("span", {
+        className: styles.fallback,
+        children: initials
+      });
+    }
+    return children;
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: cn(avatar({
+      size,
+      shape
+    }), styles.avatar, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: renderContent()
+  });
+}
+
+export { Avatar };

package/dist/esm/components/avatar/avatar.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"avatar":"avatar-module_avatar__yPIOs","image":"avatar-module_image__Ngo7A","fallback":"avatar-module_fallback__Tf3oZ"};
+
+export { styles as default };

package/dist/esm/components/badge/badge.d.mts

@@ -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/esm/components/badge/badge.mjs

@@ -0,0 +1,57 @@
+import { badge } from '../../ecosystem/codegen/generated/badge.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './badge.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../typography/typography.mjs';
+
+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__*/jsx("div", {
+    className: cn(badge({
+      variant,
+      size,
+      shape
+    }), styles.badge, shape === "circle" && styles.circle, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: /*#__PURE__*/jsx(Typography, {
+      color: "currentColor",
+      lineHeight: "tight",
+      render: /*#__PURE__*/jsx("span", {
+        className: styles.inner,
+        children: children
+      }),
+      size: fontSize,
+      type: "custom",
+      weight: "medium"
+    })
+  });
+}
+
+export { Badge };

package/dist/esm/components/badge/badge.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"badge":"badge-module_badge__4Tx0D","circle":"badge-module_circle__NP4-2","inner":"badge-module_inner__YYjpI"};
+
+export { styles as default };

package/dist/esm/components/breadcrumb/breadcrumb.d.mts

@@ -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/esm/components/breadcrumb/breadcrumb.mjs

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

package/dist/esm/components/breadcrumb/breadcrumb.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"breadcrumb":"breadcrumb-module_breadcrumb__dW5v-","list":"breadcrumb-module_list__mLCBo","item":"breadcrumb-module_item__G0t2y","separator":"breadcrumb-module_separator__wMAks"};
+
+export { styles as default };

package/dist/esm/components/button/button.d.mts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { RenderProp } from '../../primitives/use-render.mjs';
+import { FontWeight } from '../../token/typography.mjs';
+import { SpinnerVariant } from '../spinner/spinner.mjs';
+
+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?: 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 };