@fabio.caffarello/react-design-system 3.8.0 → 3.9.0

package/dist/granular/ui/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsxs as Y, jsx as h } from "react/jsx-runtime";
+import { forwardRef as Z, useId as _, useState as w, useRef as p, useEffect as v } from "react";
+import M from "../../primitives/Input/Input.js";
+import { Loader2 as C, ChevronDown as B } from "lucide-react";
+import P from "./AutocompleteList.js";
+const ee = Z(
+  function({
+    options: u,
+    value: O,
+    defaultValue: R,
+    onChange: s,
+    onSelect: b,
+    placeholder: K = "Type to search...",
+    loading: I = !1,
+    disabled: L = !1,
+    emptyMessage: V = "No options found",
+    debounceMs: S = 300,
+    filterOptions: g,
+    className: $ = "",
+    inputClassName: q = "",
+    size: H = "md",
+    label: k,
+    "aria-label": y,
+    "aria-labelledby": i,
+    id: D
+  }, U) {
+    const z = _(), x = D != null ? D : z, [G, T] = w(
+      typeof R == "string" ? R : ""
+    ), [c, l] = w(!1), [r, o] = w(-1), [f, a] = w(""), d = p(null), F = p(null), A = p(null), E = p(null), N = O !== void 0, m = N ? O : G, n = f.trim() ? g ? g(u, f) : u.filter(
+      (e) => e.label.toLowerCase().includes(f.toLowerCase())
+    ) : u, J = n.length > 0, Q = (e) => {
+      const t = e.target.value;
+      a(t), N || T(t), s == null || s(t), E.current && clearTimeout(E.current), E.current = setTimeout(() => {
+        l(!0), o(-1);
+      }, S);
+    }, j = (e) => {
+      var t;
+      e.disabled || (N || T(e.value), a(e.label), l(!1), o(-1), s == null || s(e.value), b == null || b(e), (t = F.current) == null || t.focus());
+    }, W = (e) => {
+      if (!c || n.length === 0) {
+        (e.key === "ArrowDown" || e.key === "Enter") && l(!0);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), o(
+            (t) => t < n.length - 1 ? t + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault(), o(
+            (t) => t > 0 ? t - 1 : n.length - 1
+          );
+          break;
+        case "Enter":
+          e.preventDefault(), r >= 0 && r < n.length && j(n[r]);
+          break;
+        case "Escape":
+          e.preventDefault(), l(!1), o(-1);
+          break;
+      }
+    };
+    v(() => {
+      if (!c) return;
+      const e = (t) => {
+        d.current && !d.current.contains(t.target) && (l(!1), o(-1));
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [c]), v(() => {
+      if (r >= 0 && A.current) {
+        const e = A.current.querySelectorAll('[role="option"]');
+        e[r] && typeof e[r].scrollIntoView == "function" && e[r].scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    }, [r]), v(() => {
+      if (m) {
+        const e = u.find((t) => t.value === m);
+        a(e ? e.label : m);
+      } else
+        a("");
+    }, [m, u]), v(() => {
+    }, [k, y, i, x]);
+    const X = c && (J || I || V);
+    return /* @__PURE__ */ Y("div", { ref: d, className: `relative ${$}`, children: [
+      /* @__PURE__ */ h(
+        M,
+        {
+          ref: F || U,
+          id: x,
+          label: k,
+          "aria-label": y,
+          "aria-labelledby": i,
+          value: f,
+          onChange: Q,
+          onKeyDown: W,
+          onFocus: () => l(!0),
+          placeholder: K,
+          disabled: L,
+          size: H,
+          rightIcon: I ? /* @__PURE__ */ h(C, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ h(
+            B,
+            {
+              className: `h-4 w-4 transition-transform ${c ? "rotate-180" : ""}`
+            }
+          ),
+          className: q
+        }
+      ),
+      X && /* @__PURE__ */ h(
+        P,
+        {
+          ref: A,
+          options: n,
+          highlightedIndex: r,
+          onSelect: j,
+          loading: I,
+          emptyMessage: V,
+          containerRef: d,
+          "aria-labelledby": i,
+          "aria-label": i ? void 0 : y || k
+        }
+      )
+    ] });
+  }
+);
+ee.displayName = "Autocomplete";
+export {
+  ee as default
+};
+//# sourceMappingURL=Autocomplete.js.map

package/dist/granular/ui/components/Autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../../../../src/ui/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useEffect, useId, forwardRef } from \"react\";\nimport Input from \"../../primitives/Input/Input\";\nimport { ChevronDown, Loader2 } from \"lucide-react\";\nimport AutocompleteList from \"./AutocompleteList\";\nimport type { AutocompleteOptionType } from \"./AutocompleteOption\";\n\nexport interface AutocompleteProps {\n  options: AutocompleteOptionType[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  onSelect?: (option: AutocompleteOptionType) => void;\n  placeholder?: string;\n  loading?: boolean;\n  disabled?: boolean;\n  emptyMessage?: string;\n  debounceMs?: number;\n  filterOptions?: (\n    options: AutocompleteOptionType[],\n    searchValue: string,\n  ) => AutocompleteOptionType[];\n  className?: string;\n  inputClassName?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Visible label rendered above the input via the `Input` primitive's\n   * `label` API, which wires `<label htmlFor>` to the inner `<input>`.\n   * Provides the accessible name axe `aria-input-field-name` requires.\n   */\n  label?: string;\n  /**\n   * Invisible accessible name. Use when the input has no visible label\n   * (e.g. a tightly-packed toolbar combobox). One of `label`,\n   * `aria-label`, or `aria-labelledby` MUST be present — without any,\n   * the input has no programmatic name and axe `aria-input-field-name`\n   * (serious) flags it. A dev-only warning fires when all are missing.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Override path: point at an id the consumer manages externally.\n   */\n  \"aria-labelledby\"?: string;\n  id?: string;\n}\n\n/**\n * Autocomplete Component\n *\n * An input component with autocomplete suggestions.\n * Supports keyboard navigation, loading states, and custom filtering.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   options={[\n *     { value: '1', label: 'Option 1' },\n *     { value: '2', label: 'Option 2' },\n *   ]}\n *   onSelect={(option) => console.log(option)}\n * />\n * ```\n */\nconst Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n  function Autocomplete(\n    {\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      onSelect,\n      placeholder = \"Type to search...\",\n      loading = false,\n      disabled = false,\n      emptyMessage = \"No options found\",\n      debounceMs = 300,\n      filterOptions,\n      className = \"\",\n      inputClassName = \"\",\n      size = \"md\",\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      id: idProp,\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = idProp ?? autoId;\n    const [internalValue, setInternalValue] = useState<string>(\n      typeof defaultValue === \"string\" ? defaultValue : \"\",\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n    const [searchValue, setSearchValue] = useState(\"\");\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n    const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n\n    // Filter options\n    const getFilteredOptions = (): AutocompleteOptionType[] => {\n      if (!searchValue.trim()) {\n        return options;\n      }\n\n      if (filterOptions) {\n        return filterOptions(options, searchValue);\n      }\n\n      // Default filter: case-insensitive search in label\n      return options.filter((option) =>\n        option.label.toLowerCase().includes(searchValue.toLowerCase()),\n      );\n    };\n\n    const filteredOptions = getFilteredOptions();\n    const hasOptions = filteredOptions.length > 0;\n\n    // Handle input change\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setSearchValue(newValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n\n      onChange?.(newValue);\n\n      // Debounce search\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current);\n      }\n\n      debounceTimerRef.current = setTimeout(() => {\n        setIsOpen(true);\n        setHighlightedIndex(-1);\n      }, debounceMs);\n    };\n\n    // Handle option select\n    const handleSelect = (option: AutocompleteOptionType) => {\n      if (option.disabled) return;\n\n      if (!isControlled) {\n        setInternalValue(option.value);\n      }\n\n      setSearchValue(option.label);\n      setIsOpen(false);\n      setHighlightedIndex(-1);\n      onChange?.(option.value);\n      onSelect?.(option);\n      inputRef.current?.focus();\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!isOpen || filteredOptions.length === 0) {\n        if (e.key === \"ArrowDown\" || e.key === \"Enter\") {\n          setIsOpen(true);\n        }\n        return;\n      }\n\n      switch (e.key) {\n        case \"ArrowDown\":\n          e.preventDefault();\n          setHighlightedIndex((prev) =>\n            prev < filteredOptions.length - 1 ? prev + 1 : 0,\n          );\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          setHighlightedIndex((prev) =>\n            prev > 0 ? prev - 1 : filteredOptions.length - 1,\n          );\n          break;\n        case \"Enter\":\n          e.preventDefault();\n          if (\n            highlightedIndex >= 0 &&\n            highlightedIndex < filteredOptions.length\n          ) {\n            handleSelect(filteredOptions[highlightedIndex]);\n          }\n          break;\n        case \"Escape\":\n          e.preventDefault();\n          setIsOpen(false);\n          setHighlightedIndex(-1);\n          break;\n      }\n    };\n\n    // Close on click outside\n    useEffect(() => {\n      if (!isOpen) return;\n\n      const handleClickOutside = (e: MouseEvent) => {\n        if (\n          containerRef.current &&\n          !containerRef.current.contains(e.target as Node)\n        ) {\n          setIsOpen(false);\n          setHighlightedIndex(-1);\n        }\n      };\n\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }, [isOpen]);\n\n    // Scroll highlighted item into view\n    useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const items = listRef.current.querySelectorAll('[role=\"option\"]');\n        if (\n          items[highlightedIndex] &&\n          typeof items[highlightedIndex].scrollIntoView === \"function\"\n        ) {\n          items[highlightedIndex].scrollIntoView({\n            block: \"nearest\",\n            behavior: \"smooth\",\n          });\n        }\n      }\n    }, [highlightedIndex]);\n\n    // Sync search value with current value\n    useEffect(() => {\n      if (currentValue) {\n        const option = options.find((opt) => opt.value === currentValue);\n        if (option) {\n          setSearchValue(option.label);\n        } else {\n          setSearchValue(currentValue);\n        }\n      } else {\n        setSearchValue(\"\");\n      }\n    }, [currentValue, options]);\n\n    // Dev-only accessible-name warning. Same four-path shape as the\n    // Textarea 6c guard: label / aria-label / aria-labelledby / external\n    // `<label htmlFor={id}>`. Without any source, axe\n    // `aria-input-field-name` (serious) flags the input. Silent in\n    // production.\n    useEffect(() => {\n      if (!import.meta.env.DEV) return;\n      if (label || ariaLabel || ariaLabelledBy) return;\n      const externalLabel =\n        typeof document !== \"undefined\"\n          ? document.querySelector(`label[for=\"${CSS.escape(inputId)}\"]`)\n          : null;\n      if (externalLabel) return;\n      console.warn(\n        \"[Autocomplete] Missing accessible name. Provide a `label` prop, `aria-label`, `aria-labelledby`, or pair an external `<label htmlFor={id}>` with the same `id`.\",\n      );\n    }, [label, ariaLabel, ariaLabelledBy, inputId]);\n\n    const shouldShowList = isOpen && (hasOptions || loading || emptyMessage);\n\n    return (\n      <div ref={containerRef} className={`relative ${className}`}>\n        <Input\n          ref={inputRef || ref}\n          id={inputId}\n          label={label}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          value={searchValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => setIsOpen(true)}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n          rightIcon={\n            loading ? (\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n            ) : (\n              <ChevronDown\n                className={`h-4 w-4 transition-transform ${\n                  isOpen ? \"rotate-180\" : \"\"\n                }`}\n              />\n            )\n          }\n          className={inputClassName}\n        />\n\n        {shouldShowList && (\n          <AutocompleteList\n            ref={listRef}\n            options={filteredOptions}\n            highlightedIndex={highlightedIndex}\n            onSelect={handleSelect}\n            loading={loading}\n            emptyMessage={emptyMessage}\n            containerRef={containerRef}\n            // Cascade the same accessible-name source the consumer\n            // provided for the input to the listbox portal — keeps\n            // axe `aria-input-field-name` satisfied on the listbox\n            // without making the consumer re-state the name.\n            aria-labelledby={ariaLabelledBy}\n            aria-label={ariaLabelledBy ? undefined : ariaLabel || label}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAutocomplete.displayName = \"Autocomplete\";\n\nexport default Autocomplete;\n"],"names":["Autocomplete","forwardRef","options","controlledValue","defaultValue","onChange","onSelect","placeholder","loading","disabled","emptyMessage","debounceMs","filterOptions","className","inputClassName","size","label","ariaLabel","ariaLabelledBy","idProp","ref","autoId","useId","inputId","internalValue","setInternalValue","useState","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchValue","setSearchValue","containerRef","useRef","inputRef","listRef","debounceTimerRef","isControlled","currentValue","filteredOptions","option","hasOptions","handleInputChange","newValue","handleSelect","_a","handleKeyDown","prev","useEffect","handleClickOutside","e","items","opt","shouldShowList","jsx","Input","Loader2","ChevronDown","AutocompleteList"],"mappings":"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"}

package/dist/granular/ui/components/Autocomplete/AutocompleteList.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as e, jsxs as v, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as $, useState as C, useEffect as A } from "react";
+import { createPortal as N } from "react-dom";
+import { getRadiusClass as L } from "../../tokens/radius.js";
+import { getShadowClass as S } from "../../tokens/shadows.js";
+import { getZIndexClass as j } from "../../tokens/z-index.js";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import P from "./AutocompleteOption.js";
+const k = $(
+  function({
+    options: i,
+    highlightedIndex: d,
+    onSelect: m,
+    loading: n = !1,
+    emptyMessage: c = "No options found",
+    containerRef: l,
+    showSelectAll: p = !1,
+    allSelected: s = !1,
+    onSelectAll: f,
+    onDeselectAll: u,
+    "aria-label": x,
+    "aria-labelledby": a
+  }, g) {
+    const [r, h] = C({ top: 0, left: 0, width: 0 });
+    A(() => {
+      if (l.current) {
+        const t = l.current.getBoundingClientRect();
+        h({
+          top: t.bottom + window.scrollY + 4,
+          left: t.left + window.scrollX,
+          width: t.width
+        });
+      }
+    }, [l]);
+    const b = /* @__PURE__ */ e(
+      "div",
+      {
+        ref: g,
+        role: "listbox",
+        "aria-label": a ? void 0 : x,
+        "aria-labelledby": a,
+        className: `
+          absolute
+          ${j("popover")}
+          bg-surface-overlay
+          ${L("md")}
+          ${S("lg")}
+          border
+          border-line-default
+          max-h-60
+          overflow-y-auto
+          ${o("xs", "py")}
+        `,
+        style: {
+          top: `${r.top}px`,
+          left: `${r.left}px`,
+          width: `${r.width}px`
+        },
+        children: n ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+              ${o("md", "p")}
+              text-sm
+              text-fg-tertiary
+              text-center
+            `,
+            children: "Loading..."
+          }
+        ) : i.length === 0 ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+              ${o("md", "p")}
+              text-sm
+              text-fg-tertiary
+              text-center
+            `,
+            children: c
+          }
+        ) : /* @__PURE__ */ v(y, { children: [
+          p && /* @__PURE__ */ e(
+            "div",
+            {
+              className: `
+                  ${o("sm", "px")}
+                  ${o("sm", "py")}
+                  text-sm
+                  font-medium
+                  cursor-pointer
+                  hover:bg-surface-hover
+                  border-b
+                  border-line-default
+                `,
+              onClick: s ? u : f,
+              children: s ? "Deselect All" : "Select All"
+            }
+          ),
+          i.map((t, w) => /* @__PURE__ */ e(
+            P,
+            {
+              option: t,
+              isHighlighted: w === d,
+              onSelect: m
+            },
+            t.value
+          ))
+        ] })
+      }
+    );
+    return typeof window != "undefined" ? N(b, document.body) : null;
+  }
+);
+k.displayName = "AutocompleteList";
+export {
+  k as default
+};
+//# sourceMappingURL=AutocompleteList.js.map

package/dist/granular/ui/components/Autocomplete/AutocompleteList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteList.js","sources":["../../../../../src/ui/components/Autocomplete/AutocompleteList.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport AutocompleteOption from \"./AutocompleteOption\";\nimport type { AutocompleteOptionType } from \"./AutocompleteOption\";\n\nexport interface AutocompleteListProps {\n  options: AutocompleteOptionType[];\n  highlightedIndex: number;\n  onSelect: (option: AutocompleteOptionType) => void;\n  loading?: boolean;\n  emptyMessage?: string;\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  showSelectAll?: boolean;\n  allSelected?: boolean;\n  onSelectAll?: () => void;\n  onDeselectAll?: () => void;\n  /**\n   * Accessible name for the listbox. axe `aria-input-field-name`\n   * (serious) flags a `role=\"listbox\"` portal without `aria-label` /\n   * `aria-labelledby` / `title`. The Autocomplete / MultiSelect parent\n   * cascades whatever accessible-name source the consumer provided\n   * (label string, aria-label, or external id) so the listbox inherits\n   * the same name as the input it dropdowns from.\n   */\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * AutocompleteList Component\n *\n * The list container for autocomplete options.\n * Renders in a portal and positions itself below the input.\n */\nconst AutocompleteList = forwardRef<HTMLDivElement, AutocompleteListProps>(\n  function AutocompleteList(\n    {\n      options,\n      highlightedIndex,\n      onSelect,\n      loading = false,\n      emptyMessage = \"No options found\",\n      containerRef,\n      showSelectAll = false,\n      allSelected = false,\n      onSelectAll,\n      onDeselectAll,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n    },\n    ref,\n  ) {\n    const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });\n\n    // Calculate position\n    useEffect(() => {\n      if (containerRef.current) {\n        const rect = containerRef.current.getBoundingClientRect();\n        setPosition({\n          top: rect.bottom + window.scrollY + 4,\n          left: rect.left + window.scrollX,\n          width: rect.width,\n        });\n      }\n    }, [containerRef]);\n\n    const listContent = (\n      <div\n        ref={ref}\n        role=\"listbox\"\n        aria-label={ariaLabelledBy ? undefined : ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={`\n          absolute\n          ${getZIndexClass(\"popover\")}\n          bg-surface-overlay\n          ${getRadiusClass(\"md\")}\n          ${getShadowClass(\"lg\")}\n          border\n          border-line-default\n          max-h-60\n          overflow-y-auto\n          ${getSpacingClass(\"xs\", \"py\")}\n        `}\n        style={{\n          top: `${position.top}px`,\n          left: `${position.left}px`,\n          width: `${position.width}px`,\n        }}\n      >\n        {loading ? (\n          <div\n            className={`\n              ${getSpacingClass(\"md\", \"p\")}\n              text-sm\n              text-fg-tertiary\n              text-center\n            `}\n          >\n            Loading...\n          </div>\n        ) : options.length === 0 ? (\n          <div\n            className={`\n              ${getSpacingClass(\"md\", \"p\")}\n              text-sm\n              text-fg-tertiary\n              text-center\n            `}\n          >\n            {emptyMessage}\n          </div>\n        ) : (\n          <>\n            {showSelectAll && (\n              <div\n                className={`\n                  ${getSpacingClass(\"sm\", \"px\")}\n                  ${getSpacingClass(\"sm\", \"py\")}\n                  text-sm\n                  font-medium\n                  cursor-pointer\n                  hover:bg-surface-hover\n                  border-b\n                  border-line-default\n                `}\n                onClick={allSelected ? onDeselectAll : onSelectAll}\n              >\n                {allSelected ? \"Deselect All\" : \"Select All\"}\n              </div>\n            )}\n            {options.map((option, index) => (\n              <AutocompleteOption\n                key={option.value}\n                option={option}\n                isHighlighted={index === highlightedIndex}\n                onSelect={onSelect}\n              />\n            ))}\n          </>\n        )}\n      </div>\n    );\n\n    return typeof window !== \"undefined\"\n      ? createPortal(listContent, document.body)\n      : null;\n  },\n);\n\nAutocompleteList.displayName = \"AutocompleteList\";\n\nexport default AutocompleteList;\n"],"names":["AutocompleteList","forwardRef","options","highlightedIndex","onSelect","loading","emptyMessage","containerRef","showSelectAll","allSelected","onSelectAll","onDeselectAll","ariaLabel","ariaLabelledBy","ref","position","setPosition","useState","useEffect","rect","listContent","jsx","getZIndexClass","getRadiusClass","getShadowClass","getSpacingClass","jsxs","Fragment","option","index","AutocompleteOption","createPortal"],"mappings":";;;;;;;;;AAwCA,MAAMA,IAAmBC;AAAA,EACvB,SACE;AAAA,IACE,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC,IAAe;AAAA,IACf,cAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,aAAAC,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,EAAA,GAErBC,GACA;AACA,UAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,EAAA,CAAG;AAGtE,IAAAC,EAAU,MAAM;AACd,UAAIX,EAAa,SAAS;AACxB,cAAMY,IAAOZ,EAAa,QAAQ,sBAAA;AAClC,QAAAS,EAAY;AAAA,UACV,KAAKG,EAAK,SAAS,OAAO,UAAU;AAAA,UACpC,MAAMA,EAAK,OAAO,OAAO;AAAA,UACzB,OAAOA,EAAK;AAAA,QAAA,CACb;AAAA,MACH;AAAA,IACF,GAAG,CAACZ,CAAY,CAAC;AAEjB,UAAMa,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAP;AAAA,QACA,MAAK;AAAA,QACL,cAAYD,IAAiB,SAAYD;AAAA,QACzC,mBAAiBC;AAAA,QACjB,WAAW;AAAA;AAAA,YAEPS,EAAe,SAAS,CAAC;AAAA;AAAA,YAEzBC,EAAe,IAAI,CAAC;AAAA,YACpBC,EAAe,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKpBC,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA,QAE/B,OAAO;AAAA,UACL,KAAK,GAAGV,EAAS,GAAG;AAAA,UACpB,MAAM,GAAGA,EAAS,IAAI;AAAA,UACtB,OAAO,GAAGA,EAAS,KAAK;AAAA,QAAA;AAAA,QAGzB,UAAAV,IACC,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,gBACPI,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,UAAA;AAAA,UAAA;AAAA,QAAA,IAGCvB,EAAQ,WAAW,IACrB,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,gBACPI,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAM7B,UAAAnB;AAAA,UAAA;AAAA,QAAA,IAGH,gBAAAoB,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAnB,KACC,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,oBACPI,EAAgB,MAAM,IAAI,CAAC;AAAA,oBAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQ/B,SAAShB,IAAcE,IAAgBD;AAAA,cAEtC,cAAc,iBAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnCR,EAAQ,IAAI,CAAC0B,GAAQC,MACpB,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cAEC,QAAAF;AAAA,cACA,eAAeC,MAAU1B;AAAA,cACzB,UAAAC;AAAA,YAAA;AAAA,YAHKwB,EAAO;AAAA,UAAA,CAKf;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAKN,WAAO,OAAO,UAAW,cACrBG,EAAaX,GAAa,SAAS,IAAI,IACvC;AAAA,EACN;AACF;AAEApB,EAAiB,cAAc;"}

package/dist/granular/ui/components/Autocomplete/AutocompleteOption.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { getSpacingClass as s } from "../../tokens/spacing.js";
+const n = i(
+  function({ option: e, isHighlighted: a, onSelect: l }, c) {
+    const o = () => {
+      e.disabled || l(e);
+    };
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: c,
+        role: "option",
+        "aria-selected": a,
+        "aria-disabled": e.disabled,
+        onClick: o,
+        className: `
+          flex
+          items-center
+          ${s("sm", "gap")}
+          ${s("sm", "px")}
+          ${s("sm", "py")}
+          text-sm
+          cursor-pointer
+          transition-colors
+          ${a ? "bg-surface-active" : ""}
+          ${e.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover"}
+        `,
+        children: [
+          e.icon && /* @__PURE__ */ r("span", { className: "flex-shrink-0", children: e.icon }),
+          /* @__PURE__ */ r("span", { className: "flex-1", children: e.label })
+        ]
+      }
+    );
+  }
+);
+n.displayName = "AutocompleteOption";
+export {
+  n as default
+};
+//# sourceMappingURL=AutocompleteOption.js.map

package/dist/granular/ui/components/Autocomplete/AutocompleteOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteOption.js","sources":["../../../../../src/ui/components/Autocomplete/AutocompleteOption.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface AutocompleteOptionType {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  icon?: ReactNode;\n  group?: string;\n}\n\nexport interface AutocompleteOptionProps {\n  option: AutocompleteOptionType;\n  isHighlighted: boolean;\n  onSelect: (option: AutocompleteOptionType) => void;\n}\n\n/**\n * AutocompleteOption Component\n *\n * A single option in the autocomplete list.\n */\nconst AutocompleteOption = forwardRef<HTMLDivElement, AutocompleteOptionProps>(\n  function AutocompleteOption({ option, isHighlighted, onSelect }, ref) {\n    const handleClick = () => {\n      if (!option.disabled) {\n        onSelect(option);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"option\"\n        aria-selected={isHighlighted}\n        aria-disabled={option.disabled}\n        onClick={handleClick}\n        className={`\n          flex\n          items-center\n          ${getSpacingClass(\"sm\", \"gap\")}\n          ${getSpacingClass(\"sm\", \"px\")}\n          ${getSpacingClass(\"sm\", \"py\")}\n          text-sm\n          cursor-pointer\n          transition-colors\n          ${isHighlighted ? \"bg-surface-active\" : \"\"}\n          ${option.disabled ? \"opacity-50 cursor-not-allowed\" : \"hover:bg-surface-hover\"}\n        `}\n      >\n        {option.icon && <span className=\"flex-shrink-0\">{option.icon}</span>}\n        <span className=\"flex-1\">{option.label}</span>\n      </div>\n    );\n  },\n);\n\nAutocompleteOption.displayName = \"AutocompleteOption\";\n\nexport default AutocompleteOption;\n"],"names":["AutocompleteOption","forwardRef","option","isHighlighted","onSelect","ref","handleClick","jsxs","getSpacingClass","jsx"],"mappings":";;;;AAwBA,MAAMA,IAAqBC;AAAA,EACzB,SAA4B,EAAE,QAAAC,GAAQ,eAAAC,GAAe,UAAAC,EAAA,GAAYC,GAAK;AACpE,UAAMC,IAAc,MAAM;AACxB,MAAKJ,EAAO,YACVE,EAASF,CAAM;AAAA,IAEnB;AAEA,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,MAAK;AAAA,QACL,iBAAeF;AAAA,QACf,iBAAeD,EAAO;AAAA,QACtB,SAASI;AAAA,QACT,WAAW;AAAA;AAAA;AAAA,YAGPE,EAAgB,MAAM,KAAK,CAAC;AAAA,YAC5BA,EAAgB,MAAM,IAAI,CAAC;AAAA,YAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,YAI3BL,IAAgB,sBAAsB,EAAE;AAAA,YACxCD,EAAO,WAAW,kCAAkC,wBAAwB;AAAA;AAAA,QAG/E,UAAA;AAAA,UAAAA,EAAO,QAAQ,gBAAAO,EAAC,QAAA,EAAK,WAAU,iBAAiB,YAAO,MAAK;AAAA,UAC7D,gBAAAA,EAAC,QAAA,EAAK,WAAU,UAAU,YAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEAT,EAAmB,cAAc;"}

package/dist/granular/ui/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,100 @@
+"use client";
+var v = Object.defineProperty, j = Object.defineProperties;
+var B = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var p = (e, r, a) => r in e ? v(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, d = (e, r) => {
+  for (var a in r || (r = {}))
+    f.call(r, a) && p(e, a, r[a]);
+  if (i)
+    for (var a of i(r))
+      h.call(r, a) && p(e, a, r[a]);
+  return e;
+}, x = (e, r) => j(e, B(r));
+var b = (e, r) => {
+  var a = {};
+  for (var s in e)
+    f.call(e, s) && r.indexOf(s) < 0 && (a[s] = e[s]);
+  if (e != null && i)
+    for (var s of i(e))
+      r.indexOf(s) < 0 && h.call(e, s) && (a[s] = e[s]);
+  return a;
+};
+import { jsx as l, jsxs as C } from "react/jsx-runtime";
+import { getSpacingClass as n } from "../../tokens/spacing.js";
+import { getTypographySize as g, getTypographyWeight as y } from "../../tokens/typography.js";
+import { cn as c } from "../../utils/cn.js";
+function w(T) {
+  var m = T, {
+    items: e,
+    separator: r = "/",
+    className: a = ""
+  } = m, s = b(m, [
+    "items",
+    "separator",
+    "className"
+  ]);
+  const u = [
+    "flex",
+    "items-center",
+    n("sm", "space-x"),
+    g("bodySmall")
+  ], N = c(...u, a);
+  return /* @__PURE__ */ l("nav", x(d({ "aria-label": "Breadcrumb", className: N }, s), { children: /* @__PURE__ */ l(
+    "ol",
+    {
+      className: c("flex", "items-center", n("sm", "space-x")),
+      children: e.map((t, o) => {
+        const S = o === e.length - 1;
+        return /* @__PURE__ */ C("li", { className: "flex items-center", children: [
+          o > 0 && /* @__PURE__ */ l(
+            "span",
+            {
+              className: c(
+                n("sm", "mx"),
+                "text-fg-tertiary"
+              ),
+              "aria-hidden": "true",
+              children: r
+            }
+          ),
+          S ? /* @__PURE__ */ l(
+            "span",
+            {
+              className: c(
+                "text-fg-primary",
+                y("label")
+              ),
+              "aria-current": "page",
+              children: t.label
+            }
+          ) : t.href ? /* @__PURE__ */ l(
+            "a",
+            {
+              href: t.href,
+              className: c(
+                "inline-flex",
+                "items-center",
+                n("xs", "px"),
+                n("xs", "pt"),
+                "border-b-2",
+                "border-transparent",
+                g("bodySmall"),
+                y("label"),
+                "transition-colors",
+                "text-fg-secondary",
+                "hover:border-line-emphasis",
+                "hover:text-fg-primary"
+              ),
+              children: t.label
+            }
+          ) : /* @__PURE__ */ l("span", { className: "text-fg-secondary", children: t.label })
+        ] }, o);
+      })
+    }
+  ) }));
+}
+export {
+  w as default
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/granular/ui/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  separator?: string;\n}\n\n/**\n * Breadcrumb Component\n *\n * A breadcrumb navigation component for hierarchical navigation.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   items={[\n *     { label: \"Home\", href: \"/\" },\n *     { label: \"Epics\", href: \"/epics\" },\n *     { label: \"Epic Details\" }\n *   ]}\n * />\n * ```\n */\nexport default function Breadcrumb({\n  items,\n  separator = \"/\",\n  className = \"\",\n  ...props\n}: Props) {\n  const baseClasses = [\n    \"flex\",\n    \"items-center\",\n    getSpacingClass(\"sm\", \"space-x\"),\n    getTypographySize(\"bodySmall\"),\n  ];\n\n  const classes = cn(...baseClasses, className);\n\n  return (\n    <nav aria-label=\"Breadcrumb\" className={classes} {...props}>\n      <ol\n        className={cn(\"flex\", \"items-center\", getSpacingClass(\"sm\", \"space-x\"))}\n      >\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n\n          return (\n            <li key={index} className=\"flex items-center\">\n              {index > 0 && (\n                <span\n                  className={cn(\n                    getSpacingClass(\"sm\", \"mx\"),\n                    \"text-fg-tertiary\",\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {separator}\n                </span>\n              )}\n              {isLast ? (\n                <span\n                  className={cn(\n                    \"text-fg-primary\",\n                    getTypographyWeight(\"label\"),\n                  )}\n                  aria-current=\"page\"\n                >\n                  {item.label}\n                </span>\n              ) : item.href ? (\n                <a\n                  href={item.href}\n                  className={cn(\n                    \"inline-flex\",\n                    \"items-center\",\n                    getSpacingClass(\"xs\", \"px\"),\n                    getSpacingClass(\"xs\", \"pt\"),\n                    \"border-b-2\",\n                    \"border-transparent\",\n                    getTypographySize(\"bodySmall\"),\n                    getTypographyWeight(\"label\"),\n                    \"transition-colors\",\n                    \"text-fg-secondary\",\n                    \"hover:border-line-emphasis\",\n                    \"hover:text-fg-primary\",\n                  )}\n                >\n                  {item.label}\n                </a>\n              ) : (\n                <span className=\"text-fg-secondary\">{item.label}</span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","_a","_b","items","separator","className","props","__objRest","baseClasses","getSpacingClass","getTypographySize","classes","cn","__spreadProps","__spreadValues","jsx","item","index","isLast","jsxs","getTypographyWeight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAwBA,EAAWC,GAKzB;AALyB,MAAAC,IAAAD,GACjC;AAAA,WAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAY;AAAA,MAHqBH,GAI9BI,IAAAC,EAJ8BL,GAI9B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMM,IAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACAC,EAAgB,MAAM,SAAS;AAAA,IAC/BC,EAAkB,WAAW;AAAA,EAAA,GAGzBC,IAAUC,EAAG,GAAGJ,GAAaH,CAAS;AAE5C,2BACG,OAAAQ,EAAAC,EAAA,EAAI,cAAW,cAAa,WAAWH,KAAaL,IAApD,EACC,UAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH,EAAG,QAAQ,gBAAgBH,EAAgB,MAAM,SAAS,CAAC;AAAA,MAErE,UAAAN,EAAM,IAAI,CAACa,GAAMC,MAAU;AAC1B,cAAMC,IAASD,MAAUd,EAAM,SAAS;AAExC,eACE,gBAAAgB,EAAC,MAAA,EAAe,WAAU,qBACvB,UAAA;AAAA,UAAAF,IAAQ,KACP,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACTH,EAAgB,MAAM,IAAI;AAAA,gBAC1B;AAAA,cAAA;AAAA,cAEF,eAAY;AAAA,cAEX,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJc,IACC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACT;AAAA,gBACAQ,EAAoB,OAAO;AAAA,cAAA;AAAA,cAE7B,gBAAa;AAAA,cAEZ,UAAAJ,EAAK;AAAA,YAAA;AAAA,UAAA,IAENA,EAAK,OACP,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAMC,EAAK;AAAA,cACX,WAAWJ;AAAA,gBACT;AAAA,gBACA;AAAA,gBACAH,EAAgB,MAAM,IAAI;AAAA,gBAC1BA,EAAgB,MAAM,IAAI;AAAA,gBAC1B;AAAA,gBACA;AAAA,gBACAC,EAAkB,WAAW;AAAA,gBAC7BU,EAAoB,OAAO;AAAA,gBAC3B;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAAJ,EAAK;AAAA,YAAA;AAAA,UAAA,IAGR,gBAAAD,EAAC,QAAA,EAAK,WAAU,qBAAqB,YAAK,MAAA,CAAM;AAAA,QAAA,EAAA,GA3C3CE,CA6CT;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA,IAEL;AAEJ;"}

package/dist/granular/ui/components/Card/Card.js

@@ -0,0 +1,113 @@
+"use client";
+var V = Object.defineProperty, H = Object.defineProperties;
+var I = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var C = (e, a, r) => a in e ? V(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r, s = (e, a) => {
+  for (var r in a || (a = {}))
+    h.call(a, r) && C(e, r, a[r]);
+  if (i)
+    for (var r of i(a))
+      w.call(a, r) && C(e, r, a[r]);
+  return e;
+}, l = (e, a) => H(e, I(a));
+var D = (e, a) => {
+  var r = {};
+  for (var o in e)
+    h.call(e, o) && a.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && i)
+    for (var o of i(e))
+      a.indexOf(o) < 0 && w.call(e, o) && (r[o] = e[o]);
+  return r;
+};
+import { jsx as x } from "react/jsx-runtime";
+import { memo as P } from "react";
+import { CardHeader as j } from "./CardHeader.js";
+import { CardTitle as q } from "./CardTitle.js";
+import { CardSubtitle as B } from "./CardSubtitle.js";
+import { CardActions as M } from "./CardActions.js";
+import { CardBody as O } from "./CardBody.js";
+import { cva as R } from "../../utils/cva.js";
+import { getSpacingClass as p } from "../../tokens/spacing.js";
+import { cn as d } from "../../utils/cn.js";
+import { getShadowClass as u } from "../../tokens/shadows.js";
+import { getRadiusClass as _ } from "../../tokens/radius.js";
+function $(z) {
+  var y = z, {
+    variant: e = "default",
+    padding: a = "medium",
+    className: r = "",
+    onClick: o,
+    "aria-label": f,
+    "aria-labelledby": c,
+    asSection: b = !1,
+    children: v
+  } = y, S = D(y, [
+    "variant",
+    "padding",
+    "className",
+    "onClick",
+    "aria-label",
+    "aria-labelledby",
+    "asSection",
+    "children"
+  ]);
+  typeof process != "undefined" && process.env.NODE_ENV !== "production" && b && !f && !c && console.warn(
+    "[Card] `asSection={true}` requires an accessible name. Pass `aria-labelledby` pointing to your Card.Title `id`, or `aria-label`. A <section> without a name is an anonymous landmark that hurts screen-reader navigation."
+  );
+  const A = R(
+    d(
+      "bg-surface-base",
+      _("lg"),
+      "border",
+      "border-line-default",
+      u("sm")
+    ),
+    {
+      variants: {
+        variant: {
+          default: "",
+          hover: d(
+            `hover:${u("md")}`,
+            "transition-shadow",
+            "cursor-pointer"
+          ),
+          selected: d("border-line-brand", u("md"))
+        },
+        padding: {
+          none: "",
+          small: p("xs", "p"),
+          medium: p("base", "p"),
+          large: p("lg", "p")
+        }
+      },
+      defaultVariants: {
+        variant: "default",
+        padding: "medium"
+      }
+    }
+  ), n = o !== void 0, E = n ? "button" : void 0, K = n ? 0 : void 0, T = d(A({ variant: e, padding: a }), r), g = s({
+    className: T,
+    role: E,
+    tabIndex: K,
+    onClick: o,
+    onKeyDown: n ? (m) => {
+      n && (m.key === "Enter" || m.key === " ") && (m.preventDefault(), o == null || o());
+    } : void 0,
+    "aria-label": f,
+    "aria-labelledby": c
+  }, S);
+  return b ? /* @__PURE__ */ x("section", l(s({}, g), { children: v })) : /* @__PURE__ */ x("div", l(s({}, g), { children: v }));
+}
+const N = P($);
+N.displayName = "Card";
+const t = N;
+t.Header = j;
+t.Title = q;
+t.Subtitle = B;
+t.Actions = M;
+t.Body = O;
+export {
+  t as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/granular/ui/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../src/ui/components/Card/Card.tsx"],"sourcesContent":["import { memo, type FC, type HTMLAttributes } from \"react\";\nimport { cn, cva } from \"../../utils\";\nimport { getRadiusClass, getShadowClass, getSpacingClass } from \"../../tokens\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardTitle } from \"./CardTitle\";\nimport { CardSubtitle } from \"./CardSubtitle\";\nimport { CardActions } from \"./CardActions\";\nimport { CardBody } from \"./CardBody\";\n\n// Ambient declaration so the dev-only warn typechecks without pulling\n// @types/node into the app tsconfig. At runtime the consumer's bundler\n// replaces `process.env.NODE_ENV` with a literal; the `typeof process`\n// guard keeps the branch safe in browser/edge runtimes where `process`\n// doesn't exist. Mirrors the precedent in Button.tsx.\ndeclare const process: { env: { NODE_ENV?: string } };\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: \"default\" | \"hover\" | \"selected\";\n  padding?: \"none\" | \"small\" | \"medium\" | \"large\";\n  onClick?: () => void;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  /**\n   * Render the root as a semantic `<section>` instead of `<div>`.\n   * When `true`, the Card becomes a landmark — a screen-reader-visible\n   * region in the document outline — so it MUST carry an accessible\n   * name (either `aria-labelledby` pointing to a `Card.Title` `id` or\n   * `aria-label`). A dev-only warning is emitted when this contract\n   * isn't met; an anonymous landmark hurts navigation by announcing\n   * \"region\" without a name.\n   * @default false\n   */\n  asSection?: boolean;\n}\n\n/**\n * Card — versatile container.\n *\n * Supports the compound pattern via dot-notation:\n *\n * ```tsx\n * <Card asSection aria-labelledby=\"parlamentares-title\">\n *   <Card.Header>\n *     <Card.Title id=\"parlamentares-title\" icon={<Users />} badge={<Badge>Beta</Badge>}>\n *       Parlamentares\n *     </Card.Title>\n *     <Card.Subtitle>Câmara e Senado</Card.Subtitle>\n *     <Card.Actions>\n *       <Button variant=\"ghost\">Editar</Button>\n *     </Card.Actions>\n *   </Card.Header>\n *   <Card.Body>{children}</Card.Body>\n * </Card>\n * ```\n *\n * Backward compat: the flat form (`<Card>{children}</Card>`) and the\n * interactive form (`<Card onClick={...}>`) are unchanged.\n *\n * Server/client boundary: every subcomponent (Card, Card.Header,\n * Card.Title, Card.Subtitle, Card.Actions, Card.Body) is presentational\n * and ships in `./server`. Interactive children (Button with onClick,\n * Link, etc.) supplied via `<Card.Actions>` cross the RSC boundary\n * naturally — the wrapper stays server-safe.\n */\nfunction CardComponent({\n  variant = \"default\",\n  padding = \"medium\",\n  className = \"\",\n  onClick,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  asSection = false,\n  children,\n  ...props\n}: CardProps) {\n  if (\n    typeof process !== \"undefined\" &&\n    process.env.NODE_ENV !== \"production\" &&\n    asSection &&\n    !ariaLabel &&\n    !ariaLabelledBy\n  ) {\n    console.warn(\n      \"[Card] `asSection={true}` requires an accessible name. Pass `aria-labelledby` pointing to your Card.Title `id`, or `aria-label`. A <section> without a name is an anonymous landmark that hurts screen-reader navigation.\",\n    );\n  }\n\n  const cardVariants = cva(\n    cn(\n      \"bg-surface-base\",\n      getRadiusClass(\"lg\"),\n      \"border\",\n      \"border-line-default\",\n      getShadowClass(\"sm\"),\n    ),\n    {\n      variants: {\n        variant: {\n          default: \"\",\n          hover: cn(\n            `hover:${getShadowClass(\"md\")}`,\n            \"transition-shadow\",\n            \"cursor-pointer\",\n          ),\n          selected: cn(\"border-line-brand\", getShadowClass(\"md\")),\n        },\n        padding: {\n          none: \"\",\n          small: getSpacingClass(\"xs\", \"p\"),\n          medium: getSpacingClass(\"base\", \"p\"),\n          large: getSpacingClass(\"lg\", \"p\"),\n        },\n      },\n      defaultVariants: {\n        variant: \"default\",\n        padding: \"medium\",\n      },\n    },\n  );\n\n  // ARIA interactivity is driven by `onClick` ONLY. `variant=\"hover\"` is\n  // a visual style (hover shadow + cursor hint via cardVariants) — not a\n  // declaration that the card is clickable. The previous coupling made\n  // any `variant=\"hover\"` Card a `role=\"button\" tabindex=0` outer, which\n  // triggered axe `nested-interactive` whenever the consumer composed\n  // Buttons inside. Decoupling fixes that without changing the visual\n  // behavior. Stories that want a clickable card already pass `onClick`.\n  const isInteractive = onClick !== undefined;\n  const role = isInteractive ? \"button\" : undefined;\n  const tabIndex = isInteractive ? 0 : undefined;\n\n  const classes = cn(cardVariants({ variant, padding }), className);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isInteractive && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onClick?.();\n    }\n  };\n\n  // Polymorphic root: <section> when asSection, <div> otherwise. Both\n  // accept the same HTMLAttributes via `...props` (HTMLDivElement and\n  // HTMLElement attribute sets overlap on the props we use).\n  const commonProps = {\n    className: classes,\n    role,\n    tabIndex,\n    onClick,\n    onKeyDown: isInteractive ? handleKeyDown : undefined,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...props,\n  } as const;\n\n  if (asSection) {\n    return <section {...commonProps}>{children}</section>;\n  }\n  return <div {...commonProps}>{children}</div>;\n}\n\nconst MemoCard = memo(CardComponent);\nMemoCard.displayName = \"Card\";\n\n// Compound components (dot-notation). Pattern follows Tabs.tsx — define\n// the function, attach subcomponents, cast to a type that exposes them.\ntype CardCompound = FC<CardProps> & {\n  Header: typeof CardHeader;\n  Title: typeof CardTitle;\n  Subtitle: typeof CardSubtitle;\n  Actions: typeof CardActions;\n  Body: typeof CardBody;\n};\n\nconst Card = MemoCard as unknown as CardCompound;\nCard.Header = CardHeader;\nCard.Title = CardTitle;\nCard.Subtitle = CardSubtitle;\nCard.Actions = CardActions;\nCard.Body = CardBody;\n\nexport default Card;\n"],"names":["CardComponent","_a","_b","variant","padding","className","onClick","ariaLabel","ariaLabelledBy","asSection","children","props","__objRest","cardVariants","cva","cn","getRadiusClass","getShadowClass","getSpacingClass","isInteractive","role","tabIndex","classes","commonProps","__spreadValues","e","jsx","__spreadProps","MemoCard","memo","Card","CardHeader","CardTitle","CardSubtitle","CardActions","CardBody"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,SAASA,EAAcC,GAUT;AAVS,MAAAC,IAAAD,GACrB;AAAA,aAAAE,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,MARqBR,GASlBS,IAAAC,EATkBV,GASlB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,EACE,OAAO,WAAY,eACnB,QAAQ,IAAI,aAAa,gBACzBO,KACA,CAACF,KACD,CAACC,KAED,QAAQ;AAAA,IACN;AAAA,EAAA;AAIJ,QAAMK,IAAeC;AAAA,IACnBC;AAAA,MACE;AAAA,MACAC,EAAe,IAAI;AAAA,MACnB;AAAA,MACA;AAAA,MACAC,EAAe,IAAI;AAAA,IAAA;AAAA,IAErB;AAAA,MACE,UAAU;AAAA,QACR,SAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAOF;AAAA,YACL,SAASE,EAAe,IAAI,CAAC;AAAA,YAC7B;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,UAAUF,EAAG,qBAAqBE,EAAe,IAAI,CAAC;AAAA,QAAA;AAAA,QAExD,SAAS;AAAA,UACP,MAAM;AAAA,UACN,OAAOC,EAAgB,MAAM,GAAG;AAAA,UAChC,QAAQA,EAAgB,QAAQ,GAAG;AAAA,UACnC,OAAOA,EAAgB,MAAM,GAAG;AAAA,QAAA;AAAA,MAClC;AAAA,MAEF,iBAAiB;AAAA,QACf,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF,GAUIC,IAAgBb,MAAY,QAC5Bc,IAAOD,IAAgB,WAAW,QAClCE,IAAWF,IAAgB,IAAI,QAE/BG,IAAUP,EAAGF,EAAa,EAAE,SAAAV,GAAS,SAAAC,EAAA,CAAS,GAAGC,CAAS,GAY1DkB,IAAcC,EAAA;AAAA,IAClB,WAAWF;AAAA,IACX,MAAAF;AAAA,IACA,UAAAC;AAAA,IACA,SAAAf;AAAA,IACA,WAAWa,IAfS,CAACM,MAAwC;AAC7D,MAAIN,MAAkBM,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACnDA,EAAE,eAAA,GACFnB,KAAA,QAAAA;AAAA,IAEJ,IAU6C;AAAA,IAC3C,cAAcC;AAAA,IACd,mBAAmBC;AAAA,KAChBG;AAGL,SAAIF,IACK,gBAAAiB,EAAC,WAAAC,EAAAH,EAAA,IAAYD,IAAZ,EAA0B,UAAAb,EAAA,EAAS,IAEtC,gBAAAgB,EAAC,OAAAC,EAAAH,EAAA,IAAQD,IAAR,EAAsB,UAAAb,EAAA,EAAS;AACzC;AAEA,MAAMkB,IAAWC,EAAK7B,CAAa;AACnC4B,EAAS,cAAc;AAYvB,MAAME,IAAOF;AACbE,EAAK,SAASC;AACdD,EAAK,QAAQE;AACbF,EAAK,WAAWG;AAChBH,EAAK,UAAUI;AACfJ,EAAK,OAAOK;"}

package/dist/granular/ui/components/Card/CardActions.js

@@ -0,0 +1,51 @@
+"use client";
+var l = Object.defineProperty, d = Object.defineProperties;
+var g = Object.getOwnPropertyDescriptors;
+var e = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var o = (t, r, s) => r in t ? l(t, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[r] = s, n = (t, r) => {
+  for (var s in r || (r = {}))
+    c.call(r, s) && o(t, s, r[s]);
+  if (e)
+    for (var s of e(r))
+      m.call(r, s) && o(t, s, r[s]);
+  return t;
+}, f = (t, r) => d(t, g(r));
+var p = (t, r) => {
+  var s = {};
+  for (var a in t)
+    c.call(t, a) && r.indexOf(a) < 0 && (s[a] = t[a]);
+  if (t != null && e)
+    for (var a of e(t))
+      r.indexOf(a) < 0 && m.call(t, a) && (s[a] = t[a]);
+  return s;
+};
+import { jsx as u } from "react/jsx-runtime";
+import { getSpacingClass as x } from "../../tokens/spacing.js";
+import { cn as C } from "../../utils/cn.js";
+function S(a) {
+  var i = a, {
+    children: t,
+    className: r
+  } = i, s = p(i, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ u(
+    "div",
+    f(n({
+      "data-card-actions": "",
+      className: C(
+        "flex items-center self-start",
+        x("sm", "gap"),
+        r
+      )
+    }, s), {
+      children: t
+    })
+  );
+}
+export {
+  S as CardActions
+};
+//# sourceMappingURL=CardActions.js.map