@usefragments/ui 1.0.0

package/dist/components/Card/index.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+/**
+ * Card container for grouping related content.
+ * @see https://usefragments.com/components/card
+ */
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+    children: React.ReactNode;
+    /** Visual style variant. `"outline"` is an alias for `"outlined"`.
+     *
+     * - `default` / `outlined` / `elevated`: general-purpose cards.
+     * - `stat`: compact metric tile for dashboard grids — hairline border,
+     *   panel-subtle surface, tight radius, zero shadow.
+     * - `panel`: hairline-bordered panel with zero own padding, designed for
+     *   compound use with `Card.Header divided` + `Card.Body` so each region
+     *   manages its own spacing.
+     * @default "default"
+     * @see https://usefragments.com/components/card#variants */
+    variant?: "default" | "outlined" | "outline" | "elevated" | "stat" | "panel";
+    /** Inner padding.
+     * @default "md" */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Root element tag.
+     * @default "article" */
+    as?: "article" | "div" | "section";
+}
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Renders the header as a divided bar: fixed height, horizontal padding,
+     * hairline bottom border, no trailing margin. Used with `variant="panel"`
+     * for dashboard-style panel headers. */
+    divided?: boolean;
+}
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+}
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+}
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Inner padding for body-only spacing, useful with `variant="panel"`.
+     * Omit when the card root already owns padding. */
+    padding?: "none" | "sm" | "md" | "lg";
+}
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare function CardRoot({ children, variant: variantProp, padding, as: Component, className, style, ...htmlProps }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ children, divided, className, ...htmlProps }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ children, className, ...htmlProps }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ children, className, ...htmlProps }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function CardBody({ children, padding, className, ...htmlProps }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ children, className, ...htmlProps }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+export { CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;gEAS4D;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7E;uBACmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;4BACwB;IACxB,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;4CAEwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uDACmD;IACnD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwCD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EAAE,WAAuB,EAChC,OAAc,EACd,EAAE,EAAE,SAAqB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CA6DX;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CASlF;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,2CAOvE;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,2CAOnF;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAS9E;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAOzE;AAMD,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Card/index.js

@@ -0,0 +1,106 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Card.module.scss.js";
+const CardContext = React.createContext(null);
+const paddingMap = {
+  none: styles.paddingNone,
+  sm: styles.paddingSm,
+  md: styles.paddingMd,
+  lg: styles.paddingLg
+};
+function composeEventHandlers(userHandler, internalHandler) {
+  return (event) => {
+    userHandler == null ? void 0 : userHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+function CardRoot({
+  children,
+  variant: variantProp = "default",
+  padding = "md",
+  as: Component = "article",
+  className,
+  style,
+  ...htmlProps
+}) {
+  const variant = variantProp === "outline" ? "outlined" : variantProp;
+  const { onKeyDown, onKeyUp, role, tabIndex, ...elementProps } = htmlProps;
+  const isInteractive = typeof elementProps.onClick === "function";
+  const resolvedRole = isInteractive ? role ?? "button" : role;
+  const resolvedTabIndex = isInteractive ? tabIndex ?? 0 : tabIndex;
+  const classes = [
+    styles.card,
+    styles[variant],
+    paddingMap[padding],
+    isInteractive && styles.interactive,
+    className
+  ].filter(Boolean).join(" ");
+  const contextValue = {
+    variant,
+    padding,
+    isInteractive
+  };
+  return /* @__PURE__ */ jsx(CardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...elementProps,
+      role: resolvedRole,
+      tabIndex: resolvedTabIndex,
+      onKeyDown: isInteractive && resolvedRole === "button" ? composeEventHandlers(onKeyDown, (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.click();
+        }
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+      }) : onKeyDown,
+      onKeyUp: isInteractive && resolvedRole === "button" ? composeEventHandlers(onKeyUp, (event) => {
+        if (event.key === " ") {
+          event.preventDefault();
+          event.currentTarget.click();
+        }
+      }) : onKeyUp,
+      className: classes,
+      style,
+      children
+    }
+  ) });
+}
+function CardHeader({ children, divided, className, ...htmlProps }) {
+  const classes = [styles.header, divided && styles.headerDivided, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function CardTitle({ children, className, ...htmlProps }) {
+  const classes = [styles.title, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("h3", { ...htmlProps, className: classes, children });
+}
+function CardDescription({ children, className, ...htmlProps }) {
+  const classes = [styles.description, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("p", { ...htmlProps, className: classes, children });
+}
+function CardBody({ children, padding, className, ...htmlProps }) {
+  const classes = [styles.body, padding && paddingMap[padding], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+function CardFooter({ children, className, ...htmlProps }) {
+  const classes = [styles.footer, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
+}
+const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Body: CardBody,
+  Footer: CardFooter
+});
+export {
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardRoot,
+  CardTitle
+};

package/dist/components/Chart/Chart.module.scss.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const container = "_container_1fj9x_1";
+const srOnly = "_srOnly_1fj9x_24";
+const tooltip = "_tooltip_1fj9x_36";
+const tooltipLabel = "_tooltipLabel_1fj9x_45";
+const tooltipItems = "_tooltipItems_1fj9x_52";
+const tooltipItem = "_tooltipItem_1fj9x_52";
+const tooltipIndicator = "_tooltipIndicator_1fj9x_66";
+const tooltipIndicatorLine = "_tooltipIndicatorLine_1fj9x_72";
+const tooltipIndicatorDashed = "_tooltipIndicatorDashed_1fj9x_77";
+const tooltipItemLabel = "_tooltipItemLabel_1fj9x_84";
+const tooltipItemValue = "_tooltipItemValue_1fj9x_89";
+const legend = "_legend_1fj9x_97";
+const legendItem = "_legendItem_1fj9x_106";
+const legendDot = "_legendDot_1fj9x_112";
+const legendLabel = "_legendLabel_1fj9x_119";
+const styles = {
+  container,
+  srOnly,
+  tooltip,
+  tooltipLabel,
+  tooltipItems,
+  tooltipItem,
+  tooltipIndicator,
+  tooltipIndicatorLine,
+  tooltipIndicatorDashed,
+  tooltipItemLabel,
+  tooltipItemValue,
+  legend,
+  legendItem,
+  legendDot,
+  legendLabel
+};
+exports.container = container;
+exports.default = styles;
+exports.legend = legend;
+exports.legendDot = legendDot;
+exports.legendItem = legendItem;
+exports.legendLabel = legendLabel;
+exports.srOnly = srOnly;
+exports.tooltip = tooltip;
+exports.tooltipIndicator = tooltipIndicator;
+exports.tooltipIndicatorDashed = tooltipIndicatorDashed;
+exports.tooltipIndicatorLine = tooltipIndicatorLine;
+exports.tooltipItem = tooltipItem;
+exports.tooltipItemLabel = tooltipItemLabel;
+exports.tooltipItemValue = tooltipItemValue;
+exports.tooltipItems = tooltipItems;
+exports.tooltipLabel = tooltipLabel;

package/dist/components/Chart/Chart.module.scss.js

@@ -0,0 +1,50 @@
+const container = "_container_1fj9x_1";
+const srOnly = "_srOnly_1fj9x_24";
+const tooltip = "_tooltip_1fj9x_36";
+const tooltipLabel = "_tooltipLabel_1fj9x_45";
+const tooltipItems = "_tooltipItems_1fj9x_52";
+const tooltipItem = "_tooltipItem_1fj9x_52";
+const tooltipIndicator = "_tooltipIndicator_1fj9x_66";
+const tooltipIndicatorLine = "_tooltipIndicatorLine_1fj9x_72";
+const tooltipIndicatorDashed = "_tooltipIndicatorDashed_1fj9x_77";
+const tooltipItemLabel = "_tooltipItemLabel_1fj9x_84";
+const tooltipItemValue = "_tooltipItemValue_1fj9x_89";
+const legend = "_legend_1fj9x_97";
+const legendItem = "_legendItem_1fj9x_106";
+const legendDot = "_legendDot_1fj9x_112";
+const legendLabel = "_legendLabel_1fj9x_119";
+const styles = {
+  container,
+  srOnly,
+  tooltip,
+  tooltipLabel,
+  tooltipItems,
+  tooltipItem,
+  tooltipIndicator,
+  tooltipIndicatorLine,
+  tooltipIndicatorDashed,
+  tooltipItemLabel,
+  tooltipItemValue,
+  legend,
+  legendItem,
+  legendDot,
+  legendLabel
+};
+export {
+  container,
+  styles as default,
+  legend,
+  legendDot,
+  legendItem,
+  legendLabel,
+  srOnly,
+  tooltip,
+  tooltipIndicator,
+  tooltipIndicatorDashed,
+  tooltipIndicatorLine,
+  tooltipItem,
+  tooltipItemLabel,
+  tooltipItemValue,
+  tooltipItems,
+  tooltipLabel
+};

package/dist/components/Chart/index.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+export type ChartConfig = Record<string, {
+    label: string;
+    color: string;
+    icon?: React.ComponentType<Record<string, unknown>>;
+}>;
+export interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    config: ChartConfig;
+    children: React.ReactElement;
+    /** Non-visual summary announced to assistive technology users */
+    summary?: string;
+    /** Optional accessible data table or textual fallback */
+    dataTable?: React.ReactNode;
+}
+export interface ChartTooltipContentProps {
+    active?: boolean;
+    payload?: readonly {
+        name?: string;
+        value?: number | string;
+        dataKey?: string | number;
+        color?: string;
+        payload?: Record<string, unknown>;
+    }[];
+    label?: string;
+    indicator?: 'dot' | 'line' | 'dashed';
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    labelFormatter?: (label: string, payload: ChartTooltipContentProps['payload']) => React.ReactNode;
+    valueFormatter?: (value: number | string) => string;
+}
+export interface ChartLegendContentProps {
+    payload?: readonly {
+        value?: string;
+        dataKey?: string | number;
+        color?: string;
+    }[];
+}
+type RechartsLegendProps = Record<string, unknown>;
+export declare function useChartConfig(): ChartConfig;
+export declare function ChartContainer({ config, children, className, style, summary, dataTable, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...htmlProps }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, hideIndicator, labelFormatter, valueFormatter, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+type ChartTooltipProps = {
+    indicator?: 'dot' | 'line' | 'dashed';
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    labelFormatter?: ChartTooltipContentProps['labelFormatter'];
+    valueFormatter?: ChartTooltipContentProps['valueFormatter'];
+    content?: React.ReactNode | ((tooltipProps: Record<string, unknown>) => React.ReactNode);
+    [key: string]: unknown;
+};
+export declare function ChartTooltip({ indicator, hideLabel, hideIndicator, labelFormatter, valueFormatter, content, ...props }: ChartTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChartLegendContent({ payload }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+type ChartLegendProps = RechartsLegendProps & {
+    content?: React.ReactNode | ((legendProps: Record<string, unknown>) => React.ReactNode);
+};
+export declare function ChartLegend({ content, ...props }: ChartLegendProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Chart: typeof ChartContainer & {
+    Root: typeof ChartContainer;
+    Tooltip: typeof ChartTooltip;
+    TooltipContent: typeof ChartTooltipContent;
+    Legend: typeof ChartLegend;
+    LegendContent: typeof ChartLegendContent;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Checkbox/Checkbox.module.scss.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const wrapper = "_wrapper_4kyjp_1";
+const checkbox = "_checkbox_4kyjp_16";
+const sm = "_sm_4kyjp_72";
+const lg = "_lg_4kyjp_78";
+const indicator = "_indicator_4kyjp_83";
+const content = "_content_4kyjp_116";
+const label = "_label_4kyjp_122";
+const labelSm = "_labelSm_4kyjp_130";
+const labelLg = "_labelLg_4kyjp_134";
+const helper = "_helper_4kyjp_138";
+const wrapperCard = "_wrapperCard_4kyjp_144";
+const styles = {
+  wrapper,
+  checkbox,
+  sm,
+  lg,
+  indicator,
+  content,
+  label,
+  labelSm,
+  labelLg,
+  helper,
+  wrapperCard
+};
+exports.checkbox = checkbox;
+exports.content = content;
+exports.default = styles;
+exports.helper = helper;
+exports.indicator = indicator;
+exports.label = label;
+exports.labelLg = labelLg;
+exports.labelSm = labelSm;
+exports.lg = lg;
+exports.sm = sm;
+exports.wrapper = wrapper;
+exports.wrapperCard = wrapperCard;

package/dist/components/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,38 @@
+const wrapper = "_wrapper_4kyjp_1";
+const checkbox = "_checkbox_4kyjp_16";
+const sm = "_sm_4kyjp_72";
+const lg = "_lg_4kyjp_78";
+const indicator = "_indicator_4kyjp_83";
+const content = "_content_4kyjp_116";
+const label = "_label_4kyjp_122";
+const labelSm = "_labelSm_4kyjp_130";
+const labelLg = "_labelLg_4kyjp_134";
+const helper = "_helper_4kyjp_138";
+const wrapperCard = "_wrapperCard_4kyjp_144";
+const styles = {
+  wrapper,
+  checkbox,
+  sm,
+  lg,
+  indicator,
+  content,
+  label,
+  labelSm,
+  labelLg,
+  helper,
+  wrapperCard
+};
+export {
+  checkbox,
+  content,
+  styles as default,
+  helper,
+  indicator,
+  label,
+  labelLg,
+  labelSm,
+  lg,
+  sm,
+  wrapper,
+  wrapperCard
+};

package/dist/components/Checkbox/index.cjs

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const checkbox = require("@base-ui/react/checkbox");
+const index = require("../ComponentDefaults/index.cjs");
+const aria = require("../../utils/aria.cjs");
+const Checkbox_module = require("./Checkbox.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function MinusIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    }
+  );
+}
+const CheckboxRoot = React__namespace.forwardRef(function Checkbox2({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  onChange,
+  indeterminate = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  size: sizeProp,
+  variant = "default",
+  label,
+  helperText,
+  description,
+  name,
+  form,
+  value,
+  uncheckedValue,
+  inputRef,
+  parent,
+  className,
+  controlClassName,
+  contentClassName,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}, ref) {
+  const size = index.useResolvedControlSize(sizeProp);
+  const resolvedHelperText = helperText ?? description;
+  const generatedId = React__namespace.useId();
+  const checkboxId = id ?? `checkbox-${generatedId}`;
+  const labelId = label ? `${checkboxId}-label` : void 0;
+  const descriptionId = resolvedHelperText ? `${checkboxId}-description` : void 0;
+  const checkboxClasses = [
+    Checkbox_module.default.checkbox,
+    size === "sm" && Checkbox_module.default.sm,
+    size === "lg" && Checkbox_module.default.lg,
+    controlClassName
+  ].filter(Boolean).join(" ");
+  const labelClasses = [
+    Checkbox_module.default.label,
+    size === "sm" && Checkbox_module.default.labelSm,
+    size === "lg" && Checkbox_module.default.labelLg
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [Checkbox_module.default.wrapper, variant === "card" && Checkbox_module.default.wrapperCard, className].filter(Boolean).join(" ");
+  const handleCheckedChange = onChange ?? onCheckedChange;
+  if (!label && !resolvedHelperText) {
+    const iconOnlyHtmlProps = htmlProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      checkbox.Checkbox.Root,
+      {
+        ...iconOnlyHtmlProps,
+        ref,
+        checked,
+        defaultChecked,
+        onCheckedChange: handleCheckedChange,
+        indeterminate,
+        disabled,
+        readOnly,
+        required,
+        name,
+        form,
+        value,
+        uncheckedValue,
+        inputRef,
+        parent,
+        id: checkboxId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        className: [checkboxClasses, className].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: Checkbox_module.default.indicator, keepMounted: true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      ...htmlProps,
+      className: wrapperClasses,
+      "data-disabled": disabled || void 0,
+      "data-has-description": resolvedHelperText ? true : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          checkbox.Checkbox.Root,
+          {
+            ref,
+            checked,
+            defaultChecked,
+            onCheckedChange: handleCheckedChange,
+            indeterminate,
+            disabled,
+            readOnly,
+            required,
+            name,
+            form,
+            value,
+            uncheckedValue,
+            inputRef,
+            parent,
+            id: checkboxId,
+            "aria-label": ariaLabel,
+            "aria-labelledby": aria.mergeAriaIds(ariaLabelledBy, labelId),
+            "aria-describedby": aria.mergeAriaIds(ariaDescribedBy, descriptionId),
+            className: checkboxClasses,
+            children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: Checkbox_module.default.indicator, keepMounted: true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [Checkbox_module.default.content, contentClassName].filter(Boolean).join(" "), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: labelClasses, children: label }),
+          resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: Checkbox_module.default.helper, children: resolvedHelperText })
+        ] })
+      ]
+    }
+  );
+});
+const Checkbox = Object.assign(CheckboxRoot, {
+  Root: CheckboxRoot
+});
+exports.Checkbox = Checkbox;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+/**
+ * Checkbox for boolean or indeterminate selections in forms.
+ * @see https://usefragments.com/components/checkbox
+ */
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLLabelElement>, "onChange" | "defaultChecked"> {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback when checked state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Alias for onCheckedChange */
+    onChange?: (checked: boolean) => void;
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the checkbox cannot be changed by the user */
+    readOnly?: boolean;
+    /** Whether the checkbox is required */
+    required?: boolean;
+    /** Size variant.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Visual variant.
+     * - `default`: inline checkbox next to a label (form-control style).
+     * - `card`: full-width clickable card with the checkbox tucked inside.
+     *   Useful for multi-select question lists, settings toggles, etc.
+     * @default "default"
+     */
+    variant?: "default" | "card";
+    /** Label text */
+    label?: string;
+    /** Helper text shown below the label */
+    helperText?: string;
+    /** @deprecated Use helperText instead. Description text below the label. */
+    description?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** ID of the form that owns the hidden input */
+    form?: string;
+    /** Value attribute for form submission */
+    value?: string;
+    /** Value submitted when unchecked */
+    uncheckedValue?: string;
+    /** Ref to the hidden input element */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Whether this checkbox controls child checkboxes in a checkbox group */
+    parent?: boolean;
+    /** ID for the checkbox input */
+    id?: string;
+    /** Class applied directly to the checkbox control element */
+    controlClassName?: string;
+    /** Class applied to the label/description content wrapper */
+    contentClassName?: string;
+    /** Accessible label for icon-only mode */
+    "aria-label"?: string;
+    /** Accessible labelled-by relationship for icon-only mode */
+    "aria-labelledby"?: string;
+    /** Accessible described-by relationship */
+    "aria-describedby"?: string;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>> & {
+    Root: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,UAAU,GAAG,gBAAgB,CAC9B;IACC,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAwLD,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}