@alfadocs/ui-kit-debug 0.1.8

package/dist/_chunks/key-value-pair-JRFS9Xrh.js

@@ -0,0 +1,76 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { forwardRef as C, useState as c, useCallback as g } from "react";
+import { c as V } from "./index-D2ZczOXr.js";
+import { useTranslation as N } from "react-i18next";
+import { I as b } from "./icon-button-Wnnde5lc.js";
+import { C as P } from "./check-DPdL_Sm7.js";
+import { C as w } from "./copy-B00HK7tj.js";
+const z = V("ds:flex", {
+  variants: {
+    layout: {
+      horizontal: "ds:flex-row ds:items-center ds:gap-[var(--spacing-sm)]",
+      vertical: "ds:flex-col ds:gap-[var(--spacing-xs)]"
+    }
+  },
+  defaultVariants: {
+    layout: "horizontal"
+  }
+}), T = C(
+  ({
+    label: i,
+    value: o,
+    layout: n = "horizontal",
+    mono: d = !1,
+    copyable: m = !1,
+    copyText: p,
+    className: u,
+    ...f
+  }, y) => {
+    const { t: s } = N(), [h, r] = c(!1), [k, e] = c(""), t = p ?? (typeof o == "string" ? o : void 0), v = g(async () => {
+      if (t)
+        try {
+          await navigator.clipboard.writeText(t), r(!0), e(s("ui.keyValuePair.copied")), setTimeout(() => {
+            r(!1), e("");
+          }, 2e3);
+        } catch {
+          e(s("ui.keyValuePair.notAvailable")), setTimeout(() => e(""), 3e3);
+        }
+    }, [t, s]), x = [
+      "type-body ds:text-foreground ds:min-w-0 ds:shrink ds:[unicode-bidi:isolate]",
+      d ? "ds:font-[family-name:var(--font-mono)]" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: y,
+        className: z({ layout: n, className: u }),
+        "data-component": "key-value-pair",
+        ...f,
+        children: [
+          /* @__PURE__ */ l("span", { className: "type-label ds:text-muted-foreground ds:shrink-0", children: [
+            i,
+            /* @__PURE__ */ a("span", { className: "ds:sr-only", children: ": " })
+          ] }),
+          /* @__PURE__ */ a("span", { className: x, children: o }),
+          m && /* @__PURE__ */ a(
+            b,
+            {
+              icon: h ? /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(w, {}),
+              size: "sm",
+              "aria-label": s("ui.keyValuePair.copy", { label: i }),
+              onClick: v,
+              intent: "ghost",
+              className: n === "horizontal" ? "ds:ms-auto ds:shrink-0" : "ds:self-start"
+            }
+          ),
+          /* @__PURE__ */ a("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: k })
+        ]
+      }
+    );
+  }
+);
+T.displayName = "KeyValuePair";
+export {
+  T as K
+};
+//# sourceMappingURL=key-value-pair-JRFS9Xrh.js.map

package/dist/_chunks/key-value-pair-JRFS9Xrh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-pair-JRFS9Xrh.js","sources":["../../src/components/key-value-pair/key-value-pair.tsx"],"sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Copy, Check } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\n\n/* ------------------------------------------------------------------ */\n/* CVA — root wrapper                                                   */\n/* ------------------------------------------------------------------ */\n\nconst keyValuePairVariants = cva('ds:flex', {\n  variants: {\n    layout: {\n      horizontal: 'ds:flex-row ds:items-center ds:gap-[var(--spacing-sm)]',\n      vertical: 'ds:flex-col ds:gap-[var(--spacing-xs)]',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n});\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePairProps                                                    */\n/* ------------------------------------------------------------------ */\n\nexport interface KeyValuePairProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof keyValuePairVariants> {\n  /** The label (term) */\n  label: string;\n  /** The value — accepts plain text, Badge, Tag, monospace code, any ReactNode */\n  value: React.ReactNode;\n  /** Layout direction */\n  layout?: 'horizontal' | 'vertical';\n  /** Render value in monospace font */\n  mono?: boolean;\n  /** Show a copy-to-clipboard IconButton beside the value */\n  copyable?: boolean;\n  /** The text to copy — defaults to `value` if value is a string */\n  copyText?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* KeyValuePair                                                         */\n/* ------------------------------------------------------------------ */\n\nexport const KeyValuePair = forwardRef<HTMLDivElement, KeyValuePairProps>(\n  (\n    {\n      label,\n      value,\n      layout = 'horizontal',\n      mono = false,\n      copyable = false,\n      copyText,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const [copied, setCopied] = useState(false);\n    const [announcement, setAnnouncement] = useState('');\n\n    const textToCopy = copyText ?? (typeof value === 'string' ? value : undefined);\n\n    const handleCopy = useCallback(async () => {\n      if (!textToCopy) {\n        if (import.meta.env.DEV) {\n          console.warn(\n            'KeyValuePair: copyable is true but no copyText was provided and value is not a string. Copy no-op.',\n          );\n        }\n        return;\n      }\n\n      try {\n        await navigator.clipboard.writeText(textToCopy);\n        setCopied(true);\n        setAnnouncement(t('ui.keyValuePair.copied'));\n        setTimeout(() => {\n          setCopied(false);\n          setAnnouncement('');\n        }, 2000);\n      } catch {\n        setAnnouncement(t('ui.keyValuePair.notAvailable'));\n        setTimeout(() => setAnnouncement(''), 3000);\n      }\n    }, [textToCopy, t]);\n\n    const valueClasses = [\n      'type-body ds:text-foreground ds:min-w-0 ds:shrink ds:[unicode-bidi:isolate]',\n      mono ? 'ds:font-[family-name:var(--font-mono)]' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        ref={ref}\n        className={keyValuePairVariants({ layout, className })}\n        data-component=\"key-value-pair\"\n        {...props}\n      >\n        <span className=\"type-label ds:text-muted-foreground ds:shrink-0\">\n          {label}\n          <span className=\"ds:sr-only\">: </span>\n        </span>\n        <span className={valueClasses}>{value}</span>\n        {copyable && (\n          <IconButton\n            icon={copied ? <Check /> : <Copy />}\n            size=\"sm\"\n            aria-label={t('ui.keyValuePair.copy', { label })}\n            onClick={handleCopy}\n            intent=\"ghost\"\n            className={layout === 'horizontal' ? 'ds:ms-auto ds:shrink-0' : 'ds:self-start'}\n          />\n        )}\n        <span role=\"status\" aria-live=\"polite\" className=\"ds:sr-only\">\n          {announcement}\n        </span>\n      </div>\n    );\n  },\n);\n\nKeyValuePair.displayName = 'KeyValuePair';\n"],"names":["keyValuePairVariants","cva","KeyValuePair","forwardRef","label","value","layout","mono","copyable","copyText","className","props","ref","t","useTranslation","copied","setCopied","useState","announcement","setAnnouncement","textToCopy","handleCopy","useCallback","valueClasses","jsxs","jsx","IconButton","Check","Copy"],"mappings":";;;;;;;AAUA,MAAMA,IAAuBC,EAAI,WAAW;AAAA,EAC1C,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,EAAA;AAEZ,CAAC,GA2BYC,IAAeC;AAAA,EAC1B,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAE,GAE7CG,IAAaX,MAAa,OAAOJ,KAAU,WAAWA,IAAQ,SAE9DgB,IAAaC,EAAY,YAAY;AACzC,UAAKF;AASL,YAAI;AACF,gBAAM,UAAU,UAAU,UAAUA,CAAU,GAC9CJ,EAAU,EAAI,GACdG,EAAgBN,EAAE,wBAAwB,CAAC,GAC3C,WAAW,MAAM;AACf,YAAAG,EAAU,EAAK,GACfG,EAAgB,EAAE;AAAA,UACpB,GAAG,GAAI;AAAA,QACT,QAAQ;AACN,UAAAA,EAAgBN,EAAE,8BAA8B,CAAC,GACjD,WAAW,MAAMM,EAAgB,EAAE,GAAG,GAAI;AAAA,QAC5C;AAAA,IACF,GAAG,CAACC,GAAYP,CAAC,CAAC,GAEZU,IAAe;AAAA,MACnB;AAAA,MACAhB,IAAO,2CAA2C;AAAA,IAAA,EAEjD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,WAAWZ,EAAqB,EAAE,QAAAM,GAAQ,WAAAI,GAAW;AAAA,QACrD,kBAAe;AAAA,QACd,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAa,EAAC,QAAA,EAAK,WAAU,mDACb,UAAA;AAAA,YAAApB;AAAA,8BACA,QAAA,EAAK,WAAU,cAAa,UAAA,MAAE;AAAA,UAAA,GACjC;AAAA,4BACC,QAAA,EAAK,WAAWmB,GAAe,UAAAlB,GAAM;AAAA,UACrCG,KACC,gBAAAiB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMX,IAAS,gBAAAU,EAACE,GAAA,CAAA,CAAM,sBAAMC,GAAA,EAAK;AAAA,cACjC,MAAK;AAAA,cACL,cAAYf,EAAE,wBAAwB,EAAE,OAAAT,GAAO;AAAA,cAC/C,SAASiB;AAAA,cACT,QAAO;AAAA,cACP,WAAWf,MAAW,eAAe,2BAA2B;AAAA,YAAA;AAAA,UAAA;AAAA,UAGpE,gBAAAmB,EAAC,UAAK,MAAK,UAAS,aAAU,UAAS,WAAU,cAC9C,UAAAP,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAhB,EAAa,cAAc;"}