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

package/dist/granular/ui/primitives/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../../../src/ui/primitives/Switch/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, memo, useId, useMemo, useCallback, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getSwitchClasses } from \"../../tokens/switch\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { cn } from \"../../utils\";\n\nexport type SwitchSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\"\n> {\n  size?: SwitchSize;\n  label?: string;\n  /**\n   * Secondary text rendered beneath the label, wired through\n   * `aria-describedby`. Named `helperText` to match Input, Select,\n   * Checkbox, and Radio — every form primitive in the DS uses the\n   * same prop name for this role.\n   */\n  helperText?: string;\n  error?: boolean;\n  /**\n   * Validation success state — paints the (off-state) track border\n   * and (when `helperText` is also set) the helper-text color green.\n   * Matches the Input + Select + Checkbox + Radio + Textarea\n   * convention. Error takes precedence when both `error` and\n   * `success` are set.\n   */\n  success?: boolean;\n}\n\n/**\n * Switch Component\n *\n * A toggle switch component for on/off states.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <Switch checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />\n *\n * <Switch\n *   label=\"Enable notifications\"\n *   helperText=\"Receive email notifications\"\n *   checked={notifications}\n *   onChange={(e) => setNotifications(e.target.checked)}\n * />\n * ```\n */\nconst Switch = memo(\n  forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n    {\n      size = \"md\",\n      label,\n      helperText,\n      error = false,\n      success = false,\n      className = \"\",\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      id,\n      ...props\n    },\n    ref,\n  ) {\n    // Controlled / uncontrolled pattern.\n    //\n    // Previously this primitive accepted `defaultChecked` via\n    // `...props` and forwarded it to the hidden `<input type=\"checkbox\">`\n    // (form-integration shim), but the visible `<button role=\"switch\">`\n    // bound `aria-checked={checked}` directly. With `checked` undefined\n    // in uncontrolled mode, `aria-checked` was missing — axe\n    // `aria-required-attr` (critical) flagged every uncontrolled Switch\n    // because `role=\"switch\"` REQUIRES `aria-checked`. The visual track\n    // and thumb also stuck at the off state because their classes\n    // derived from the same `checked` prop.\n    //\n    // The fix is the standard React pattern: when `checked` is provided\n    // the consumer controls state; otherwise `defaultChecked` seeds\n    // internal state and the click/keydown handlers update it locally\n    // AND notify `onChange`. The visible button, the hidden input, and\n    // every classes() consumer all read from a single resolved\n    // `currentChecked`.\n    const isControlled = checked !== undefined;\n    const [internalChecked, setInternalChecked] = useState<boolean>(\n      defaultChecked ?? false,\n    );\n    const currentChecked = isControlled ? !!checked : internalChecked;\n    // Stable fallback id when the consumer doesn't provide one. useId\n    // is SSR-safe and stable across renders, replacing the deprecated\n    // Math.random().substr() pattern.\n    const reactId = useId();\n    const switchId = id || `switch-${reactId}`;\n\n    const labelId = useMemo(\n      () => (label ? `${switchId}-label` : undefined),\n      [label, switchId],\n    );\n\n    const helperId = useMemo(\n      () => (helperText ? `${switchId}-helper` : undefined),\n      [helperText, switchId],\n    );\n\n    // Component-scoped tokens (SWITCH_TOKENS) drive track/thumb/translate.\n    const config = useMemo(() => getSwitchClasses(size), [size]);\n\n    // Memoize focus ring color\n    const focusRingColor = useMemo(\n      () => \"focus:border-line-focus\".replace(\"focus:border-\", \"focus:ring-\"),\n      [],\n    );\n\n    // Memoize classes — all consume `currentChecked` (the resolved\n    // controlled-or-uncontrolled state), not the raw `checked` prop.\n    const trackClasses = useMemo(\n      () =>\n        cn(\n          \"relative\",\n          \"inline-flex\",\n          \"shrink-0\",\n          \"cursor-pointer\",\n          getRadiusClass(\"full\"),\n          \"border-2\",\n          \"border-transparent\",\n          getAnimationClass(\"base\"),\n          \"focus:outline-none\",\n          \"focus:ring-2\",\n          focusRingColor,\n          \"focus:ring-offset-2\",\n          config.track,\n          currentChecked ? \"bg-surface-brand\" : \"bg-surface-muted\",\n          // Border feedback only shows in the off state — the on-state\n          // brand background already saturates the track and overrides\n          // any colored outline visually. Error wins over success.\n          error && !currentChecked && \"border-error\",\n          !error && success && !currentChecked && \"border-success\",\n          disabled && \"opacity-50 cursor-not-allowed\",\n          className,\n        ),\n      [\n        focusRingColor,\n        config.track,\n        currentChecked,\n        error,\n        success,\n        disabled,\n        className,\n      ],\n    );\n\n    const thumbClasses = useMemo(\n      () =>\n        cn(\n          \"pointer-events-none\",\n          \"inline-block\",\n          getRadiusClass(\"full\"),\n          \"bg-surface-base\",\n          \"shadow\",\n          \"transform\",\n          getAnimationClass(\"base\"),\n          config.thumb,\n          currentChecked ? config.translate : \"translate-x-0\",\n        ),\n      [config.thumb, config.translate, currentChecked],\n    );\n\n    return (\n      <div className={cn(\"flex\", \"items-start\", getSpacingClass(\"md\", \"gap\"))}>\n        <div className=\"flex items-center\">\n          <button\n            type=\"button\"\n            className={trackClasses}\n            role=\"switch\"\n            aria-checked={currentChecked}\n            aria-labelledby={labelId}\n            aria-describedby={helperId}\n            disabled={disabled}\n            onClick={useCallback(\n              (e: React.MouseEvent<HTMLButtonElement>) => {\n                if (disabled) return;\n                const next = !currentChecked;\n                if (!isControlled) setInternalChecked(next);\n                if (onChange) {\n                  const syntheticEvent = {\n                    ...e,\n                    target: { ...e.target, checked: next },\n                    currentTarget: { ...e.currentTarget, checked: next },\n                  } as unknown as React.ChangeEvent<HTMLInputElement>;\n                  onChange(syntheticEvent);\n                }\n              },\n              [disabled, onChange, currentChecked, isControlled],\n            )}\n            onKeyDown={useCallback(\n              (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (disabled) return;\n                if (e.key !== \"Enter\" && e.key !== \" \") return;\n                e.preventDefault();\n                const next = !currentChecked;\n                if (!isControlled) setInternalChecked(next);\n                if (onChange) {\n                  const syntheticEvent = {\n                    ...e,\n                    target: { ...e.target, checked: next },\n                    currentTarget: { ...e.currentTarget, checked: next },\n                  } as unknown as React.ChangeEvent<HTMLInputElement>;\n                  onChange(syntheticEvent);\n                }\n              },\n              [disabled, onChange, currentChecked, isControlled],\n            )}\n          >\n            <span className={thumbClasses} />\n          </button>\n          {/* Hidden checkbox for form-data integration. Follows the\n              resolved `currentChecked` so submission picks up the\n              correct value in both controlled and uncontrolled modes.\n              `aria-hidden` + tabIndex=-1 keep it out of AT and Tab\n              order — interaction happens on the visible button above.\n              The onChange is a no-op fallback (real state changes\n              flow through the button's handler); React requires it\n              alongside `checked` to suppress the controlled-input\n              warning when the consumer doesn't supply onChange. */}\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            checked={currentChecked}\n            onChange={onChange ?? (() => {})}\n            disabled={disabled}\n            className=\"sr-only\"\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            {...props}\n          />\n        </div>\n        {(label || helperText) && (\n          <div className=\"flex-1\">\n            {label && (\n              <label\n                id={labelId}\n                htmlFor={switchId}\n                className={cn(\n                  \"block\",\n                  getTypographySize(\"bodySmall\"),\n                  getTypographyWeight(\"label\"),\n                  error ? \"text-fg-error\" : \"text-fg-primary\",\n                  disabled ? \"opacity-50\" : \"cursor-pointer\",\n                )}\n              >\n                {label}\n              </label>\n            )}\n            {helperText && (\n              <p\n                id={helperId}\n                className={cn(\n                  getSpacingClass(\"xs\", \"mt\"),\n                  getTypographySize(\"bodySmall\"),\n                  error\n                    ? \"text-fg-error\"\n                    : success\n                      ? \"text-fg-success\"\n                      : \"text-fg-secondary\",\n                )}\n              >\n                {helperText}\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }),\n);\n\nSwitch.displayName = \"Switch\";\n\nexport default Switch;\n"],"names":["Switch","memo","forwardRef","_a","ref","_b","size","label","helperText","error","success","className","disabled","checked","defaultChecked","onChange","id","props","__objRest","isControlled","internalChecked","setInternalChecked","useState","currentChecked","reactId","useId","switchId","labelId","useMemo","helperId","config","getSwitchClasses","focusRingColor","trackClasses","cn","getRadiusClass","getAnimationClass","thumbClasses","jsxs","getSpacingClass","jsx","useCallback","e","next","syntheticEvent","__spreadProps","__spreadValues","getTypographySize","getTypographyWeight"],"mappings":"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"}

package/dist/granular/ui/primitives/Text/Text.js

@@ -0,0 +1,118 @@
+"use client";
+var y = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var l = (e, r, t) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, c = (e, r) => {
+  for (var t in r || (r = {}))
+    d.call(r, t) && l(e, t, r[t]);
+  if (n)
+    for (var t of n(r))
+      x.call(r, t) && l(e, t, r[t]);
+  return e;
+};
+var p = (e, r) => {
+  var t = {};
+  for (var s in e)
+    d.call(e, s) && r.indexOf(s) < 0 && (t[s] = e[s]);
+  if (e != null && n)
+    for (var s of n(e))
+      r.indexOf(s) < 0 && x.call(e, s) && (t[s] = e[s]);
+  return t;
+};
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { getTypographyClasses as o } from "../../tokens/typography.js";
+import { cn as L } from "../../utils/cn.js";
+const E = {
+  primary: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-indigo-400",
+    DEFAULT: "text-fg-brand",
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    dark: "text-indigo-600",
+    contrast: "text-fg-inverse"
+  },
+  secondary: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-pink-300",
+    DEFAULT: "text-fg-brand-secondary",
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    dark: "text-pink-600",
+    contrast: "text-fg-inverse"
+  },
+  success: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-green-300",
+    DEFAULT: "text-fg-success",
+    dark: "text-success-dark",
+    contrast: "text-fg-inverse"
+  },
+  warning: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-yellow-300",
+    DEFAULT: "text-fg-warning",
+    dark: "text-warning-dark",
+    contrast: "text-fg-inverse"
+  },
+  error: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-red-300",
+    DEFAULT: "text-fg-error",
+    dark: "text-error-dark",
+    contrast: "text-fg-inverse"
+  },
+  info: {
+    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)
+    light: "text-blue-300",
+    DEFAULT: "text-fg-info",
+    dark: "text-info-dark",
+    contrast: "text-fg-inverse"
+  },
+  neutral: {
+    light: "text-fg-tertiary",
+    DEFAULT: "text-fg-secondary",
+    dark: "text-fg-primary",
+    contrast: "text-fg-inverse"
+  }
+};
+function A(D, b) {
+  var f = D, {
+    variant: e = "paragraph",
+    bold: r,
+    italic: t,
+    className: s,
+    as: g,
+    colorRole: h = "neutral",
+    colorShade: u = "dark"
+  } = f, k = p(f, [
+    "variant",
+    "bold",
+    "italic",
+    "className",
+    "as",
+    "colorRole",
+    "colorShade"
+  ]);
+  const a = [];
+  let i;
+  if (g)
+    i = g;
+  else
+    switch (e) {
+      case "heading":
+        i = "h2";
+        break;
+      case "list":
+        i = "li";
+        break;
+      default:
+        i = "p";
+        break;
+    }
+  return e === "heading" ? a.push(o("h2")) : e === "body" || e === "paragraph" ? a.push(o("body")) : e === "bodySmall" ? a.push(o("bodySmall")) : e === "bodyLarge" ? a.push(o("bodyLarge")) : e === "caption" ? a.push(o("caption")) : e === "label" ? a.push(o("label")) : a.push(o("body")), r && a.push("font-bold"), t && a.push("italic"), a.push(E[h][u]), /* @__PURE__ */ m(i, c({ ref: b, className: L(...a, s) }, k));
+}
+const N = T(A);
+export {
+  N as default
+};
+//# sourceMappingURL=Text.js.map

package/dist/granular/ui/primitives/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../../../src/ui/primitives/Text/Text.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithoutRef,\n  ElementType,\n  HTMLAttributes,\n  JSX,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { getTypographyClasses } from \"../../tokens/typography\";\nimport { cn } from \"../../utils\";\n\ntype TextColorRole =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"neutral\";\ntype TextColorShade = \"light\" | \"DEFAULT\" | \"dark\" | \"contrast\";\n\n// Lookup table: literal Tailwind classes so v4 can detect them at build.\n// Brand/feedback DEFAULT cells use semantic tokens; light/dark cells stay\n// primitive (no semantic equivalent for shade variants). Neutral cells\n// use the Phase 7 semantic suggestions (text-fg-{primary,secondary,...}).\nconst TEXT_COLOR_CLASSES: Record<\n  TextColorRole,\n  Record<TextColorShade, string>\n> = {\n  primary: {\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    light: \"text-indigo-400\",\n    DEFAULT: \"text-fg-brand\",\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    dark: \"text-indigo-600\",\n    contrast: \"text-fg-inverse\",\n  },\n  secondary: {\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    light: \"text-pink-300\",\n    DEFAULT: \"text-fg-brand-secondary\",\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    dark: \"text-pink-600\",\n    contrast: \"text-fg-inverse\",\n  },\n  success: {\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    light: \"text-green-300\",\n    DEFAULT: \"text-fg-success\",\n    dark: \"text-success-dark\",\n    contrast: \"text-fg-inverse\",\n  },\n  warning: {\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    light: \"text-yellow-300\",\n    DEFAULT: \"text-fg-warning\",\n    dark: \"text-warning-dark\",\n    contrast: \"text-fg-inverse\",\n  },\n  error: {\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    light: \"text-red-300\",\n    DEFAULT: \"text-fg-error\",\n    dark: \"text-error-dark\",\n    contrast: \"text-fg-inverse\",\n  },\n  info: {\n    // exception: variant color — no semantic equivalent (Principle 3, .claude/rules/colors.md)\n    light: \"text-blue-300\",\n    DEFAULT: \"text-fg-info\",\n    dark: \"text-info-dark\",\n    contrast: \"text-fg-inverse\",\n  },\n  neutral: {\n    light: \"text-fg-tertiary\",\n    DEFAULT: \"text-fg-secondary\",\n    dark: \"text-fg-primary\",\n    contrast: \"text-fg-inverse\",\n  },\n};\n\nexport interface TextProps<\n  T extends ElementType,\n> extends HTMLAttributes<JSX.IntrinsicElements> {\n  variant?:\n    | \"heading\"\n    | \"list\"\n    | \"paragraph\"\n    | \"body\"\n    | \"bodySmall\"\n    | \"bodyLarge\"\n    | \"caption\"\n    | \"label\";\n  as?: T;\n  bold?: boolean;\n  italic?: boolean;\n  colorRole?: TextColorRole;\n  colorShade?: TextColorShade;\n}\n\ntype ReturnProps<P extends ElementType> = TextProps<P> &\n  Omit<ComponentPropsWithoutRef<P>, keyof TextProps<P>>;\n\nfunction TextComponent<T extends ElementType = \"p\">(\n  {\n    variant = \"paragraph\",\n    bold,\n    italic,\n    className,\n    as,\n    colorRole = \"neutral\",\n    colorShade = \"dark\",\n    ...rest\n  }: ReturnProps<T>,\n  ref: React.Ref<unknown>,\n) {\n  const classNames: string[] = [];\n  let Tag: ElementType;\n\n  if (as) {\n    Tag = as;\n  } else {\n    switch (variant) {\n      case \"heading\":\n        Tag = \"h2\";\n        break;\n      case \"list\":\n        Tag = \"li\";\n        break;\n      case \"paragraph\":\n      default:\n        Tag = \"p\";\n        break;\n    }\n  }\n\n  // Apply typography tokens based on variant\n  if (variant === \"heading\") {\n    classNames.push(getTypographyClasses(\"h2\"));\n  } else if (variant === \"body\" || variant === \"paragraph\") {\n    classNames.push(getTypographyClasses(\"body\"));\n  } else if (variant === \"bodySmall\") {\n    classNames.push(getTypographyClasses(\"bodySmall\"));\n  } else if (variant === \"bodyLarge\") {\n    classNames.push(getTypographyClasses(\"bodyLarge\"));\n  } else if (variant === \"caption\") {\n    classNames.push(getTypographyClasses(\"caption\"));\n  } else if (variant === \"label\") {\n    classNames.push(getTypographyClasses(\"label\"));\n  } else {\n    // Default to body for list and other variants\n    classNames.push(getTypographyClasses(\"body\"));\n  }\n\n  // Override font weight if bold is specified\n  if (bold) {\n    classNames.push(\"font-bold\");\n  }\n\n  if (italic) {\n    classNames.push(\"italic\");\n  }\n\n  // Apply color via lookup table. Tailwind v4 needs literal class names\n  // at build time, so role/shade resolve to a fixed entry in\n  // TEXT_COLOR_CLASSES rather than constructing `text-${...}` dynamically.\n  classNames.push(TEXT_COLOR_CLASSES[colorRole][colorShade]);\n\n  return <Tag ref={ref} className={cn(...classNames, className)} {...rest} />;\n}\n\n// Use forwardRef with proper typing for polymorphic component\nconst Text = forwardRef(TextComponent) as <T extends ElementType = \"p\">(\n  props: ReturnProps<T> & { ref?: React.Ref<HTMLElement> },\n) => JSX.Element;\n\nexport default Text;\n"],"names":["TEXT_COLOR_CLASSES","TextComponent","_a","ref","_b","variant","bold","italic","className","as","colorRole","colorShade","rest","__objRest","classNames","Tag","getTypographyClasses","jsx","__spreadValues","cn","Text","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAMA,IAGF;AAAA,EACF,SAAS;AAAA;AAAA,IAEP,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,IAET,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,WAAW;AAAA;AAAA,IAET,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,IAET,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,IAEP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,IAEP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,OAAO;AAAA;AAAA,IAEL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA;AAAA,IAEJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAEd;AAwBA,SAASC,EACPC,GAUAC,GACA;AAXA,MAAAC,IAAAF,GACE;AAAA,aAAAG,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,MAPfP,GAQKQ,IAAAC,EARLT,GAQK;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAMU,IAAuB,CAAA;AAC7B,MAAIC;AAEJ,MAAIN;AACF,IAAAM,IAAMN;AAAA;AAEN,YAAQJ,GAAA;AAAA,MACN,KAAK;AACH,QAAAU,IAAM;AACN;AAAA,MACF,KAAK;AACH,QAAAA,IAAM;AACN;AAAA,MAEF;AACE,QAAAA,IAAM;AACN;AAAA,IAAA;AAKN,SAAIV,MAAY,YACdS,EAAW,KAAKE,EAAqB,IAAI,CAAC,IACjCX,MAAY,UAAUA,MAAY,cAC3CS,EAAW,KAAKE,EAAqB,MAAM,CAAC,IACnCX,MAAY,cACrBS,EAAW,KAAKE,EAAqB,WAAW,CAAC,IACxCX,MAAY,cACrBS,EAAW,KAAKE,EAAqB,WAAW,CAAC,IACxCX,MAAY,YACrBS,EAAW,KAAKE,EAAqB,SAAS,CAAC,IACtCX,MAAY,UACrBS,EAAW,KAAKE,EAAqB,OAAO,CAAC,IAG7CF,EAAW,KAAKE,EAAqB,MAAM,CAAC,GAI1CV,KACFQ,EAAW,KAAK,WAAW,GAGzBP,KACFO,EAAW,KAAK,QAAQ,GAM1BA,EAAW,KAAKd,EAAmBU,CAAS,EAAEC,CAAU,CAAC,GAElD,gBAAAM,EAACF,GAAAG,EAAA,EAAI,KAAAf,GAAU,WAAWgB,EAAG,GAAGL,GAAYN,CAAS,KAAOI,EAAM;AAC3E;AAGA,MAAMQ,IAAOC,EAAWpB,CAAa;"}

package/dist/granular/ui/primitives/Textarea/Textarea.js

@@ -0,0 +1,129 @@
+"use client";
+var I = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var k = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var N = (s, e, o) => e in s ? I(s, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : s[e] = o, E = (s, e) => {
+  for (var o in e || (e = {}))
+    k.call(e, o) && N(s, o, e[o]);
+  if (d)
+    for (var o of d(e))
+      w.call(e, o) && N(s, o, e[o]);
+  return s;
+};
+var F = (s, e) => {
+  var o = {};
+  for (var r in s)
+    k.call(s, r) && e.indexOf(r) < 0 && (o[r] = s[r]);
+  if (s != null && d)
+    for (var r of d(s))
+      e.indexOf(r) < 0 && w.call(s, r) && (o[r] = s[r]);
+  return o;
+};
+import { jsx as g, jsxs as M } from "react/jsx-runtime";
+import { memo as T, forwardRef as q, useId as A, useMemo as t, useEffect as G } from "react";
+import { getRadiusClass as H } from "../../tokens/radius.js";
+import { getSpacingClass as u } from "../../tokens/spacing.js";
+import { getTypographySize as y } from "../../tokens/typography.js";
+import { cn as c } from "../../utils/cn.js";
+const J = T(
+  q(function(K, S) {
+    var p = K, {
+      error: e = !1,
+      success: o = !1,
+      resize: r = "vertical",
+      className: x = "",
+      label: n,
+      helperText: l,
+      id: m
+    } = p, b = F(p, [
+      "error",
+      "success",
+      "resize",
+      "className",
+      "label",
+      "helperText",
+      "id"
+    ]);
+    const j = A(), a = m != null ? m : j, v = t(() => "focus:border-line-focus", []), z = t(() => "focus:border-error", []), f = t(
+      () => e ? z.replace("focus:border-", "focus:ring-") : v.replace("focus:border-", "focus:ring-"),
+      [e, z, v]
+    ), h = t(
+      () => ({
+        none: "resize-none",
+        both: "resize",
+        horizontal: "resize-x",
+        vertical: "resize-y"
+      }),
+      []
+    ), B = t(
+      () => c(
+        "block",
+        "w-full",
+        H("md"),
+        u("base", "px"),
+        u("md", "py"),
+        "border",
+        y("body"),
+        "focus:outline-none",
+        "focus:ring-2",
+        "focus:ring-offset-2",
+        h[r],
+        e ? c("border-error", f) : o ? c("border-success", f) : c("border-line-default", f),
+        x
+      ),
+      [r, h, e, o, f, x]
+    ), i = t(
+      () => l ? `${a}-helper` : void 0,
+      [l, a]
+    ), L = t(
+      () => i != null ? i : e ? `${a}-error` : void 0,
+      [i, e, a]
+    ), $ = b["aria-label"], D = b["aria-labelledby"];
+    G(() => {
+    }, [n, $, D, a]);
+    const R = /* @__PURE__ */ g(
+      "textarea",
+      E({
+        ref: S,
+        id: a,
+        className: B,
+        "aria-invalid": e,
+        "aria-describedby": L
+      }, b)
+    ), C = l ? /* @__PURE__ */ g(
+      "p",
+      {
+        id: i,
+        className: c(
+          u("xs", "mt"),
+          y("bodySmall"),
+          e ? "text-fg-error" : o ? "text-fg-success" : "text-fg-secondary"
+        ),
+        children: l
+      }
+    ) : null;
+    return !n && !C ? R : /* @__PURE__ */ M("div", { className: "block w-full", children: [
+      n && /* @__PURE__ */ g(
+        "label",
+        {
+          htmlFor: a,
+          className: c(
+            "block",
+            u("xs", "mb"),
+            y("label"),
+            "font-medium",
+            "text-fg-primary"
+          ),
+          children: n
+        }
+      ),
+      R,
+      C
+    ] });
+  })
+);
+J.displayName = "Textarea";
+export {
+  J as default
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/granular/ui/primitives/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../../../src/ui/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef, memo, useEffect, useId, useMemo } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { cn } from \"../../utils\";\n\ninterface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  error?: boolean;\n  /**\n   * Validation success state — paints the border and (when\n   * `helperText` is also set) the helper-text color green. Matches\n   * the Input + Select + Checkbox + Radio + Switch convention; the\n   * three feedback flags (`error`, `success`, `helperText`) cover\n   * every form primitive in the DS. Error takes precedence when\n   * both `error` and `success` are set.\n   */\n  success?: boolean;\n  resize?: \"none\" | \"both\" | \"horizontal\" | \"vertical\";\n  label?: string;\n  /**\n   * Secondary text rendered beneath the textarea, wired through\n   * `aria-describedby`. Named `helperText` to match Input, Select,\n   * Checkbox, Radio, and Switch — every form primitive in the DS\n   * uses the same prop name for this role. When `error` or\n   * `success` is also set, the helper text inherits the matching\n   * red / green color.\n   */\n  helperText?: string;\n}\n\n/**\n * Textarea Component\n *\n * A styled textarea component for longer text input.\n *\n * For an accessible name, supply ONE of:\n *  - `label` prop (renders a visible `<label>` above the textarea), OR\n *  - `aria-label` / `aria-labelledby`, OR\n *  - an external `<Label htmlFor={id}>` paired with the same `id` prop\n *    (use the Label primitive when you need `variant=\"required\" | \"optional\"`).\n *\n * In development, a missing accessible name logs a warning to the console.\n *\n * @example\n * ```tsx\n * <Textarea label=\"Description\" rows={4} />\n * ```\n */\nconst Textarea = memo(\n  forwardRef<HTMLTextAreaElement, Props>(function Textarea(\n    {\n      error = false,\n      success = false,\n      resize = \"vertical\",\n      className = \"\",\n      label,\n      helperText,\n      id: idProp,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const id = idProp ?? autoId;\n    // Memoize focus ring colors\n    const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n    const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n    const focusRingColor = useMemo(\n      () =>\n        error\n          ? errorFocusRing.replace(\"focus:border-\", \"focus:ring-\")\n          : primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\"),\n      [error, errorFocusRing, primaryFocusRing],\n    );\n\n    // Memoize resize classes\n    const resizeClasses = useMemo<Record<NonNullable<Props[\"resize\"]>, string>>(\n      () => ({\n        none: \"resize-none\",\n        both: \"resize\",\n        horizontal: \"resize-x\",\n        vertical: \"resize-y\",\n      }),\n      [],\n    );\n\n    // Memoize classes — error wins over success when both flags are\n    // set (a field cannot be valid AND invalid; treat it as invalid).\n    const classes = useMemo(\n      () =>\n        cn(\n          \"block\",\n          \"w-full\",\n          getRadiusClass(\"md\"),\n          getSpacingClass(\"base\", \"px\"),\n          getSpacingClass(\"md\", \"py\"),\n          \"border\",\n          getTypographySize(\"body\"),\n          \"focus:outline-none\",\n          \"focus:ring-2\",\n          \"focus:ring-offset-2\",\n          resizeClasses[resize],\n          error\n            ? cn(\"border-error\", focusRingColor)\n            : success\n              ? cn(\"border-success\", focusRingColor)\n              : cn(\"border-line-default\", focusRingColor),\n          className,\n        ),\n      [resize, resizeClasses, error, success, focusRingColor, className],\n    );\n\n    // Memoize aria-describedby — points to the helper paragraph when\n    // helperText is provided; falls back to an error id when only\n    // error is set (kept for back-compat with consumers that don't\n    // pass helperText).\n    const helperId = useMemo(\n      () => (helperText ? `${id}-helper` : undefined),\n      [helperText, id],\n    );\n\n    const ariaDescribedBy = useMemo(\n      () => helperId ?? (error ? `${id}-error` : undefined),\n      [helperId, error, id],\n    );\n\n    const ariaLabel = props[\"aria-label\"];\n    const ariaLabelledBy = props[\"aria-labelledby\"];\n\n    // Dev-only accessibility warning: ensure some accessible name source exists.\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(id)}\"]`)\n          : null;\n      if (externalLabel) return;\n      console.warn(\n        \"[Textarea] 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, id]);\n\n    const textareaEl = (\n      <textarea\n        ref={ref}\n        id={id}\n        className={classes}\n        aria-invalid={error}\n        aria-describedby={ariaDescribedBy}\n        {...props}\n      />\n    );\n\n    const helperEl = helperText ? (\n      <p\n        id={helperId}\n        className={cn(\n          getSpacingClass(\"xs\", \"mt\"),\n          getTypographySize(\"bodySmall\"),\n          error\n            ? \"text-fg-error\"\n            : success\n              ? \"text-fg-success\"\n              : \"text-fg-secondary\",\n        )}\n      >\n        {helperText}\n      </p>\n    ) : null;\n\n    if (!label && !helperEl) return textareaEl;\n\n    return (\n      <div className=\"block w-full\">\n        {label && (\n          <label\n            htmlFor={id}\n            className={cn(\n              \"block\",\n              getSpacingClass(\"xs\", \"mb\"),\n              getTypographySize(\"label\"),\n              \"font-medium\",\n              \"text-fg-primary\",\n            )}\n          >\n            {label}\n          </label>\n        )}\n        {textareaEl}\n        {helperEl}\n      </div>\n    );\n  }),\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport default Textarea;\n"],"names":["Textarea","memo","forwardRef","_a","ref","_b","error","success","resize","className","label","helperText","idProp","props","__objRest","autoId","useId","id","primaryFocusRing","useMemo","errorFocusRing","focusRingColor","resizeClasses","classes","cn","getRadiusClass","getSpacingClass","getTypographySize","helperId","ariaDescribedBy","ariaLabel","ariaLabelledBy","useEffect","textareaEl","jsx","__spreadValues","helperEl","jsxs"],"mappings":"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"}

package/dist/granular/ui/primitives/Tooltip/Tooltip.js

@@ -0,0 +1,227 @@
+"use client";
+var $ = Object.defineProperty, q = Object.defineProperties;
+var G = Object.getOwnPropertyDescriptors;
+var b = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable;
+var E = (e, o, r) => o in e ? $(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, R = (e, o) => {
+  for (var r in o || (o = {}))
+    C.call(o, r) && E(e, r, o[r]);
+  if (b)
+    for (var r of b(o))
+      M.call(o, r) && E(e, r, o[r]);
+  return e;
+}, T = (e, o) => q(e, G(o));
+var V = (e, o) => {
+  var r = {};
+  for (var s in e)
+    C.call(e, s) && o.indexOf(s) < 0 && (r[s] = e[s]);
+  if (e != null && b)
+    for (var s of b(e))
+      o.indexOf(s) < 0 && M.call(e, s) && (r[s] = e[s]);
+  return r;
+};
+import { jsxs as L, jsx as H } from "react/jsx-runtime";
+import { forwardRef as J, useState as Q, useRef as v, useId as U, useEffect as k, isValidElement as X, cloneElement as Y } from "react";
+import { getBorderWidthClass as P } from "../../tokens/borders.js";
+import { getRadiusClass as tt } from "../../tokens/radius.js";
+import { getShadowClass as et } from "../../tokens/shadows.js";
+import { getSpacingClass as c } from "../../tokens/spacing.js";
+import { getTypographySize as rt } from "../../tokens/typography.js";
+import { getZIndexClass as ot } from "../../tokens/z-index.js";
+import { cva as B } from "../../utils/cva.js";
+import { cn as a } from "../../utils/cn.js";
+import { mergeRefs as nt } from "../../utils/mergeRefs.js";
+const at = J(function(lt, x) {
+  var y = lt, {
+    content: o,
+    children: r,
+    position: s = "top",
+    delay: I = 200,
+    className: g = "",
+    "aria-label": st,
+    preservePositioning: N = !1
+  } = y, S = V(y, [
+    "content",
+    "children",
+    "position",
+    "delay",
+    "className",
+    "aria-label",
+    "preservePositioning"
+  ]);
+  const [m, f] = Q(!1), u = v(null), h = v(null), d = v(null), w = `tooltip-${U()}`, D = () => {
+    const l = setTimeout(() => {
+      f(!0);
+    }, I);
+    u.current = l;
+  }, F = () => {
+    u.current && (clearTimeout(u.current), u.current = null), f(!1);
+  }, K = () => {
+    f(!0);
+  }, j = () => {
+    f(!1);
+  }, W = (l) => {
+    var t;
+    l.key === "Escape" && (f(!1), (t = d.current) == null || t.blur());
+  };
+  k(() => () => {
+    u.current && (clearTimeout(u.current), u.current = null);
+  }, []), k(() => {
+    if (!m) return;
+    const l = (t) => {
+      h.current && !h.current.contains(t.target) && d.current && !d.current.contains(t.target) && f(!1);
+    };
+    return document.addEventListener("mousedown", l), () => {
+      document.removeEventListener("mousedown", l);
+    };
+  }, [m]);
+  const p = (l) => ({
+    top: "border-t-surface-inverse",
+    bottom: "border-b-surface-inverse",
+    left: "border-l-surface-inverse",
+    right: "border-r-surface-inverse"
+  })[l], z = B(
+    a(
+      "absolute",
+      ot("tooltip"),
+      c("sm", "px"),
+      c("xs", "py"),
+      rt("caption"),
+      "text-fg-inverse",
+      "bg-surface-inverse",
+      tt("md"),
+      et("lg"),
+      "whitespace-nowrap"
+    ),
+    {
+      variants: {
+        position: {
+          top: a(
+            "bottom-full",
+            "left-1/2",
+            "transform",
+            "-translate-x-1/2",
+            c("sm", "mb")
+          ),
+          bottom: a(
+            "top-full",
+            "left-1/2",
+            "transform",
+            "-translate-x-1/2",
+            c("sm", "mt")
+          ),
+          left: a(
+            "right-full",
+            "top-1/2",
+            "transform",
+            "-translate-y-1/2",
+            c("sm", "mr")
+          ),
+          right: a(
+            "left-full",
+            "top-1/2",
+            "transform",
+            "-translate-y-1/2",
+            c("sm", "ml")
+          )
+        }
+      },
+      defaultVariants: {
+        position: "top"
+      }
+    }
+  ), A = B(
+    a(
+      "absolute",
+      "w-0",
+      "h-0",
+      P("thick"),
+      "border-transparent"
+    ),
+    {
+      variants: {
+        position: {
+          top: a(
+            "top-full",
+            "left-1/2",
+            "transform",
+            "-translate-x-1/2",
+            p("top")
+          ),
+          bottom: a(
+            "bottom-full",
+            "left-1/2",
+            "transform",
+            "-translate-x-1/2",
+            p("bottom")
+          ),
+          left: a(
+            "left-full",
+            "top-1/2",
+            "transform",
+            "-translate-y-1/2",
+            p("left")
+          ),
+          right: a(
+            "right-full",
+            "top-1/2",
+            "transform",
+            "-translate-y-1/2",
+            p("right")
+          )
+        }
+      },
+      defaultVariants: {
+        position: "top"
+      }
+    }
+  ), O = X(r) ? (() => {
+    const l = r, t = l.props, _ = t.ref;
+    return Y(l, {
+      ref: nt(d, _),
+      "aria-describedby": m ? w : t["aria-describedby"],
+      onMouseEnter: (i) => {
+        var n;
+        D(), (n = t.onMouseEnter) == null || n.call(t, i);
+      },
+      onMouseLeave: (i) => {
+        var n;
+        F(), (n = t.onMouseLeave) == null || n.call(t, i);
+      },
+      onFocus: (i) => {
+        var n;
+        K(), (n = t.onFocus) == null || n.call(t, i);
+      },
+      onBlur: (i) => {
+        var n;
+        j(), (n = t.onBlur) == null || n.call(t, i);
+      },
+      onKeyDown: (i) => {
+        var n;
+        W(i), (n = t.onKeyDown) == null || n.call(t, i);
+      }
+    });
+  })() : r, Z = N ? a("static", "inline-block", g) : a("relative", "inline-block", g);
+  return /* @__PURE__ */ L("div", T(R({ ref: x, className: Z }, S), { children: [
+    O,
+    m && /* @__PURE__ */ L(
+      "div",
+      {
+        ref: h,
+        id: w,
+        className: a(z({ position: s })),
+        role: "tooltip",
+        "aria-live": "polite",
+        children: [
+          o,
+          /* @__PURE__ */ H("div", { className: a(A({ position: s })), "aria-hidden": "true" })
+        ]
+      }
+    )
+  ] }));
+});
+at.displayName = "Tooltip";
+export {
+  at as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/granular/ui/primitives/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../src/ui/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  HTMLAttributes,\n  ReactNode,\n  KeyboardEvent,\n  FocusEvent,\n  ReactElement,\n} from \"react\";\nimport {\n  forwardRef,\n  useState,\n  useRef,\n  useEffect,\n  useId,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport { getBorderWidthClass } from \"../../tokens/borders\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { cn, cva, mergeRefs } from \"../../utils\";\n\nexport interface TooltipProps extends HTMLAttributes<HTMLDivElement> {\n  content: string;\n  children: ReactNode;\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  delay?: number;\n  \"aria-label\"?: string;\n  /**\n   * When true, the tooltip wrapper won't interfere with absolute positioning of children.\n   * The wrapper will use `position: static` instead of `position: relative`.\n   */\n  preservePositioning?: boolean;\n}\n\n/**\n * Tooltip Component\n *\n * A tooltip component for displaying additional information on hover.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n *   <Button>Hover me</Button>\n * </Tooltip>\n * ```\n */\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    content,\n    children,\n    position = \"top\",\n    delay = 200,\n    className = \"\",\n    \"aria-label\": _ariaLabel,\n    preservePositioning = false,\n    ...props\n  },\n  ref,\n) {\n  const [isVisible, setIsVisible] = useState(false);\n  const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n\n  // Stable per-instance ID for the tooltip popup. useId is SSR-safe and\n  // stable across renders — the previous Math.random() approach generated\n  // a fresh ID on every render, which silently breaks the\n  // aria-describedby <-> tooltip id pairing observed by assistive tech\n  // across re-renders.\n  const tooltipId = `tooltip-${useId()}`;\n\n  const handleMouseEnter = () => {\n    const id = setTimeout(() => {\n      setIsVisible(true);\n    }, delay);\n    timeoutIdRef.current = id;\n  };\n\n  const handleMouseLeave = () => {\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n      timeoutIdRef.current = null;\n    }\n    setIsVisible(false);\n  };\n\n  const handleFocus = () => {\n    // Show tooltip immediately on focus (no delay for keyboard users)\n    setIsVisible(true);\n  };\n\n  const handleBlur = () => {\n    setIsVisible(false);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      setIsVisible(false);\n      triggerRef.current?.blur();\n    }\n  };\n\n  // Cleanup timeout on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n        timeoutIdRef.current = null;\n      }\n    };\n  }, []);\n\n  // Close tooltip when clicking outside\n  useEffect(() => {\n    if (!isVisible) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        tooltipRef.current &&\n        !tooltipRef.current.contains(event.target as Node) &&\n        triggerRef.current &&\n        !triggerRef.current.contains(event.target as Node)\n      ) {\n        setIsVisible(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isVisible]);\n\n  // Helper to get arrow border color\n  // Uses complete classes that Tailwind can detect\n  const getArrowBorderColor = (\n    position: \"top\" | \"bottom\" | \"left\" | \"right\",\n  ): string => {\n    // Arrow follows the tooltip body's surface-inverse color so the\n    // triangle's point visually merges into the body.\n    const borderMap: Record<\"top\" | \"bottom\" | \"left\" | \"right\", string> = {\n      top: \"border-t-surface-inverse\",\n      bottom: \"border-b-surface-inverse\",\n      left: \"border-l-surface-inverse\",\n      right: \"border-r-surface-inverse\",\n    };\n    return borderMap[position];\n  };\n\n  // Tooltip variants using CVA\n  const tooltipVariants = cva(\n    cn(\n      \"absolute\",\n      getZIndexClass(\"tooltip\"),\n      getSpacingClass(\"sm\", \"px\"),\n      getSpacingClass(\"xs\", \"py\"),\n      getTypographySize(\"caption\"),\n      \"text-fg-inverse\",\n      \"bg-surface-inverse\",\n      getRadiusClass(\"md\"),\n      getShadowClass(\"lg\"),\n      \"whitespace-nowrap\",\n    ),\n    {\n      variants: {\n        position: {\n          top: cn(\n            \"bottom-full\",\n            \"left-1/2\",\n            \"transform\",\n            \"-translate-x-1/2\",\n            getSpacingClass(\"sm\", \"mb\"),\n          ),\n          bottom: cn(\n            \"top-full\",\n            \"left-1/2\",\n            \"transform\",\n            \"-translate-x-1/2\",\n            getSpacingClass(\"sm\", \"mt\"),\n          ),\n          left: cn(\n            \"right-full\",\n            \"top-1/2\",\n            \"transform\",\n            \"-translate-y-1/2\",\n            getSpacingClass(\"sm\", \"mr\"),\n          ),\n          right: cn(\n            \"left-full\",\n            \"top-1/2\",\n            \"transform\",\n            \"-translate-y-1/2\",\n            getSpacingClass(\"sm\", \"ml\"),\n          ),\n        },\n      },\n      defaultVariants: {\n        position: \"top\",\n      },\n    },\n  );\n\n  const arrowVariants = cva(\n    cn(\n      \"absolute\",\n      \"w-0\",\n      \"h-0\",\n      getBorderWidthClass(\"thick\"),\n      \"border-transparent\",\n    ),\n    {\n      variants: {\n        position: {\n          top: cn(\n            \"top-full\",\n            \"left-1/2\",\n            \"transform\",\n            \"-translate-x-1/2\",\n            getArrowBorderColor(\"top\"),\n          ),\n          bottom: cn(\n            \"bottom-full\",\n            \"left-1/2\",\n            \"transform\",\n            \"-translate-x-1/2\",\n            getArrowBorderColor(\"bottom\"),\n          ),\n          left: cn(\n            \"left-full\",\n            \"top-1/2\",\n            \"transform\",\n            \"-translate-y-1/2\",\n            getArrowBorderColor(\"left\"),\n          ),\n          right: cn(\n            \"right-full\",\n            \"top-1/2\",\n            \"transform\",\n            \"-translate-y-1/2\",\n            getArrowBorderColor(\"right\"),\n          ),\n        },\n      },\n      defaultVariants: {\n        position: \"top\",\n      },\n    },\n  );\n\n  // Clone children to add accessibility props\n  const childrenWithProps = isValidElement(children)\n    ? (() => {\n        const childElement = children as ReactElement<\n          HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }\n        >;\n        const existingProps = childElement.props;\n        const existingRef = existingProps.ref;\n\n        return cloneElement(childElement, {\n          ref: mergeRefs<HTMLElement>(triggerRef, existingRef),\n          \"aria-describedby\": isVisible\n            ? tooltipId\n            : existingProps[\"aria-describedby\"],\n          onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n            handleMouseEnter();\n            existingProps.onMouseEnter?.(e);\n          },\n          onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n            handleMouseLeave();\n            existingProps.onMouseLeave?.(e);\n          },\n          onFocus: (e: FocusEvent<HTMLElement>) => {\n            handleFocus();\n            existingProps.onFocus?.(e);\n          },\n          onBlur: (e: FocusEvent<HTMLElement>) => {\n            handleBlur();\n            existingProps.onBlur?.(e);\n          },\n          onKeyDown: (e: KeyboardEvent<HTMLElement>) => {\n            handleKeyDown(e);\n            existingProps.onKeyDown?.(e);\n          },\n        } as Partial<typeof existingProps>);\n      })()\n    : children;\n\n  // When preservePositioning is true, use static positioning to avoid interfering\n  // with absolute positioned children. The tooltip will still be positioned correctly\n  // using absolute positioning relative to the viewport/nearest positioned ancestor.\n  const wrapperClassName = preservePositioning\n    ? cn(\"static\", \"inline-block\", className)\n    : cn(\"relative\", \"inline-block\", className);\n\n  return (\n    <div ref={ref} className={wrapperClassName} {...props}>\n      {childrenWithProps}\n      {isVisible && (\n        <div\n          ref={tooltipRef}\n          id={tooltipId}\n          className={cn(tooltipVariants({ position }))}\n          role=\"tooltip\"\n          aria-live=\"polite\"\n        >\n          {content}\n          <div className={cn(arrowVariants({ position }))} aria-hidden=\"true\" />\n        </div>\n      )}\n    </div>\n  );\n});\n\nTooltip.displayName = \"Tooltip\";\n\nexport default Tooltip;\n"],"names":["Tooltip","forwardRef","_a","ref","_b","content","children","position","delay","className","_ariaLabel","preservePositioning","props","__objRest","isVisible","setIsVisible","useState","timeoutIdRef","useRef","tooltipRef","triggerRef","tooltipId","useId","handleMouseEnter","id","handleMouseLeave","handleFocus","handleBlur","handleKeyDown","e","useEffect","handleClickOutside","event","getArrowBorderColor","tooltipVariants","cva","cn","getZIndexClass","getSpacingClass","getTypographySize","getRadiusClass","getShadowClass","arrowVariants","getBorderWidthClass","childrenWithProps","isValidElement","childElement","existingProps","existingRef","cloneElement","mergeRefs","wrapperClassName","__spreadProps","__spreadValues","jsxs","jsx"],"mappings":"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"}

package/dist/granular/ui/providers/AppProvider.js

@@ -0,0 +1,50 @@
+"use client";
+var l = Object.defineProperty, p = Object.defineProperties;
+var h = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
+var g = (o, e, r) => e in o ? l(o, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[e] = r, i = (o, e) => {
+  for (var r in e || (e = {}))
+    v.call(e, r) && g(o, r, e[r]);
+  if (a)
+    for (var r of a(e))
+      P.call(e, r) && g(o, r, e[r]);
+  return o;
+}, n = (o, e) => p(o, h(e));
+import { jsx as c, Fragment as I } from "react/jsx-runtime";
+import { useMemo as A } from "react";
+import { ProvidersBundle as C } from "./providers-bundle.js";
+const f = C;
+function T(o, e) {
+  const {
+    theme: r,
+    config: s,
+    toast: u,
+    dialog: m,
+    providers: d = {
+      theme: !0,
+      config: !0,
+      toast: !0,
+      dialog: !0
+    }
+  } = e || {};
+  let t = o;
+  return d.dialog && (t = /* @__PURE__ */ c(f.DialogProvider, n(i({}, m), { children: t }))), d.toast && (t = /* @__PURE__ */ c(f.ToastProvider, n(i({}, u), { children: t }))), d.config && (t = /* @__PURE__ */ c(f.ConfigProvider, n(i({}, s), { children: t }))), d.theme && (t = /* @__PURE__ */ c(f.ThemeProvider, n(i({}, r), { children: t }))), t;
+}
+function N({ children: o, config: e }) {
+  const r = A(
+    () => T(o, e),
+    [o, e]
+  );
+  return /* @__PURE__ */ c(I, { children: r });
+}
+function O() {
+  return {
+    // Placeholder for future unified API
+  };
+}
+export {
+  N as AppProvider,
+  O as useApp
+};
+//# sourceMappingURL=AppProvider.js.map