@hashicorp/mds-react 0.9.1 → 0.9.2

package/index-WkGIywHj.js

@@ -0,0 +1,767 @@
+import { jsx as t, jsxs as _, Fragment as $ } from "react/jsx-runtime";
+import { useId as M, createElement as T, forwardRef as v, useState as X, useRef as q } from "react";
+import { u as H, a as J } from "./index-DBjAbGt7.js";
+import g from "classnames";
+import { IconArrowRight24 as Y } from "@hashicorp/flight-icons/svg-react/arrow-right-24";
+import x from "@hashicorp/flight-icons/svg-sprite/svg-sprite.svg";
+const Q = "loading__-Ng-b", V = "running__6uXP5", E = {
+  "flight-icon": "flight-icon__f6lPO",
+  "display-inline": "display-inline__ItStG",
+  loading: Q,
+  running: V
+}, sr = [12, 16, 24, 32], oo = {
+  12: 16,
+  16: 16,
+  24: 24,
+  32: 24
+}, D = typeof x == "string" ? x : x.src, k = ({
+  name: o,
+  color: r = "currentColor",
+  size: e = 16,
+  stretched: s = !1,
+  isInlineBlock: n = !0,
+  title: a,
+  className: i,
+  ...c
+}) => {
+  const l = M(), u = M(), d = oo[e];
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: g(
+        E["flight-icon"],
+        `flight-icon-${o}`,
+        {
+          [E["display-inline"]]: n && !s,
+          [E.loading]: o === "loading",
+          [E.running]: o === "running"
+        },
+        i
+      ),
+      ...c,
+      "aria-hidden": a ? "false" : "true",
+      "aria-labelledby": a ? u : void 0,
+      fill: r,
+      id: l,
+      role: a ? "img" : void 0,
+      width: s ? "100%" : e,
+      height: s ? "100%" : e,
+      viewBox: `0 0 ${d} ${d}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: a ? /* @__PURE__ */ _($, { children: [
+        /* @__PURE__ */ t("title", { id: u, children: a }),
+        /* @__PURE__ */ t("g", { role: "presentation", children: /* @__PURE__ */ t("use", { href: `${D}#flight-${o}-${d}` }) })
+      ] }) : /* @__PURE__ */ t("use", { href: `${D}#flight-${o}-${d}` })
+    }
+  );
+};
+k.displayName = "FlightIcon";
+const ro = {
+  "align-left": "align-left__Twy3l",
+  "align-center": "align-center__iK1pm",
+  "align-right": "align-right__YgPRT"
+}, eo = [
+  "primary",
+  "strong",
+  "faint",
+  "disabled",
+  "high-contrast",
+  "action",
+  "action-hover",
+  "action-active",
+  "highlight",
+  "highlight-on-surface",
+  "highlight-high-contrast",
+  "success",
+  "success-on-surface",
+  "success-high-contrast",
+  "warning",
+  "warning-on-surface",
+  "warning-high-contrast",
+  "critical",
+  "critical-on-surface",
+  "critical-high-contrast"
+], ar = ["regular", "medium", "semibold", "bold"];
+function to(o, r) {
+  return {
+    "hds-body": `mds-typography-legacy-body-${r}`,
+    code: `mds-typography-code-${r}`,
+    "display-expressive": `mds-typography-display-expressive-${r}`,
+    label: "mds-typography-label",
+    body: `mds-typography-body-${r}`
+  }[o];
+}
+const C = ({
+  tag: o,
+  group: r,
+  size: e = "200",
+  weight: s,
+  align: n,
+  color: a,
+  children: i,
+  className: c,
+  ...l
+}) => {
+  const u = o ?? "span", d = to(r, e), p = eo.includes(a);
+  return /* @__PURE__ */ t(
+    u,
+    {
+      className: g(
+        d,
+        {
+          [ro[`align-${n}`]]: n,
+          [`mds-typography-font-weight-${s}`]: s,
+          [`mds-foreground-${a}`]: a && p
+        },
+        c
+      ),
+      style: a && !p ? { color: a } : {},
+      ...l,
+      children: i
+    }
+  );
+}, no = ({
+  size: o = "300",
+  ...r
+}) => T(C, {
+  ...r,
+  size: o,
+  group: "body"
+}), so = ({
+  size: o = "200",
+  ...r
+}) => T(C, {
+  ...r,
+  size: o,
+  group: "display-expressive"
+}), ao = (o) => T(C, {
+  ...o,
+  group: "label"
+}), io = ({
+  size: o = "200",
+  weight: r = "regular",
+  ...e
+}) => T(C, {
+  ...e,
+  size: o,
+  weight: r,
+  group: "hds-body"
+}), co = ({
+  size: o = "200",
+  weight: r = "regular",
+  ...e
+}) => T(C, {
+  ...e,
+  size: o,
+  weight: r,
+  group: "code"
+}), I = {
+  Body: no,
+  DisplayExpressive: so,
+  Label: ao,
+  HDSBody: io,
+  Code: co
+}, lo = "badge__zns82", uo = "text__WoM4W", w = {
+  badge: lo,
+  text: uo,
+  "size-small": "size-small__8xHdE",
+  "size-medium": "size-medium__xqCpO",
+  "size-large": "size-large__Pviip",
+  "color-neutral": "color-neutral__6Csf4",
+  "type-filled": "type-filled__ZaWsu",
+  "type-inverted": "type-inverted__A3554",
+  "type-outlined": "type-outlined__l0zjH",
+  "color-neutral-dark-mode": "color-neutral-dark-mode__C1TO4",
+  "color-highlight": "color-highlight__eWwJ5",
+  "color-success": "color-success__EuxKz",
+  "color-warning": "color-warning__gCbUY",
+  "color-critical": "color-critical__hV-l-"
+}, ir = ["small", "medium", "large"], cr = ["filled", "inverted", "outlined"], lr = [
+  "neutral",
+  "neutral-dark-mode",
+  "highlight",
+  "success",
+  "warning",
+  "critical"
+], mo = {
+  small: 12,
+  medium: 16,
+  large: 16
+}, R = ({
+  icon: o,
+  iconColor: r,
+  iconOnly: e,
+  text: s,
+  size: n = "medium",
+  type: a = "filled",
+  color: i = "neutral",
+  className: c,
+  ...l
+}) => /* @__PURE__ */ _(
+  "div",
+  {
+    className: g(
+      w.badge,
+      w[`size-${n}`],
+      w[`type-${a}`],
+      w[`color-${i}`],
+      c
+    ),
+    ...l,
+    children: [
+      o && /* @__PURE__ */ t(k, { name: o, color: r, size: mo[n] }),
+      e && o ? /* @__PURE__ */ t("span", { className: "sr-only", children: s }) : /* @__PURE__ */ t("div", { className: w.text, children: s })
+    ]
+  }
+);
+R.displayName = "Badge";
+const z = v((o, r) => {
+  const e = H(), {
+    href: s,
+    className: n,
+    isHrefExternal: a,
+    onClick: i,
+    children: c,
+    locale: l,
+    ...u
+  } = o;
+  return s ? /* @__PURE__ */ t(
+    e,
+    {
+      className: n,
+      target: a ? "_blank" : void 0,
+      rel: a ? "noopener noreferrer" : void 0,
+      onClick: i,
+      ...po(s, l, a),
+      ...u,
+      ref: r,
+      children: c
+    }
+  ) : /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      className: n,
+      onClick: i,
+      ...u,
+      ref: r,
+      children: c
+    }
+  );
+});
+z.displayName = "Interactive";
+const po = (o, r, e) => e ? {
+  href: o,
+  hrefLang: void 0
+} : ["en", "de", "es", "fr", "ja", "ko", "pt", "id"].includes(
+  o.substring(1, 3)
+) ? {
+  href: o,
+  hrefLang: o.substring(1, 3)
+} : o.startsWith("/") && r ? {
+  href: `/${r}${o}`,
+  hrefLang: r
+} : {
+  href: o,
+  hrefLang: void 0
+}, go = "text__2B7Ih", N = {
+  "standalone-link": "standalone-link__85Pyl",
+  "icon-position-leading": "icon-position-leading__KE5kn",
+  "icon-position-trailing": "icon-position-trailing__Mygyz",
+  text: go,
+  "size-small": "size-small__pf7gu",
+  "size-medium": "size-medium__r6Rbi",
+  "size-large": "size-large__aue6M",
+  "color-primary": "color-primary__7WaoM",
+  "color-secondary": "color-secondary__4qYkh",
+  "color-secondary-inverted": "color-secondary-inverted__ILbsj"
+}, dr = ["small", "medium", "large"], ur = [
+  "primary",
+  "secondary",
+  "secondary-inverted"
+], mr = ["leading", "trailing"], L = v(
+  ({
+    text: o,
+    size: r = "medium",
+    color: e = "primary",
+    icon: s,
+    iconPosition: n = "leading",
+    className: a,
+    "data-testid": i,
+    locale: c,
+    ...l
+  }, u) => {
+    const d = s && /* @__PURE__ */ t(k, { name: s, size: 16 });
+    return /* @__PURE__ */ _(
+      z,
+      {
+        ...l,
+        ref: u,
+        className: g(
+          N["standalone-link"],
+          N[`size-${r}`],
+          N[`color-${e}`],
+          N[`icon-position-${n}`],
+          a
+        ),
+        "data-testid": i,
+        locale: c,
+        children: [
+          d && n === "leading" && d,
+          /* @__PURE__ */ t("span", { className: N.text, children: o }),
+          d && n === "trailing" && d
+        ]
+      }
+    );
+  }
+);
+L.displayName = "StandaloneLink";
+const _o = "button__gOWvd", yo = "text__KbKvH", f = {
+  button: _o,
+  "width-full": "width-full__juTUO",
+  text: yo,
+  "color-primary": "color-primary__rWbwp",
+  "color-secondary": "color-secondary__-5Q4d",
+  "color-tertiary": "color-tertiary__rw4Ww",
+  "color-critical": "color-critical__-8hXs",
+  "color-primary-white": "color-primary-white__2JDoz",
+  "color-primary-black": "color-primary-black__zTF4n",
+  "color-secondary-white": "color-secondary-white__AseI0",
+  "color-secondary-black": "color-secondary-black__b-umt",
+  "color-secondary-high-contrast": "color-secondary-high-contrast__3bxg3",
+  "color-boundary": "color-boundary__xJtzy",
+  "color-consul": "color-consul__5lFsa",
+  "color-nomad": "color-nomad__HGWXf",
+  "color-packer": "color-packer__vbRu0",
+  "color-terraform": "color-terraform__DQMD5",
+  "color-vagrant": "color-vagrant__iNokw",
+  "color-vault": "color-vault__Q6Qbm",
+  "color-waypoint": "color-waypoint__8j-Oi",
+  "size-small": "size-small__kT0Jp",
+  "icon-only": "icon-only__5c-is",
+  "size-medium": "size-medium__HxMcm",
+  "size-large": "size-large__MEpK3"
+}, pr = ["small", "medium", "large"], gr = ["leading", "trailing"], _r = [
+  "primary",
+  "primary-black",
+  "primary-white",
+  "secondary",
+  // deprecated; maps to secondary-white
+  "secondary-high-contrast",
+  // alternates based on theme
+  "secondary-white",
+  "secondary-black",
+  "tertiary",
+  "critical",
+  "boundary",
+  "consul",
+  "nomad",
+  "packer",
+  "terraform",
+  "vagrant",
+  "vault",
+  "waypoint",
+  "hashicorp"
+  // alias to primary
+], ho = {
+  primary: "primary",
+  "primary-black": "custom",
+  "primary-white": "custom",
+  secondary: "custom",
+  "secondary-high-contrast": "custom",
+  "secondary-white": "custom",
+  "secondary-black": "custom",
+  tertiary: "tertiary",
+  critical: "critical",
+  boundary: "custom",
+  consul: "custom",
+  nomad: "custom",
+  packer: "custom",
+  terraform: "custom",
+  vagrant: "custom",
+  vault: "custom",
+  waypoint: "custom",
+  hashicorp: "primary"
+}, fo = {
+  small: 12,
+  medium: 16,
+  large: 24
+}, F = v(
+  ({
+    size: o = "medium",
+    color: r = "primary",
+    isFullWidth: e,
+    isIconOnly: s,
+    icon: n,
+    iconPosition: a = "leading",
+    text: i,
+    href: c,
+    isHrefExternal: l,
+    className: u,
+    locale: d,
+    ...p
+  }, y) => {
+    const h = s && !!n, b = n && /* @__PURE__ */ t(k, { name: n, size: fo[o] });
+    return /* @__PURE__ */ t(
+      z,
+      {
+        className: g(
+          f.button,
+          f[`size-${o}`],
+          {
+            [f["width-full"]]: e,
+            [f["icon-only"]]: h
+          },
+          r !== "custom" && f[`color-${r}`],
+          u
+        ),
+        href: p.disabled ? "" : c,
+        isHrefExternal: l,
+        "aria-label": h ? i : void 0,
+        locale: d,
+        ...p,
+        ref: y,
+        children: h && n ? b : /* @__PURE__ */ _($, { children: [
+          n && a === "leading" && b,
+          /* @__PURE__ */ t("div", { className: f.text, children: i }),
+          n && a === "trailing" && b
+        ] })
+      }
+    );
+  }
+);
+F.displayName = "ButtonPrimitive";
+const U = v(({ color: o = "primary", className: r, ...e }, s) => {
+  const n = ho[o], i = n === "custom" ? f[`color-${{
+    hashicorp: "primary",
+    secondary: "secondary-white"
+  }[o] ?? o}`] : void 0;
+  return /* @__PURE__ */ t(
+    F,
+    {
+      ...e,
+      color: n,
+      className: g(i, r),
+      ref: s
+    }
+  );
+});
+U.displayName = "Button";
+const bo = "thumbnail__f0mUs", wo = {
+  thumbnail: bo
+}, No = ({
+  alt: o,
+  aspectRatio: r,
+  src: e
+}) => {
+  const s = J();
+  return e ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: wo.thumbnail,
+      style: { "--aspect-ratio": r },
+      children: /* @__PURE__ */ t(s, { fill: !0, alt: o, src: e })
+    }
+  ) : null;
+}, To = "card__HomZw", vo = "interactive__Irpce", Co = "arrow__qnBL7", So = "link__Dz3Nf", Eo = "cta__UfNG2", ko = "content__SiycH", Io = "subheading__MM0J8", Oo = "contentLockup__08EYi", xo = "badges__GrCpe", Lo = "meta__8eKyE", $o = "metaSeparator__44API", m = {
+  card: To,
+  interactive: vo,
+  arrow: Co,
+  link: So,
+  cta: Eo,
+  content: ko,
+  "has-thumbnail": "has-thumbnail__ftF14",
+  subheading: Io,
+  contentLockup: Oo,
+  badges: xo,
+  meta: Lo,
+  metaSeparator: $o
+}, W = v(
+  ({
+    children: o,
+    className: r,
+    content: e,
+    ctaLabel: s,
+    href: n,
+    standaloneLink: a,
+    isExternal: i,
+    onClickCapture: c,
+    "aria-label": l
+  }, u) => {
+    const d = H(), p = n && !s, y = i ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        ref: u,
+        className: g(
+          m.card,
+          { [m.interactive]: p },
+          r
+        ),
+        children: [
+          p && /* @__PURE__ */ t(
+            d,
+            {
+              href: n,
+              className: m.link,
+              draggable: "false",
+              onClickCapture: c,
+              "aria-label": l,
+              ...y
+            }
+          ),
+          e && /* @__PURE__ */ t(
+            zo,
+            {
+              badges: e.badges,
+              description: e.description,
+              eyebrow: e.eyebrow,
+              heading: e.heading,
+              subheading: e.subheading,
+              thumbnail: e.thumbnail,
+              showArrow: e.showArrow && !!p,
+              cta: {
+                ctaLabel: s,
+                href: n,
+                standaloneLink: a,
+                onClickCapture: c,
+                isExternal: i
+              }
+            }
+          ),
+          o,
+          o && /* @__PURE__ */ t(
+            K,
+            {
+              ctaLabel: s,
+              href: n,
+              standaloneLink: a,
+              onClickCapture: c,
+              isExternal: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+W.displayName = "Card";
+const zo = ({
+  badges: o,
+  description: r,
+  eyebrow: e,
+  heading: s,
+  thumbnail: n,
+  subheading: a,
+  cta: i,
+  showArrow: c
+}) => /* @__PURE__ */ _("div", { className: g(m.content, { [m["has-thumbnail"]]: n }), children: [
+  n && /* @__PURE__ */ t(No, { ...n }),
+  /* @__PURE__ */ _("div", { className: m.contentLockup, children: [
+    /* @__PURE__ */ t(Ao, { children: e }),
+    /* @__PURE__ */ t(Do, { children: s }),
+    /* @__PURE__ */ t(Bo, { children: a }),
+    /* @__PURE__ */ t(Po, { children: r }),
+    /* @__PURE__ */ t(Ho, { badges: o }),
+    i && /* @__PURE__ */ t(
+      K,
+      {
+        ctaLabel: i.ctaLabel,
+        href: i.href,
+        standaloneLink: i.standaloneLink,
+        isExternal: i.isExternal,
+        onClickCapture: i.onClickCapture
+      }
+    ),
+    c ? /* @__PURE__ */ t("div", { className: m.arrow, children: /* @__PURE__ */ t(Y, {}) }) : null
+  ] })
+] }), K = ({
+  href: o,
+  ctaLabel: r,
+  standaloneLink: e,
+  isExternal: s,
+  onClickCapture: n
+}) => {
+  const a = o && !r;
+  if (e) {
+    const i = {
+      ...e,
+      icon: e.icon || "chevron-right",
+      iconPosition: e.iconPosition || "trailing"
+    };
+    return /* @__PURE__ */ t(L, { className: m.cta, ...i });
+  }
+  return o && !a && r ? /* @__PURE__ */ t(
+    L,
+    {
+      className: m.cta,
+      text: r,
+      href: o,
+      icon: "chevron-right",
+      iconPosition: "trailing",
+      color: "secondary",
+      onClickCapture: n,
+      isHrefExternal: s
+    }
+  ) : null;
+}, Ao = ({ children: o }) => o ? Array.isArray(o) ? /* @__PURE__ */ t(Mo, { items: Array.from(o) }) : /* @__PURE__ */ t(G, { children: o }) : null, Mo = ({ items: o }) => /* @__PURE__ */ t("ul", { className: m.meta, children: o.map((r, e) => /* @__PURE__ */ _("li", { children: [
+  /* @__PURE__ */ t(G, { children: r }),
+  e < o.length - 1 ? /* @__PURE__ */ t("span", { className: m.metaSeparator, "aria-hidden": !0, children: "|" }) : null
+] }, r)) }), G = ({ children: o }) => o ? /* @__PURE__ */ t(I.Label, { color: "faint", weight: "medium", children: o }) : null, Do = ({ children: o }) => o ? /* @__PURE__ */ t(
+  I.DisplayExpressive,
+  {
+    tag: "span",
+    size: "200",
+    weight: "semibold",
+    color: "strong",
+    children: o
+  }
+) : null, Bo = ({ children: o }) => o ? /* @__PURE__ */ t(I.Body, { tag: "span", size: "200", className: m.subheading, color: "primary", children: o }) : null, Po = ({ children: o }) => o ? typeof o == "string" ? /* @__PURE__ */ t(I.Body, { tag: "span", size: "200", color: "primary", children: o }) : /* @__PURE__ */ t($, { children: o }) : null, Ho = ({ badges: o }) => o && o.length > 0 ? /* @__PURE__ */ t("div", { className: m.badges, children: o.map((r) => /* @__PURE__ */ t(R, { ...r }, r.text)) }) : null;
+W.displayName = "Card";
+const Ro = (o) => {
+  let r;
+  if (o)
+    if (typeof o == "string")
+      r = o;
+    else if (
+      // context: https://github.com/hashicorp/design-system/pull/1564
+      typeof o == "number" || typeof o == "bigint"
+    )
+      r = o.toString();
+    else
+      throw new Error(
+        `\`hds-clipboard\` modifier - \`text\` argument must be a string - provided: ${typeof o}`
+      );
+  return r;
+}, Fo = (o) => {
+  let r;
+  if (typeof o == "string") {
+    if (r = document.querySelector(o), !r) {
+      console.error(
+        "`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string",
+        r
+      );
+      return;
+    }
+  } else if (o instanceof Node && o.nodeType === Node.ELEMENT_NODE)
+    r = o;
+  else
+    throw o instanceof NodeList ? new Error(
+      "`hds-clipboard` modifier - `target` argument must be a string or a DOM node - provided: a list of DOM nodes"
+    ) : new Error(
+      `\`hds-clipboard\` modifier - \`target\` argument must be a string or a DOM node - provided: ${typeof o}`
+    );
+  return r;
+}, Uo = (o) => {
+  let r;
+  return o instanceof Node && o.nodeType === Node.ELEMENT_NODE && (o instanceof HTMLInputElement || // targetElement.nodeName === 'INPUT' ||
+  o instanceof HTMLTextAreaElement || // targetElement.nodeName === 'TEXTAREA' ||
+  o instanceof HTMLSelectElement ? r = o.value : r = o.innerText), r;
+}, Wo = async (o) => {
+  if (o)
+    try {
+      return await navigator.clipboard.writeText(o), !0;
+    } catch {
+      return console.warn(
+        "copy action failed, please check your browser‘s permissions",
+        {
+          id: "hds-clipboard.write-text-to-clipboard.catch-error"
+        }
+      ), !1;
+    }
+  else
+    return !1;
+}, Ko = async (o, r, e) => {
+  let s;
+  if (e)
+    s = e();
+  else if (o)
+    s = Ro(o);
+  else if (r) {
+    const a = Fo(r);
+    s = Uo(a);
+  } else
+    throw new Error(
+      "`hds-clipboard` modifier - either a `getTextFn`, `text`, or a `target` argument is required"
+    );
+  return await Wo(s);
+}, Go = (o) => {
+  const { text: r, target: e, getTextFn: s, onSuccess: n, onError: a } = o;
+  return { onClick: async (c) => {
+    const l = c.currentTarget;
+    await Ko(r, e, s) ? typeof n == "function" && n({ trigger: l, text: r, target: e }) : typeof a == "function" && a({ trigger: l, text: r, target: e });
+  } };
+}, Zo = "idle__1ofXr", jo = "success__9mXCl", Xo = "error__a3l-p", B = {
+  "copy-button": "copy-button__uXOTd",
+  idle: Zo,
+  success: jo,
+  error: Xo
+}, qo = "clipboard-copy", Jo = "clipboard-checked", Yo = "clipboard-x", P = "idle", Qo = ({
+  size: o = "medium",
+  isIconOnly: r = !1,
+  isFullWidth: e = !1,
+  text: s,
+  textToCopy: n,
+  getTextFn: a,
+  targetToCopy: i,
+  onSuccess: c,
+  onError: l,
+  className: u,
+  defaultIcon: d,
+  ...p
+}) => {
+  const [y, S] = X(P), h = q(null), b = y === "idle" ? d || qo : y === "success" ? Jo : Yo, A = () => {
+    h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+      S(P);
+    }, 1500);
+  }, Z = (O) => {
+    S("success"), A(), c && c(O);
+  }, j = (O) => {
+    S("error"), A(), l && l(O);
+  };
+  return /* @__PURE__ */ t(
+    U,
+    {
+      className: g(B["copy-button"], B[y], u),
+      size: o,
+      isFullWidth: e,
+      text: s,
+      icon: b,
+      isIconOnly: r,
+      color: "secondary",
+      iconPosition: "trailing",
+      ...Go({
+        text: n,
+        getTextFn: a,
+        target: i,
+        onSuccess: Z,
+        onError: j
+      }),
+      ...p
+    }
+  );
+};
+Qo.displayName = "CopyButton";
+export {
+  lr as B,
+  W as C,
+  sr as F,
+  z as I,
+  L as S,
+  I as T,
+  ir as a,
+  cr as b,
+  R as c,
+  U as d,
+  _r as e,
+  gr as f,
+  pr as g,
+  k as h,
+  ur as i,
+  mr as j,
+  dr as k,
+  eo as l,
+  ar as m,
+  Qo as n
+};
+//# sourceMappingURL=index-WkGIywHj.js.map