@alfadocs/ui-kit 0.0.20 → 0.1.1

package/dist/_chunks/{key-value-pair--Je59tAF.js → key-value-pair-DDhSYdDL.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-pair-DDhSYdDL.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 text-foreground min-w-0 shrink [unicode-bidi:isolate]',\n      mono ? '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        {...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,wCAAwC;AAAA,IAAA,EAE9C,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,QACpD,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;"}