@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-HHZJALGA.js

@@ -0,0 +1,163 @@
+"use client";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "./chunk-CY5ISPFB.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-SGBCLZQF.js";
+import {
+  useControllableState
+} from "./chunk-5LCN5Q2L.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/combobox/combobox.tsx
+import { forwardRef, useState } from "react";
+import { defaultFilter } from "cmdk";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CUSTOM_VALUE_ITEM = "__brand-ui-combobox-custom-value__";
+var customValueFilter = (value, search, keywords) => value === CUSTOM_VALUE_ITEM ? Number.MIN_VALUE : defaultFilter(value, search, keywords);
+var Combobox = forwardRef(function Combobox2({
+  options,
+  value,
+  onValueChange,
+  placeholder,
+  searchPlaceholder,
+  emptyText,
+  className,
+  disabled = false,
+  allowCustomValue = false,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  triggerProps
+}, ref) {
+  const { t } = useLocale();
+  const resolvedPlaceholder = placeholder ?? t("ui.combobox.placeholder");
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t("ui.combobox.searchPlaceholder");
+  const [open, setOpen] = useState(false);
+  const [selected, setValue] = useControllableState(value, "", onValueChange);
+  const [search, setSearch] = useState("");
+  const current = options.find((o) => o.value === selected);
+  const trimmedSearch = search.trim();
+  const hasExactMatch = options.some(
+    (o) => o.label.trim().toLowerCase() === trimmedSearch.toLowerCase()
+  );
+  const showCustomValueItem = allowCustomValue && trimmedSearch.length > 0 && !hasExactMatch;
+  const resolvedEmptyText = emptyText ?? (allowCustomValue ? t("ui.combobox.emptyAllowCustom") : t("noResults"));
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: disabled ? false : open,
+      onOpenChange: (o) => {
+        if (disabled) return;
+        setOpen(o);
+        if (!o) setSearch("");
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ref,
+            variant: "outline",
+            id,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            ...triggerProps,
+            role: "combobox",
+            "aria-expanded": open,
+            disabled,
+            "data-slot": "combobox",
+            className: cn("w-full justify-between font-normal", triggerProps?.className, className),
+            children: [
+              current ? current.label : selected || resolvedPlaceholder,
+              /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ms-2 size-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: "w-[var(--radix-popover-trigger-width)] min-w-56 p-0",
+            "data-slot": "combobox-content",
+            "aria-label": ariaLabel ?? resolvedSearchPlaceholder,
+            children: /* @__PURE__ */ jsxs(Command, { filter: allowCustomValue ? customValueFilter : void 0, children: [
+              /* @__PURE__ */ jsx(
+                CommandInput,
+                {
+                  placeholder: resolvedSearchPlaceholder,
+                  value: search,
+                  onValueChange: setSearch
+                }
+              ),
+              /* @__PURE__ */ jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyText }),
+                /* @__PURE__ */ jsxs(CommandGroup, { children: [
+                  options.map((o) => /* @__PURE__ */ jsxs(
+                    CommandItem,
+                    {
+                      value: o.value,
+                      keywords: [o.label],
+                      onSelect: () => {
+                        setValue(o.value === selected ? "" : o.value);
+                        setOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(
+                              "me-2 size-4",
+                              selected === o.value ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        o.label
+                      ]
+                    },
+                    o.value
+                  )),
+                  showCustomValueItem ? /* @__PURE__ */ jsxs(
+                    CommandItem,
+                    {
+                      value: CUSTOM_VALUE_ITEM,
+                      "data-slot": "combobox-custom-value",
+                      onSelect: () => {
+                        setValue(trimmedSearch);
+                        setOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Plus, { className: "me-2 size-4 shrink-0 opacity-50" }),
+                        t("ui.combobox.useCustomValue", { value: trimmedSearch })
+                      ]
+                    }
+                  ) : null
+                ] })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  Combobox
+};
+//# sourceMappingURL=chunk-HHZJALGA.js.map

package/dist/chunk-HHZJALGA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState, type ComponentPropsWithoutRef } from \"react\";\nimport { defaultFilter } from \"cmdk\";\nimport { Check, ChevronsUpDown, Plus } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../lib/use-controllable-state\";\nimport { Button } from \"../button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { useLocale } from \"../locale-provider\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"../command\";\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxProps {\n  /**\n   * The option list — every option is mounted in the DOM (cmdk has no built-in\n   * windowing), so this is fine for typical form/menu-sized lists but not for\n   * open-ended data. For thousands of options, use `VirtualSelect` instead,\n   * which windows rendering via `@tanstack/react-virtual`.\n   */\n  options: ComboboxOption[];\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  /**\n   * Message shown when the search yields no results. Defaults to \"No\n   * results.\" — or, when `allowCustomValue` is set, a message that also\n   * signals a custom value is acceptable.\n   */\n  emptyText?: string;\n  className?: string;\n  /** Disables the trigger and prevents the popover from opening. */\n  disabled?: boolean;\n  /**\n   * When `true`, typed text that doesn't match any option becomes a\n   * submittable value: a synthetic \"Use…\" suggestion is shown, and pressing\n   * Enter with no listed option highlighted accepts the typed text via\n   * `onValueChange`. Suggestions still filter as usual. Default `false`\n   * (selection-only, unchanged behavior) — #359.\n   */\n  allowCustomValue?: boolean;\n  /** `id` applied to the trigger button. */\n  id?: string;\n  /**\n   * The trigger's accessible name always defaults to the SELECTED VALUE (or\n   * the placeholder) — that tells AT what is currently chosen, never what the\n   * control is FOR. Pass `aria-label`/`aria-labelledby` to also name the\n   * control's purpose (e.g. \"Session switcher\").\n   */\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  /**\n   * Escape hatch spread onto the trigger `Button` (after the named props\n   * above, so it wins if both are set) for anything not covered by a named\n   * prop — `data-*`, `name`, `data-testid`, etc. `role`/`aria-expanded` stay\n   * component-owned and can't be passed here; disabling stays on the\n   * top-level `disabled` prop so the popover-open guard below can't drift\n   * out of sync with the trigger's actual disabled state.\n   */\n  triggerProps?: Omit<\n    ComponentPropsWithoutRef<typeof Button>,\n    \"role\" | \"aria-expanded\" | \"disabled\"\n  > & {\n    /** Arbitrary `data-*` attributes (test hooks, analytics, …). */\n    [key: `data-${string}`]: string | number | boolean | undefined;\n  };\n}\n\n/**\n * Sentinel `value` for the synthetic \"Use …\" row (`allowCustomValue`).\n *\n * It must NOT be the search text. cmdk scores every item against the search and\n * re-sorts the list by score, then auto-highlights the top one — so a row whose\n * `value` IS the search text scores a perfect 1 and outranks every real partial\n * match. Typing \"Prod\" against a \"Production\" option then highlighted\n * `Use \"Prod\"`, and Enter emitted the raw string instead of selecting the\n * option — the exact opposite of #359's \"Enter accepts the highlighted\n * suggestion, or the typed value if none is highlighted\".\n */\nconst CUSTOM_VALUE_ITEM = \"__brand-ui-combobox-custom-value__\";\n\n/**\n * Keeps the \"Use …\" row visible (score > 0) but always ranked LAST, behind\n * every real suggestion, so the top match stays highlighted and Enter still\n * selects it. When nothing else matches, the row is the only item and Enter\n * accepts the typed value — which is the behavior #359 asks for.\n */\nconst customValueFilter = (value: string, search: string, keywords?: string[]) =>\n  value === CUSTOM_VALUE_ITEM ? Number.MIN_VALUE : defaultFilter(value, search, keywords);\n\n/** Single-select combobox (Popover + Command). Controlled or uncontrolled. */\nexport const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Combobox(\n  {\n    options,\n    value,\n    onValueChange,\n    placeholder,\n    searchPlaceholder,\n    emptyText,\n    className,\n    disabled = false,\n    allowCustomValue = false,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    triggerProps,\n  },\n  ref,\n) {\n  const { t } = useLocale();\n  const resolvedPlaceholder = placeholder ?? t(\"ui.combobox.placeholder\");\n  const resolvedSearchPlaceholder = searchPlaceholder ?? t(\"ui.combobox.searchPlaceholder\");\n  const [open, setOpen] = useState(false);\n  const [selected, setValue] = useControllableState(value, \"\", onValueChange);\n  const [search, setSearch] = useState(\"\");\n  const current = options.find((o) => o.value === selected);\n\n  const trimmedSearch = search.trim();\n  const hasExactMatch = options.some(\n    (o) => o.label.trim().toLowerCase() === trimmedSearch.toLowerCase(),\n  );\n  const showCustomValueItem = allowCustomValue && trimmedSearch.length > 0 && !hasExactMatch;\n  const resolvedEmptyText =\n    emptyText ?? (allowCustomValue ? t(\"ui.combobox.emptyAllowCustom\") : t(\"noResults\"));\n\n  return (\n    <Popover\n      open={disabled ? false : open}\n      onOpenChange={(o) => {\n        if (disabled) return;\n        setOpen(o);\n        // Reset the search text on close, matching the previous (uncontrolled\n        // cmdk-internal) behavior where the popover content unmounted and its\n        // own internal search state reset with it.\n        if (!o) setSearch(\"\");\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          ref={ref}\n          variant=\"outline\"\n          id={id}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          {...triggerProps}\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          data-slot=\"combobox\"\n          className={cn(\"w-full justify-between font-normal\", triggerProps?.className, className)}\n        >\n          {current ? current.label : selected || resolvedPlaceholder}\n          <ChevronsUpDown className=\"ms-2 size-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-[var(--radix-popover-trigger-width)] min-w-56 p-0\"\n        data-slot=\"combobox-content\"\n        // Radix Popover.Content renders role=\"dialog\"; without a name axe's\n        // aria-dialog-name rule (rightly) flags it. Reuse the trigger's own\n        // purpose label when the consumer set one, else fall back to the\n        // (already-translatable) search placeholder — no new hardcoded copy.\n        aria-label={ariaLabel ?? resolvedSearchPlaceholder}\n      >\n        <Command filter={allowCustomValue ? customValueFilter : undefined}>\n          <CommandInput\n            placeholder={resolvedSearchPlaceholder}\n            value={search}\n            onValueChange={setSearch}\n          />\n          <CommandList>\n            <CommandEmpty>{resolvedEmptyText}</CommandEmpty>\n            <CommandGroup>\n              {options.map((o) => (\n                <CommandItem\n                  key={o.value}\n                  value={o.value}\n                  keywords={[o.label]}\n                  onSelect={() => {\n                    setValue(o.value === selected ? \"\" : o.value);\n                    setOpen(false);\n                  }}\n                >\n                  <Check\n                    className={cn(\n                      \"me-2 size-4\",\n                      selected === o.value ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  {o.label}\n                </CommandItem>\n              ))}\n              {showCustomValueItem ? (\n                <CommandItem\n                  value={CUSTOM_VALUE_ITEM}\n                  data-slot=\"combobox-custom-value\"\n                  onSelect={() => {\n                    setValue(trimmedSearch);\n                    setOpen(false);\n                  }}\n                >\n                  <Plus className=\"me-2 size-4 shrink-0 opacity-50\" />\n                  {t(\"ui.combobox.useCustomValue\", { value: trimmedSearch })}\n                </CommandItem>\n              ) : null}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n});\n"],"mappings":"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","names":["Combobox"]}

package/dist/chunk-HLMFRCFE.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-HLMFRCFE.js.map

package/dist/chunk-HLMFRCFE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-HND6FAMX.js

@@ -0,0 +1,75 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/progress/progress.tsx
+import { forwardRef } from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var progressIndicatorVariants = cva("size-full flex-1 transition-transform", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      destructive: "bg-destructive"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var Progress = forwardRef(
+  function Progress2({ className, value, variant, marker, markerLabel, "aria-valuetext": ariaValuetext, ...props }, ref) {
+    const hasMarker = typeof marker === "number" && Number.isFinite(marker);
+    const clampedMarker = hasMarker ? Math.min(100, Math.max(0, marker)) : void 0;
+    const resolvedValuetext = ariaValuetext ?? (hasMarker && markerLabel && typeof value === "number" ? `${Math.round(value)}%, ${markerLabel}` : void 0);
+    const root = /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
+      {
+        ref,
+        "data-slot": "progress",
+        value,
+        "aria-valuetext": resolvedValuetext,
+        className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            "data-slot": "progress-indicator",
+            className: progressIndicatorVariants({ variant }),
+            style: { transform: `translateX(-${100 - (value || 0)}%)` }
+          }
+        )
+      }
+    );
+    if (!hasMarker) {
+      return root;
+    }
+    return (
+      // Root keeps `overflow-hidden` (clips the indicator fill, unchanged
+      // above); the tick lives OUTSIDE it as a sibling so it is never
+      // clipped. The wrapper mirrors `className` so it matches the track's
+      // own box exactly (width/height/flex sizing), which is what the
+      // tick's `insetInlineStart` percentage is measured against.
+      /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+        root,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": markerLabel ? void 0 : "true",
+            className: "pointer-events-none absolute -top-0.5 -bottom-0.5 w-0.5 bg-foreground",
+            "data-slot": "progress-marker",
+            style: { insetInlineStart: `${clampedMarker}%` }
+          }
+        )
+      ] })
+    );
+  }
+);
+
+export {
+  progressIndicatorVariants,
+  Progress
+};
+//# sourceMappingURL=chunk-HND6FAMX.js.map

package/dist/chunk-HND6FAMX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/progress/progress.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Tone vocabulary reused from `StatusBadge`/`Alert` (success/warning/destructive\n * on semantic tokens, #358) rather than reinvented. `default` keeps the fill\n * byte-identical (`bg-primary`) when `variant` is unset.\n */\nexport const progressIndicatorVariants = cva(\"size-full flex-1 transition-transform\", {\n  variants: {\n    variant: {\n      default: \"bg-primary\",\n      success: \"bg-success\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\nexport interface ProgressProps\n  extends\n    ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressIndicatorVariants> {\n  /**\n   * Reference point (0–100, same scale as `value`) — e.g. an \"expected by\n   * today\" pace or a target — rendered as a thin vertical tick on the track.\n   * Unset (default) renders no tick and leaves the DOM/layout byte-identical\n   * to a marker-less `Progress`.\n   */\n  marker?: number;\n  /**\n   * What `marker` represents (already localized by the caller — e.g.\n   * `\"expected 70% by today\"`). When set, it is appended to the progress\n   * bar's accessible value text so assistive tech hears the reference point\n   * alongside the value; a caller-supplied `aria-valuetext` always wins over\n   * this composition. When `marker` is set but `markerLabel` is not, the\n   * tick is purely decorative and `aria-valuetext` is left untouched — this\n   * component never invents its own English copy (i18n-strings).\n   */\n  markerLabel?: string;\n}\n\n/**\n * Color must not be the only signal a guardrail tripped: set `aria-valuetext`\n * (e.g. `\"Exceeded — 120 of 100\"`) alongside a non-`default` `variant` — it\n * passes straight through to the underlying `role=\"progressbar\"` element via\n * `...props` (Radix's `ProgressPrimitive.Root` already supports it).\n */\nexport const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(\n  function Progress(\n    { className, value, variant, marker, markerLabel, \"aria-valuetext\": ariaValuetext, ...props },\n    ref,\n  ) {\n    const hasMarker = typeof marker === \"number\" && Number.isFinite(marker);\n    const clampedMarker = hasMarker ? Math.min(100, Math.max(0, marker as number)) : undefined;\n    // No invented English glue words (i18n-strings) — just the numeric value\n    // plus the caller's own, already-localized `markerLabel`. A caller's own\n    // `aria-valuetext` always wins and is never overwritten.\n    const resolvedValuetext =\n      ariaValuetext ??\n      (hasMarker && markerLabel && typeof value === \"number\"\n        ? `${Math.round(value)}%, ${markerLabel}`\n        : undefined);\n\n    const root = (\n      <ProgressPrimitive.Root\n        ref={ref}\n        data-slot=\"progress\"\n        value={value}\n        aria-valuetext={resolvedValuetext}\n        className={cn(\"relative h-2 w-full overflow-hidden rounded-full bg-muted\", className)}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={progressIndicatorVariants({ variant })}\n          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n        />\n      </ProgressPrimitive.Root>\n    );\n\n    if (!hasMarker) {\n      return root;\n    }\n\n    return (\n      // Root keeps `overflow-hidden` (clips the indicator fill, unchanged\n      // above); the tick lives OUTSIDE it as a sibling so it is never\n      // clipped. The wrapper mirrors `className` so it matches the track's\n      // own box exactly (width/height/flex sizing), which is what the\n      // tick's `insetInlineStart` percentage is measured against.\n      <div className={cn(\"relative\", className)}>\n        {root}\n        <span\n          aria-hidden={markerLabel ? undefined : \"true\"}\n          className=\"pointer-events-none absolute -top-0.5 -bottom-0.5 w-0.5 bg-foreground\"\n          data-slot=\"progress-marker\"\n          style={{ insetInlineStart: `${clampedMarker}%` }}\n        />\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,uBAAuB;AACnC,SAAS,WAA8B;AA0E/B,cAkBF,YAlBE;AAlED,IAAM,4BAA4B,IAAI,yCAAyC;AAAA,EACpF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CAAC;AA+BM,IAAM,WAAW;AAAA,EACtB,SAASA,UACP,EAAE,WAAW,OAAO,SAAS,QAAQ,aAAa,kBAAkB,eAAe,GAAG,MAAM,GAC5F,KACA;AACA,UAAM,YAAY,OAAO,WAAW,YAAY,OAAO,SAAS,MAAM;AACtE,UAAM,gBAAgB,YAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAgB,CAAC,IAAI;AAIjF,UAAM,oBACJ,kBACC,aAAa,eAAe,OAAO,UAAU,WAC1C,GAAG,KAAK,MAAM,KAAK,CAAC,MAAM,WAAW,KACrC;AAEN,UAAM,OACJ;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,kBAAgB;AAAA,QAChB,WAAW,GAAG,6DAA6D,SAAS;AAAA,QACnF,GAAG;AAAA,QAEJ;AAAA,UAAmB;AAAA,UAAlB;AAAA,YACC,aAAU;AAAA,YACV,WAAW,0BAA0B,EAAE,QAAQ,CAAC;AAAA,YAChD,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,QAC5D;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAME,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACrC;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,cAAc,SAAY;AAAA,YACvC,WAAU;AAAA,YACV,aAAU;AAAA,YACV,OAAO,EAAE,kBAAkB,GAAG,aAAa,IAAI;AAAA;AAAA,QACjD;AAAA,SACF;AAAA;AAAA,EAEJ;AACF;","names":["Progress"]}

package/dist/chunk-HNLYRHAU.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/badge/badge.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var BADGE_APPEARANCE_TINT = "badge-tint:bg-(--badge-fill)/10 badge-tint:border-(--badge-fill)/40 badge-tint:text-(--badge-ink)";
+var BADGE_APPEARANCE_SOLID = "badge-solid:bg-(--badge-fill) badge-solid:border-transparent badge-solid:text-(--badge-on)";
+var BADGE_APPEARANCE_OUTLINE = "badge-outline:bg-transparent badge-outline:border-(--badge-fill) badge-outline:text-(--badge-ink)";
+var BADGE_APPEARANCE_NEUTRAL = "badge-neutral:bg-muted badge-neutral:border-transparent badge-neutral:text-foreground";
+var BADGE_APPEARANCE_RECIPES = `${BADGE_APPEARANCE_TINT} ${BADGE_APPEARANCE_SOLID} ${BADGE_APPEARANCE_OUTLINE} ${BADGE_APPEARANCE_NEUTRAL}`;
+var BADGE_APPEARANCE_RECIPES_CALM = `${BADGE_APPEARANCE_TINT} ${BADGE_APPEARANCE_OUTLINE} ${BADGE_APPEARANCE_NEUTRAL}`;
+var badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-badge border px-2.5 py-0.5 text-meta font-medium transition-colors focus-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: cn(
+          "border-transparent bg-primary text-primary-foreground",
+          "[--badge-fill:var(--primary)] [--badge-ink:var(--primary-text)] [--badge-on:var(--primary-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        // Already a neutral pill — `appearance` has no additional effect.
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        // Already an outline with no colour role — `appearance` has no additional effect.
+        outline: "text-foreground",
+        success: cn(
+          "border-transparent bg-success text-success-foreground",
+          "[--badge-fill:var(--success)] [--badge-ink:var(--success-text)] [--badge-on:var(--success-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        warning: cn(
+          "border-transparent bg-warning text-warning-foreground",
+          "[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)] [--badge-on:var(--warning-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        destructive: cn(
+          "border-transparent bg-destructive text-destructive-foreground",
+          "[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)] [--badge-on:var(--destructive-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        ),
+        info: cn(
+          "border-transparent bg-info text-info-foreground",
+          "[--badge-fill:var(--info)] [--badge-ink:var(--info-text)] [--badge-on:var(--info-foreground)]",
+          BADGE_APPEARANCE_RECIPES
+        )
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Badge = forwardRef(function Badge2({ className, variant, appearance, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "badge",
+      "data-appearance": appearance,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+
+export {
+  BADGE_APPEARANCE_RECIPES,
+  BADGE_APPEARANCE_RECIPES_CALM,
+  badgeVariants,
+  Badge
+};
+//# sourceMappingURL=chunk-HNLYRHAU.js.map

package/dist/chunk-HNLYRHAU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * The four opt-in treatments a colour-bearing badge can take, gated purely by\n * CSS (`themes.css`'s `badge-tint`/`badge-solid`/`badge-outline`/\n * `badge-neutral` custom variants): each fires when the element carries the\n * matching `data-appearance` attribute (the explicit `appearance` prop), OR\n * carries none and an ancestor's `--badge-appearance` token resolves to that\n * value (a container style query — set the token on a THEME/region, never on\n * the badge itself). With no explicit prop and the default token (`auto`),\n * none of the four match, so the unprefixed recipe below (today's exact\n * look) renders unchanged.\n *\n * `tint`/`outline`/`neutral` read `--badge-ink` (a `-text` token — coloured\n * TEXT on an ordinary surface, ≥4.5:1); `solid` reads `--badge-on` (a\n * `-foreground` token — ink for a SOLID plate ONLY, never a wash), per the\n * status-rung convention. Each colour-bearing variant below sets\n * `--badge-fill`/`--badge-ink`/`--badge-on` from its own tokens; a variant\n * that never sets them (`secondary`, already a neutral pill; `outline`,\n * already an outline with no colour role) does not receive these classes —\n * `appearance` has no additional effect there.\n *\n * Literal strings, not built via interpolation — Tailwind scans source\n * statically, so a template-literal class would emit no CSS (see\n * `status-badge.tsx`'s `STATUS_ROLE` docblock for the same rule).\n */\nconst BADGE_APPEARANCE_TINT =\n  \"badge-tint:bg-(--badge-fill)/10 badge-tint:border-(--badge-fill)/40 badge-tint:text-(--badge-ink)\";\nconst BADGE_APPEARANCE_SOLID =\n  \"badge-solid:bg-(--badge-fill) badge-solid:border-transparent badge-solid:text-(--badge-on)\";\nconst BADGE_APPEARANCE_OUTLINE =\n  \"badge-outline:bg-transparent badge-outline:border-(--badge-fill) badge-outline:text-(--badge-ink)\";\nconst BADGE_APPEARANCE_NEUTRAL =\n  \"badge-neutral:bg-muted badge-neutral:border-transparent badge-neutral:text-foreground\";\n\n/** tint + solid + outline + neutral — every colour-bearing Badge variant. */\nexport const BADGE_APPEARANCE_RECIPES = `${BADGE_APPEARANCE_TINT} ${BADGE_APPEARANCE_SOLID} ${BADGE_APPEARANCE_OUTLINE} ${BADGE_APPEARANCE_NEUTRAL}`;\n\n/**\n * tint + outline + neutral only — never `solid`. Reused by `StatusBadge`'s\n * out-of-vocabulary `tone` hatch, which must stay CALM-ONLY (its own\n * integrity constraint, see `status-badge.tsx`): the loud solid fill must\n * never reach a custom tone, even via a theme's global `--badge-appearance`\n * override.\n */\nexport const BADGE_APPEARANCE_RECIPES_CALM = `${BADGE_APPEARANCE_TINT} ${BADGE_APPEARANCE_OUTLINE} ${BADGE_APPEARANCE_NEUTRAL}`;\n\nexport const badgeVariants = cva(\n  \"inline-flex items-center gap-1 rounded-badge border px-2.5 py-0.5 text-meta font-medium transition-colors focus-ring focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: cn(\n          \"border-transparent bg-primary text-primary-foreground\",\n          \"[--badge-fill:var(--primary)] [--badge-ink:var(--primary-text)] [--badge-on:var(--primary-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        // Already a neutral pill — `appearance` has no additional effect.\n        secondary: \"border-transparent bg-secondary text-secondary-foreground\",\n        // Already an outline with no colour role — `appearance` has no additional effect.\n        outline: \"text-foreground\",\n        success: cn(\n          \"border-transparent bg-success text-success-foreground\",\n          \"[--badge-fill:var(--success)] [--badge-ink:var(--success-text)] [--badge-on:var(--success-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        warning: cn(\n          \"border-transparent bg-warning text-warning-foreground\",\n          \"[--badge-fill:var(--warning)] [--badge-ink:var(--warning-text)] [--badge-on:var(--warning-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        destructive: cn(\n          \"border-transparent bg-destructive text-destructive-foreground\",\n          \"[--badge-fill:var(--destructive)] [--badge-ink:var(--destructive-text)] [--badge-on:var(--destructive-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n        info: cn(\n          \"border-transparent bg-info text-info-foreground\",\n          \"[--badge-fill:var(--info)] [--badge-ink:var(--info-text)] [--badge-on:var(--info-foreground)]\",\n          BADGE_APPEARANCE_RECIPES,\n        ),\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\nexport type BadgeAppearance = \"tint\" | \"solid\" | \"outline\" | \"neutral\";\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {\n  /**\n   * Explicit per-instance override of the fill/border/ink treatment. Unset\n   * (default) renders NO `data-appearance` attribute, so the badge is driven\n   * purely by the ancestor `--badge-appearance` token (`auto` = each\n   * variant's own recipe, today's look). Meaningful only on the\n   * colour-bearing variants (`default`, `success`, `warning`, `destructive`,\n   * `info`) — see `badgeVariants`.\n   */\n  appearance?: BadgeAppearance;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant, appearance, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      data-slot=\"badge\"\n      data-appearance={appearance}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAChD,SAAS,WAA8B;AA4GnC;AAjFJ,IAAM,wBACJ;AACF,IAAM,yBACJ;AACF,IAAM,2BACJ;AACF,IAAM,2BACJ;AAGK,IAAM,2BAA2B,GAAG,qBAAqB,IAAI,sBAAsB,IAAI,wBAAwB,IAAI,wBAAwB;AAS3I,IAAM,gCAAgC,GAAG,qBAAqB,IAAI,wBAAwB,IAAI,wBAAwB;AAEtH,IAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,QAEA,WAAW;AAAA;AAAA,QAEX,SAAS;AAAA,QACT,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;AAiBO,IAAM,QAAQ,WAAwC,SAASA,OACpE,EAAE,WAAW,SAAS,YAAY,GAAG,MAAM,GAC3C,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,mBAAiB;AAAA,MACjB,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Badge"]}

package/dist/chunk-HPUPDT4Q.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-HPUPDT4Q.js.map

package/dist/chunk-HPUPDT4Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-HUIYDDDL.js

@@ -0,0 +1,189 @@
+"use client";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-QKZX5HDY.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-72H7HUTH.js";
+import {
+  CommandChip
+} from "./chunk-3BZBNDRP.js";
+import {
+  useCopyToClipboard
+} from "./chunk-FBJ2JSRA.js";
+import {
+  useControllableState
+} from "./chunk-5LCN5Q2L.js";
+import {
+  Textarea
+} from "./chunk-FZEG2R3E.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/install-tabs/install-tabs.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_INSTALL_TABS_LABELS = {
+  packagesTab: "pnpm add",
+  copyOwnTab: "Copy-own",
+  promptTab: "Prompt",
+  packageSelectAriaLabel: "Archetype",
+  blockSelectAriaLabel: "Block",
+  packageCommandLabel: "Install",
+  blockCommandLabel: "Add block",
+  promptAriaLabel: "Agent prompt",
+  promptCopyLabel: "Copy prompt",
+  promptCopiedLabel: "Copied"
+};
+var InstallTabs = forwardRef(function InstallTabs2({
+  packageOptions,
+  blockOptions,
+  hostTabs,
+  prompt,
+  value,
+  defaultValue,
+  onValueChange,
+  packageValue,
+  onPackageValueChange,
+  blockValue,
+  onBlockValueChange,
+  onCommandCopy,
+  onPromptCopy,
+  labels: labelsProp,
+  className,
+  ...props
+}, ref) {
+  const labels = { ...DEFAULT_INSTALL_TABS_LABELS, ...labelsProp };
+  const [tabId, setTabId] = useControllableState(value, defaultValue ?? "packages", onValueChange);
+  const [pkgId, setPkgId] = useControllableState(
+    packageValue,
+    packageOptions[0]?.id ?? "",
+    onPackageValueChange
+  );
+  const [blockId, setBlockId] = useControllableState(
+    blockValue,
+    blockOptions[0]?.id ?? "",
+    onBlockValueChange
+  );
+  const { copied: promptCopied, copy: copyPrompt } = useCopyToClipboard();
+  const selectedPackage = packageOptions.find((o) => o.id === pkgId) ?? packageOptions[0];
+  const selectedBlock = blockOptions.find((o) => o.id === blockId) ?? blockOptions[0];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "install-tabs",
+      className: cn("flex flex-col gap-4", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs(Tabs, { value: tabId, onValueChange: setTabId, children: [
+        /* @__PURE__ */ jsxs(TabsList, { variant: "underline", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "packages", children: labels.packagesTab }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "copy-own", children: labels.copyOwnTab }),
+          hostTabs.map((host) => /* @__PURE__ */ jsx(TabsTrigger, { value: host.id, children: host.label }, host.id)),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "prompt", children: labels.promptTab })
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "packages", className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs(Select, { value: pkgId, onValueChange: setPkgId, children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                "data-slot": "install-tabs-package-select",
+                "aria-label": labels.packageSelectAriaLabel,
+                className: "min-w-48",
+                children: /* @__PURE__ */ jsx(SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: packageOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
+          ] }),
+          selectedPackage ? /* @__PURE__ */ jsx(
+            CommandChip,
+            {
+              hosts: [
+                {
+                  id: "value",
+                  label: labels.packageCommandLabel,
+                  command: selectedPackage.command
+                }
+              ],
+              onCopyCommand: onCommandCopy
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "copy-own", className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs(Select, { value: blockId, onValueChange: setBlockId, children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                "data-slot": "install-tabs-block-select",
+                "aria-label": labels.blockSelectAriaLabel,
+                className: "min-w-48",
+                children: /* @__PURE__ */ jsx(SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: blockOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
+          ] }),
+          selectedBlock ? /* @__PURE__ */ jsx(
+            CommandChip,
+            {
+              hosts: [
+                { id: "value", label: labels.blockCommandLabel, command: selectedBlock.command }
+              ],
+              onCopyCommand: onCommandCopy
+            }
+          ) : null
+        ] }),
+        hostTabs.map((host) => /* @__PURE__ */ jsx(TabsContent, { value: host.id, className: "flex flex-col gap-2", children: host.commands.map((command) => /* @__PURE__ */ jsx(
+          CommandChip,
+          {
+            hosts: [{ id: "value", label: command.label, command: command.command }],
+            onCopyCommand: onCommandCopy
+          },
+          command.label
+        )) }, host.id)),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "prompt", className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              readOnly: true,
+              value: prompt,
+              rows: 4,
+              "aria-label": labels.promptAriaLabel,
+              "data-slot": "install-tabs-prompt",
+              className: "resize-none font-mono text-code"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              className: "self-start",
+              onClick: () => {
+                void copyPrompt(prompt).then((ok) => onPromptCopy?.(ok));
+              },
+              children: promptCopied ? labels.promptCopiedLabel : labels.promptCopyLabel
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+});
+
+export {
+  DEFAULT_INSTALL_TABS_LABELS,
+  InstallTabs
+};
+//# sourceMappingURL=chunk-HUIYDDDL.js.map

package/dist/chunk-HUIYDDDL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/install-tabs/install-tabs.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * InstallTabs — every way to bring brand-ui in, one tab strip.\n *\n * Ships no site copy, no URL and no install command of its own (`i18n-strings`,\n * `remote-origins`): every command, option and prompt is a prop. `TabsList`'s\n * `overflow-x-auto` (shared by every `Tabs` variant) makes the strip scroll\n * horizontally once it no longer fits — no bespoke mobile layout needed.\n */\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../lib/use-controllable-state\";\nimport { Button } from \"../button\";\nimport { CommandChip } from \"../command-chip\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../select\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../tabs\";\nimport { Textarea } from \"../textarea\";\nimport { useCopyToClipboard } from \"../../lib/use-copy-to-clipboard\";\n\n/** One option in the `pnpm add` or `Copy-own` select — the exact command it resolves to. */\nexport interface InstallTabsSelectOption {\n  id: string;\n  label: string;\n  command: string;\n}\n\n/** One host-specific tab (Claude Code, Cursor, …), one or more commands top to bottom. */\nexport interface InstallTabsHostTab {\n  id: string;\n  label: string;\n  commands: { label: string; command: string }[];\n}\n\nexport interface InstallTabsLabels {\n  packagesTab: string;\n  copyOwnTab: string;\n  promptTab: string;\n  packageSelectAriaLabel: string;\n  blockSelectAriaLabel: string;\n  packageCommandLabel: string;\n  blockCommandLabel: string;\n  /** `aria-label` of the read-only prompt textarea. */\n  promptAriaLabel: string;\n  promptCopyLabel: string;\n  promptCopiedLabel: string;\n}\n\nexport const DEFAULT_INSTALL_TABS_LABELS: InstallTabsLabels = {\n  packagesTab: \"pnpm add\",\n  copyOwnTab: \"Copy-own\",\n  promptTab: \"Prompt\",\n  packageSelectAriaLabel: \"Archetype\",\n  blockSelectAriaLabel: \"Block\",\n  packageCommandLabel: \"Install\",\n  blockCommandLabel: \"Add block\",\n  promptAriaLabel: \"Agent prompt\",\n  promptCopyLabel: \"Copy prompt\",\n  promptCopiedLabel: \"Copied\",\n};\n\nexport interface InstallTabsProps extends HTMLAttributes<HTMLDivElement> {\n  /** The `pnpm add` tab's per-archetype options; the first is the default selection. */\n  packageOptions: InstallTabsSelectOption[];\n  /** The `Copy-own` tab's per-block options; the first is the default selection. */\n  blockOptions: InstallTabsSelectOption[];\n  /** One tab per host, in order, between `Copy-own` and `Prompt`. */\n  hostTabs: InstallTabsHostTab[];\n  /** The multi-line agent prompt shown (read-only) on the `Prompt` tab. */\n  prompt: string;\n  /** Selected tab id (controlled): `\"packages\"`, `\"copy-own\"`, a host id, or `\"prompt\"`. */\n  value?: string;\n  /** Initially selected tab id (uncontrolled). Default: `\"packages\"`. */\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Selected `pnpm add` archetype id (controlled). */\n  packageValue?: string;\n  onPackageValueChange?: (id: string) => void;\n  /** Selected `Copy-own` block id (controlled). */\n  blockValue?: string;\n  onBlockValueChange?: (id: string) => void;\n  onCommandCopy?: (command: string, copied: boolean) => void;\n  onPromptCopy?: (copied: boolean) => void;\n  labels?: Partial<InstallTabsLabels>;\n}\n\nexport const InstallTabs = forwardRef<HTMLDivElement, InstallTabsProps>(function InstallTabs(\n  {\n    packageOptions,\n    blockOptions,\n    hostTabs,\n    prompt,\n    value,\n    defaultValue,\n    onValueChange,\n    packageValue,\n    onPackageValueChange,\n    blockValue,\n    onBlockValueChange,\n    onCommandCopy,\n    onPromptCopy,\n    labels: labelsProp,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const labels = { ...DEFAULT_INSTALL_TABS_LABELS, ...labelsProp };\n  const [tabId, setTabId] = useControllableState(value, defaultValue ?? \"packages\", onValueChange);\n  const [pkgId, setPkgId] = useControllableState(\n    packageValue,\n    packageOptions[0]?.id ?? \"\",\n    onPackageValueChange,\n  );\n  const [blockId, setBlockId] = useControllableState(\n    blockValue,\n    blockOptions[0]?.id ?? \"\",\n    onBlockValueChange,\n  );\n  const { copied: promptCopied, copy: copyPrompt } = useCopyToClipboard();\n\n  const selectedPackage = packageOptions.find((o) => o.id === pkgId) ?? packageOptions[0];\n  const selectedBlock = blockOptions.find((o) => o.id === blockId) ?? blockOptions[0];\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"install-tabs\"\n      className={cn(\"flex flex-col gap-4\", className)}\n      {...props}\n    >\n      <Tabs value={tabId} onValueChange={setTabId}>\n        <TabsList variant=\"underline\">\n          <TabsTrigger value=\"packages\">{labels.packagesTab}</TabsTrigger>\n          <TabsTrigger value=\"copy-own\">{labels.copyOwnTab}</TabsTrigger>\n          {hostTabs.map((host) => (\n            <TabsTrigger key={host.id} value={host.id}>\n              {host.label}\n            </TabsTrigger>\n          ))}\n          <TabsTrigger value=\"prompt\">{labels.promptTab}</TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"packages\" className=\"flex flex-col gap-3\">\n          <Select value={pkgId} onValueChange={setPkgId}>\n            <SelectTrigger\n              data-slot=\"install-tabs-package-select\"\n              aria-label={labels.packageSelectAriaLabel}\n              className=\"min-w-48\"\n            >\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {packageOptions.map((option) => (\n                <SelectItem key={option.id} value={option.id}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {selectedPackage ? (\n            <CommandChip\n              hosts={[\n                {\n                  id: \"value\",\n                  label: labels.packageCommandLabel,\n                  command: selectedPackage.command,\n                },\n              ]}\n              onCopyCommand={onCommandCopy}\n            />\n          ) : null}\n        </TabsContent>\n\n        <TabsContent value=\"copy-own\" className=\"flex flex-col gap-3\">\n          <Select value={blockId} onValueChange={setBlockId}>\n            <SelectTrigger\n              data-slot=\"install-tabs-block-select\"\n              aria-label={labels.blockSelectAriaLabel}\n              className=\"min-w-48\"\n            >\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {blockOptions.map((option) => (\n                <SelectItem key={option.id} value={option.id}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {selectedBlock ? (\n            <CommandChip\n              hosts={[\n                { id: \"value\", label: labels.blockCommandLabel, command: selectedBlock.command },\n              ]}\n              onCopyCommand={onCommandCopy}\n            />\n          ) : null}\n        </TabsContent>\n\n        {hostTabs.map((host) => (\n          <TabsContent key={host.id} value={host.id} className=\"flex flex-col gap-2\">\n            {host.commands.map((command) => (\n              <CommandChip\n                key={command.label}\n                hosts={[{ id: \"value\", label: command.label, command: command.command }]}\n                onCopyCommand={onCommandCopy}\n              />\n            ))}\n          </TabsContent>\n        ))}\n\n        <TabsContent value=\"prompt\" className=\"flex flex-col gap-3\">\n          <Textarea\n            readOnly\n            value={prompt}\n            rows={4}\n            aria-label={labels.promptAriaLabel}\n            data-slot=\"install-tabs-prompt\"\n            className=\"resize-none font-mono text-code\"\n          />\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"self-start\"\n            onClick={() => {\n              void copyPrompt(prompt).then((ok) => onPromptCopy?.(ok));\n            }}\n          >\n            {promptCopied ? labels.promptCopiedLabel : labels.promptCopyLabel}\n          </Button>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n});\n"],"mappings":"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","names":["InstallTabs"]}