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

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

@@ -0,0 +1,351 @@
+"use client";
+var ie = Object.defineProperty;
+var P = Object.getOwnPropertySymbols;
+var K = Object.prototype.hasOwnProperty, Q = Object.prototype.propertyIsEnumerable;
+var J = (r, t, e) => t in r ? ie(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, U = (r, t) => {
+  for (var e in t || (t = {}))
+    K.call(t, e) && J(r, e, t[e]);
+  if (P)
+    for (var e of P(t))
+      Q.call(t, e) && J(r, e, t[e]);
+  return r;
+};
+var Y = (r, t) => {
+  var e = {};
+  for (var s in r)
+    K.call(r, s) && t.indexOf(s) < 0 && (e[s] = r[s]);
+  if (r != null && P)
+    for (var s of P(r))
+      t.indexOf(s) < 0 && Q.call(r, s) && (e[s] = r[s]);
+  return e;
+};
+import { jsxs as F, jsx as n } from "react/jsx-runtime";
+import { memo as _, forwardRef as de, useId as ue, useMemo as o, useState as fe, useCallback as T } from "react";
+import { getTypographySize as j, getTypographyClasses as z } from "../../tokens/typography.js";
+import { getRadiusClass as pe } from "../../tokens/radius.js";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+import { X as me, EyeOff as be, Eye as ge } from "lucide-react";
+import { Button as Z } from "../Button/Button.js";
+import { cva as ve } from "../../utils/cva.js";
+import { cn as c } from "../../utils/cn.js";
+const he = _(function({
+  error: t,
+  success: e,
+  helperText: s,
+  errorId: i,
+  helperId: d
+}) {
+  const a = o(
+    () => c(
+      l("xs", "mt"),
+      z("caption"),
+      t && "text-fg-error",
+      e && "text-fg-success",
+      !t && !e && "text-fg-secondary"
+    ),
+    [t, e]
+  ), v = o(
+    () => s || (t ? "Error" : e ? "Success" : ""),
+    [s, t, e]
+  );
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      id: i || d,
+      className: a,
+      role: t || e ? "alert" : void 0,
+      children: v
+    }
+  );
+}), ye = _(
+  de(function(xe, ee) {
+    var O = xe, {
+      id: t,
+      label: e,
+      error: s = !1,
+      success: i = !1,
+      helperText: d,
+      size: a = "md",
+      variant: v = "outlined",
+      leftIcon: h,
+      rightIcon: y,
+      showClearButton: k = !1,
+      onClear: C,
+      className: H = "",
+      disabled: m = !1,
+      type: x = "text",
+      value: b,
+      onChange: w
+    } = O, q = Y(O, [
+      "id",
+      "label",
+      "error",
+      "success",
+      "helperText",
+      "size",
+      "variant",
+      "leftIcon",
+      "rightIcon",
+      "showClearButton",
+      "onClear",
+      "className",
+      "disabled",
+      "type",
+      "value",
+      "onChange"
+    ]);
+    const te = ue(), u = t || `input-${te}`, V = o(
+      () => s ? `${u}-error` : void 0,
+      [s, u]
+    ), D = o(
+      () => d ? `${u}-helper` : void 0,
+      [d, u]
+    ), [N, se] = fe(!1), f = o(() => x === "password", [x]), oe = o(
+      () => f && N ? "text" : x,
+      [f, N, x]
+    ), I = o(
+      () => s ? "error" : i ? "success" : "default",
+      [s, i]
+    ), L = o(
+      () => b != null && b !== "",
+      [b]
+    ), S = o(
+      () => k && L && !m,
+      [k, L, m]
+    ), M = o(() => "focus:border-line-focus", []), W = o(() => "focus:border-error", []), X = o(() => "focus:border-success", []), A = o(
+      () => M.replace("focus:border-", "focus:ring-"),
+      [M]
+    ), $ = T(
+      (p) => p === "error" ? W.replace("focus:border-", "focus:ring-") : X.replace("focus:border-", "focus:ring-"),
+      [W, X]
+    ), B = o(
+      () => ve(
+        // Base classes
+        c(
+          "w-full",
+          pe("md"),
+          "transition-colors",
+          "focus:outline-none",
+          "focus:ring-2",
+          "focus:ring-offset-2",
+          "disabled:opacity-50",
+          "disabled:cursor-not-allowed"
+        ),
+        {
+          variants: {
+            variant: {
+              default: c(
+                "border-0",
+                "border-b-2",
+                "border-line-default",
+                "focus:border-line-focus"
+              ),
+              outlined: c(
+                "border",
+                "border-line-default",
+                "focus:border-line-focus"
+              ),
+              filled: c(
+                "bg-surface-muted",
+                "border-0",
+                "focus:bg-surface-base",
+                "focus:ring-2",
+                A
+              )
+            },
+            size: {
+              sm: c(
+                "h-8",
+                j("bodySmall"),
+                l("md", "px")
+              ),
+              md: c(
+                "h-10",
+                j("body"),
+                l("base", "px")
+              ),
+              lg: c(
+                "h-12",
+                j("bodyLarge"),
+                l("lg", "px")
+              )
+            },
+            state: {
+              default: "",
+              error: c(
+                "border-error",
+                "focus:border-error",
+                $("error")
+              ),
+              success: c(
+                "border-success",
+                "focus:border-success",
+                $("success")
+              )
+            }
+          },
+          defaultVariants: {
+            variant: "outlined",
+            size: "md",
+            state: "default"
+          }
+        }
+      ),
+      [A, $]
+    ), re = o(
+      () => c(
+        B({ variant: v, size: a, state: I }),
+        // Icon padding - specific values for icon positioning.
+        // `pl-9` / `pr-9` aren't on the spacing scale (no semantic
+        // key for 36px); they stay raw until a future PR either
+        // extends the scale or refactors the icon-padding contract.
+        h && (a === "sm" ? "pl-9" : a === "lg" ? l("3xl", "pl") : l("2xl", "pl")),
+        (y || S || f) && (a === "sm" ? "pr-9" : a === "lg" ? l("3xl", "pr") : l("2xl", "pr")),
+        H
+      ),
+      [
+        B,
+        v,
+        a,
+        I,
+        h,
+        y,
+        S,
+        f,
+        H
+      ]
+    ), ae = o(
+      () => c(
+        "block",
+        z("label"),
+        l("xs", "mb"),
+        m && "opacity-50"
+      ),
+      [m]
+    ), g = o(
+      () => a === "sm" ? "h-4 w-4" : a === "lg" ? "h-5 w-5" : "h-4 w-4",
+      [a]
+    ), ne = o(
+      () => a === "sm" ? "top-2" : a === "lg" ? "top-3.5" : "top-2.5",
+      [a]
+    ), le = T(
+      (p) => {
+        var G;
+        if (p.stopPropagation(), C)
+          C();
+        else if (w) {
+          const E = (G = p.currentTarget.closest(".relative")) == null ? void 0 : G.querySelector("input");
+          if (E) {
+            const R = {
+              target: E,
+              currentTarget: E,
+              bubbles: !0,
+              cancelable: !0,
+              defaultPrevented: !1,
+              eventPhase: 2,
+              isTrusted: !1,
+              nativeEvent: new Event("change"),
+              preventDefault: () => {
+              },
+              stopPropagation: () => {
+              },
+              persist: () => {
+              },
+              timeStamp: Date.now()
+            };
+            Object.defineProperty(R.target, "value", {
+              value: "",
+              writable: !0
+            }), Object.defineProperty(R.currentTarget, "value", {
+              value: "",
+              writable: !0
+            }), w(R);
+          }
+        }
+      },
+      [C, w]
+    ), ce = T(() => {
+      se((p) => !p);
+    }, []);
+    return /* @__PURE__ */ F("div", { className: "w-full", children: [
+      e && /* @__PURE__ */ n("label", { htmlFor: u, className: ae, children: e }),
+      /* @__PURE__ */ F("div", { className: "relative", children: [
+        h && /* @__PURE__ */ n(
+          "div",
+          {
+            className: `absolute left-3 ${ne} text-fg-secondary opacity-60 pointer-events-none`,
+            children: /* @__PURE__ */ n("div", { className: g, children: h })
+          }
+        ),
+        /* @__PURE__ */ n(
+          "input",
+          U({
+            id: u,
+            ref: ee,
+            type: oe,
+            className: re,
+            disabled: m,
+            value: b,
+            onChange: w,
+            "aria-invalid": s,
+            "aria-required": q.required,
+            "aria-describedby": V || D,
+            suppressHydrationWarning: !0
+          }, q)
+        ),
+        /* @__PURE__ */ F(
+          "div",
+          {
+            className: `absolute right-3 top-0 bottom-0 flex items-center ${l("xs", "gap")}`,
+            children: [
+              S && /* @__PURE__ */ n(
+                Z,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: le,
+                  className: `h-auto ${l("xs", "p")}`,
+                  "aria-label": "Clear input",
+                  children: /* @__PURE__ */ n(me, { className: g })
+                }
+              ),
+              f && /* @__PURE__ */ n(
+                Z,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: ce,
+                  className: `h-auto ${l("xs", "p")}`,
+                  "aria-label": N ? "Hide password" : "Show password",
+                  children: N ? /* @__PURE__ */ n(be, { className: g }) : /* @__PURE__ */ n(ge, { className: g })
+                }
+              ),
+              y && !S && !f && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: `text-fg-secondary opacity-60 pointer-events-none ${g}`,
+                  children: y
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      (s || i || d) && /* @__PURE__ */ n(
+        he,
+        {
+          error: s,
+          success: i,
+          helperText: d,
+          errorId: V,
+          helperId: D
+        }
+      )
+    ] });
+  })
+);
+ye.displayName = "Input";
+export {
+  ye as default
+};
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../src/ui/primitives/Input/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState, memo, useId, useMemo, useCallback } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport {\n  getTypographyClasses,\n  getTypographySize,\n} from \"../../tokens/typography\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn, cva } from \"../../utils\";\nimport { X, Eye, EyeOff } from \"lucide-react\";\nimport Button from \"../Button/Button\";\n\n/**\n * Helper Text Component\n * Memoized component for helper/error text\n */\nconst HelperText = memo(function HelperText({\n  error,\n  success,\n  helperText,\n  errorId,\n  helperId,\n}: {\n  error: boolean;\n  success: boolean;\n  helperText?: string;\n  errorId?: string;\n  helperId?: string;\n}) {\n  const helperClasses = useMemo(\n    () =>\n      cn(\n        getSpacingClass(\"xs\", \"mt\"),\n        getTypographyClasses(\"caption\"),\n        error && \"text-fg-error\",\n        success && \"text-fg-success\",\n        !error && !success && \"text-fg-secondary\",\n      ),\n    [error, success],\n  );\n\n  const text = useMemo(\n    () => helperText || (error ? \"Error\" : success ? \"Success\" : \"\"),\n    [helperText, error, success],\n  );\n\n  return (\n    <div\n      id={errorId || helperId}\n      className={helperClasses}\n      role={error || success ? \"alert\" : undefined}\n    >\n      {text}\n    </div>\n  );\n});\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\nexport type InputVariant = \"default\" | \"outlined\" | \"filled\";\nexport type InputState = \"default\" | \"error\" | \"success\";\n\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  label?: ReactNode;\n  error?: boolean;\n  success?: boolean;\n  helperText?: string;\n  size?: InputSize;\n  variant?: InputVariant;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  showClearButton?: boolean;\n  onClear?: () => void;\n}\n\n/**\n * Input Component\n *\n * A styled text input component with label, error/success states, icons, and clear button.\n * Follows Atomic Design principles as an Atom component.\n * Uses Composite Pattern when combined with Label and ErrorMessage.\n *\n * @example\n * ```tsx\n * <Input\n *   id=\"email\"\n *   label=\"Email\"\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   error={hasError}\n *   helperText={errorMessage}\n *   leftIcon={<MailIcon />}\n * />\n * ```\n */\nconst Input = memo(\n  forwardRef<HTMLInputElement, InputProps>(function Input(\n    {\n      id,\n      label,\n      error = false,\n      success = false,\n      helperText,\n      size = \"md\",\n      variant = \"outlined\",\n      leftIcon,\n      rightIcon,\n      showClearButton = false,\n      onClear,\n      className = \"\",\n      disabled = false,\n      type = \"text\",\n      value,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\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 inputId = id || `input-${reactId}`;\n\n    // Memoize error and helper IDs\n    const errorId = useMemo(\n      () => (error ? `${inputId}-error` : undefined),\n      [error, inputId],\n    );\n\n    const helperId = useMemo(\n      () => (helperText ? `${inputId}-helper` : undefined),\n      [helperText, inputId],\n    );\n\n    // Password toggle state\n    const [showPassword, setShowPassword] = useState(false);\n\n    // Memoize password-related values\n    const isPassword = useMemo(() => type === \"password\", [type]);\n    const inputType = useMemo(\n      () => (isPassword && showPassword ? \"text\" : type),\n      [isPassword, showPassword, type],\n    );\n\n    // Memoize state\n    const state = useMemo<InputState>(\n      () => (error ? \"error\" : success ? \"success\" : \"default\"),\n      [error, success],\n    );\n\n    // Memoize clear button visibility\n    const hasValue = useMemo(\n      () => value !== undefined && value !== null && value !== \"\",\n      [value],\n    );\n\n    const shouldShowClear = useMemo(\n      () => showClearButton && hasValue && !disabled,\n      [showClearButton, hasValue, disabled],\n    );\n\n    // Memoize focus ring colors\n    const primaryFocusRing = useMemo(() => \"focus:border-line-focus\", []);\n\n    const errorFocusRing = useMemo(() => \"focus:border-error\", []);\n\n    const successFocusRing = useMemo(() => \"focus:border-success\", []);\n\n    const getFocusRingColor = useMemo(\n      () => primaryFocusRing.replace(\"focus:border-\", \"focus:ring-\"),\n      [primaryFocusRing],\n    );\n\n    const getStateFocusRingColor = useCallback(\n      (stateType: \"error\" | \"success\"): string => {\n        return stateType === \"error\"\n          ? errorFocusRing.replace(\"focus:border-\", \"focus:ring-\")\n          : successFocusRing.replace(\"focus:border-\", \"focus:ring-\");\n      },\n      [errorFocusRing, successFocusRing],\n    );\n\n    // Input variants using CVA — memoize so the function reference is\n    // stable across renders. inputClasses below depends on this; without\n    // memoization a fresh cva() each render would invalidate that memo\n    // on every render (defeating its purpose).\n    const inputVariants = useMemo(\n      () =>\n        cva(\n          // Base classes\n          cn(\n            \"w-full\",\n            getRadiusClass(\"md\"),\n            \"transition-colors\",\n            \"focus:outline-none\",\n            \"focus:ring-2\",\n            \"focus:ring-offset-2\",\n            \"disabled:opacity-50\",\n            \"disabled:cursor-not-allowed\",\n          ),\n          {\n            variants: {\n              variant: {\n                default: cn(\n                  \"border-0\",\n                  \"border-b-2\",\n                  \"border-line-default\",\n                  \"focus:border-line-focus\",\n                ),\n                outlined: cn(\n                  \"border\",\n                  \"border-line-default\",\n                  \"focus:border-line-focus\",\n                ),\n                filled: cn(\n                  \"bg-surface-muted\",\n                  \"border-0\",\n                  \"focus:bg-surface-base\",\n                  \"focus:ring-2\",\n                  getFocusRingColor,\n                ),\n              },\n              size: {\n                sm: cn(\n                  \"h-8\",\n                  getTypographySize(\"bodySmall\"),\n                  getSpacingClass(\"md\", \"px\"),\n                ),\n                md: cn(\n                  \"h-10\",\n                  getTypographySize(\"body\"),\n                  getSpacingClass(\"base\", \"px\"),\n                ),\n                lg: cn(\n                  \"h-12\",\n                  getTypographySize(\"bodyLarge\"),\n                  getSpacingClass(\"lg\", \"px\"),\n                ),\n              },\n              state: {\n                default: \"\",\n                error: cn(\n                  \"border-error\",\n                  \"focus:border-error\",\n                  getStateFocusRingColor(\"error\"),\n                ),\n                success: cn(\n                  \"border-success\",\n                  \"focus:border-success\",\n                  getStateFocusRingColor(\"success\"),\n                ),\n              },\n            },\n            defaultVariants: {\n              variant: \"outlined\",\n              size: \"md\",\n              state: \"default\",\n            },\n          },\n        ),\n      [getFocusRingColor, getStateFocusRingColor],\n    );\n\n    // Memoize input classes\n    const inputClasses = useMemo(\n      () =>\n        cn(\n          inputVariants({ variant, size, state }),\n          // Icon padding - specific values for icon positioning.\n          // `pl-9` / `pr-9` aren't on the spacing scale (no semantic\n          // key for 36px); they stay raw until a future PR either\n          // extends the scale or refactors the icon-padding contract.\n          leftIcon &&\n            (size === \"sm\"\n              ? \"pl-9\"\n              : size === \"lg\"\n                ? getSpacingClass(\"3xl\", \"pl\")\n                : getSpacingClass(\"2xl\", \"pl\")),\n          (rightIcon || shouldShowClear || isPassword) &&\n            (size === \"sm\"\n              ? \"pr-9\"\n              : size === \"lg\"\n                ? getSpacingClass(\"3xl\", \"pr\")\n                : getSpacingClass(\"2xl\", \"pr\")),\n          className,\n        ),\n      [\n        inputVariants,\n        variant,\n        size,\n        state,\n        leftIcon,\n        rightIcon,\n        shouldShowClear,\n        isPassword,\n        className,\n      ],\n    );\n\n    // Memoize label classes\n    const labelClasses = useMemo(\n      () =>\n        cn(\n          \"block\",\n          getTypographyClasses(\"label\"),\n          getSpacingClass(\"xs\", \"mb\"),\n          disabled && \"opacity-50\",\n        ),\n      [disabled],\n    );\n\n    // Memoize icon size and position\n    const iconSize = useMemo(\n      () => (size === \"sm\" ? \"h-4 w-4\" : size === \"lg\" ? \"h-5 w-5\" : \"h-4 w-4\"),\n      [size],\n    );\n\n    const iconPosition = useMemo(\n      () => (size === \"sm\" ? \"top-2\" : size === \"lg\" ? \"top-3.5\" : \"top-2.5\"),\n      [size],\n    );\n\n    // Memoize clear handler\n    const handleClear = useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation();\n        if (onClear) {\n          onClear();\n        } else if (onChange) {\n          // Create synthetic event to clear input\n          const inputElement = e.currentTarget\n            .closest(\".relative\")\n            ?.querySelector(\"input\") as HTMLInputElement;\n          if (inputElement) {\n            const syntheticEvent = {\n              target: inputElement,\n              currentTarget: inputElement,\n              bubbles: true,\n              cancelable: true,\n              defaultPrevented: false,\n              eventPhase: 2,\n              isTrusted: false,\n              nativeEvent: new Event(\"change\"),\n              preventDefault: () => {},\n              stopPropagation: () => {},\n              persist: () => {},\n              timeStamp: Date.now(),\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            Object.defineProperty(syntheticEvent.target, \"value\", {\n              value: \"\",\n              writable: true,\n            });\n            Object.defineProperty(syntheticEvent.currentTarget, \"value\", {\n              value: \"\",\n              writable: true,\n            });\n            onChange(syntheticEvent);\n          }\n        }\n      },\n      [onClear, onChange],\n    );\n\n    // Memoize password toggle handler\n    const handleTogglePassword = useCallback(() => {\n      setShowPassword((prev) => !prev);\n    }, []);\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label htmlFor={inputId} className={labelClasses}>\n            {label}\n          </label>\n        )}\n        <div className=\"relative\">\n          {leftIcon && (\n            <div\n              className={`absolute left-3 ${iconPosition} text-fg-secondary opacity-60 pointer-events-none`}\n            >\n              <div className={iconSize}>{leftIcon}</div>\n            </div>\n          )}\n          <input\n            id={inputId}\n            ref={ref}\n            type={inputType}\n            className={inputClasses}\n            disabled={disabled}\n            value={value}\n            onChange={onChange}\n            aria-invalid={error}\n            aria-required={props.required}\n            aria-describedby={errorId || helperId}\n            suppressHydrationWarning\n            {...props}\n          />\n          <div\n            className={`absolute right-3 top-0 bottom-0 flex items-center ${getSpacingClass(\"xs\", \"gap\")}`}\n          >\n            {shouldShowClear && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={handleClear}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label=\"Clear input\"\n              >\n                <X className={iconSize} />\n              </Button>\n            )}\n            {isPassword && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={handleTogglePassword}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              >\n                {showPassword ? (\n                  <EyeOff className={iconSize} />\n                ) : (\n                  <Eye className={iconSize} />\n                )}\n              </Button>\n            )}\n            {rightIcon && !shouldShowClear && !isPassword && (\n              <div\n                className={`text-fg-secondary opacity-60 pointer-events-none ${iconSize}`}\n              >\n                {rightIcon}\n              </div>\n            )}\n          </div>\n        </div>\n        {(error || success || helperText) && (\n          <HelperText\n            error={error}\n            success={success}\n            helperText={helperText}\n            errorId={errorId}\n            helperId={helperId}\n          />\n        )}\n      </div>\n    );\n  }),\n);\n\nInput.displayName = \"Input\";\n\nexport default Input;\n"],"names":["HelperText","memo","error","success","helperText","errorId","helperId","helperClasses","useMemo","cn","getSpacingClass","getTypographyClasses","text","jsx","Input","forwardRef","_a","ref","_b","id","label","size","variant","leftIcon","rightIcon","showClearButton","onClear","className","disabled","type","value","onChange","props","__objRest","reactId","useId","inputId","showPassword","setShowPassword","useState","isPassword","inputType","state","hasValue","shouldShowClear","primaryFocusRing","errorFocusRing","successFocusRing","getFocusRingColor","getStateFocusRingColor","useCallback","stateType","inputVariants","cva","getRadiusClass","getTypographySize","inputClasses","labelClasses","iconSize","iconPosition","handleClear","e","inputElement","syntheticEvent","handleTogglePassword","prev","jsxs","__spreadValues","Button","X","EyeOff","Eye"],"mappings":"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"}

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

@@ -0,0 +1,61 @@
+"use client";
+var d = Object.defineProperty, x = Object.defineProperties;
+var h = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var n = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var f = (e, t, a) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, i = (e, t) => {
+  for (var a in t || (t = {}))
+    n.call(t, a) && f(e, a, t[a]);
+  if (o)
+    for (var a of o(t))
+      m.call(t, a) && f(e, a, t[a]);
+  return e;
+}, p = (e, t) => x(e, h(t));
+var c = (e, t) => {
+  var a = {};
+  for (var r in e)
+    n.call(e, r) && t.indexOf(r) < 0 && (a[r] = e[r]);
+  if (e != null && o)
+    for (var r of o(e))
+      t.indexOf(r) < 0 && m.call(e, r) && (a[r] = e[r]);
+  return a;
+};
+import { jsx as C } from "react/jsx-runtime";
+import { memo as L, forwardRef as N } from "react";
+import { getTypographyWeight as S, getTypographySize as T } from "../../tokens/typography.js";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+import { cn as l } from "../../utils/cn.js";
+const $ = l(
+  "block",
+  T("label"),
+  S("label"),
+  "text-fg-primary"
+), j = {
+  default: "",
+  required: l(
+    "after:content-['*']",
+    `after:${g("0.5", "ml")}`,
+    "after:text-fg-error"
+  ),
+  optional: l(
+    "after:content-['(optional)']",
+    `after:${g("xs", "ml")}`,
+    "after:text-fg-tertiary",
+    "after:font-normal"
+  )
+}, k = L(
+  N(function(q, u) {
+    var s = q, { variant: t = "default", className: a = "", children: r } = s, b = c(s, ["variant", "className", "children"]);
+    const y = l(
+      $,
+      j[t],
+      a
+    );
+    return /* @__PURE__ */ C("label", p(i({ ref: u, className: y }, b), { children: r }));
+  })
+);
+k.displayName = "Label";
+export {
+  k as default
+};
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../../../src/ui/primitives/Label/Label.tsx"],"sourcesContent":["import type { LabelHTMLAttributes } from \"react\";\nimport { forwardRef, memo } from \"react\";\nimport {\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens/typography\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { cn } from \"../../utils\";\n\ninterface Props extends LabelHTMLAttributes<HTMLLabelElement> {\n  variant?: \"default\" | \"required\" | \"optional\";\n  children: React.ReactNode;\n}\n\nconst labelBaseClasses = cn(\n  \"block\",\n  getTypographySize(\"label\"),\n  getTypographyWeight(\"label\"),\n  \"text-fg-primary\",\n);\n\nconst labelVariantClasses: Record<NonNullable<Props[\"variant\"]>, string> = {\n  default: \"\",\n  required: cn(\n    \"after:content-['*']\",\n    `after:${getSpacingClass(\"0.5\", \"ml\")}`,\n    \"after:text-fg-error\",\n  ),\n  optional: cn(\n    \"after:content-['(optional)']\",\n    `after:${getSpacingClass(\"xs\", \"ml\")}`,\n    \"after:text-fg-tertiary\",\n    \"after:font-normal\",\n  ),\n};\n\n/**\n * Label Component\n *\n * A styled label component for form inputs.\n * Follows Atomic Design principles as an Atom component.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\" variant=\"required\">\n *   Email Address\n * </Label>\n * ```\n */\nconst Label = memo(\n  forwardRef<HTMLLabelElement, Props>(function Label(\n    { variant = \"default\", className = \"\", children, ...props },\n    ref,\n  ) {\n    const classes = cn(\n      labelBaseClasses,\n      labelVariantClasses[variant],\n      className,\n    );\n\n    return (\n      <label ref={ref} className={classes} {...props}>\n        {children}\n      </label>\n    );\n  }),\n);\n\nLabel.displayName = \"Label\";\n\nexport default Label;\n"],"names":["labelBaseClasses","cn","getTypographySize","getTypographyWeight","labelVariantClasses","getSpacingClass","Label","memo","forwardRef","_a","ref","_b","variant","className","children","props","__objRest","classes","__spreadProps","__spreadValues"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,IAAmBC;AAAA,EACvB;AAAA,EACAC,EAAkB,OAAO;AAAA,EACzBC,EAAoB,OAAO;AAAA,EAC3B;AACF,GAEMC,IAAqE;AAAA,EACzE,SAAS;AAAA,EACT,UAAUH;AAAA,IACR;AAAA,IACA,SAASI,EAAgB,OAAO,IAAI,CAAC;AAAA,IACrC;AAAA,EAAA;AAAA,EAEF,UAAUJ;AAAA,IACR;AAAA,IACA,SAASI,EAAgB,MAAM,IAAI,CAAC;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAEJ,GAeMC,IAAQC;AAAA,EACZC,EAAoC,SAClCC,GACAC,GACA;AAFA,QAAAC,IAAAF,GAAE,WAAAG,IAAU,WAAW,WAAAC,IAAY,IAAI,UAAAC,MAAvCH,GAAoDI,IAAAC,EAApDL,GAAoD,CAAlD,WAAqB,aAAgB;AAGvC,UAAMM,IAAUhB;AAAA,MACdD;AAAA,MACAI,EAAoBQ,CAAO;AAAA,MAC3BC;AAAA,IAAA;AAGF,6BACG,SAAAK,EAAAC,EAAA,EAAM,KAAAT,GAAU,WAAWO,KAAaF,IAAxC,EACE,UAAAD,IACH;AAAA,EAEJ,CAAC;AACH;AAEAR,EAAM,cAAc;"}