@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/link-CPb_pZPr.js

@@ -0,0 +1,129 @@
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as T } from "react-i18next";
+import { E as z } from "./external-link-CY6zAXXU.js";
+const E = j(
+  [
+    "ds:underline-offset-4",
+    "ds:rounded-[var(--radius-xs)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50 ds:aria-disabled:no-underline"
+  ].join(" "),
+  {
+    variants: {
+      intent: {
+        // `--primary` already maps to `magenta-700` in light-accent and
+        // `magenta-500` in dark (see tokens/index.css), so the accent
+        // contrast trade-off in §11 of CLAUDE.md is handled at the
+        // token layer, not here.
+        default: "ds:text-primary ds:underline ds:hover:text-primary-hover ds:active:opacity-80",
+        subtle: "ds:text-muted-foreground ds:no-underline ds:hover:text-foreground ds:hover:underline ds:active:opacity-80",
+        inverted: "ds:text-primary-foreground ds:underline ds:hover:opacity-90 ds:active:opacity-80"
+      },
+      weight: {
+        normal: "ds:font-normal",
+        strong: "ds:font-semibold"
+      },
+      // When the link carries an icon, the anchor itself becomes a flex
+      // container so glyphs centre on the text optical centre — the
+      // previous `vertical-align: -0.125em` heuristic over-corrected when
+      // the link was the only thing on its line (e.g. each <li> of a
+      // vertical sidebar nav). Text-only links remain plain `inline` so
+      // they wrap naturally inside a paragraph.
+      hasIcon: {
+        no: "ds:inline",
+        yes: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]"
+      }
+    },
+    defaultVariants: {
+      intent: "default",
+      weight: "normal",
+      hasIcon: "no"
+    }
+  }
+), I = L(
+  ({
+    href: f,
+    external: s = !1,
+    externalIcon: u = !0,
+    disabled: n = !1,
+    startIcon: i,
+    endIcon: a,
+    intent: r,
+    weight: m,
+    className: v,
+    children: h,
+    target: p,
+    rel: t,
+    onClick: o,
+    ...g
+  }, x) => {
+    const { t: b } = T(), y = s ? "_blank" : p, w = s ? [t, "noopener", "noreferrer"].filter(Boolean).join(" ") : t, d = b("link.opensInNewTab", "Opens in a new tab"), N = (c) => {
+      if (n) {
+        c.preventDefault();
+        return;
+      }
+      o == null || o(c);
+    }, l = s && u;
+    return /* @__PURE__ */ k(
+      "a",
+      {
+        ref: x,
+        href: n ? void 0 : f,
+        role: n ? "link" : void 0,
+        "aria-disabled": n || void 0,
+        target: y,
+        rel: w || void 0,
+        onClick: N,
+        "data-component": "link",
+        "data-intent": r ?? "default",
+        className: E({
+          intent: r,
+          weight: m,
+          hasIcon: !!(i || a || l) ? "yes" : "no",
+          className: v
+        }),
+        ...g,
+        children: [
+          i ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:[&_svg]:size-[1em]",
+              children: i
+            }
+          ) : null,
+          h,
+          l ? /* @__PURE__ */ e(
+            "span",
+            {
+              className: "ds:inline-flex ds:items-center",
+              "aria-label": d,
+              children: /* @__PURE__ */ e(z, { "aria-hidden": "true", className: "ds:size-[1em]" })
+            }
+          ) : s ? (
+            // External wiring without the glyph — keep the SR-only
+            // "opens in new tab" announcement so the affordance reads.
+            /* @__PURE__ */ e("span", { className: "ds:sr-only", children: d })
+          ) : a ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:[&_svg]:size-[1em]",
+              children: a
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+I.displayName = "Link";
+export {
+  I as L
+};
+//# sourceMappingURL=link-CPb_pZPr.js.map

package/dist/_chunks/link-CPb_pZPr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-CPb_pZPr.js","sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type AnchorHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { ExternalLink } from 'lucide-react';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\n/**\n * Link is the semantic anchor primitive for inline navigation —\n * privacy / terms in form copy, external \"remote support\" links in\n * sidebars, in-paragraph references inside info-tip body copy.\n *\n * For action affordances that *look* like a link but trigger UI rather\n * than navigation, use `<Button intent=\"link\">` instead — the semantic\n * boundary matters for screen readers and keyboard users.\n */\nconst linkVariants = cva(\n  [\n    'ds:underline-offset-4',\n    'ds:rounded-[var(--radius-xs)]',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50 ds:aria-disabled:no-underline',\n  ].join(' '),\n  {\n    variants: {\n      intent: {\n        // `--primary` already maps to `magenta-700` in light-accent and\n        // `magenta-500` in dark (see tokens/index.css), so the accent\n        // contrast trade-off in §11 of CLAUDE.md is handled at the\n        // token layer, not here.\n        default:\n          'ds:text-primary ds:underline ds:hover:text-primary-hover ds:active:opacity-80',\n        subtle:\n          'ds:text-muted-foreground ds:no-underline ds:hover:text-foreground ds:hover:underline ds:active:opacity-80',\n        inverted:\n          'ds:text-primary-foreground ds:underline ds:hover:opacity-90 ds:active:opacity-80',\n      },\n      weight: {\n        normal: 'ds:font-normal',\n        strong: 'ds:font-semibold',\n      },\n      // When the link carries an icon, the anchor itself becomes a flex\n      // container so glyphs centre on the text optical centre — the\n      // previous `vertical-align: -0.125em` heuristic over-corrected when\n      // the link was the only thing on its line (e.g. each <li> of a\n      // vertical sidebar nav). Text-only links remain plain `inline` so\n      // they wrap naturally inside a paragraph.\n      hasIcon: {\n        no: 'ds:inline',\n        yes: 'ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]',\n      },\n    },\n    defaultVariants: {\n      intent: 'default',\n      weight: 'normal',\n      hasIcon: 'no',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Public types                                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface LinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    VariantProps<typeof linkVariants> {\n  /** Anchor target. Required — the whole point of the component. */\n  href: string;\n  /**\n   * Flag the link as opening in a new browsing context. Automatically\n   * adds `target=\"_blank\"` + `rel=\"noopener noreferrer\"` and renders a\n   * trailing `ExternalLink` icon with an i18n'd aria-label.\n   */\n  external?: boolean;\n  /**\n   * Render the trailing external-link glyph. Default `true` — set to\n   * `false` for surfaces (footer, social rows, dense nav) where the\n   * indicator adds visual noise. The `target` / `rel` / \"opens in new\n   * tab\" aria-label are still applied.\n   */\n  externalIcon?: boolean;\n  /**\n   * Render the link in a non-interactive disabled state. Strips `href`,\n   * adds `aria-disabled` + `role=\"link\"`, suppresses the underline.\n   * Prefer hiding the link entirely when possible — disabled links are\n   * a usability anti-pattern outside of state-machine flows.\n   */\n  disabled?: boolean;\n  /** Optional leading icon (inline-start). */\n  startIcon?: ReactNode;\n  /** Optional trailing icon (inline-end). Ignored when `external`. */\n  endIcon?: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                            */\n/* ------------------------------------------------------------------ */\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      href,\n      external = false,\n      externalIcon = true,\n      disabled = false,\n      startIcon,\n      endIcon,\n      intent,\n      weight,\n      className,\n      children,\n      target,\n      rel,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    const effectiveTarget = external ? '_blank' : target;\n    const effectiveRel = external\n      ? [rel, 'noopener', 'noreferrer'].filter(Boolean).join(' ')\n      : rel;\n\n    const externalLabel = t('link.opensInNewTab', 'Opens in a new tab');\n\n    const handleClick: AnchorHTMLAttributes<HTMLAnchorElement>['onClick'] = (\n      event,\n    ) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      onClick?.(event);\n    };\n\n    const showExternalIcon = external && externalIcon;\n    const hasIcon = Boolean(startIcon || endIcon || showExternalIcon);\n\n    return (\n      <a\n        ref={ref}\n        // When disabled, drop href so the link is not actionable; pair\n        // with aria-disabled + role=\"link\" so AT still announces the\n        // role (the implicit role disappears once href is removed).\n        href={disabled ? undefined : href}\n        role={disabled ? 'link' : undefined}\n        aria-disabled={disabled || undefined}\n        target={effectiveTarget}\n        rel={effectiveRel || undefined}\n        onClick={handleClick}\n        data-component=\"link\"\n        data-intent={intent ?? 'default'}\n        className={linkVariants({\n          intent,\n          weight,\n          hasIcon: hasIcon ? 'yes' : 'no',\n          className,\n        })}\n        {...rest}\n      >\n        {startIcon ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"ds:inline-flex ds:items-center ds:[&_svg]:size-[1em]\"\n          >\n            {startIcon}\n          </span>\n        ) : null}\n        {children}\n        {showExternalIcon ? (\n          <span\n            className=\"ds:inline-flex ds:items-center\"\n            aria-label={externalLabel}\n          >\n            <ExternalLink aria-hidden=\"true\" className=\"ds:size-[1em]\" />\n          </span>\n        ) : external ? (\n          // External wiring without the glyph — keep the SR-only\n          // \"opens in new tab\" announcement so the affordance reads.\n          <span className=\"ds:sr-only\">{externalLabel}</span>\n        ) : endIcon ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"ds:inline-flex ds:items-center ds:[&_svg]:size-[1em]\"\n          >\n            {endIcon}\n          </span>\n        ) : null}\n      </a>\n    );\n  },\n);\n\nLink.displayName = 'Link';\n"],"names":["linkVariants","cva","Link","forwardRef","href","external","externalIcon","disabled","startIcon","endIcon","intent","weight","className","children","target","rel","onClick","rest","ref","t","useTranslation","effectiveTarget","effectiveRel","externalLabel","handleClick","event","showExternalIcon","jsxs","jsx","ExternalLink"],"mappings":"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"}