@cocso-ui/react 0.2.21 → 1.0.0

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 { useRender } from '@base-ui/react/use-render';
+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?: 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/esm/components/button/button.mjs

@@ -0,0 +1,80 @@
+import { button } from '../../ecosystem/codegen/generated/button.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './button.module.css.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { fontWeight } from '../../token/typography.mjs';
+import { Spinner } from '../spinner/spinner.mjs';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@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": fontWeight[weight]
+  };
+  const isDisabled = disabled || loading;
+  const mergedClassName = cn(button({
+    variant,
+    size,
+    shape
+  }), styles.button, svgOnly && styles.svgOnly, className);
+  const renderButtonContent = ctx => /*#__PURE__*/jsxs(Fragment, {
+    children: [loading && /*#__PURE__*/jsx("span", {
+      className: styles.spinnerOverlay,
+      children: /*#__PURE__*/jsx(Spinner, {
+        size: "medium",
+        variant: spinnerVariant ?? getButtonSpinnerVariant(variant)
+      })
+    }), /*#__PURE__*/jsxs("span", {
+      className: cn(styles.buttonInner, loading && styles.invisible),
+      children: [prefix && /*#__PURE__*/jsx("span", {
+        className: styles.prefix,
+        children: prefix
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.content,
+        children: ctx
+      }), suffix && /*#__PURE__*/jsx("span", {
+        className: styles.suffix,
+        children: suffix
+      })]
+    })]
+  });
+  return useRender({
+    render: renderProp,
+    ref,
+    props: mergeProps({
+      className: mergedClassName,
+      style,
+      disabled: isDisabled,
+      "aria-busy": loading || undefined,
+      type: "button"
+    }, props, {
+      children: renderButtonContent(children)
+    }),
+    defaultTagName: "button"
+  });
+}
+
+export { Button };

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

@@ -0,0 +1,3 @@
+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"};
+
+export { styles as default };

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

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

@@ -0,0 +1,27 @@
+import { card } from '../../ecosystem/codegen/generated/card.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './card.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function Card({
+  ref,
+  className,
+  style,
+  variant = "elevated",
+  padding = "md",
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: cn(card({
+      variant,
+      padding
+    }), styles.card, variant === "elevated" && styles.elevated, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: children
+  });
+}
+
+export { Card };

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

@@ -0,0 +1,3 @@
+var styles = {"card":"card-module_card__ZPFTz","elevated":"card-module_elevated__Gua8s"};
+
+export { styles as default };

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

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+type CheckboxSize = "large" | "medium" | "small";
+type CheckboxStatus = "on" | "off" | "intermediate";
+interface CheckboxProps extends Omit<ComponentProps<typeof Checkbox$1.Root>, "checked" | "onCheckedChange" | "onChange" | "indeterminate" | "defaultChecked"> {
+    defaultStatus?: CheckboxStatus;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    onChange?: (status: "on" | "off") => void;
+    size?: CheckboxSize;
+    status?: CheckboxStatus;
+}
+/** Check/uncheck toggle with support for an indeterminate state. */
+declare function Checkbox({ ref, id: _id, className, style: _style, size, status: statusProp, defaultStatus, onChange, label, disabled, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize, CheckboxStatus };