@brijbyte/agentic-ui 0.0.2 → 0.0.4

package/dist/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;KAKY,aAAA;AAAA,KACA,UAAA;AAAA,KACA,UAAA;AAAA,UAEK,WAAA,SAAoB,wBAAA;EACnC,OAAA,GAAU,aAAA;;EAEV,IAAA,GAAO,UAAA;EACP,IAAA,GAAO,UAAA;EACP,OAAA;EARoB;;;;AACtB;EAaE,WAAA;EACA,QAAA;EACA,MAAA,GAAS,YAAA;EACT,YAAA;AAAA;AAAA,cAGW,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/button/button.tsx"],"mappings":";;;;;KAKY,aAAA;AAAA,KACA,UAAA;AAAA,KACA,UAAA;AAAA,UAEK,WAAA,SAAoB,wBAAA;EAJZ;EAMvB,OAAA,GAAU,aAAA;EANa;EAQvB,IAAA,GAAO,UAAA;EAPG;EASV,IAAA,GAAO,UAAA;;EAEP,OAAA;EAXoB;AACtB;;;;EAgBE,WAAA;EAde;EAgBf,QAAA;;EAEA,MAAA,GAAS,YAAA;EAdF;EAgBP,YAAA;AAAA;;;;;;cAQW,MAAA,EAAM,KAAA,CAAA,yBAAA,CAAA,WAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/button/button.js

@@ -1,8 +1,13 @@
 import button_module_default from "./button.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button } from "@base-ui/react/button";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/button/button.tsx
+/**
+* Pressable button with multiple variants, tones, and sizes. Composes
+* `@base-ui/react` Button with focus management and disabled-while-loading.
+* Supports a spinner overlay that preserves button width.
+*/
 const Button$1 = forwardRef(function Button$2({ variant = "solid", tone = "primary", size = "md", loading = false, loadingText, iconOnly = false, nativeButton = true, disabled, className, children, render, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["Button","BaseButton","styles"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement } from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"solid\" | \"soft\" | \"outline\" | \"ghost\";\nexport type ButtonTone = \"primary\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  variant?: ButtonVariant;\n  /** Semantic color. Defaults to \"primary\". */\n  tone?: ButtonTone;\n  size?: ButtonSize;\n  loading?: boolean;\n  /**\n   * Text shown in place of children while loading.\n   * When provided the button width adapts to this text (variable width).\n   * When omitted, children stay rendered invisibly — width stays stable.\n   */\n  loadingText?: string;\n  iconOnly?: boolean;\n  render?: ReactElement;\n  nativeButton?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"solid\",\n    tone = \"primary\",\n    size = \"md\",\n    loading = false,\n    loadingText,\n    iconOnly = false,\n    nativeButton = true,\n    disabled,\n    className,\n    children,\n    render,\n    ...props\n  },\n  ref,\n) {\n  const classes = [\n    styles.root,\n    styles[`variant-${variant}`],\n    styles[`tone-${tone}`],\n    styles[`size-${size}`],\n    iconOnly ? styles[\"icon-only\"] : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseButton ref={ref} className={classes} disabled={disabled ?? loading} render={render} nativeButton={nativeButton} {...props}>\n      <span className={`${styles.loader} ${loading && !loadingText ? styles[\"loader-visible\"] : \"\"}`} aria-hidden=\"true\">\n        <span className={styles.spinner} />\n      </span>\n      <span className={loading && !loadingText ? styles[\"content-loading\"] : undefined}>\n        {loading && loadingText ? loadingText : children}\n      </span>\n    </BaseButton>\n  );\n});\n\nexport { styles as ButtonStyles };\n"],"mappings":";;;;;AA0BA,MAAaA,WAAS,WAA2C,SAASA,SACxE,EACE,UAAU,SACV,OAAO,WACP,OAAO,MACP,UAAU,OACV,aACA,WAAW,OACX,eAAe,MACf,UACA,WACA,UACA,QACA,GAAG,SAEL,KACA;AAYA,QACE,qBAACC,QAAD;EAAiB;EAAK,WAZR;GACdC,sBAAO;GACPA,sBAAO,WAAW;GAClBA,sBAAO,QAAQ;GACfA,sBAAO,QAAQ;GACf,WAAWA,sBAAO,eAAe;GACjC,aAAa;GACd,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGgC,UAAU,YAAY;EAAiB;EAAsB;EAAc,GAAI;YAAzH,CACE,oBAAC,QAAD;GAAM,WAAW,GAAGA,sBAAO,OAAO,GAAG,WAAW,CAAC,cAAcA,sBAAO,oBAAoB;GAAM,eAAY;aAC1G,oBAAC,QAAD,EAAM,WAAWA,sBAAO,SAAW,CAAA;GAC9B,CAAA,EACP,oBAAC,QAAD;GAAM,WAAW,WAAW,CAAC,cAAcA,sBAAO,qBAAqB,KAAA;aACpE,WAAW,cAAc,cAAc;GACnC,CAAA,CACI;;EAEf"}
+{"version":3,"file":"button.js","names":["Button","BaseButton","styles"],"sources":["../../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement } from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonVariant = \"solid\" | \"soft\" | \"outline\" | \"ghost\";\nexport type ButtonTone = \"primary\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /** Visual shape — filled, tinted, outlined, or borderless. @default \"solid\" */\n  variant?: ButtonVariant;\n  /** Semantic colour. @default \"primary\" */\n  tone?: ButtonTone | undefined;\n  /** Controls padding and font size. @default \"md\" */\n  size?: ButtonSize | undefined;\n  /** Shows a spinner overlay and disables interaction. */\n  loading?: boolean | undefined;\n  /**\n   * Text shown in place of children while loading.\n   * When provided the button width adapts to this text (variable width).\n   * When omitted, children stay rendered invisibly — width stays stable.\n   */\n  loadingText?: string | undefined;\n  /** Renders as a square button with equal padding on all sides. */\n  iconOnly?: boolean | undefined;\n  /** Custom render element forwarded to base-ui Button. */\n  render?: ReactElement | undefined;\n  /** Use a native `<button>` element. @default true */\n  nativeButton?: boolean | undefined;\n}\n\n/**\n * Pressable button with multiple variants, tones, and sizes. Composes\n * `@base-ui/react` Button with focus management and disabled-while-loading.\n * Supports a spinner overlay that preserves button width.\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = \"solid\",\n    tone = \"primary\",\n    size = \"md\",\n    loading = false,\n    loadingText,\n    iconOnly = false,\n    nativeButton = true,\n    disabled,\n    className,\n    children,\n    render,\n    ...props\n  },\n  ref,\n) {\n  const classes = [\n    styles.root,\n    styles[`variant-${variant}`],\n    styles[`tone-${tone}`],\n    styles[`size-${size}`],\n    iconOnly ? styles[\"icon-only\"] : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <BaseButton ref={ref} className={classes} disabled={disabled ?? loading} render={render} nativeButton={nativeButton} {...props}>\n      <span className={`${styles.loader} ${loading && !loadingText ? styles[\"loader-visible\"] : \"\"}`} aria-hidden=\"true\">\n        <span className={styles.spinner} />\n      </span>\n      <span className={loading && !loadingText ? styles[\"content-loading\"] : undefined}>\n        {loading && loadingText ? loadingText : children}\n      </span>\n    </BaseButton>\n  );\n});\n\nexport { styles as ButtonStyles };\n"],"mappings":";;;;;;;;;;AAqCA,MAAaA,WAAS,WAA2C,SAASA,SACxE,EACE,UAAU,SACV,OAAO,WACP,OAAO,MACP,UAAU,OACV,aACA,WAAW,OACX,eAAe,MACf,UACA,WACA,UACA,QACA,GAAG,SAEL,KACA;AAYA,QACE,qBAACC,QAAD;EAAiB;EAAK,WAZR;GACdC,sBAAO;GACPA,sBAAO,WAAW;GAClBA,sBAAO,QAAQ;GACfA,sBAAO,QAAQ;GACf,WAAWA,sBAAO,eAAe;GACjC,aAAa;GACd,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGgC,UAAU,YAAY;EAAiB;EAAsB;EAAc,GAAI;YAAzH,CACE,oBAAC,QAAD;GAAM,WAAW,GAAGA,sBAAO,OAAO,GAAG,WAAW,CAAC,cAAcA,sBAAO,oBAAoB;GAAM,eAAY;aAC1G,oBAAC,QAAD,EAAM,WAAWA,sBAAO,SAAW,CAAA;GAC9B,CAAA,EACP,oBAAC,QAAD;GAAM,WAAW,WAAW,CAAC,cAAcA,sBAAO,qBAAqB,KAAA;aACpE,WAAW,cAAc,cAAc;GACnC,CAAA,CACI;;EAEf"}

package/dist/button/button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.module.js","names":[],"sources":["../../src/button/button.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--letter-spacing-normal);\n    line-height: 1;\n    border-radius: var(--radius-md);\n    border: var(--border-width-base) solid transparent;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      opacity var(--duration-fast) var(--easing-standard),\n      transform 100ms var(--easing-ease-out);\n    outline: none;\n    position: relative;\n  }\n  .root:active:not([data-disabled]) {\n    transform: scale(0.97);\n  }\n  .root:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .root[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.44;\n    pointer-events: none;\n  }\n  /* ─── Sizes ──────────────────────────────────────────────────────── */\n  .size-xs {\n    height: 22px;\n    padding-inline: var(--space-2);\n    font-size: var(--font-size-xs);\n    border-radius: var(--radius-sm);\n  }\n  .size-sm {\n    height: 26px;\n    padding-inline: var(--space-2-5);\n    font-size: var(--font-size-sm);\n  }\n  .size-md {\n    height: 30px;\n    padding-inline: var(--space-3);\n    font-size: var(--font-size-md);\n  }\n  .size-lg {\n    height: 36px;\n    padding-inline: var(--space-4);\n    font-size: var(--font-size-lg);\n    border-radius: var(--radius-lg);\n  }\n  /* Icon-only */\n  .icon-only.size-xs {\n    width: 22px;\n    padding-inline: 0;\n  }\n  .icon-only.size-sm {\n    width: 26px;\n    padding-inline: 0;\n  }\n  .icon-only.size-md {\n    width: 30px;\n    padding-inline: 0;\n  }\n  .icon-only.size-lg {\n    width: 36px;\n    padding-inline: 0;\n  }\n  /* ─── Tones — set scoped color tokens ────────────────────────────── */\n  /*\n   * Each tone exposes four custom properties consumed by the variants below:\n   *   --btn-color         solid bg / soft text / outline+ghost hover text\n   *   --btn-color-hover   solid bg hover\n   *   --btn-color-pressed solid bg pressed\n   *   --btn-tint          soft bg\n   *   --btn-tint-hover    soft bg hover\n   *   --btn-on-color      text on solid bg\n   */\n  .tone-primary {\n    --btn-color: var(--color-accent);\n    --btn-color-hover: var(--color-accent-hover);\n    --btn-color-pressed: var(--color-accent-pressed);\n    --btn-tint: var(--color-accent-tint);\n    --btn-tint-hover: var(--color-accent-tint-hover);\n    --btn-on-color: var(--color-on-accent);\n  }\n  .tone-secondary {\n    --btn-color: var(--color-secondary);\n    --btn-color-hover: var(--color-primary);\n    --btn-color-pressed: var(--color-primary);\n    --btn-tint: var(--color-hover);\n    --btn-tint-hover: var(--color-active);\n    --btn-on-color: var(--color-canvas);\n  }\n  .tone-destructive {\n    --btn-color: var(--color-error-solid);\n    --btn-color-hover: var(--color-error-solid);\n    --btn-color-pressed: var(--color-error-solid);\n    --btn-tint: var(--color-error-bg);\n    --btn-tint-hover: var(--color-error-bg);\n    --btn-on-color: #ffffff;\n  }\n  .tone-success {\n    --btn-color: var(--color-success-solid);\n    --btn-color-hover: var(--color-success-solid);\n    --btn-color-pressed: var(--color-success-solid);\n    --btn-tint: var(--color-success-bg);\n    --btn-tint-hover: var(--color-success-bg);\n    --btn-on-color: #ffffff;\n  }\n  .tone-warning {\n    --btn-color: var(--color-warning-solid);\n    --btn-color-hover: var(--color-warning-solid);\n    --btn-color-pressed: var(--color-warning-solid);\n    --btn-tint: var(--color-warning-bg);\n    --btn-tint-hover: var(--color-warning-bg);\n    --btn-on-color: #ffffff;\n  }\n  /* ─── Variants — consume tone tokens ────────────────────────────── */\n  .variant-solid {\n    background-color: var(--btn-color);\n    border-color: var(--btn-color);\n    color: var(--btn-on-color);\n  }\n  .variant-solid:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: brightness(0.92);\n  }\n  .variant-solid:active:not([data-disabled]),\n  .variant-solid[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: brightness(0.84);\n  }\n  /* primary solid gets its own hover tokens instead of filter */\n  .variant-solid.tone-primary:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: none;\n  }\n  .variant-solid.tone-primary:active:not([data-disabled]),\n  .variant-solid.tone-primary[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: none;\n  }\n  .variant-soft {\n    background-color: var(--btn-tint);\n    border-color: transparent;\n    color: var(--btn-color);\n  }\n  .variant-soft:hover:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n  }\n  .variant-soft:active:not([data-disabled]),\n  .variant-soft[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n    filter: brightness(0.95);\n  }\n  .variant-outline {\n    background-color: transparent;\n    border-color: var(--color-line-strong);\n    color: var(--color-primary);\n  }\n  .variant-outline:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    border-color: var(--btn-color);\n    color: var(--btn-color);\n  }\n  .variant-outline:active:not([data-disabled]),\n  .variant-outline[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  .variant-ghost {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-secondary);\n  }\n  .variant-ghost:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    color: var(--btn-color);\n  }\n  .variant-ghost:active:not([data-disabled]),\n  .variant-ghost[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  /* ─── Loader ─────────────────────────────────────────────────────── */\n  /* Always in the DOM, always position:absolute so it never affects layout */\n  .loader {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .loader-visible {\n    opacity: 1;\n  }\n  .content-loading {\n    visibility: hidden;\n  }\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .spinner {\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: spin 0.6s linear infinite;\n    opacity: 0.7;\n  }\n}\n"],"mappings":";AAwCA,IAAA,wBAAY;CAAI,mBAAA;CAAA,aAAA;CAAA,UAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,QAAA;CAAA,WAAA;CAAA,oBAAA;CAAA,gBAAA;CAAA,kBAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA,mBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA"}
+{"version":3,"file":"button.module.js","names":[],"sources":["../../src/button/button.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--space-1-5);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--letter-spacing-normal);\n    line-height: 1;\n    border-radius: var(--radius-md);\n    border: var(--border-width-base) solid transparent;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      opacity var(--duration-fast) var(--easing-standard),\n      transform 100ms var(--easing-ease-out);\n    outline: none;\n    position: relative;\n  }\n  .root:active:not([data-disabled]) {\n    transform: scale(0.97);\n  }\n  .root:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .root[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.44;\n    pointer-events: none;\n  }\n  /* ─── Sizes ──────────────────────────────────────────────────────── */\n  .size-xs {\n    height: 22px;\n    padding-inline: var(--space-2);\n    font-size: var(--font-size-xs);\n    border-radius: var(--radius-sm);\n  }\n  .size-sm {\n    height: 26px;\n    padding-inline: var(--space-2-5);\n    font-size: var(--font-size-sm);\n  }\n  .size-md {\n    height: 30px;\n    padding-inline: var(--space-3);\n    font-size: var(--font-size-md);\n  }\n  .size-lg {\n    height: 36px;\n    padding-inline: var(--space-4);\n    font-size: var(--font-size-lg);\n    border-radius: var(--radius-lg);\n  }\n  /* Icon-only */\n  .icon-only.size-xs {\n    width: 22px;\n    padding-inline: 0;\n  }\n  .icon-only.size-sm {\n    width: 26px;\n    padding-inline: 0;\n  }\n  .icon-only.size-md {\n    width: 30px;\n    padding-inline: 0;\n  }\n  .icon-only.size-lg {\n    width: 36px;\n    padding-inline: 0;\n  }\n  /* ─── Tones — set scoped color tokens ────────────────────────────── */\n  /*\n   * Each tone exposes scoped custom properties consumed by the variants below:\n   *   --btn-color         solid bg color\n   *   --btn-color-hover   solid bg on hover\n   *   --btn-color-pressed solid bg on press\n   *   --btn-text-color    text color for soft / outline / ghost variants\n   *                       (may differ from --btn-color for contrast on tinted surfaces)\n   *   --btn-tint          soft bg\n   *   --btn-tint-hover    soft bg on hover\n   *   --btn-on-color      text on solid bg\n   */\n  .tone-primary {\n    --btn-color: var(--color-accent-solid);\n    --btn-color-hover: var(--color-accent-hover);\n    --btn-color-pressed: var(--color-accent-pressed);\n    --btn-text-color: var(--color-accent-text);\n    --btn-tint: var(--color-accent-tint);\n    --btn-tint-hover: var(--color-accent-tint-hover);\n    --btn-on-color: var(--color-on-accent);\n  }\n  .tone-secondary {\n    --btn-color: var(--color-secondary);\n    --btn-color-hover: var(--color-primary);\n    --btn-color-pressed: var(--color-primary);\n    --btn-text-color: var(--color-secondary);\n    --btn-tint: var(--color-hover);\n    --btn-tint-hover: var(--color-active);\n    --btn-on-color: var(--color-canvas);\n  }\n  .tone-destructive {\n    --btn-color: var(--color-error-solid);\n    --btn-color-hover: var(--color-error-solid);\n    --btn-color-pressed: var(--color-error-solid);\n    --btn-text-color: var(--color-error-text);\n    --btn-tint: var(--color-error-bg);\n    --btn-tint-hover: var(--color-error-bg);\n    --btn-on-color: var(--color-error-on-solid);\n  }\n  .tone-success {\n    --btn-color: var(--color-success-solid);\n    --btn-color-hover: var(--color-success-solid);\n    --btn-color-pressed: var(--color-success-solid);\n    --btn-text-color: var(--color-success-text);\n    --btn-tint: var(--color-success-bg);\n    --btn-tint-hover: var(--color-success-bg);\n    --btn-on-color: var(--color-success-on-solid);\n  }\n  .tone-warning {\n    --btn-color: var(--color-warning-solid);\n    --btn-color-hover: var(--color-warning-solid);\n    --btn-color-pressed: var(--color-warning-solid);\n    --btn-text-color: var(--color-warning-text);\n    --btn-tint: var(--color-warning-bg);\n    --btn-tint-hover: var(--color-warning-bg);\n    --btn-on-color: var(--color-warning-on-solid);\n  }\n  /* ─── Variants — consume tone tokens ────────────────────────────── */\n  .variant-solid {\n    background-color: var(--btn-color);\n    border-color: var(--btn-color);\n    color: var(--btn-on-color);\n  }\n  .variant-solid:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: brightness(0.92);\n  }\n  .variant-solid:active:not([data-disabled]),\n  .variant-solid[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: brightness(0.84);\n  }\n  /* primary solid gets its own hover tokens instead of filter */\n  .variant-solid.tone-primary:hover:not([data-disabled]) {\n    background-color: var(--btn-color-hover);\n    border-color: var(--btn-color-hover);\n    filter: none;\n  }\n  .variant-solid.tone-primary:active:not([data-disabled]),\n  .variant-solid.tone-primary[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-color-pressed);\n    border-color: var(--btn-color-pressed);\n    filter: none;\n  }\n  .variant-soft {\n    background-color: var(--btn-tint);\n    border-color: transparent;\n    color: var(--btn-text-color);\n  }\n  .variant-soft:hover:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n  }\n  .variant-soft:active:not([data-disabled]),\n  .variant-soft[data-pressed]:not([data-disabled]) {\n    background-color: var(--btn-tint-hover);\n    filter: brightness(0.95);\n  }\n  .variant-outline {\n    background-color: transparent;\n    border-color: var(--color-line-strong);\n    color: var(--color-primary);\n  }\n  /* Non-secondary tones show their tone color at rest */\n  .variant-outline:not(.tone-secondary) {\n    border-color: var(--btn-text-color);\n    color: var(--btn-text-color);\n  }\n  .variant-outline:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    border-color: var(--btn-text-color);\n    color: var(--btn-text-color);\n  }\n  .variant-outline:active:not([data-disabled]),\n  .variant-outline[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  .variant-ghost {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-secondary);\n  }\n  /* Non-secondary tones show their tone color at rest */\n  .variant-ghost:not(.tone-secondary) {\n    color: var(--btn-text-color);\n  }\n  .variant-ghost:hover:not([data-disabled]) {\n    background-color: var(--color-hover);\n    color: var(--btn-text-color);\n  }\n  .variant-ghost:active:not([data-disabled]),\n  .variant-ghost[data-pressed]:not([data-disabled]) {\n    background-color: var(--color-active);\n  }\n  /* ─── Loader ─────────────────────────────────────────────────────── */\n  /* Always in the DOM, always position:absolute so it never affects layout */\n  .loader {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    pointer-events: none;\n  }\n  .loader-visible {\n    opacity: 1;\n  }\n  .content-loading {\n    visibility: hidden;\n  }\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  .spinner {\n    width: 12px;\n    height: 12px;\n    border: 1.5px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: spin 0.6s linear infinite;\n    opacity: 0.7;\n  }\n}\n"],"mappings":";AAwCA,IAAA,wBAAY;CAAI,mBAAA;CAAA,aAAA;CAAA,UAAA;CAAA,kBAAA;CAAA,QAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,WAAA;CAAA,QAAA;CAAA,WAAA;CAAA,oBAAA;CAAA,gBAAA;CAAA,kBAAA;CAAA,gBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA,mBAAA;CAAA,gBAAA;CAAA,iBAAA;CAAA"}

package/dist/card/card.d.ts

@@ -1,17 +1,24 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import styles from "./card.module.css";
 
 //#region src/card/card.d.ts
 interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  /** Apply a raised shadow for layered surfaces. */
   elevated?: boolean;
+  /** Add hover/active states for clickable cards. */
   interactive?: boolean;
 }
 interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
   /** Card heading rendered in the header area. */
   heading?: ReactNode;
+  /** Secondary text below the heading. */
   description?: ReactNode;
 }
+/**
+ * Surface container with optional header, body, and footer slots.
+ * Pure HTML — no base-ui dependency.
+ */
 declare function Card({
   elevated,
   interactive,
@@ -19,6 +26,7 @@ declare function Card({
   children,
   ...props
 }: CardProps): react_jsx_runtime0.JSX.Element;
+/** Header area with optional heading and description. */
 declare function CardHeader({
   heading,
   description,
@@ -26,11 +34,13 @@ declare function CardHeader({
   children,
   ...props
 }: CardHeaderProps): react_jsx_runtime0.JSX.Element;
+/** Padded body content area. */
 declare function CardBody({
   className,
   children,
   ...props
 }: ComponentPropsWithoutRef<"div">): react_jsx_runtime0.JSX.Element;
+/** Footer area, typically used for actions. */
 declare function CardFooter({
   className,
   children,

package/dist/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/card/card.tsx"],"mappings":";;;;;UAGiB,SAAA,SAAkB,wBAAA;EACjC,QAAA;EACA,WAAA;AAAA;AAAA,UAIe,eAAA,SAAwB,IAAA,CAAK,wBAAA;;EAE5C,OAAA,GAAU,SAAA;EACV,WAAA,GAAc,SAAA;AAAA;AAAA,iBAGA,IAAA,CAAA;EAAO,QAAA;EAAU,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAaxE,UAAA,CAAA;EAAa,OAAA;EAAS,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUnF,QAAA,CAAA;EAAW,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQ3E,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"card.d.ts","names":[],"sources":["../../src/card/card.tsx"],"mappings":";;;;;UAGiB,SAAA,SAAkB,wBAAA;;EAEjC,QAAA;EAFe;EAIf,WAAA;AAAA;AAAA,UAIe,eAAA,SAAwB,IAAA,CAAK,wBAAA;EARX;EAUjC,OAAA,GAAU,SAAA;EANV;EAQA,WAAA,GAAc,SAAA;AAAA;AAJhB;;;;AAAA,iBAWgB,IAAA,CAAA;EAAO,QAAA;EAAU,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;;iBAcxE,UAAA,CAAA;EAAa,OAAA;EAAS,WAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;iBAWnF,QAAA,CAAA;EAAW,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA;;iBAS3E,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,wBAAA,UAA+B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/card/card.js

@@ -1,6 +1,10 @@
 import card_module_default from "./card.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/card/card.tsx
+/**
+* Surface container with optional header, body, and footer slots.
+* Pure HTML — no base-ui dependency.
+*/
 function Card({ elevated, interactive, className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: [
@@ -13,6 +17,7 @@ function Card({ elevated, interactive, className, children, ...props }) {
 		children
 	});
 }
+/** Header area with optional heading and description. */
 function CardHeader({ heading, description, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: `${card_module_default.header} ${className ?? ""}`,
@@ -30,6 +35,7 @@ function CardHeader({ heading, description, className, children, ...props }) {
 		]
 	});
 }
+/** Padded body content area. */
 function CardBody({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: `${card_module_default.body} ${className ?? ""}`,
@@ -37,6 +43,7 @@ function CardBody({ className, children, ...props }) {
 		children
 	});
 }
+/** Footer area, typically used for actions. */
 function CardFooter({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: `${card_module_default.footer} ${className ?? ""}`,

package/dist/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["styles"],"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport styles from \"./card.module.css\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  elevated?: boolean;\n  interactive?: boolean;\n}\n\n// Omit `title` (HTML string attr) so we can accept ReactNode as `heading`\nexport interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** Card heading rendered in the header area. */\n  heading?: ReactNode;\n  description?: ReactNode;\n}\n\nexport function Card({ elevated, interactive, className, children, ...props }: CardProps) {\n  return (\n    <div\n      className={[styles.root, elevated ? styles[\"root-elevated\"] : \"\", interactive ? styles[\"root-interactive\"] : \"\", className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {\n  return (\n    <div className={`${styles.header} ${className ?? \"\"}`} {...props}>\n      {heading && <span className={styles.title}>{heading}</span>}\n      {description && <span className={styles.description}>{description}</span>}\n      {children}\n    </div>\n  );\n}\n\nexport function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.body} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.footer} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\nexport { styles as CardStyles };\n"],"mappings":";;;AAeA,SAAgB,KAAK,EAAE,UAAU,aAAa,WAAW,UAAU,GAAG,SAAoB;AACxF,QACE,oBAAC,OAAD;EACE,WAAW;GAACA,oBAAO;GAAM,WAAWA,oBAAO,mBAAmB;GAAI,cAAcA,oBAAO,sBAAsB;GAAI,aAAa;GAAG,CAC9H,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;EAEH;EACG,CAAA;;AAIV,SAAgB,WAAW,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,SAA0B;AACnG,QACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;YAA3D;GACG,WAAW,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAQ;IAAe,CAAA;GAC1D,eAAe,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAc;IAAmB,CAAA;GACxE;GACG;;;AAIV,SAAgB,SAAS,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC3F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EACtD;EACG,CAAA;;AAIV,SAAgB,WAAW,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC7F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EACxD;EACG,CAAA"}
+{"version":3,"file":"card.js","names":["styles"],"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport styles from \"./card.module.css\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Apply a raised shadow for layered surfaces. */\n  elevated?: boolean;\n  /** Add hover/active states for clickable cards. */\n  interactive?: boolean;\n}\n\n// Omit `title` (HTML string attr) so we can accept ReactNode as `heading`\nexport interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** Card heading rendered in the header area. */\n  heading?: ReactNode;\n  /** Secondary text below the heading. */\n  description?: ReactNode;\n}\n\n/**\n * Surface container with optional header, body, and footer slots.\n * Pure HTML — no base-ui dependency.\n */\nexport function Card({ elevated, interactive, className, children, ...props }: CardProps) {\n  return (\n    <div\n      className={[styles.root, elevated ? styles[\"root-elevated\"] : \"\", interactive ? styles[\"root-interactive\"] : \"\", className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** Header area with optional heading and description. */\nexport function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {\n  return (\n    <div className={`${styles.header} ${className ?? \"\"}`} {...props}>\n      {heading && <span className={styles.title}>{heading}</span>}\n      {description && <span className={styles.description}>{description}</span>}\n      {children}\n    </div>\n  );\n}\n\n/** Padded body content area. */\nexport function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.body} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\n/** Footer area, typically used for actions. */\nexport function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.footer} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\nexport { styles as CardStyles };\n"],"mappings":";;;;;;;AAsBA,SAAgB,KAAK,EAAE,UAAU,aAAa,WAAW,UAAU,GAAG,SAAoB;AACxF,QACE,oBAAC,OAAD;EACE,WAAW;GAACA,oBAAO;GAAM,WAAWA,oBAAO,mBAAmB;GAAI,cAAcA,oBAAO,sBAAsB;GAAI,aAAa;GAAG,CAC9H,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;EAEH;EACG,CAAA;;;AAKV,SAAgB,WAAW,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,SAA0B;AACnG,QACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;YAA3D;GACG,WAAW,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAQ;IAAe,CAAA;GAC1D,eAAe,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAc;IAAmB,CAAA;GACxE;GACG;;;;AAKV,SAAgB,SAAS,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC3F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EACtD;EACG,CAAA;;;AAKV,SAAgB,WAAW,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC7F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EACxD;EACG,CAAA"}

package/dist/checkbox/checkbox.d.ts

@@ -1,22 +1,35 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./checkbox.module.css";
 
 //#region src/checkbox/checkbox.d.ts
 interface CheckboxProps {
+  /** Controlled checked state. */
   checked?: boolean;
+  /** Initial checked state (uncontrolled). */
   defaultChecked?: boolean;
+  /** Display a horizontal dash instead of a checkmark. */
   indeterminate?: boolean;
+  /** Prevent interaction and dim the checkbox. */
   disabled?: boolean;
+  /** Mark the field as required for form validation. */
   required?: boolean;
+  /** HTML name attribute for form submission. */
   name?: string;
+  /** HTML value attribute for form submission. */
   value?: string;
   /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
   onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  /** Label content rendered next to the checkbox. */
   children?: ReactNode;
+  /** Override the auto-generated element id. */
   id?: string;
   className?: string;
 }
+/**
+ * Boolean selection with an accessible label. Wraps `@base-ui/react` Checkbox
+ * with a styled indicator, check icon, and label layout.
+ */
 declare function Checkbox({
   children,
   id,

package/dist/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;;;UAKiB,aAAA;EACf,OAAA;EACA,cAAA;EACA,aAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EALA;EAOA,eAAA,IAAmB,OAAA,WAAkB,YAAA;EACrC,QAAA,GAAW,SAAA;EACX,EAAA;EACA,SAAA;AAAA;AAAA,iBAGc,QAAA,CAAA;EAAW,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;;;UAKiB,aAAA;;EAEf,OAAA;EAFe;EAIf,cAAA;;EAEA,aAAA;EAJA;EAMA,QAAA;EAFA;EAIA,QAAA;EAAA;EAEA,IAAA;EAEA;EAAA,KAAA;EAEmB;EAAnB,eAAA,IAAmB,OAAA,WAAkB,YAAA;EAErC;EAAA,QAAA,GAAW,SAAA;EAEX;EAAA,EAAA;EACA,SAAA;AAAA;AAOF;;;;AAAA,iBAAgB,QAAA,CAAA;EAAW,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/checkbox/checkbox.js

@@ -1,8 +1,12 @@
 import checkbox_module_default from "./checkbox.module.js";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/checkbox/checkbox.tsx
+/**
+* Boolean selection with an accessible label. Wraps `@base-ui/react` Checkbox
+* with a styled indicator, check icon, and label layout.
+*/
 function Checkbox$1({ children, id, className, onCheckedChange, ...props }) {
 	const checkboxId = id ?? useId();
 	return /* @__PURE__ */ jsxs("label", {

package/dist/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","styles","BaseCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport styles from \"./checkbox.module.css\";\n\nexport interface CheckboxProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  value?: string;\n  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */\n  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;\n  children?: ReactNode;\n  id?: string;\n  className?: string;\n}\n\nexport function Checkbox({ children, id, className, onCheckedChange, ...props }: CheckboxProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const checkboxId = id ?? useId();\n\n  return (\n    <label className={`${styles.root} ${className ?? \"\"}`} htmlFor={checkboxId}>\n      <BaseCheckbox.Root id={checkboxId} className={styles.indicator} onCheckedChange={onCheckedChange as never} {...props}>\n        <BaseCheckbox.Indicator className={styles.icon}>\n          <svg viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.5 5L3.5 7.5L8.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n      {children && <span className={styles.label}>{children}</span>}\n    </label>\n  );\n}\nexport { styles as CheckboxStyles };\n"],"mappings":";;;;;AAoBA,SAAgBA,WAAS,EAAE,UAAU,IAAI,WAAW,iBAAiB,GAAG,SAAwB;CAE9F,MAAM,aAAa,MAAM,OAAO;AAEhC,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,wBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,SAAa,MAAd;GAAmB,IAAI;GAAY,WAAWD,wBAAO;GAA4B;GAA0B,GAAI;aAC7G,oBAACC,SAAa,WAAd;IAAwB,WAAWD,wBAAO;cACxC,oBAAC,OAAD;KAAK,SAAQ;KAAY,MAAK;KAAO,OAAM;eACzC,oBAAC,QAAD;MAAM,GAAE;MAAyB,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACpH,CAAA;IACiB,CAAA;GACP,CAAA,EACnB,YAAY,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GAAQ;GAAgB,CAAA,CACvD"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","styles","BaseCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport styles from \"./checkbox.module.css\";\n\nexport interface CheckboxProps {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state (uncontrolled). */\n  defaultChecked?: boolean;\n  /** Display a horizontal dash instead of a checkmark. */\n  indeterminate?: boolean;\n  /** Prevent interaction and dim the checkbox. */\n  disabled?: boolean;\n  /** Mark the field as required for form validation. */\n  required?: boolean;\n  /** HTML name attribute for form submission. */\n  name?: string;\n  /** HTML value attribute for form submission. */\n  value?: string;\n  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */\n  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;\n  /** Label content rendered next to the checkbox. */\n  children?: ReactNode;\n  /** Override the auto-generated element id. */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Boolean selection with an accessible label. Wraps `@base-ui/react` Checkbox\n * with a styled indicator, check icon, and label layout.\n */\nexport function Checkbox({ children, id, className, onCheckedChange, ...props }: CheckboxProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const checkboxId = id ?? useId();\n\n  return (\n    <label className={`${styles.root} ${className ?? \"\"}`} htmlFor={checkboxId}>\n      <BaseCheckbox.Root id={checkboxId} className={styles.indicator} onCheckedChange={onCheckedChange as never} {...props}>\n        <BaseCheckbox.Indicator className={styles.icon}>\n          <svg viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.5 5L3.5 7.5L8.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n      {children && <span className={styles.label}>{children}</span>}\n    </label>\n  );\n}\nexport { styles as CheckboxStyles };\n"],"mappings":";;;;;;;;;AAiCA,SAAgBA,WAAS,EAAE,UAAU,IAAI,WAAW,iBAAiB,GAAG,SAAwB;CAE9F,MAAM,aAAa,MAAM,OAAO;AAEhC,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,wBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,SAAa,MAAd;GAAmB,IAAI;GAAY,WAAWD,wBAAO;GAA4B;GAA0B,GAAI;aAC7G,oBAACC,SAAa,WAAd;IAAwB,WAAWD,wBAAO;cACxC,oBAAC,OAAD;KAAK,SAAQ;KAAY,MAAK;KAAO,OAAM;eACzC,oBAAC,QAAD;MAAM,GAAE;MAAyB,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACpH,CAAA;IACiB,CAAA;GACP,CAAA,EACnB,YAAY,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GAAQ;GAAgB,CAAA,CACvD"}

package/dist/checkbox/parts.js

@@ -1,6 +1,6 @@
 import checkbox_module_default from "./checkbox.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/checkbox/parts.tsx
 /**

package/dist/collapsible/collapsible.d.ts

@@ -1,17 +1,28 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./collapsible.module.css";
 
 //#region src/collapsible/collapsible.d.ts
 interface CollapsibleProps {
+  /** Content rendered inside the toggle button. */
   trigger: ReactNode;
+  /** Content revealed when expanded. */
   children: ReactNode;
+  /** Whether the panel is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Controlled open state. */
   open?: boolean;
+  /** Called when the panel opens or closes. */
   onOpenChange?: (open: boolean) => void;
+  /** Prevent the panel from being toggled. */
   disabled?: boolean;
   className?: string;
 }
+/**
+ * A single panel toggled by a button. Unlike Accordion it stands alone —
+ * ideal for inline FAQ entries, code blocks, or side panels.
+ * Animates via `--collapsible-panel-height`.
+ */
 declare function Collapsible({
   trigger,
   children,

package/dist/collapsible/collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","names":[],"sources":["../../src/collapsible/collapsible.tsx"],"mappings":";;;;;UAIiB,gBAAA;EACf,OAAA,EAAS,SAAA;EACT,QAAA,EAAU,SAAA;EACV,WAAA;EACA,IAAA;EACA,YAAA,IAAgB,IAAA;EAChB,QAAA;EACA,SAAA;AAAA;AAAA,iBAWc,WAAA,CAAA;EAAc,OAAA;EAAS,QAAA;EAAU,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"collapsible.d.ts","names":[],"sources":["../../src/collapsible/collapsible.tsx"],"mappings":";;;;;UAIiB,gBAAA;;EAEf,OAAA,EAAS,SAAA;EAFM;EAIf,QAAA,EAAU,SAAA;;EAEV,WAAA;EAJA;EAMA,IAAA;EAJA;EAMA,YAAA,IAAgB,IAAA;EAJhB;EAMA,QAAA;EACA,SAAA;AAAA;;;;;AAgBF;iBAAgB,WAAA,CAAA;EAAc,OAAA;EAAS,QAAA;EAAU,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/collapsible/collapsible.js

@@ -18,6 +18,11 @@ function ChevronIcon() {
 		})
 	});
 }
+/**
+* A single panel toggled by a button. Unlike Accordion it stands alone —
+* ideal for inline FAQ entries, code blocks, or side panels.
+* Animates via `--collapsible-panel-height`.
+*/
 function Collapsible$1({ trigger, children, className, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		className: `${collapsible_module_default.root} ${className ?? ""}`,

package/dist/collapsible/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","names":["Collapsible","BaseCollapsible","styles"],"sources":["../../src/collapsible/collapsible.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport styles from \"./collapsible.module.css\";\n\nexport interface CollapsibleProps {\n  trigger: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden>\n      <path d=\"M3.5 9L7.5 5L3.5 1\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport function Collapsible({ trigger, children, className, onOpenChange, ...props }: CollapsibleProps) {\n  return (\n    <BaseCollapsible.Root className={`${styles.root} ${className ?? \"\"}`} onOpenChange={onOpenChange as never} {...props}>\n      <BaseCollapsible.Trigger className={styles.trigger}>\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n        {trigger}\n      </BaseCollapsible.Trigger>\n      <BaseCollapsible.Panel className={styles.panel}>\n        <div className={styles[\"panel-content\"]}>{children}</div>\n      </BaseCollapsible.Panel>\n    </BaseCollapsible.Root>\n  );\n}\nexport { styles as CollapsibleStyles };\n"],"mappings":";;;;AAcA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAC1D,oBAAC,QAAD;GAAM,GAAE;GAAqB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAChH,CAAA;;AAIV,SAAgBA,cAAY,EAAE,SAAS,UAAU,WAAW,cAAc,GAAG,SAA2B;AACtG,QACE,qBAACC,YAAgB,MAAjB;EAAsB,WAAW,GAAGC,2BAAO,KAAK,GAAG,aAAa;EAAoB;EAAuB,GAAI;YAA/G,CACE,qBAACD,YAAgB,SAAjB;GAAyB,WAAWC,2BAAO;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAWA,2BAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,EACN,QACuB;MAC1B,oBAACD,YAAgB,OAAjB;GAAuB,WAAWC,2BAAO;aACvC,oBAAC,OAAD;IAAK,WAAWA,2BAAO;IAAmB;IAAe,CAAA;GACnC,CAAA,CACH"}
+{"version":3,"file":"collapsible.js","names":["Collapsible","BaseCollapsible","styles"],"sources":["../../src/collapsible/collapsible.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport styles from \"./collapsible.module.css\";\n\nexport interface CollapsibleProps {\n  /** Content rendered inside the toggle button. */\n  trigger: ReactNode;\n  /** Content revealed when expanded. */\n  children: ReactNode;\n  /** Whether the panel is initially open (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the panel opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Prevent the panel from being toggled. */\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden>\n      <path d=\"M3.5 9L7.5 5L3.5 1\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * A single panel toggled by a button. Unlike Accordion it stands alone —\n * ideal for inline FAQ entries, code blocks, or side panels.\n * Animates via `--collapsible-panel-height`.\n */\nexport function Collapsible({ trigger, children, className, onOpenChange, ...props }: CollapsibleProps) {\n  return (\n    <BaseCollapsible.Root className={`${styles.root} ${className ?? \"\"}`} onOpenChange={onOpenChange as never} {...props}>\n      <BaseCollapsible.Trigger className={styles.trigger}>\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n        {trigger}\n      </BaseCollapsible.Trigger>\n      <BaseCollapsible.Panel className={styles.panel}>\n        <div className={styles[\"panel-content\"]}>{children}</div>\n      </BaseCollapsible.Panel>\n    </BaseCollapsible.Root>\n  );\n}\nexport { styles as CollapsibleStyles };\n"],"mappings":";;;;AAoBA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAC1D,oBAAC,QAAD;GAAM,GAAE;GAAqB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAChH,CAAA;;;;;;;AASV,SAAgBA,cAAY,EAAE,SAAS,UAAU,WAAW,cAAc,GAAG,SAA2B;AACtG,QACE,qBAACC,YAAgB,MAAjB;EAAsB,WAAW,GAAGC,2BAAO,KAAK,GAAG,aAAa;EAAoB;EAAuB,GAAI;YAA/G,CACE,qBAACD,YAAgB,SAAjB;GAAyB,WAAWC,2BAAO;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAWA,2BAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,EACN,QACuB;MAC1B,oBAACD,YAAgB,OAAjB;GAAuB,WAAWC,2BAAO;aACvC,oBAAC,OAAD;IAAK,WAAWA,2BAAO;IAAmB;IAAe,CAAA;GACnC,CAAA,CACH"}

package/dist/collapsible/parts.js

@@ -1,6 +1,6 @@
 import collapsible_module_default from "./collapsible.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/collapsible/parts.tsx
 /**

package/dist/context-menu/context-menu.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./context-menu.module.css";
 
 //#region src/context-menu/context-menu.d.ts
@@ -23,9 +23,14 @@ type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMe
 interface ContextMenuProps {
   /** The element that can be right-clicked / long-pressed to open the menu. */
   children: ReactElement;
+  /** Array of menu entries: items, separators, and groups. */
   items: ContextMenuEntry[];
   className?: string;
 }
+/**
+ * A menu that appears at the pointer on right-click or long press. Supports
+ * items, separators, groups, keyboard shortcuts, and disabled states.
+ */
 declare function ContextMenu({
   children,
   items,

package/dist/context-menu/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../src/context-menu/context-menu.tsx"],"mappings":";;;;;UAIiB,kBAAA;EACf,IAAA;EACA,KAAA,EAAO,SAAA;EACP,IAAA,GAAO,SAAA;EACP,QAAA;EACA,QAAA;EACA,QAAA;AAAA;AAAA,UAGe,uBAAA;EACf,IAAA;AAAA;AAAA,UAGe,mBAAA;EACf,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,KAAA,EAAO,kBAAA;AAAA;AAAA,KAGG,gBAAA,GAAmB,kBAAA,GAAqB,uBAAA,GAA0B,mBAAA;AAAA,UAE7D,gBAAA;EAZuB;EActC,QAAA,EAAU,YAAA;EACV,KAAA,EAAO,gBAAA;EACP,SAAA;AAAA;AAAA,iBAac,WAAA,CAAA;EAAc,QAAA;EAAU,KAAA;EAAO;AAAA,GAAa,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../src/context-menu/context-menu.tsx"],"mappings":";;;;;UAIiB,kBAAA;EACf,IAAA;EACA,KAAA,EAAO,SAAA;EACP,IAAA,GAAO,SAAA;EACP,QAAA;EACA,QAAA;EACA,QAAA;AAAA;AAAA,UAGe,uBAAA;EACf,IAAA;AAAA;AAAA,UAGe,mBAAA;EACf,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,KAAA,EAAO,kBAAA;AAAA;AAAA,KAGG,gBAAA,GAAmB,kBAAA,GAAqB,uBAAA,GAA0B,mBAAA;AAAA,UAE7D,gBAAA;EAZuB;EActC,QAAA,EAAU,YAAA;EAbV;EAeA,KAAA,EAAO,gBAAA;EACP,SAAA;AAAA;;;;;iBAiBc,WAAA,CAAA;EAAc,QAAA;EAAU,KAAA;EAAO;AAAA,GAAa,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/context-menu/context-menu.js

@@ -23,6 +23,10 @@ function RenderItem({ item, i }) {
 		]
 	}, i);
 }
+/**
+* A menu that appears at the pointer on right-click or long press. Supports
+* items, separators, groups, keyboard shortcuts, and disabled states.
+*/
 function ContextMenu$1({ children, items, className }) {
 	return /* @__PURE__ */ jsxs(ContextMenu.Root, { children: [/* @__PURE__ */ jsx(ContextMenu.Trigger, {
 		className: `${context_menu_module_default.trigger} ${className ?? ""}`,

package/dist/context-menu/context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["BaseContextMenu","styles","ContextMenu"],"sources":["../../src/context-menu/context-menu.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport styles from \"./context-menu.module.css\";\n\nexport interface ContextMenuItemDef {\n  type?: \"item\";\n  label: ReactNode;\n  icon?: ReactNode;\n  shortcut?: string;\n  onSelect?: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuSeparatorDef {\n  type: \"separator\";\n}\n\nexport interface ContextMenuGroupDef {\n  type: \"group\";\n  label?: ReactNode;\n  items: ContextMenuItemDef[];\n}\n\nexport type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMenuGroupDef;\n\nexport interface ContextMenuProps {\n  /** The element that can be right-clicked / long-pressed to open the menu. */\n  children: ReactElement;\n  items: ContextMenuEntry[];\n  className?: string;\n}\n\nfunction RenderItem({ item, i }: { item: ContextMenuItemDef; i: number }) {\n  return (\n    <BaseContextMenu.Item key={i} className={styles.item} disabled={item.disabled} onClick={item.onSelect}>\n      {item.icon && <span className={styles[\"item-icon\"]}>{item.icon}</span>}\n      <span className={styles[\"item-label\"]}>{item.label}</span>\n      {item.shortcut && <span className={styles[\"item-shortcut\"]}>{item.shortcut}</span>}\n    </BaseContextMenu.Item>\n  );\n}\n\nexport function ContextMenu({ children, items, className }: ContextMenuProps) {\n  return (\n    <BaseContextMenu.Root>\n      <BaseContextMenu.Trigger className={`${styles.trigger} ${className ?? \"\"}`} render={children} />\n      <BaseContextMenu.Portal>\n        <BaseContextMenu.Positioner className={styles.positioner}>\n          <BaseContextMenu.Popup className={styles.popup}>\n            {items.map((entry, i) => {\n              if (entry.type === \"separator\") {\n                return <BaseContextMenu.Separator key={i} className={styles.separator} />;\n              }\n              if (entry.type === \"group\") {\n                return (\n                  <BaseContextMenu.Group key={i}>\n                    {entry.label && (\n                      <BaseContextMenu.GroupLabel className={styles[\"group-label\"]}>{entry.label}</BaseContextMenu.GroupLabel>\n                    )}\n                    {entry.items.map((item, j) => (\n                      <RenderItem key={j} item={item} i={j} />\n                    ))}\n                  </BaseContextMenu.Group>\n                );\n              }\n              return <RenderItem key={i} item={entry} i={i} />;\n            })}\n          </BaseContextMenu.Popup>\n        </BaseContextMenu.Positioner>\n      </BaseContextMenu.Portal>\n    </BaseContextMenu.Root>\n  );\n}\n\nexport { styles as ContextMenuStyles };\n"],"mappings":";;;;AAgCA,SAAS,WAAW,EAAE,MAAM,KAA8C;AACxE,QACE,qBAACA,YAAgB,MAAjB;EAA8B,WAAWC,4BAAO;EAAM,UAAU,KAAK;EAAU,SAAS,KAAK;YAA7F;GACG,KAAK,QAAQ,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAe,KAAK;IAAY,CAAA;GACtE,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAgB,KAAK;IAAa,CAAA;GACzD,KAAK,YAAY,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAmB,KAAK;IAAgB,CAAA;GAC7D;IAJI,EAIJ;;AAI3B,SAAgBC,cAAY,EAAE,UAAU,OAAO,aAA+B;AAC5E,QACE,qBAACF,YAAgB,MAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,SAAjB;EAAyB,WAAW,GAAGC,4BAAO,QAAQ,GAAG,aAAa;EAAM,QAAQ;EAAY,CAAA,EAChG,oBAACD,YAAgB,QAAjB,EAAA,UACE,oBAACA,YAAgB,YAAjB;EAA4B,WAAWC,4BAAO;YAC5C,oBAACD,YAAgB,OAAjB;GAAuB,WAAWC,4BAAO;aACtC,MAAM,KAAK,OAAO,MAAM;AACvB,QAAI,MAAM,SAAS,YACjB,QAAO,oBAACD,YAAgB,WAAjB,EAAmC,WAAWC,4BAAO,WAAa,EAAlC,EAAkC;AAE3E,QAAI,MAAM,SAAS,QACjB,QACE,qBAACD,YAAgB,OAAjB,EAAA,UAAA,CACG,MAAM,SACL,oBAACA,YAAgB,YAAjB;KAA4B,WAAWC,4BAAO;eAAiB,MAAM;KAAmC,CAAA,EAEzG,MAAM,MAAM,KAAK,MAAM,MACtB,oBAAC,YAAD;KAA0B;KAAM,GAAG;KAAK,EAAvB,EAAuB,CACxC,CACoB,EAAA,EAPI,EAOJ;AAG5B,WAAO,oBAAC,YAAD;KAAoB,MAAM;KAAU;KAAK,EAAxB,EAAwB;KAChD;GACoB,CAAA;EACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA"}
+{"version":3,"file":"context-menu.js","names":["BaseContextMenu","styles","ContextMenu"],"sources":["../../src/context-menu/context-menu.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\nimport styles from \"./context-menu.module.css\";\n\nexport interface ContextMenuItemDef {\n  type?: \"item\";\n  label: ReactNode;\n  icon?: ReactNode;\n  shortcut?: string;\n  onSelect?: () => void;\n  disabled?: boolean;\n}\n\nexport interface ContextMenuSeparatorDef {\n  type: \"separator\";\n}\n\nexport interface ContextMenuGroupDef {\n  type: \"group\";\n  label?: ReactNode;\n  items: ContextMenuItemDef[];\n}\n\nexport type ContextMenuEntry = ContextMenuItemDef | ContextMenuSeparatorDef | ContextMenuGroupDef;\n\nexport interface ContextMenuProps {\n  /** The element that can be right-clicked / long-pressed to open the menu. */\n  children: ReactElement;\n  /** Array of menu entries: items, separators, and groups. */\n  items: ContextMenuEntry[];\n  className?: string;\n}\n\nfunction RenderItem({ item, i }: { item: ContextMenuItemDef; i: number }) {\n  return (\n    <BaseContextMenu.Item key={i} className={styles.item} disabled={item.disabled} onClick={item.onSelect}>\n      {item.icon && <span className={styles[\"item-icon\"]}>{item.icon}</span>}\n      <span className={styles[\"item-label\"]}>{item.label}</span>\n      {item.shortcut && <span className={styles[\"item-shortcut\"]}>{item.shortcut}</span>}\n    </BaseContextMenu.Item>\n  );\n}\n\n/**\n * A menu that appears at the pointer on right-click or long press. Supports\n * items, separators, groups, keyboard shortcuts, and disabled states.\n */\nexport function ContextMenu({ children, items, className }: ContextMenuProps) {\n  return (\n    <BaseContextMenu.Root>\n      <BaseContextMenu.Trigger className={`${styles.trigger} ${className ?? \"\"}`} render={children} />\n      <BaseContextMenu.Portal>\n        <BaseContextMenu.Positioner className={styles.positioner}>\n          <BaseContextMenu.Popup className={styles.popup}>\n            {items.map((entry, i) => {\n              if (entry.type === \"separator\") {\n                return <BaseContextMenu.Separator key={i} className={styles.separator} />;\n              }\n              if (entry.type === \"group\") {\n                return (\n                  <BaseContextMenu.Group key={i}>\n                    {entry.label && (\n                      <BaseContextMenu.GroupLabel className={styles[\"group-label\"]}>{entry.label}</BaseContextMenu.GroupLabel>\n                    )}\n                    {entry.items.map((item, j) => (\n                      <RenderItem key={j} item={item} i={j} />\n                    ))}\n                  </BaseContextMenu.Group>\n                );\n              }\n              return <RenderItem key={i} item={entry} i={i} />;\n            })}\n          </BaseContextMenu.Popup>\n        </BaseContextMenu.Positioner>\n      </BaseContextMenu.Portal>\n    </BaseContextMenu.Root>\n  );\n}\n\nexport { styles as ContextMenuStyles };\n"],"mappings":";;;;AAiCA,SAAS,WAAW,EAAE,MAAM,KAA8C;AACxE,QACE,qBAACA,YAAgB,MAAjB;EAA8B,WAAWC,4BAAO;EAAM,UAAU,KAAK;EAAU,SAAS,KAAK;YAA7F;GACG,KAAK,QAAQ,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAe,KAAK;IAAY,CAAA;GACtE,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAgB,KAAK;IAAa,CAAA;GACzD,KAAK,YAAY,oBAAC,QAAD;IAAM,WAAWA,4BAAO;cAAmB,KAAK;IAAgB,CAAA;GAC7D;IAJI,EAIJ;;;;;;AAQ3B,SAAgBC,cAAY,EAAE,UAAU,OAAO,aAA+B;AAC5E,QACE,qBAACF,YAAgB,MAAjB,EAAA,UAAA,CACE,oBAACA,YAAgB,SAAjB;EAAyB,WAAW,GAAGC,4BAAO,QAAQ,GAAG,aAAa;EAAM,QAAQ;EAAY,CAAA,EAChG,oBAACD,YAAgB,QAAjB,EAAA,UACE,oBAACA,YAAgB,YAAjB;EAA4B,WAAWC,4BAAO;YAC5C,oBAACD,YAAgB,OAAjB;GAAuB,WAAWC,4BAAO;aACtC,MAAM,KAAK,OAAO,MAAM;AACvB,QAAI,MAAM,SAAS,YACjB,QAAO,oBAACD,YAAgB,WAAjB,EAAmC,WAAWC,4BAAO,WAAa,EAAlC,EAAkC;AAE3E,QAAI,MAAM,SAAS,QACjB,QACE,qBAACD,YAAgB,OAAjB,EAAA,UAAA,CACG,MAAM,SACL,oBAACA,YAAgB,YAAjB;KAA4B,WAAWC,4BAAO;eAAiB,MAAM;KAAmC,CAAA,EAEzG,MAAM,MAAM,KAAK,MAAM,MACtB,oBAAC,YAAD;KAA0B;KAAM,GAAG;KAAK,EAAvB,EAAuB,CACxC,CACoB,EAAA,EAPI,EAOJ;AAG5B,WAAO,oBAAC,YAAD;KAAoB,MAAM;KAAU;KAAK,EAAxB,EAAwB;KAChD;GACoB,CAAA;EACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA"}

package/dist/context-menu/parts.js

@@ -1,6 +1,6 @@
 import context_menu_module_default from "./context-menu.module.js";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { ContextMenu } from "@base-ui/react/context-menu";
 //#region src/context-menu/parts.tsx
 /**

package/dist/dialog/dialog.d.ts

@@ -1,15 +1,20 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./dialog.module.css";
 
 //#region src/dialog/dialog.d.ts
 interface DialogProps {
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the dialog is initially open (uncontrolled). */
   defaultOpen?: boolean;
-  /** `eventDetails` is the base-ui event details object. */
+  /** Called when the dialog opens or closes. `eventDetails` is the base-ui event details object. */
   onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  /** Element that opens the dialog when clicked. */
   trigger?: ReactElement;
+  /** Heading rendered at the top of the dialog. */
   title?: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   children?: ReactNode;
   /** Buttons aligned to the right (cancel, confirm). */
@@ -21,8 +26,15 @@ interface DialogProps {
    */
   footerStart?: ReactNode;
   className?: string;
+  /** Whether the dialog can be closed by clicking the backdrop or pressing Escape. @default true */
   dismissible?: boolean;
 }
+/**
+ * Modal overlay dialog with title, description, body, and footer slots.
+ * Wraps `@base-ui/react` Dialog with a pre-styled backdrop, popup, and
+ * close button. Use `footerStart` for a macOS-style left-aligned
+ * destructive action.
+ */
 declare function Dialog({
   trigger,
   title,

package/dist/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;UAIiB,WAAA;EACf,IAAA;EACA,WAAA;EAFe;EAIf,YAAA,IAAgB,IAAA,WAAe,YAAA;EAC/B,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EAAA;EAEX,MAAA,GAAS,SAAA;EAMK;;;;;EAAd,WAAA,GAAc,SAAA;EACd,SAAA;EACA,WAAA;AAAA;AAAA,iBAWc,MAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../src/dialog/dialog.tsx"],"mappings":";;;;;UAIiB,WAAA;;EAEf,IAAA;EAFe;EAIf,WAAA;;EAEA,YAAA,IAAgB,IAAA,WAAe,YAAA;EAIvB;EAFR,OAAA,GAAU,YAAA;EAKC;EAHX,KAAA,GAAQ,SAAA;EAWM;EATd,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EAXX;EAaA,MAAA,GAAS,SAAA;EATT;;;;;EAeA,WAAA,GAAc,SAAA;EACd,SAAA;EAVA;EAYA,WAAA;AAAA;;;;;;;iBAiBc,MAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/dialog/dialog.js

@@ -16,6 +16,12 @@ function XIcon() {
 		})
 	});
 }
+/**
+* Modal overlay dialog with title, description, body, and footer slots.
+* Wraps `@base-ui/react` Dialog with a pre-styled backdrop, popup, and
+* close button. Use `footerStart` for a macOS-style left-aligned
+* destructive action.
+*/
 function Dialog$1({ trigger, title, description, children, footer, footerStart, className, dismissible = true, onOpenChange, ...props }) {
 	return /* @__PURE__ */ jsxs(Dialog.Root, {
 		onOpenChange,

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  trigger?: ReactElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  /** Buttons aligned to the right (cancel, confirm). */\n  footer?: ReactNode;\n  /**\n   * Content anchored to the left of the footer — intended for a destructive\n   * action (e.g. Delete). When present the footer switches to space-between\n   * layout, matching the macOS dialog pattern.\n   */\n  footerStart?: ReactNode;\n  className?: string;\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  footerStart,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {(footer || footerStart) && (\n              <div className={`${styles.footer} ${footerStart ? styles[\"footer-split\"] : \"\"}`}>\n                {footerStart && <div>{footerStart}</div>}\n                {footer && <div className={styles[\"footer-end\"]}>{footer}</div>}\n              </div>\n            )}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAyBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,aACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;KACxD,UAAU,gBACV,qBAAC,OAAD;KAAK,WAAW,GAAGA,sBAAO,OAAO,GAAG,cAAcA,sBAAO,kBAAkB;eAA3E,CACG,eAAe,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,EACvC,UAAU,oBAAC,OAAD;MAAK,WAAWA,sBAAO;gBAAgB;MAAa,CAAA,CAC3D;;IAES;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}
+{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n  /** Controlled open state. */\n  open?: boolean;\n  /** Whether the dialog is initially open (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Called when the dialog opens or closes. `eventDetails` is the base-ui event details object. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Element that opens the dialog when clicked. */\n  trigger?: ReactElement;\n  /** Heading rendered at the top of the dialog. */\n  title?: ReactNode;\n  /** Supplementary text below the title. */\n  description?: ReactNode;\n  children?: ReactNode;\n  /** Buttons aligned to the right (cancel, confirm). */\n  footer?: ReactNode;\n  /**\n   * Content anchored to the left of the footer — intended for a destructive\n   * action (e.g. Delete). When present the footer switches to space-between\n   * layout, matching the macOS dialog pattern.\n   */\n  footerStart?: ReactNode;\n  className?: string;\n  /** Whether the dialog can be closed by clicking the backdrop or pressing Escape. @default true */\n  dismissible?: boolean;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * Modal overlay dialog with title, description, body, and footer slots.\n * Wraps `@base-ui/react` Dialog with a pre-styled backdrop, popup, and\n * close button. Use `footerStart` for a macOS-style left-aligned\n * destructive action.\n */\nexport function Dialog({\n  trigger,\n  title,\n  description,\n  children,\n  footer,\n  footerStart,\n  className,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DialogProps) {\n  return (\n    <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDialog.Trigger render={trigger} />}\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} />\n        <BaseDialog.Viewport>\n          <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n            {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n            {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n            {dismissible && (\n              <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n                <XIcon />\n              </BaseDialog.Close>\n            )}\n            {children && <div className={styles.body}>{children}</div>}\n            {(footer || footerStart) && (\n              <div className={`${styles.footer} ${footerStart ? styles[\"footer-split\"] : \"\"}`}>\n                {footerStart && <div>{footerStart}</div>}\n                {footer && <div className={styles[\"footer-end\"]}>{footer}</div>}\n              </div>\n            )}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AA+BA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;;;;;;;AAUV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,aACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;KACxD,UAAU,gBACV,qBAAC,OAAD;KAAK,WAAW,GAAGA,sBAAO,OAAO,GAAG,cAAcA,sBAAO,kBAAkB;eAA3E,CACG,eAAe,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,EACvC,UAAU,oBAAC,OAAD;MAAK,WAAWA,sBAAO;gBAAgB;MAAa,CAAA,CAC3D;;IAES;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}

package/dist/dialog/parts.js

@@ -1,6 +1,6 @@
 import dialog_module_default from "./dialog.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/dialog/parts.tsx
 /**

package/dist/drawer/drawer.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactElement, ReactNode } from "react";
 import styles from "./drawer.module.css";
 
 //#region src/drawer/drawer.d.ts
@@ -9,18 +9,29 @@ interface DrawerProps {
   trigger?: ReactElement;
   /** Which edge the drawer slides in from. @default "right" */
   side?: DrawerSide;
+  /** Heading rendered at the top of the drawer. */
   title?: ReactNode;
+  /** Supplementary text below the title. */
   description?: ReactNode;
   children?: ReactNode;
+  /** Content rendered at the bottom of the drawer. */
   footer?: ReactNode;
   /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */
   handleBar?: boolean;
   /** Show a close button in the top-right corner. @default true */
   dismissible?: boolean;
+  /** Controlled open state. */
   open?: boolean;
+  /** Whether the drawer is initially open (uncontrolled). */
   defaultOpen?: boolean;
+  /** Called when the drawer opens or closes. */
   onOpenChange?: (open: boolean) => void;
 }
+/**
+ * A panel that slides in from any edge of the screen with swipe-to-dismiss
+ * gestures. Supports left, right, top, and bottom orientations with an
+ * optional drag handle bar.
+ */
 declare function Drawer({
   trigger,
   side,

package/dist/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","names":[],"sources":["../../src/drawer/drawer.tsx"],"mappings":";;;;;KAIY,UAAA;AAAA,UAEK,WAAA;;EAEf,OAAA,GAAU,YAAA;EAJU;EAMpB,IAAA,GAAO,UAAA;EACP,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,SAAA;;EAET,SAAA;EANO;EAQP,WAAA;EAEA,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA;AAAA;AAAA,iBA2BF,MAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"drawer.d.ts","names":[],"sources":["../../src/drawer/drawer.tsx"],"mappings":";;;;;KAIY,UAAA;AAAA,UAEK,WAAA;;EAEf,OAAA,GAAU,YAAA;EAJU;EAMpB,IAAA,GAAO,UAAA;EANa;EAQpB,KAAA,GAAQ,SAAA;EANO;EAQf,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EAPD;EASV,MAAA,GAAS,SAAA;EALD;EAOR,SAAA;EAJW;EAMX,WAAA;EAJkB;EAOlB,IAAA;EAhBA;EAkBA,WAAA;EAhBA;EAkBA,YAAA,IAAgB,IAAA;AAAA;;;;;;iBAgCF,MAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/drawer/drawer.js

@@ -31,6 +31,11 @@ const POPUP_CLASS = {
 	bottom: drawer_module_default["popup-bottom"],
 	top: drawer_module_default["popup-top"]
 };
+/**
+* A panel that slides in from any edge of the screen with swipe-to-dismiss
+* gestures. Supports left, right, top, and bottom orientations with an
+* optional drag handle bar.
+*/
 function Drawer$1({ trigger, side = "right", title, description, children, footer, handleBar, dismissible = true, onOpenChange, ...props }) {
 	const showHandle = handleBar ?? (side === "bottom" || side === "top");
 	const popupClass = `${drawer_module_default.popup} ${POPUP_CLASS[side]}`;

package/dist/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["styles","Drawer","BaseDrawer"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport styles from \"./drawer.module.css\";\n\nexport type DrawerSide = \"left\" | \"right\" | \"bottom\" | \"top\";\n\nexport interface DrawerProps {\n  /** Element that triggers the drawer — rendered as a `Drawer.Trigger`. */\n  trigger?: ReactElement;\n  /** Which edge the drawer slides in from. @default \"right\" */\n  side?: DrawerSide;\n  title?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  footer?: ReactNode;\n  /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */\n  handleBar?: boolean;\n  /** Show a close button in the top-right corner. @default true */\n  dismissible?: boolean;\n\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden>\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/** Map side → swipe direction for dismiss gesture */\nconst SWIPE_DIR: Record<DrawerSide, \"left\" | \"right\" | \"up\" | \"down\"> = {\n  right: \"right\",\n  left: \"left\",\n  bottom: \"down\",\n  top: \"up\",\n};\n\n/** Popup CSS classes by side */\nconst POPUP_CLASS: Record<DrawerSide, string> = {\n  right: styles[\"popup-right\"] as string,\n  left: styles[\"popup-left\"] as string,\n  bottom: styles[\"popup-bottom\"] as string,\n  top: styles[\"popup-top\"] as string,\n};\n\nexport function Drawer({\n  trigger,\n  side = \"right\",\n  title,\n  description,\n  children,\n  footer,\n  handleBar,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DrawerProps) {\n  const showHandle = handleBar ?? (side === \"bottom\" || side === \"top\");\n  const popupClass = `${styles.popup} ${POPUP_CLASS[side]}`;\n\n  return (\n    <BaseDrawer.Root swipeDirection={SWIPE_DIR[side]} onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDrawer.Trigger render={trigger} />}\n      <BaseDrawer.Portal>\n        <BaseDrawer.Backdrop className={styles.backdrop} />\n        <BaseDrawer.Viewport className={styles.viewport} data-side={side}>\n          <BaseDrawer.Popup className={popupClass} style={{ position: \"relative\" }}>\n            {/* handle bar sits above content in bottom drawers */}\n            {showHandle && side !== \"top\" && <div className={styles[\"handle-bar\"]} aria-hidden />}\n\n            <BaseDrawer.Content className={styles.content}>\n              {title && <BaseDrawer.Title className={styles.title}>{title}</BaseDrawer.Title>}\n              {description && <BaseDrawer.Description className={styles.description}>{description}</BaseDrawer.Description>}\n              {children}\n              {footer && <div className={styles.footer}>{footer}</div>}\n            </BaseDrawer.Content>\n\n            {/* handle bar sits below content in top drawers */}\n            {showHandle && side === \"top\" && <div className={styles[\"handle-bar\"]} aria-hidden />}\n\n            {dismissible && (\n              <BaseDrawer.Close className={styles.close} aria-label=\"Close drawer\">\n                <XIcon />\n              </BaseDrawer.Close>\n            )}\n          </BaseDrawer.Popup>\n        </BaseDrawer.Viewport>\n      </BaseDrawer.Portal>\n    </BaseDrawer.Root>\n  );\n}\nexport { styles as DrawerStyles };\n"],"mappings":";;;;AAyBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAC1D,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;;AAKV,MAAM,YAAkE;CACtE,OAAO;CACP,MAAM;CACN,QAAQ;CACR,KAAK;CACN;;AAGD,MAAM,cAA0C;CAC9C,OAAOA,sBAAO;CACd,MAAMA,sBAAO;CACb,QAAQA,sBAAO;CACf,KAAKA,sBAAO;CACb;AAED,SAAgBC,SAAO,EACrB,SACA,OAAO,SACP,OACA,aACA,UACA,QACA,WACA,cAAc,MACd,cACA,GAAG,SACW;CACd,MAAM,aAAa,cAAc,SAAS,YAAY,SAAS;CAC/D,MAAM,aAAa,GAAGD,sBAAO,MAAM,GAAG,YAAY;AAElD,QACE,qBAACE,OAAW,MAAZ;EAAiB,gBAAgB,UAAU;EAAqB;EAAuB,GAAI;YAA3F,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWF,sBAAO,UAAY,CAAA,EACnD,oBAACE,OAAW,UAAZ;GAAqB,WAAWF,sBAAO;GAAU,aAAW;aAC1D,qBAACE,OAAW,OAAZ;IAAkB,WAAW;IAAY,OAAO,EAAE,UAAU,YAAY;cAAxE;KAEG,cAAc,SAAS,SAAS,oBAAC,OAAD;MAAK,WAAWF,sBAAO;MAAe,eAAA;MAAc,CAAA;KAErF,qBAACE,OAAW,SAAZ;MAAoB,WAAWF,sBAAO;gBAAtC;OACG,SAAS,oBAACE,OAAW,OAAZ;QAAkB,WAAWF,sBAAO;kBAAQ;QAAyB,CAAA;OAC9E,eAAe,oBAACE,OAAW,aAAZ;QAAwB,WAAWF,sBAAO;kBAAc;QAAqC,CAAA;OAC5G;OACA,UAAU,oBAAC,OAAD;QAAK,WAAWA,sBAAO;kBAAS;QAAa,CAAA;OACrC;;KAGpB,cAAc,SAAS,SAAS,oBAAC,OAAD;MAAK,WAAWA,sBAAO;MAAe,eAAA;MAAc,CAAA;KAEpF,eACC,oBAACE,OAAW,OAAZ;MAAkB,WAAWF,sBAAO;MAAO,cAAW;gBACpD,oBAAC,OAAD,EAAS,CAAA;MACQ,CAAA;KAEJ;;GACC,CAAA,CACJ,EAAA,CAAA,CACJ"}
+{"version":3,"file":"drawer.js","names":["styles","Drawer","BaseDrawer"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport styles from \"./drawer.module.css\";\n\nexport type DrawerSide = \"left\" | \"right\" | \"bottom\" | \"top\";\n\nexport interface DrawerProps {\n  /** Element that triggers the drawer — rendered as a `Drawer.Trigger`. */\n  trigger?: ReactElement;\n  /** Which edge the drawer slides in from. @default \"right\" */\n  side?: DrawerSide;\n  /** Heading rendered at the top of the drawer. */\n  title?: ReactNode;\n  /** Supplementary text below the title. */\n  description?: ReactNode;\n  children?: ReactNode;\n  /** Content rendered at the bottom of the drawer. */\n  footer?: ReactNode;\n  /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */\n  handleBar?: boolean;\n  /** Show a close button in the top-right corner. @default true */\n  dismissible?: boolean;\n\n  /** Controlled open state. */\n  open?: boolean;\n  /** Whether the drawer is initially open (uncontrolled). */\n  defaultOpen?: boolean;\n  /** Called when the drawer opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nfunction XIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden>\n      <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/** Map side → swipe direction for dismiss gesture */\nconst SWIPE_DIR: Record<DrawerSide, \"left\" | \"right\" | \"up\" | \"down\"> = {\n  right: \"right\",\n  left: \"left\",\n  bottom: \"down\",\n  top: \"up\",\n};\n\n/** Popup CSS classes by side */\nconst POPUP_CLASS: Record<DrawerSide, string> = {\n  right: styles[\"popup-right\"] as string,\n  left: styles[\"popup-left\"] as string,\n  bottom: styles[\"popup-bottom\"] as string,\n  top: styles[\"popup-top\"] as string,\n};\n\n/**\n * A panel that slides in from any edge of the screen with swipe-to-dismiss\n * gestures. Supports left, right, top, and bottom orientations with an\n * optional drag handle bar.\n */\nexport function Drawer({\n  trigger,\n  side = \"right\",\n  title,\n  description,\n  children,\n  footer,\n  handleBar,\n  dismissible = true,\n  onOpenChange,\n  ...props\n}: DrawerProps) {\n  const showHandle = handleBar ?? (side === \"bottom\" || side === \"top\");\n  const popupClass = `${styles.popup} ${POPUP_CLASS[side]}`;\n\n  return (\n    <BaseDrawer.Root swipeDirection={SWIPE_DIR[side]} onOpenChange={onOpenChange as never} {...props}>\n      {trigger && <BaseDrawer.Trigger render={trigger} />}\n      <BaseDrawer.Portal>\n        <BaseDrawer.Backdrop className={styles.backdrop} />\n        <BaseDrawer.Viewport className={styles.viewport} data-side={side}>\n          <BaseDrawer.Popup className={popupClass} style={{ position: \"relative\" }}>\n            {/* handle bar sits above content in bottom drawers */}\n            {showHandle && side !== \"top\" && <div className={styles[\"handle-bar\"]} aria-hidden />}\n\n            <BaseDrawer.Content className={styles.content}>\n              {title && <BaseDrawer.Title className={styles.title}>{title}</BaseDrawer.Title>}\n              {description && <BaseDrawer.Description className={styles.description}>{description}</BaseDrawer.Description>}\n              {children}\n              {footer && <div className={styles.footer}>{footer}</div>}\n            </BaseDrawer.Content>\n\n            {/* handle bar sits below content in top drawers */}\n            {showHandle && side === \"top\" && <div className={styles[\"handle-bar\"]} aria-hidden />}\n\n            {dismissible && (\n              <BaseDrawer.Close className={styles.close} aria-label=\"Close drawer\">\n                <XIcon />\n              </BaseDrawer.Close>\n            )}\n          </BaseDrawer.Popup>\n        </BaseDrawer.Viewport>\n      </BaseDrawer.Portal>\n    </BaseDrawer.Root>\n  );\n}\nexport { styles as DrawerStyles };\n"],"mappings":";;;;AA+BA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAC1D,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;;AAKV,MAAM,YAAkE;CACtE,OAAO;CACP,MAAM;CACN,QAAQ;CACR,KAAK;CACN;;AAGD,MAAM,cAA0C;CAC9C,OAAOA,sBAAO;CACd,MAAMA,sBAAO;CACb,QAAQA,sBAAO;CACf,KAAKA,sBAAO;CACb;;;;;;AAOD,SAAgBC,SAAO,EACrB,SACA,OAAO,SACP,OACA,aACA,UACA,QACA,WACA,cAAc,MACd,cACA,GAAG,SACW;CACd,MAAM,aAAa,cAAc,SAAS,YAAY,SAAS;CAC/D,MAAM,aAAa,GAAGD,sBAAO,MAAM,GAAG,YAAY;AAElD,QACE,qBAACE,OAAW,MAAZ;EAAiB,gBAAgB,UAAU;EAAqB;EAAuB,GAAI;YAA3F,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWF,sBAAO,UAAY,CAAA,EACnD,oBAACE,OAAW,UAAZ;GAAqB,WAAWF,sBAAO;GAAU,aAAW;aAC1D,qBAACE,OAAW,OAAZ;IAAkB,WAAW;IAAY,OAAO,EAAE,UAAU,YAAY;cAAxE;KAEG,cAAc,SAAS,SAAS,oBAAC,OAAD;MAAK,WAAWF,sBAAO;MAAe,eAAA;MAAc,CAAA;KAErF,qBAACE,OAAW,SAAZ;MAAoB,WAAWF,sBAAO;gBAAtC;OACG,SAAS,oBAACE,OAAW,OAAZ;QAAkB,WAAWF,sBAAO;kBAAQ;QAAyB,CAAA;OAC9E,eAAe,oBAACE,OAAW,aAAZ;QAAwB,WAAWF,sBAAO;kBAAc;QAAqC,CAAA;OAC5G;OACA,UAAU,oBAAC,OAAD;QAAK,WAAWA,sBAAO;kBAAS;QAAa,CAAA;OACrC;;KAGpB,cAAc,SAAS,SAAS,oBAAC,OAAD;MAAK,WAAWA,sBAAO;MAAe,eAAA;MAAc,CAAA;KAEpF,eACC,oBAACE,OAAW,OAAZ;MAAkB,WAAWF,sBAAO;MAAO,cAAW;gBACpD,oBAAC,OAAD,EAAS,CAAA;MACQ,CAAA;KAEJ;;GACC,CAAA,CACJ,EAAA,CAAA,CACJ"}