@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.4

package/dist/brand-loader-D_iuoBVZ.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { c as cn } from './cn-BakJzhuv.js';
+
+import './brand-loader.css';const sizeClasses = {
+  sm: "w-6",
+  md: "w-8",
+  lg: "w-10"
+};
+const strokeBySize = {
+  sm: 2.2,
+  md: 2.5,
+  lg: 2.9
+};
+const bubbleBySize = {
+  sm: 4.3,
+  md: 4.4,
+  lg: 4.498
+};
+function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loading" }) {
+  const reactId = useId();
+  const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const r = bubbleBySize[size];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      className: cn("brand-loader inline-block text-neutral6", sizeClasses[size], className),
+      style: { ["--brand-loader-stroke"]: strokeBySize[size] },
+      children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 34 21", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-5%", y: "-5%", width: "110%", height: "110%", children: [
+          /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.9" }),
+          /* @__PURE__ */ jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 11 -4.3" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("g", { filter: `url(#${filterId})`, children: [
+          /* @__PURE__ */ jsx("line", { className: "brand-loader-ln23", x1: "10.387", y1: "4.498", x2: "16.899", y2: "16.192" }),
+          /* @__PURE__ */ jsx("line", { className: "brand-loader-ln34", x1: "16.899", y1: "16.192", x2: "22.815", y2: "4.56" }),
+          /* @__PURE__ */ jsx("line", { className: "brand-loader-ln45", x1: "22.815", y1: "4.56", x2: "28.57", y2: "16.192" }),
+          /* @__PURE__ */ jsx("circle", { className: "brand-loader-b1", cx: "4.498", cy: "16.192", r }),
+          /* @__PURE__ */ jsx("circle", { className: "brand-loader-b2", cx: "10.387", cy: "4.498", r }),
+          /* @__PURE__ */ jsx("circle", { className: "brand-loader-b3", cx: "16.899", cy: "16.192", r }),
+          /* @__PURE__ */ jsx("circle", { className: "brand-loader-b4", cx: "22.815", cy: "4.56", r }),
+          /* @__PURE__ */ jsx("circle", { className: "brand-loader-b5", cx: "28.57", cy: "16.192", r })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { BrandLoader as B };
+//# sourceMappingURL=brand-loader-D_iuoBVZ.js.map

package/dist/brand-loader-D_iuoBVZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-loader-D_iuoBVZ.js","sources":["../src/ds/components/BrandLoader/brand-loader.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport './brand-loader.css';\n\nexport type BrandLoaderProps = {\n  className?: string;\n  size?: 'sm' | 'md' | 'lg';\n  'aria-label'?: string;\n};\n\nconst sizeClasses = {\n  sm: 'w-6',\n  md: 'w-8',\n  lg: 'w-10',\n};\n\n/** Thinner strokes on small sizes so ridges don't visually dominate the disks. */\nconst strokeBySize = {\n  sm: 2.2,\n  md: 2.5,\n  lg: 2.9,\n};\n\n/** Slightly smaller bubbles on small sizes so disks don't swallow the ridges at low pixel counts. */\nconst bubbleBySize = {\n  sm: 4.3,\n  md: 4.4,\n  lg: 4.498,\n};\n\nfunction BrandLoader({ className, size = 'md', 'aria-label': ariaLabel = 'Loading' }: BrandLoaderProps) {\n  const reactId = useId();\n  const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, '')}`;\n  const r = bubbleBySize[size];\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={ariaLabel}\n      className={cn('brand-loader inline-block text-neutral6', sizeClasses[size], className)}\n      style={{ ['--brand-loader-stroke' as string]: strokeBySize[size] }}\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 34 21\" aria-hidden=\"true\">\n        <defs>\n          {/* Gooey merge: blur + sharp alpha threshold fuses overlapping shapes into a single blob. */}\n          <filter id={filterId} x=\"-5%\" y=\"-5%\" width=\"110%\" height=\"110%\">\n            {/* stdDeviation: blur radius. Larger = bigger fillet/roundness at line↔disk junction. */}\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"0.9\" />\n            {/*\n             * outAlpha = M·α − K. Opaque where α ≥ K/M. Transition band = 1/M.\n             * M=11, K=4.3 → cutoff 0.391, band 0.091 (soft, rounded edge, big fillet).\n             */}\n            <feColorMatrix values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 11 -4.3\" />\n          </filter>\n        </defs>\n        <g filter={`url(#${filterId})`}>\n          <line className=\"brand-loader-ln23\" x1=\"10.387\" y1=\"4.498\" x2=\"16.899\" y2=\"16.192\" />\n          <line className=\"brand-loader-ln34\" x1=\"16.899\" y1=\"16.192\" x2=\"22.815\" y2=\"4.56\" />\n          <line className=\"brand-loader-ln45\" x1=\"22.815\" y1=\"4.56\" x2=\"28.57\" y2=\"16.192\" />\n          <circle className=\"brand-loader-b1\" cx=\"4.498\" cy=\"16.192\" r={r} />\n          <circle className=\"brand-loader-b2\" cx=\"10.387\" cy=\"4.498\" r={r} />\n          <circle className=\"brand-loader-b3\" cx=\"16.899\" cy=\"16.192\" r={r} />\n          <circle className=\"brand-loader-b4\" cx=\"22.815\" cy=\"4.56\" r={r} />\n          <circle className=\"brand-loader-b5\" cx=\"28.57\" cy=\"16.192\" r={r} />\n        </g>\n      </svg>\n    </div>\n  );\n}\n\nexport { BrandLoader };\n"],"names":[],"mappings":"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"}

package/dist/buttons-group-Cq0bhJ9W.cjs

@@ -0,0 +1,185 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const index = require('./index-C-Lt4Bx_.cjs');
+const React = require('react');
+const controlSize = require('./control-size-D67C0kPZ.cjs');
+const utils_cn = require('./cn-vA5sWo9W.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);
+
+const ButtonsGroupOrientationContext = React__namespace.createContext("horizontal");
+const buttonsGroupVariants = index.cva(
+  // Lift the hovered/focused segment so its full border paints over the collapsed seam (else a
+  // neighbour clips a side / the seam ignores the active colour). Use `:focus-visible`, NOT
+  // `:focus-within`: a mouse click leaves a plain `:focus` on a button, which would otherwise
+  // keep its seam border highlighted until blur. `:has(:focus-visible)` covers a nested
+  // focusable (the <input> inside an InputGroup); text inputs match :focus-visible on click too,
+  // which is the wanted behaviour for a field.
+  utils_cn.cn(
+    "flex",
+    "[&>*:hover]:relative [&>*:hover]:z-10",
+    "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10",
+    "[&>*:has(:focus-visible)]:relative [&>*:has(:focus-visible)]:z-10"
+  ),
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row items-center",
+        vertical: "flex-col items-stretch"
+      },
+      spacing: {
+        default: "gap-2",
+        close: "gap-0"
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        spacing: "close",
+        // Flatten inner corners. A segment rounds its right edge off having a *real* segment
+        // somewhere after it (general sibling `~`, not `:not(:last-child)` and not adjacent
+        // `+`). This survives non-segment children that frameworks inject between/around the
+        // real ones: Base UI's trailing `<input aria-hidden>` (Select), and the visually
+        // -hidden focus guards (`[data-base-ui-focus-guard]`) + positioner anchor (`[aria-owns]`)
+        // a Menu/Popover inserts while OPEN — without this a DropdownMenu split-button seam
+        // breaks the moment the menu opens. The same ignore-list is applied to every seam rule.
+        className: utils_cn.cn(
+          "[&>*:has(~_*:not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]))]:rounded-r-none",
+          "[&>*:not(:first-child):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns])]:rounded-l-none",
+          // One-line seam: `-ml-px` overlaps adjacent borders onto the same pixel. Filled
+          // segments (opaque bg: default/primary buttons, the text chip) keep their own
+          // border — the bg hides the neighbour's. Transparent/outline segments null their
+          // left border at rest (so the neighbour's shows without doubling) and reveal it on
+          // hover / keyboard-focus, where the z-10 lift paints the complete border on top.
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child)]:-ml-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-l-transparent",
+          // `primary` is filled but borderless — give it (only) an inset-shadow divider.
+          "[&>[data-variant=primary]:not([aria-hidden=true]):not(:first-child)]:shadow-[inset_1px_0_0_0_var(--color-border1)]",
+          // Animate only colour/bg so the seam + ring snap (no fade desynced from the z-10 drop).
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true])]:transition-[color,background-color]",
+          // Group owns sizing (no consumer width classes): fill on flex/InputGroup/input,
+          // content-width on a Select trigger (descendant rule beats the trigger's `w-full`).
+          "[&>[data-slot=select-trigger]]:w-fit [&>[data-slot=select-trigger]]:flex-none",
+          "[&>input]:flex-1"
+        )
+      },
+      {
+        orientation: "vertical",
+        spacing: "close",
+        // Children are capsules (rounded-full); re-round the outer ends to rounded-xl and
+        // flatten the touching ones. Unlike the horizontal block, these use plain structural
+        // selectors (no aria-hidden / data-base-ui-focus-guard / aria-owns ignore-list): vertical
+        // close-spacing is only used with plain buttons, so it never hosts a Select/DropdownMenu
+        // that injects guard siblings. Mirror the horizontal ignore-list here if one ever does.
+        className: utils_cn.cn(
+          "[&>*:not(:last-child)]:rounded-b-none",
+          "[&>*:not(:first-child)]:rounded-t-none",
+          "[&>:first-child]:rounded-t-xl",
+          "[&>:last-child]:rounded-b-xl",
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-t-transparent",
+          "[&>[data-variant=primary]:not(:first-child)]:shadow-[inset_0_1px_0_0_var(--color-border1)]",
+          "[&>*:not([data-slot=buttons-group-separator])]:transition-[color,background-color]"
+        )
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      spacing: "default"
+    }
+  }
+);
+const ButtonsGroup = React__namespace.forwardRef(
+  ({ children, className, orientation = "horizontal", spacing = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: utils_cn.cn(buttonsGroupVariants({ orientation, spacing }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React__namespace.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React__namespace.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: utils_cn.cn("self-stretch bg-border1", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = index.cva(
+  utils_cn.cn(
+    "inline-flex items-center justify-center bg-surface3 border border-border1 text-neutral5 select-none",
+    "rounded-full gap-[.75em] px-[1em] whitespace-nowrap shrink-0",
+    "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        xs: controlSize.controlSizeClasses.xs,
+        sm: controlSize.controlSizeClasses.sm,
+        md: controlSize.controlSizeClasses.md,
+        default: controlSize.controlSizeClasses.default,
+        lg: controlSize.controlSizeClasses.lg
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const ButtonsGroupText = React__namespace.forwardRef(
+  ({ className, size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: utils_cn.cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+exports.ButtonsGroup = ButtonsGroup;
+exports.ButtonsGroupSeparator = ButtonsGroupSeparator;
+exports.ButtonsGroupText = ButtonsGroupText;
+exports.buttonsGroupVariants = buttonsGroupVariants;
+//# sourceMappingURL=buttons-group-Cq0bhJ9W.cjs.map

package/dist/buttons-group-Cq0bhJ9W.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-Cq0bhJ9W.cjs","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst ButtonsGroupOrientationContext = React.createContext<Orientation>('horizontal');\n\nconst buttonsGroupVariants = cva(\n  // Lift the hovered/focused segment so its full border paints over the collapsed seam (else a\n  // neighbour clips a side / the seam ignores the active colour). Use `:focus-visible`, NOT\n  // `:focus-within`: a mouse click leaves a plain `:focus` on a button, which would otherwise\n  // keep its seam border highlighted until blur. `:has(:focus-visible)` covers a nested\n  // focusable (the <input> inside an InputGroup); text inputs match :focus-visible on click too,\n  // which is the wanted behaviour for a field.\n  cn(\n    'flex',\n    '[&>*:hover]:relative [&>*:hover]:z-10',\n    '[&>*:focus-visible]:relative [&>*:focus-visible]:z-10',\n    '[&>*:has(:focus-visible)]:relative [&>*:has(:focus-visible)]:z-10',\n  ),\n  {\n    variants: {\n      orientation: {\n        horizontal: 'flex-row items-center',\n        vertical: 'flex-col items-stretch',\n      },\n      spacing: {\n        default: 'gap-2',\n        close: 'gap-0',\n      },\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        spacing: 'close',\n        // Flatten inner corners. A segment rounds its right edge off having a *real* segment\n        // somewhere after it (general sibling `~`, not `:not(:last-child)` and not adjacent\n        // `+`). This survives non-segment children that frameworks inject between/around the\n        // real ones: Base UI's trailing `<input aria-hidden>` (Select), and the visually\n        // -hidden focus guards (`[data-base-ui-focus-guard]`) + positioner anchor (`[aria-owns]`)\n        // a Menu/Popover inserts while OPEN — without this a DropdownMenu split-button seam\n        // breaks the moment the menu opens. The same ignore-list is applied to every seam rule.\n        className: cn(\n          '[&>*:has(~_*:not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]))]:rounded-r-none',\n          '[&>*:not(:first-child):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns])]:rounded-l-none',\n          // One-line seam: `-ml-px` overlaps adjacent borders onto the same pixel. Filled\n          // segments (opaque bg: default/primary buttons, the text chip) keep their own\n          // border — the bg hides the neighbour's. Transparent/outline segments null their\n          // left border at rest (so the neighbour's shows without doubling) and reveal it on\n          // hover / keyboard-focus, where the z-10 lift paints the complete border on top.\n          '[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child)]:-ml-px',\n          '[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-l-transparent',\n          // `primary` is filled but borderless — give it (only) an inset-shadow divider.\n          '[&>[data-variant=primary]:not([aria-hidden=true]):not(:first-child)]:shadow-[inset_1px_0_0_0_var(--color-border1)]',\n          // Animate only colour/bg so the seam + ring snap (no fade desynced from the z-10 drop).\n          '[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true])]:transition-[color,background-color]',\n          // Group owns sizing (no consumer width classes): fill on flex/InputGroup/input,\n          // content-width on a Select trigger (descendant rule beats the trigger's `w-full`).\n          '[&>[data-slot=select-trigger]]:w-fit [&>[data-slot=select-trigger]]:flex-none',\n          '[&>input]:flex-1',\n        ),\n      },\n      {\n        orientation: 'vertical',\n        spacing: 'close',\n        // Children are capsules (rounded-full); re-round the outer ends to rounded-xl and\n        // flatten the touching ones. Unlike the horizontal block, these use plain structural\n        // selectors (no aria-hidden / data-base-ui-focus-guard / aria-owns ignore-list): vertical\n        // close-spacing is only used with plain buttons, so it never hosts a Select/DropdownMenu\n        // that injects guard siblings. Mirror the horizontal ignore-list here if one ever does.\n        className: cn(\n          '[&>*:not(:last-child)]:rounded-b-none',\n          '[&>*:not(:first-child)]:rounded-t-none',\n          '[&>:first-child]:rounded-t-xl',\n          '[&>:last-child]:rounded-b-xl',\n          '[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px',\n          '[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-t-transparent',\n          '[&>[data-variant=primary]:not(:first-child)]:shadow-[inset_0_1px_0_0_var(--color-border1)]',\n          '[&>*:not([data-slot=buttons-group-separator])]:transition-[color,background-color]',\n        ),\n      },\n    ],\n    defaultVariants: {\n      orientation: 'horizontal',\n      spacing: 'default',\n    },\n  },\n);\n\n// Derive variant types from cva (single source of truth) and strip `null` that cva injects.\ntype ButtonsGroupVariantsProps = VariantProps<typeof buttonsGroupVariants>;\nexport type ButtonsGroupSpacing = NonNullable<ButtonsGroupVariantsProps['spacing']>;\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n  spacing?: ButtonsGroupSpacing;\n};\n\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', spacing = 'default', ...props }, ref) => {\n    return (\n      <ButtonsGroupOrientationContext.Provider value={orientation}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          className={cn(buttonsGroupVariants({ orientation, spacing }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonsGroupOrientationContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\nexport type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroupSeparator = React.forwardRef<HTMLDivElement, ButtonsGroupSeparatorProps>(\n  ({ className, orientation, ...props }, ref) => {\n    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);\n    // Separator runs perpendicular to the group flow by default.\n    const resolved = orientation ?? (parentOrientation === 'vertical' ? 'horizontal' : 'vertical');\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={resolved}\n        data-slot=\"buttons-group-separator\"\n        className={cn('self-stretch bg-border1', resolved === 'vertical' ? 'w-px' : 'h-px', className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupSeparator.displayName = 'ButtonsGroupSeparator';\n\nconst buttonsGroupTextVariants = cva(\n  cn(\n    'inline-flex items-center justify-center bg-surface3 border border-border1 text-neutral5 select-none',\n    'rounded-full gap-[.75em] px-[1em] whitespace-nowrap shrink-0',\n    '[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50',\n  ),\n  {\n    variants: {\n      size: {\n        xs: controlSizeClasses.xs,\n        sm: controlSizeClasses.sm,\n        md: controlSizeClasses.md,\n        default: controlSizeClasses.default,\n        lg: controlSizeClasses.lg,\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, size = 'default', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"buttons-group-text\"\n        className={cn(buttonsGroupTextVariants({ size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n\nexport { buttonsGroupVariants };\n"],"names":["React","cva","cn","jsx","controlSizeClasses"],"mappings":"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"}

package/dist/buttons-group-DoY6vWNX.js

@@ -0,0 +1,161 @@
+import { jsx } from 'react/jsx-runtime';
+import { c as cva } from './index-CSm06eOE.js';
+import * as React from 'react';
+import { a as controlSizeClasses } from './control-size-BdDLgGX4.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const ButtonsGroupOrientationContext = React.createContext("horizontal");
+const buttonsGroupVariants = cva(
+  // Lift the hovered/focused segment so its full border paints over the collapsed seam (else a
+  // neighbour clips a side / the seam ignores the active colour). Use `:focus-visible`, NOT
+  // `:focus-within`: a mouse click leaves a plain `:focus` on a button, which would otherwise
+  // keep its seam border highlighted until blur. `:has(:focus-visible)` covers a nested
+  // focusable (the <input> inside an InputGroup); text inputs match :focus-visible on click too,
+  // which is the wanted behaviour for a field.
+  cn(
+    "flex",
+    "[&>*:hover]:relative [&>*:hover]:z-10",
+    "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10",
+    "[&>*:has(:focus-visible)]:relative [&>*:has(:focus-visible)]:z-10"
+  ),
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row items-center",
+        vertical: "flex-col items-stretch"
+      },
+      spacing: {
+        default: "gap-2",
+        close: "gap-0"
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        spacing: "close",
+        // Flatten inner corners. A segment rounds its right edge off having a *real* segment
+        // somewhere after it (general sibling `~`, not `:not(:last-child)` and not adjacent
+        // `+`). This survives non-segment children that frameworks inject between/around the
+        // real ones: Base UI's trailing `<input aria-hidden>` (Select), and the visually
+        // -hidden focus guards (`[data-base-ui-focus-guard]`) + positioner anchor (`[aria-owns]`)
+        // a Menu/Popover inserts while OPEN — without this a DropdownMenu split-button seam
+        // breaks the moment the menu opens. The same ignore-list is applied to every seam rule.
+        className: cn(
+          "[&>*:has(~_*:not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]))]:rounded-r-none",
+          "[&>*:not(:first-child):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns])]:rounded-l-none",
+          // One-line seam: `-ml-px` overlaps adjacent borders onto the same pixel. Filled
+          // segments (opaque bg: default/primary buttons, the text chip) keep their own
+          // border — the bg hides the neighbour's. Transparent/outline segments null their
+          // left border at rest (so the neighbour's shows without doubling) and reveal it on
+          // hover / keyboard-focus, where the z-10 lift paints the complete border on top.
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child)]:-ml-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-l-transparent",
+          // `primary` is filled but borderless — give it (only) an inset-shadow divider.
+          "[&>[data-variant=primary]:not([aria-hidden=true]):not(:first-child)]:shadow-[inset_1px_0_0_0_var(--color-border1)]",
+          // Animate only colour/bg so the seam + ring snap (no fade desynced from the z-10 drop).
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true])]:transition-[color,background-color]",
+          // Group owns sizing (no consumer width classes): fill on flex/InputGroup/input,
+          // content-width on a Select trigger (descendant rule beats the trigger's `w-full`).
+          "[&>[data-slot=select-trigger]]:w-fit [&>[data-slot=select-trigger]]:flex-none",
+          "[&>input]:flex-1"
+        )
+      },
+      {
+        orientation: "vertical",
+        spacing: "close",
+        // Children are capsules (rounded-full); re-round the outer ends to rounded-xl and
+        // flatten the touching ones. Unlike the horizontal block, these use plain structural
+        // selectors (no aria-hidden / data-base-ui-focus-guard / aria-owns ignore-list): vertical
+        // close-spacing is only used with plain buttons, so it never hosts a Select/DropdownMenu
+        // that injects guard siblings. Mirror the horizontal ignore-list here if one ever does.
+        className: cn(
+          "[&>*:not(:last-child)]:rounded-b-none",
+          "[&>*:not(:first-child)]:rounded-t-none",
+          "[&>:first-child]:rounded-t-xl",
+          "[&>:last-child]:rounded-b-xl",
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-t-transparent",
+          "[&>[data-variant=primary]:not(:first-child)]:shadow-[inset_0_1px_0_0_var(--color-border1)]",
+          "[&>*:not([data-slot=buttons-group-separator])]:transition-[color,background-color]"
+        )
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      spacing: "default"
+    }
+  }
+);
+const ButtonsGroup = React.forwardRef(
+  ({ children, className, orientation = "horizontal", spacing = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: cn(buttonsGroupVariants({ orientation, spacing }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: cn("self-stretch bg-border1", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = cva(
+  cn(
+    "inline-flex items-center justify-center bg-surface3 border border-border1 text-neutral5 select-none",
+    "rounded-full gap-[.75em] px-[1em] whitespace-nowrap shrink-0",
+    "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        xs: controlSizeClasses.xs,
+        sm: controlSizeClasses.sm,
+        md: controlSizeClasses.md,
+        default: controlSizeClasses.default,
+        lg: controlSizeClasses.lg
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const ButtonsGroupText = React.forwardRef(
+  ({ className, size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
+export { ButtonsGroup as B, ButtonsGroupSeparator as a, ButtonsGroupText as b, buttonsGroupVariants as c };
+//# sourceMappingURL=buttons-group-DoY6vWNX.js.map

package/dist/buttons-group-DoY6vWNX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-group-DoY6vWNX.js","sources":["../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nconst ButtonsGroupOrientationContext = React.createContext<Orientation>('horizontal');\n\nconst buttonsGroupVariants = cva(\n  // Lift the hovered/focused segment so its full border paints over the collapsed seam (else a\n  // neighbour clips a side / the seam ignores the active colour). Use `:focus-visible`, NOT\n  // `:focus-within`: a mouse click leaves a plain `:focus` on a button, which would otherwise\n  // keep its seam border highlighted until blur. `:has(:focus-visible)` covers a nested\n  // focusable (the <input> inside an InputGroup); text inputs match :focus-visible on click too,\n  // which is the wanted behaviour for a field.\n  cn(\n    'flex',\n    '[&>*:hover]:relative [&>*:hover]:z-10',\n    '[&>*:focus-visible]:relative [&>*:focus-visible]:z-10',\n    '[&>*:has(:focus-visible)]:relative [&>*:has(:focus-visible)]:z-10',\n  ),\n  {\n    variants: {\n      orientation: {\n        horizontal: 'flex-row items-center',\n        vertical: 'flex-col items-stretch',\n      },\n      spacing: {\n        default: 'gap-2',\n        close: 'gap-0',\n      },\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        spacing: 'close',\n        // Flatten inner corners. A segment rounds its right edge off having a *real* segment\n        // somewhere after it (general sibling `~`, not `:not(:last-child)` and not adjacent\n        // `+`). This survives non-segment children that frameworks inject between/around the\n        // real ones: Base UI's trailing `<input aria-hidden>` (Select), and the visually\n        // -hidden focus guards (`[data-base-ui-focus-guard]`) + positioner anchor (`[aria-owns]`)\n        // a Menu/Popover inserts while OPEN — without this a DropdownMenu split-button seam\n        // breaks the moment the menu opens. The same ignore-list is applied to every seam rule.\n        className: cn(\n          '[&>*:has(~_*:not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]))]:rounded-r-none',\n          '[&>*:not(:first-child):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns])]:rounded-l-none',\n          // One-line seam: `-ml-px` overlaps adjacent borders onto the same pixel. Filled\n          // segments (opaque bg: default/primary buttons, the text chip) keep their own\n          // border — the bg hides the neighbour's. Transparent/outline segments null their\n          // left border at rest (so the neighbour's shows without doubling) and reveal it on\n          // hover / keyboard-focus, where the z-10 lift paints the complete border on top.\n          '[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child)]:-ml-px',\n          '[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-l-transparent',\n          // `primary` is filled but borderless — give it (only) an inset-shadow divider.\n          '[&>[data-variant=primary]:not([aria-hidden=true]):not(:first-child)]:shadow-[inset_1px_0_0_0_var(--color-border1)]',\n          // Animate only colour/bg so the seam + ring snap (no fade desynced from the z-10 drop).\n          '[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true])]:transition-[color,background-color]',\n          // Group owns sizing (no consumer width classes): fill on flex/InputGroup/input,\n          // content-width on a Select trigger (descendant rule beats the trigger's `w-full`).\n          '[&>[data-slot=select-trigger]]:w-fit [&>[data-slot=select-trigger]]:flex-none',\n          '[&>input]:flex-1',\n        ),\n      },\n      {\n        orientation: 'vertical',\n        spacing: 'close',\n        // Children are capsules (rounded-full); re-round the outer ends to rounded-xl and\n        // flatten the touching ones. Unlike the horizontal block, these use plain structural\n        // selectors (no aria-hidden / data-base-ui-focus-guard / aria-owns ignore-list): vertical\n        // close-spacing is only used with plain buttons, so it never hosts a Select/DropdownMenu\n        // that injects guard siblings. Mirror the horizontal ignore-list here if one ever does.\n        className: cn(\n          '[&>*:not(:last-child)]:rounded-b-none',\n          '[&>*:not(:first-child)]:rounded-t-none',\n          '[&>:first-child]:rounded-t-xl',\n          '[&>:last-child]:rounded-b-xl',\n          '[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px',\n          '[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-t-transparent',\n          '[&>[data-variant=primary]:not(:first-child)]:shadow-[inset_0_1px_0_0_var(--color-border1)]',\n          '[&>*:not([data-slot=buttons-group-separator])]:transition-[color,background-color]',\n        ),\n      },\n    ],\n    defaultVariants: {\n      orientation: 'horizontal',\n      spacing: 'default',\n    },\n  },\n);\n\n// Derive variant types from cva (single source of truth) and strip `null` that cva injects.\ntype ButtonsGroupVariantsProps = VariantProps<typeof buttonsGroupVariants>;\nexport type ButtonsGroupSpacing = NonNullable<ButtonsGroupVariantsProps['spacing']>;\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n  spacing?: ButtonsGroupSpacing;\n};\n\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', spacing = 'default', ...props }, ref) => {\n    return (\n      <ButtonsGroupOrientationContext.Provider value={orientation}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          className={cn(buttonsGroupVariants({ orientation, spacing }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonsGroupOrientationContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\nexport type ButtonsGroupSeparatorProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n};\n\nexport const ButtonsGroupSeparator = React.forwardRef<HTMLDivElement, ButtonsGroupSeparatorProps>(\n  ({ className, orientation, ...props }, ref) => {\n    const parentOrientation = React.useContext(ButtonsGroupOrientationContext);\n    // Separator runs perpendicular to the group flow by default.\n    const resolved = orientation ?? (parentOrientation === 'vertical' ? 'horizontal' : 'vertical');\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={resolved}\n        data-slot=\"buttons-group-separator\"\n        className={cn('self-stretch bg-border1', resolved === 'vertical' ? 'w-px' : 'h-px', className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupSeparator.displayName = 'ButtonsGroupSeparator';\n\nconst buttonsGroupTextVariants = cva(\n  cn(\n    'inline-flex items-center justify-center bg-surface3 border border-border1 text-neutral5 select-none',\n    'rounded-full gap-[.75em] px-[1em] whitespace-nowrap shrink-0',\n    '[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50',\n  ),\n  {\n    variants: {\n      size: {\n        xs: controlSizeClasses.xs,\n        sm: controlSizeClasses.sm,\n        md: controlSizeClasses.md,\n        default: controlSizeClasses.default,\n        lg: controlSizeClasses.lg,\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'> & {\n  size?: ControlSize;\n};\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, size = 'default', ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"buttons-group-text\"\n        className={cn(buttonsGroupTextVariants({ size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n\nexport { buttonsGroupVariants };\n"],"names":[],"mappings":"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"}

package/dist/checkbox-CYy10J_9.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Check, Minus } from 'lucide-react';
+import * as React from 'react';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const Checkbox = React.forwardRef(
+  ({ className, checked, indeterminate, ...props }, ref) => {
+    const isCheckedIndeterminate = checked === "indeterminate";
+    return /* @__PURE__ */ jsx(
+      Checkbox$1.Root,
+      {
+        ref,
+        checked: isCheckedIndeterminate ? false : checked,
+        indeterminate: indeterminate ?? isCheckedIndeterminate,
+        "data-slot": "checkbox",
+        className: cn(
+          "peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[0.3125rem]",
+          "border border-neutral6/[0.06] bg-neutral6/[0.12] text-surface1 outline-hidden",
+          transitions.all,
+          "hover:border-neutral6/[0.12] hover:bg-neutral6/[0.16]",
+          "active:scale-95 active:border-neutral6/[0.18] active:bg-neutral6/[0.18]",
+          "focus-visible:border-neutral5/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55",
+          "data-[checked]:border-neutral6 data-[checked]:bg-neutral6 data-[checked]:text-surface1",
+          "data-[indeterminate]:border-neutral6 data-[indeterminate]:bg-neutral6 data-[indeterminate]:text-surface1",
+          "data-[checked]:hover:border-neutral5 data-[checked]:hover:bg-neutral5",
+          "data-[indeterminate]:hover:border-neutral5 data-[indeterminate]:hover:bg-neutral5",
+          "data-[checked]:active:border-neutral4 data-[checked]:active:bg-neutral4",
+          "data-[indeterminate]:active:border-neutral4 data-[indeterminate]:active:bg-neutral4",
+          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches; target `data-disabled`.
+          "data-[disabled]:cursor-not-allowed data-[disabled]:border-neutral6/[0.38] data-[disabled]:bg-neutral6/[0.38] data-[disabled]:hover:border-neutral6/[0.38] data-[disabled]:hover:bg-neutral6/[0.38] data-[disabled]:active:scale-100",
+          "data-[disabled]:data-[checked]:border-neutral6/[0.38] data-[disabled]:data-[checked]:bg-neutral6/[0.38] data-[disabled]:data-[checked]:text-neutral6",
+          "data-[disabled]:data-[indeterminate]:border-neutral6/[0.38] data-[disabled]:data-[indeterminate]:bg-neutral6/[0.38] data-[disabled]:data-[indeterminate]:text-neutral6",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          Checkbox$1.Indicator,
+          {
+            keepMounted: true,
+            className: cn(
+              "group/checkbox-indicator flex items-center justify-center text-current",
+              "opacity-0 scale-75 transition-[opacity,transform] duration-200 ease-out-custom",
+              "data-[checked]:opacity-100 data-[checked]:scale-100",
+              "data-[indeterminate]:opacity-100 data-[indeterminate]:scale-100",
+              "data-[starting-style]:opacity-0 data-[starting-style]:scale-75",
+              "data-[ending-style]:opacity-0 data-[ending-style]:scale-75"
+            ),
+            children: /* @__PURE__ */ jsx(CheckboxIndicatorIcon, {})
+          }
+        )
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+function CheckboxIndicatorIcon() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Check,
+      {
+        className: cn(
+          "size-3 scale-95 stroke-[3.25] transition-[stroke-dashoffset,transform] duration-200 ease-out-custom",
+          // Lucide's check path is ~22.6 units long. Use a longer dash so the
+          // final checked mark is never clipped.
+          "[stroke-dasharray:28] [stroke-dashoffset:28]",
+          "group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]",
+          "group-data-[checked]/checkbox-indicator:scale-100",
+          "group-data-[indeterminate]/checkbox-indicator:hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Minus,
+      {
+        className: cn(
+          "hidden size-3 scale-95 stroke-[3.25] transition-transform duration-200 ease-out-custom",
+          "group-data-[indeterminate]/checkbox-indicator:block",
+          "group-data-[indeterminate]/checkbox-indicator:scale-100"
+        )
+      }
+    )
+  ] });
+}
+
+export { Checkbox as C };
+//# sourceMappingURL=checkbox-CYy10J_9.js.map

package/dist/checkbox-CYy10J_9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-CYy10J_9.js","sources":["../src/ds/components/Checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check, Minus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * Radix-style tri-state value for the controlled `checked` prop. Base UI splits\n * this into a strict `checked` boolean plus a separate `indeterminate` boolean —\n * we keep the Radix union here so existing consumers (which pass\n * `checked=\"indeterminate\"`) keep working without changes.\n *\n * `defaultChecked` is intentionally a plain boolean: an uncontrolled checkbox\n * cannot start \"indeterminate\" and then be toggled out of it (the indeterminate\n * state is inherently controlled), so `'indeterminate'` is not allowed there.\n */\nexport type CheckedState = boolean | 'indeterminate';\n\ntype CheckboxProps = Omit<CheckboxPrimitive.Root.Props, 'className' | 'checked'> & {\n  className?: string;\n  checked?: CheckedState;\n};\n\nconst Checkbox = React.forwardRef<HTMLSpanElement, CheckboxProps>(\n  ({ className, checked, indeterminate, ...props }, ref) => {\n    // Translate the Radix `'indeterminate'` sentinel into Base UI's dedicated\n    // `indeterminate` prop while leaving `checked` as a boolean.\n    const isCheckedIndeterminate = checked === 'indeterminate';\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        checked={isCheckedIndeterminate ? false : checked}\n        indeterminate={indeterminate ?? isCheckedIndeterminate}\n        data-slot=\"checkbox\"\n        className={cn(\n          'peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[0.3125rem]',\n          'border border-neutral6/[0.06] bg-neutral6/[0.12] text-surface1 outline-hidden',\n          transitions.all,\n          'hover:border-neutral6/[0.12] hover:bg-neutral6/[0.16]',\n          'active:scale-95 active:border-neutral6/[0.18] active:bg-neutral6/[0.18]',\n          'focus-visible:border-neutral5/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55',\n          'data-[checked]:border-neutral6 data-[checked]:bg-neutral6 data-[checked]:text-surface1',\n          'data-[indeterminate]:border-neutral6 data-[indeterminate]:bg-neutral6 data-[indeterminate]:text-surface1',\n          'data-[checked]:hover:border-neutral5 data-[checked]:hover:bg-neutral5',\n          'data-[indeterminate]:hover:border-neutral5 data-[indeterminate]:hover:bg-neutral5',\n          'data-[checked]:active:border-neutral4 data-[checked]:active:bg-neutral4',\n          'data-[indeterminate]:active:border-neutral4 data-[indeterminate]:active:bg-neutral4',\n          // Base UI's Checkbox.Root is a `<span>`, so `:disabled` never matches; target `data-disabled`.\n          'data-[disabled]:cursor-not-allowed data-[disabled]:border-neutral6/[0.38] data-[disabled]:bg-neutral6/[0.38] data-[disabled]:hover:border-neutral6/[0.38] data-[disabled]:hover:bg-neutral6/[0.38] data-[disabled]:active:scale-100',\n          'data-[disabled]:data-[checked]:border-neutral6/[0.38] data-[disabled]:data-[checked]:bg-neutral6/[0.38] data-[disabled]:data-[checked]:text-neutral6',\n          'data-[disabled]:data-[indeterminate]:border-neutral6/[0.38] data-[disabled]:data-[indeterminate]:bg-neutral6/[0.38] data-[disabled]:data-[indeterminate]:text-neutral6',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          keepMounted\n          className={cn(\n            'group/checkbox-indicator flex items-center justify-center text-current',\n            'opacity-0 scale-75 transition-[opacity,transform] duration-200 ease-out-custom',\n            'data-[checked]:opacity-100 data-[checked]:scale-100',\n            'data-[indeterminate]:opacity-100 data-[indeterminate]:scale-100',\n            'data-[starting-style]:opacity-0 data-[starting-style]:scale-75',\n            'data-[ending-style]:opacity-0 data-[ending-style]:scale-75',\n          )}\n        >\n          <CheckboxIndicatorIcon />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\n/**\n * Picks the checkmark vs. the dash based on the Indicator's data attributes.\n * The Indicator stays mounted so unchecked transitions can animate out cleanly.\n */\nfunction CheckboxIndicatorIcon() {\n  return (\n    <>\n      <Check\n        className={cn(\n          'size-3 scale-95 stroke-[3.25] transition-[stroke-dashoffset,transform] duration-200 ease-out-custom',\n          // Lucide's check path is ~22.6 units long. Use a longer dash so the\n          // final checked mark is never clipped.\n          '[stroke-dasharray:28] [stroke-dashoffset:28]',\n          'group-data-[checked]/checkbox-indicator:[stroke-dashoffset:0]',\n          'group-data-[checked]/checkbox-indicator:scale-100',\n          'group-data-[indeterminate]/checkbox-indicator:hidden',\n        )}\n      />\n      <Minus\n        className={cn(\n          'hidden size-3 scale-95 stroke-[3.25] transition-transform duration-200 ease-out-custom',\n          'group-data-[indeterminate]/checkbox-indicator:block',\n          'group-data-[indeterminate]/checkbox-indicator:scale-100',\n        )}\n      />\n    </>\n  );\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;AAwBA,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,eAAe,GAAG,KAAA,IAAS,GAAA,KAAQ;AAGxD,IAAA,MAAM,yBAAyB,OAAA,KAAY,eAAA;AAE3C,IAAA,uBACE,GAAA;AAAA,MAACA,UAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,OAAA,EAAS,yBAAyB,KAAA,GAAQ,OAAA;AAAA,QAC1C,eAAe,aAAA,IAAiB,sBAAA;AAAA,QAChC,WAAA,EAAU,UAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,2FAAA;AAAA,UACA,+EAAA;AAAA,UACA,WAAA,CAAY,GAAA;AAAA,UACZ,uDAAA;AAAA,UACA,yEAAA;AAAA,UACA,iJAAA;AAAA,UACA,wFAAA;AAAA,UACA,0GAAA;AAAA,UACA,uEAAA;AAAA,UACA,mFAAA;AAAA,UACA,yEAAA;AAAA,UACA,qFAAA;AAAA;AAAA,UAEA,qOAAA;AAAA,UACA,sJAAA;AAAA,UACA,wKAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAACA,UAAA,CAAkB,SAAA;AAAA,UAAlB;AAAA,YACC,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAW,EAAA;AAAA,cACT,wEAAA;AAAA,cACA,gFAAA;AAAA,cACA,qDAAA;AAAA,cACA,iEAAA;AAAA,cACA,gEAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,8BAAC,qBAAA,EAAA,EAAsB;AAAA;AAAA;AACzB;AAAA,KACF;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,SAAS,qBAAA,GAAwB;AAC/B,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,qGAAA;AAAA;AAAA;AAAA,UAGA,8CAAA;AAAA,UACA,+DAAA;AAAA,UACA,mDAAA;AAAA,UACA;AAAA;AACF;AAAA,KACF;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,wFAAA;AAAA,UACA,qDAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}