asterui 0.12.45 → 0.12.48

package/dist/components/CopyButton.js

@@ -1,48 +1,68 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useClipboard as z } from "../hooks/useClipboard.js";
-const W = () => /* @__PURE__ */ n(
-  "svg",
-  {
-    className: "w-4 h-4",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" })
-  }
-), E = () => /* @__PURE__ */ n(
-  "svg",
-  {
-    className: "w-4 h-4",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m4.5 12.75 6 6 9-13.5" })
-  }
-), F = ({
-  text: l,
-  timeout: u = 2e3,
-  color: t,
-  variant: o,
-  size: d = "md",
-  shape: e,
-  icon: b,
-  copiedIcon: p,
-  children: h,
-  copiedChildren: m,
-  onCopy: f,
-  onError: C,
-  showTooltip: k = !1,
-  tooltipText: c = "Copy",
-  copiedTooltipText: r = "Copied!",
-  className: y = "",
-  disabled: a,
-  onClick: g,
-  ...v
+import { jsx as t } from "react/jsx-runtime";
+import { useContext as f } from "react";
+import { useClipboard as M } from "../hooks/useClipboard.js";
+import { IconSizeContext as r } from "../contexts/IconSizeContext.js";
+const C = {
+  xs: "w-3.5 h-3.5",
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4",
+  lg: "w-5 h-5",
+  xl: "w-6 h-6"
+}, P = () => {
+  const o = f(r) ?? "md";
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: C[o],
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" })
+    }
+  );
+}, V = () => {
+  const o = f(r) ?? "md";
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: C[o],
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m4.5 12.75 6 6 9-13.5" })
+    }
+  );
+}, p = {
+  "top-right": "absolute top-2 right-2",
+  "top-left": "absolute top-2 left-2",
+  "bottom-right": "absolute bottom-2 right-2",
+  "bottom-left": "absolute bottom-2 left-2"
+}, A = ({
+  text: o,
+  timeout: g = 2e3,
+  color: c,
+  variant: a,
+  size: l = "md",
+  shape: i,
+  position: s,
+  icon: k,
+  copiedIcon: y,
+  children: v,
+  copiedChildren: w,
+  onCopy: x,
+  onError: I,
+  showTooltip: u = !1,
+  tooltipText: b = "Copy",
+  copiedTooltipText: d = "Copied!",
+  className: B = "",
+  disabled: m,
+  onClick: j,
+  ...z
 }) => {
-  const { copy: w, copied: s } = z(u), x = async (q) => {
-    if (g?.(q), a) return;
-    await w(l) ? f?.() : C?.(new Error("Failed to copy to clipboard"));
-  }, I = {
+  const { copy: N, copied: n } = M(g), L = async (e) => {
+    if (j?.(e), m) return;
+    await N(o) ? x?.() : I?.(new Error("Failed to copy to clipboard"));
+  }, q = {
     primary: "btn-primary",
     secondary: "btn-secondary",
     accent: "btn-accent",
@@ -51,46 +71,52 @@ const W = () => /* @__PURE__ */ n(
     warning: "btn-warning",
     error: "btn-error",
     neutral: "btn-neutral"
-  }, B = {
+  }, S = {
     solid: "",
     outline: "btn-outline",
     dash: "btn-dash",
     soft: "btn-soft",
     ghost: "btn-ghost",
     link: "btn-link"
-  }, N = {
+  }, W = {
     xs: "btn-xs",
     sm: "btn-sm",
     md: "",
     lg: "btn-lg",
     xl: "btn-xl"
-  }, j = {
+  }, E = {
     square: "btn-square",
     circle: "btn-circle"
-  }, L = [
+  }, F = [
     "btn",
-    t && I[t],
-    s && "btn-success",
-    o && B[o],
-    N[d],
-    e && j[e],
-    y
-  ].filter(Boolean).join(" "), i = /* @__PURE__ */ n(
+    c && q[c],
+    n && "btn-success",
+    a && S[a],
+    W[l],
+    i && E[i],
+    // Only add position classes if not using tooltip (tooltip wrapper gets them instead)
+    !u && s && p[s],
+    B
+  ].filter(Boolean).join(" "), H = n ? w ?? (y ?? /* @__PURE__ */ t(V, {})) : v ?? (k ?? /* @__PURE__ */ t(P, {})), h = /* @__PURE__ */ t(
     "button",
     {
       type: "button",
-      className: L,
-      onClick: x,
-      disabled: a,
-      "aria-label": s ? r : c,
-      ...v,
-      children: s ? m ?? (p ?? /* @__PURE__ */ n(E, {})) : h ?? (b ?? /* @__PURE__ */ n(W, {}))
+      className: F,
+      onClick: L,
+      disabled: m,
+      "aria-label": n ? d : b,
+      ...z,
+      children: /* @__PURE__ */ t(r.Provider, { value: l, children: H })
     }
   );
-  return k ? /* @__PURE__ */ n("div", { className: "tooltip", "data-tip": s ? r : c, children: i }) : i;
+  if (u) {
+    const e = ["tooltip", s && p[s]].filter(Boolean).join(" ");
+    return /* @__PURE__ */ t("div", { className: e, "data-tip": n ? d : b, children: h });
+  }
+  return h;
 };
-F.displayName = "CopyButton";
+A.displayName = "CopyButton";
 export {
-  F as CopyButton
+  A as CopyButton
 };
 //# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import React from 'react'\nimport { useClipboard } from '../hooks/useClipboard'\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onError'> {\n  /** Text to copy to clipboard */\n  text: string\n  /** Duration in ms to show copied state */\n  timeout?: number\n  /** Button color */\n  color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'\n  /** Button style variant */\n  variant?: 'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link'\n  /** Button size */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Button shape */\n  shape?: 'square' | 'circle'\n  /** Custom icon for default state */\n  icon?: React.ReactNode\n  /** Custom icon for copied state */\n  copiedIcon?: React.ReactNode\n  /** Custom content for default state (overrides icon) */\n  children?: React.ReactNode\n  /** Custom content for copied state */\n  copiedChildren?: React.ReactNode\n  /** Callback when copy succeeds */\n  onCopy?: () => void\n  /** Callback when copy fails */\n  onError?: (error: Error) => void\n  /** Show tooltip with copy status */\n  showTooltip?: boolean\n  /** Tooltip text for default state */\n  tooltipText?: string\n  /** Tooltip text for copied state */\n  copiedTooltipText?: string\n}\n\nconst CopyIcon: React.FC = () => (\n  <svg\n    className=\"w-4 h-4\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" />\n  </svg>\n)\n\nconst CheckIcon: React.FC = () => (\n  <svg\n    className=\"w-4 h-4\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"m4.5 12.75 6 6 9-13.5\" />\n  </svg>\n)\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({\n  text,\n  timeout = 2000,\n  color,\n  variant,\n  size = 'md',\n  shape,\n  icon,\n  copiedIcon,\n  children,\n  copiedChildren,\n  onCopy,\n  onError,\n  showTooltip = false,\n  tooltipText = 'Copy',\n  copiedTooltipText = 'Copied!',\n  className = '',\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { copy, copied } = useClipboard(timeout)\n\n  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    if (disabled) return\n\n    const success = await copy(text)\n    if (success) {\n      onCopy?.()\n    } else {\n      onError?.(new Error('Failed to copy to clipboard'))\n    }\n  }\n\n  const colorClasses = {\n    primary: 'btn-primary',\n    secondary: 'btn-secondary',\n    accent: 'btn-accent',\n    info: 'btn-info',\n    success: 'btn-success',\n    warning: 'btn-warning',\n    error: 'btn-error',\n    neutral: 'btn-neutral',\n  }\n\n  const variantClasses = {\n    solid: '',\n    outline: 'btn-outline',\n    dash: 'btn-dash',\n    soft: 'btn-soft',\n    ghost: 'btn-ghost',\n    link: 'btn-link',\n  }\n\n  const sizeClasses = {\n    xs: 'btn-xs',\n    sm: 'btn-sm',\n    md: '',\n    lg: 'btn-lg',\n    xl: 'btn-xl',\n  }\n\n  const shapeClasses = {\n    square: 'btn-square',\n    circle: 'btn-circle',\n  }\n\n  const classes = [\n    'btn',\n    color && colorClasses[color],\n    copied && 'btn-success',\n    variant && variantClasses[variant],\n    sizeClasses[size],\n    shape && shapeClasses[shape],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const defaultIcon = icon ?? <CopyIcon />\n  const successIcon = copiedIcon ?? <CheckIcon />\n\n  const content = copied\n    ? (copiedChildren ?? successIcon)\n    : (children ?? defaultIcon)\n\n  const button = (\n    <button\n      type=\"button\"\n      className={classes}\n      onClick={handleClick}\n      disabled={disabled}\n      aria-label={copied ? copiedTooltipText : tooltipText}\n      {...rest}\n    >\n      {content}\n    </button>\n  )\n\n  if (showTooltip) {\n    return (\n      <div className=\"tooltip\" data-tip={copied ? copiedTooltipText : tooltipText}>\n        {button}\n      </div>\n    )\n  }\n\n  return button\n}\n\nCopyButton.displayName = 'CopyButton'\n"],"names":["CopyIcon","jsx","CheckIcon","CopyButton","text","timeout","color","variant","size","shape","icon","copiedIcon","children","copiedChildren","onCopy","onError","showTooltip","tooltipText","copiedTooltipText","className","disabled","onClick","rest","copy","copied","useClipboard","handleClick","e","colorClasses","variantClasses","sizeClasses","shapeClasses","classes","button"],"mappings":";;AAoCA,MAAMA,IAAqB,MACzB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IAEP,UAAA,gBAAAA,EAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAY,KAAI,GAAE,wHAAA,CAAwH;AAAA,EAAA;AAC/L,GAGIC,IAAsB,MAC1B,gBAAAD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IAEP,UAAA,gBAAAA,EAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAY,KAAI,GAAE,wBAAA,CAAwB;AAAA,EAAA;AAC/F,GAGWE,IAAwC,CAAC;AAAA,EACpD,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,mBAAAC,IAAoB;AAAA,EACpB,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,MAAAC,GAAM,QAAAC,MAAWC,EAAapB,CAAO,GAEvCqB,IAAc,OAAOC,MAA2C;AAEpE,QADAN,IAAUM,CAAC,GACPP,EAAU;AAGd,IADgB,MAAMG,EAAKnB,CAAI,IAE7BU,IAAA,IAEAC,IAAU,IAAI,MAAM,6BAA6B,CAAC;AAAA,EAEtD,GAEMa,IAAe;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EAAA,GAGLC,IAAiB;AAAA,IACrB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,GAGFC,IAAc;AAAA,IAClB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAC,IAAe;AAAA,IACnB,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,GAGJC,IAAU;AAAA,IACd;AAAA,IACA1B,KAASsB,EAAatB,CAAK;AAAA,IAC3BkB,KAAU;AAAA,IACVjB,KAAWsB,EAAetB,CAAO;AAAA,IACjCuB,EAAYtB,CAAI;AAAA,IAChBC,KAASsB,EAAatB,CAAK;AAAA,IAC3BU;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GASLc,IACJ,gBAAAhC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW+B;AAAA,MACX,SAASN;AAAA,MACT,UAAAN;AAAA,MACA,cAAYI,IAASN,IAAoBD;AAAA,MACxC,GAAGK;AAAA,MAEH,UAbWE,IACXX,MAHeF,KAAc,gBAAAV,EAACC,GAAA,CAAA,CAAU,KAIxCU,MALeF,KAAQ,gBAAAT,EAACD,GAAA,CAAA,CAAS;AAAA,IAgBjC;AAAA,EAAA;AAIL,SAAIgB,IAEA,gBAAAf,EAAC,SAAI,WAAU,WAAU,YAAUuB,IAASN,IAAoBD,GAC7D,UAAAgB,EAAA,CACH,IAIGA;AACT;AAEA9B,EAAW,cAAc;"}
+{"version":3,"file":"CopyButton.js","sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { useClipboard } from '../hooks/useClipboard'\nimport { IconSizeContext } from '../contexts/IconSizeContext'\n\nconst iconSizeClasses = {\n  xs: 'w-3.5 h-3.5',\n  sm: 'w-3.5 h-3.5',\n  md: 'w-4 h-4',\n  lg: 'w-5 h-5',\n  xl: 'w-6 h-6',\n}\n\nexport type CopyButtonPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onError'> {\n  /** Text to copy to clipboard */\n  text: string\n  /** Duration in ms to show copied state */\n  timeout?: number\n  /** Button color */\n  color?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'\n  /** Button style variant */\n  variant?: 'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link'\n  /** Button size */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Button shape */\n  shape?: 'square' | 'circle'\n  /** Absolute position within parent (parent must have position: relative) */\n  position?: CopyButtonPosition\n  /** Custom icon for default state */\n  icon?: React.ReactNode\n  /** Custom icon for copied state */\n  copiedIcon?: React.ReactNode\n  /** Custom content for default state (overrides icon) */\n  children?: React.ReactNode\n  /** Custom content for copied state */\n  copiedChildren?: React.ReactNode\n  /** Callback when copy succeeds */\n  onCopy?: () => void\n  /** Callback when copy fails */\n  onError?: (error: Error) => void\n  /** Show tooltip with copy status */\n  showTooltip?: boolean\n  /** Tooltip text for default state */\n  tooltipText?: string\n  /** Tooltip text for copied state */\n  copiedTooltipText?: string\n}\n\nconst CopyIcon: React.FC = () => {\n  const size = useContext(IconSizeContext) ?? 'md'\n  return (\n    <svg\n      className={iconSizeClasses[size]}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\" />\n    </svg>\n  )\n}\n\nconst CheckIcon: React.FC = () => {\n  const size = useContext(IconSizeContext) ?? 'md'\n  return (\n    <svg\n      className={iconSizeClasses[size]}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"m4.5 12.75 6 6 9-13.5\" />\n    </svg>\n  )\n}\n\nconst positionClasses: Record<CopyButtonPosition, string> = {\n  'top-right': 'absolute top-2 right-2',\n  'top-left': 'absolute top-2 left-2',\n  'bottom-right': 'absolute bottom-2 right-2',\n  'bottom-left': 'absolute bottom-2 left-2',\n}\n\nexport const CopyButton: React.FC<CopyButtonProps> = ({\n  text,\n  timeout = 2000,\n  color,\n  variant,\n  size = 'md',\n  shape,\n  position,\n  icon,\n  copiedIcon,\n  children,\n  copiedChildren,\n  onCopy,\n  onError,\n  showTooltip = false,\n  tooltipText = 'Copy',\n  copiedTooltipText = 'Copied!',\n  className = '',\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { copy, copied } = useClipboard(timeout)\n\n  const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    if (disabled) return\n\n    const success = await copy(text)\n    if (success) {\n      onCopy?.()\n    } else {\n      onError?.(new Error('Failed to copy to clipboard'))\n    }\n  }\n\n  const colorClasses = {\n    primary: 'btn-primary',\n    secondary: 'btn-secondary',\n    accent: 'btn-accent',\n    info: 'btn-info',\n    success: 'btn-success',\n    warning: 'btn-warning',\n    error: 'btn-error',\n    neutral: 'btn-neutral',\n  }\n\n  const variantClasses = {\n    solid: '',\n    outline: 'btn-outline',\n    dash: 'btn-dash',\n    soft: 'btn-soft',\n    ghost: 'btn-ghost',\n    link: 'btn-link',\n  }\n\n  const sizeClasses = {\n    xs: 'btn-xs',\n    sm: 'btn-sm',\n    md: '',\n    lg: 'btn-lg',\n    xl: 'btn-xl',\n  }\n\n  const shapeClasses = {\n    square: 'btn-square',\n    circle: 'btn-circle',\n  }\n\n  const classes = [\n    'btn',\n    color && colorClasses[color],\n    copied && 'btn-success',\n    variant && variantClasses[variant],\n    sizeClasses[size],\n    shape && shapeClasses[shape],\n    // Only add position classes if not using tooltip (tooltip wrapper gets them instead)\n    !showTooltip && position && positionClasses[position],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const defaultIcon = icon ?? <CopyIcon />\n  const successIcon = copiedIcon ?? <CheckIcon />\n\n  const content = copied\n    ? (copiedChildren ?? successIcon)\n    : (children ?? defaultIcon)\n\n  const button = (\n    <button\n      type=\"button\"\n      className={classes}\n      onClick={handleClick}\n      disabled={disabled}\n      aria-label={copied ? copiedTooltipText : tooltipText}\n      {...rest}\n    >\n      <IconSizeContext.Provider value={size}>\n        {content}\n      </IconSizeContext.Provider>\n    </button>\n  )\n\n  if (showTooltip) {\n    const tooltipClasses = ['tooltip', position && positionClasses[position]].filter(Boolean).join(' ')\n    return (\n      <div className={tooltipClasses} data-tip={copied ? copiedTooltipText : tooltipText}>\n        {button}\n      </div>\n    )\n  }\n\n  return button\n}\n\nCopyButton.displayName = 'CopyButton'\n"],"names":["iconSizeClasses","CopyIcon","size","useContext","IconSizeContext","jsx","CheckIcon","positionClasses","CopyButton","text","timeout","color","variant","shape","position","icon","copiedIcon","children","copiedChildren","onCopy","onError","showTooltip","tooltipText","copiedTooltipText","className","disabled","onClick","rest","copy","copied","useClipboard","handleClick","colorClasses","variantClasses","sizeClasses","shapeClasses","classes","content","button","tooltipClasses"],"mappings":"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"}

package/dist/components/Descriptions.d.ts

@@ -2,30 +2,44 @@ import { default as React } from 'react';
 export type DescriptionsSize = 'sm' | 'md' | 'lg';
 export type DescriptionsLayout = 'horizontal' | 'vertical';
 export interface DescriptionsItemProps {
+    /** Unique key for the item */
+    itemKey?: string;
     /** Label for the item */
     label?: React.ReactNode;
-    /** Number of columns to span */
-    span?: number;
+    /** Number of columns to span, or 'filled' to fill remaining space */
+    span?: number | 'filled';
     /** Content of the item */
     children?: React.ReactNode;
     /** Custom label styles */
     labelStyle?: React.CSSProperties;
     /** Custom content styles */
     contentStyle?: React.CSSProperties;
+    /** Custom label class */
+    labelClassName?: string;
+    /** Custom content class */
+    contentClassName?: string;
 }
 /** Item configuration for the items prop */
 export interface DescriptionsItemConfig {
+    /** Unique key for the item (used for test IDs and React keys) */
+    key?: string;
     /** Label for the item */
     label: React.ReactNode;
     /** Content of the item */
     children: React.ReactNode;
-    /** Number of columns to span */
-    span?: number;
+    /** Number of columns to span, or 'filled' to fill remaining space */
+    span?: number | 'filled';
     /** Custom label styles */
     labelStyle?: React.CSSProperties;
     /** Custom content styles */
     contentStyle?: React.CSSProperties;
+    /** Custom label class */
+    labelClassName?: string;
+    /** Custom content class */
+    contentClassName?: string;
 }
+/** Semantic DOM structure for styles/classNames */
+export type DescriptionsSemanticDOM = 'root' | 'header' | 'title' | 'extra' | 'table' | 'label' | 'content';
 export interface DescriptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Title of the descriptions block */
     title?: React.ReactNode;
@@ -48,10 +62,14 @@ export interface DescriptionsProps extends Omit<React.HTMLAttributes<HTMLDivElem
     layout?: DescriptionsLayout;
     /** Show colon after labels */
     colon?: boolean;
-    /** Default label styles */
+    /** Default label styles (deprecated, use styles.label) */
     labelStyle?: React.CSSProperties;
-    /** Default content styles */
+    /** Default content styles (deprecated, use styles.content) */
     contentStyle?: React.CSSProperties;
+    /** Semantic styles for component parts */
+    styles?: Partial<Record<DescriptionsSemanticDOM, React.CSSProperties>>;
+    /** Semantic classNames for component parts */
+    classNames?: Partial<Record<DescriptionsSemanticDOM, string>>;
     /** Item configurations (alternative to children) */
     items?: DescriptionsItemConfig[];
     /** Children (Descriptions.Item elements) */

package/dist/components/Descriptions.js

@@ -1,134 +1,221 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import y, { forwardRef as B } from "react";
-function H(c) {
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import g, { forwardRef as q, useId as G, useState as J, useEffect as Q } from "react";
+function T(n) {
   return null;
 }
-const O = {
+const U = {
   sm: "text-sm",
   md: "text-base",
   lg: "text-lg"
-}, N = B(
+}, S = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function X(n) {
+  const [h, i] = J(() => typeof n == "number" ? n : n.md ?? n.sm ?? n.xs ?? 3);
+  return Q(() => {
+    if (typeof n == "number") {
+      i(n);
+      return;
+    }
+    const $ = () => {
+      const k = window.innerWidth, u = Object.keys(S).filter((c) => n[c] !== void 0).sort((c, m) => S[m] - S[c]);
+      for (const c of u)
+        if (k >= S[c]) {
+          i(n[c]);
+          return;
+        }
+      const C = u[u.length - 1];
+      i(C ? n[C] : 3);
+    };
+    return $(), window.addEventListener("resize", $), () => window.removeEventListener("resize", $);
+  }, [n]), h;
+}
+const R = q(
   ({
-    title: c,
-    extra: S,
-    bordered: d = !1,
-    column: b = 3,
-    size: $ = "md",
-    layout: j = "horizontal",
-    colon: g = !0,
-    labelStyle: x,
-    contentStyle: v,
-    items: C,
-    className: M = "",
-    style: R,
+    title: n,
+    extra: h,
+    bordered: i = !1,
+    column: $ = 3,
+    size: k = "md",
+    layout: u = "horizontal",
+    colon: C = !0,
+    labelStyle: c,
+    contentStyle: m,
+    styles: d,
+    classNames: b,
+    items: x,
+    className: z = "",
+    style: B,
     children: D,
-    "data-testid": u = "descriptions",
-    ...L
-  }, z) => {
-    const w = C || y.Children.toArray(D).filter(
-      (t) => y.isValidElement(t)
+    "data-testid": s = "descriptions",
+    ...E
+  }, M) => {
+    const w = G(), f = X($), F = { ...c, ...d?.label }, O = { ...m, ...d?.content }, V = (x || g.Children.toArray(D).filter(
+      (t) => g.isValidElement(t)
     ).map((t) => ({
+      key: t.props.itemKey ?? t.key?.toString().replace(/^\.\$/, ""),
       label: t.props.label,
       children: t.props.children,
       span: t.props.span,
       labelStyle: t.props.labelStyle,
-      contentStyle: t.props.contentStyle
-    })), r = typeof b == "number" ? b : b.md || b.sm || b.xs || 3, E = () => {
-      const t = [];
-      let s = [], l = 0;
-      return w.forEach((n) => {
-        const o = n.span || 1, e = Math.min(o, r);
-        l + e > r ? (t.push(s), s = [n], l = e) : (s.push(n), l += e);
-      }), s.length > 0 && t.push(s), t.map((n, o) => /* @__PURE__ */ i(y.Fragment, { children: [
-        /* @__PURE__ */ a("tr", { children: n.map((e, f) => {
-          const h = e.span || 1, p = Math.min(h, r), m = e.labelStyle || x;
-          return /* @__PURE__ */ i(
-            "th",
-            {
-              className: `${d ? "border border-base-content/10" : ""} bg-base-200/50 font-semibold text-left px-4 py-2`,
-              style: m,
-              colSpan: p,
-              scope: "col",
-              children: [
-                e.label,
-                g && e.label && ":"
-              ]
-            },
-            f
-          );
-        }) }),
-        /* @__PURE__ */ a("tr", { children: n.map((e, f) => {
-          const h = e.span || 1, p = Math.min(h, r), m = e.contentStyle || v;
-          return /* @__PURE__ */ a(
-            "td",
-            {
-              className: `${d ? "border border-base-content/10" : ""} bg-base-100 px-4 py-2`,
-              style: m,
-              colSpan: p,
-              children: e.children
-            },
-            f
-          );
-        }) })
-      ] }, o));
-    }, F = () => {
+      contentStyle: t.props.contentStyle,
+      labelClassName: t.props.labelClassName,
+      contentClassName: t.props.contentClassName
+    }))).map((t, a) => ({
+      ...t,
+      _key: t.key ?? `item-${a}`,
+      _index: a
+    })), v = (() => {
       const t = [];
-      let s = [], l = 0;
-      return w.forEach((n) => {
-        const o = n.span || 1, e = Math.min(o, r);
-        l + e > r ? (t.push(s), s = [n], l = e) : (s.push(n), l += e);
-      }), s.length > 0 && t.push(s), t.map((n, o) => /* @__PURE__ */ a("tr", { children: n.map((e, f) => {
-        const h = e.span || 1, p = Math.min(h, r), m = e.labelStyle || x, A = e.contentStyle || v;
-        return /* @__PURE__ */ i(y.Fragment, { children: [
-          /* @__PURE__ */ i(
-            "th",
+      let a = [], e = 0;
+      return V.forEach((l) => {
+        if (l.span === "filled")
+          a.length > 0 ? (a.push({ ...l, span: f - e }), t.push(a), a = [], e = 0) : t.push([{ ...l, span: f }]);
+        else {
+          const p = l.span ?? 1, o = Math.min(p, f);
+          e + o > f ? (t.push(a), a = [l], e = o) : (a.push(l), e += o);
+        }
+      }), a.length > 0 && t.push(a), t;
+    })(), _ = (t) => [
+      i ? "border border-base-content/10" : "",
+      "bg-base-200/50 font-semibold text-base-content/70 text-left px-4 py-2",
+      u === "horizontal" ? "whitespace-nowrap" : "",
+      b?.label ?? "",
+      t.labelClassName ?? ""
+    ].filter(Boolean).join(" "), j = (t) => [
+      i ? "border border-base-content/10" : "",
+      "bg-base-100 text-base-content px-4 py-2",
+      b?.content ?? "",
+      t.contentClassName ?? ""
+    ].filter(Boolean).join(" "), N = (t) => ({
+      ...F,
+      ...t.labelStyle
+    }), L = (t) => ({
+      ...O,
+      ...t.contentStyle
+    }), A = () => v.map((t, a) => /* @__PURE__ */ y(g.Fragment, { children: [
+      /* @__PURE__ */ r("tr", { "data-testid": `${s}-row-${a}-labels`, children: t.map((e) => {
+        const l = typeof e.span == "number" ? e.span : 1, p = Math.min(l, f), o = `${w}-${e._key}-label`;
+        return /* @__PURE__ */ y(
+          "th",
+          {
+            id: o,
+            className: _(e),
+            style: N(e),
+            colSpan: p,
+            scope: "col",
+            "data-testid": `${s}-${e._key}-label`,
+            children: [
+              e.label,
+              C && e.label && /* @__PURE__ */ r("span", { "aria-hidden": "true", children: ":" })
+            ]
+          },
+          e._key
+        );
+      }) }),
+      /* @__PURE__ */ r("tr", { "data-testid": `${s}-row-${a}-values`, children: t.map((e) => {
+        const l = typeof e.span == "number" ? e.span : 1, p = Math.min(l, f), o = `${w}-${e._key}-label`;
+        return /* @__PURE__ */ r(
+          "td",
+          {
+            className: j(e),
+            style: L(e),
+            colSpan: p,
+            "aria-labelledby": o,
+            "data-testid": `${s}-${e._key}-content`,
+            children: e.children
+          },
+          e._key
+        );
+      }) })
+    ] }, t.map((e) => e._key).join("-"))), H = () => v.map((t, a) => /* @__PURE__ */ r("tr", { "data-testid": `${s}-row-${a}`, children: t.map((e) => {
+      const l = typeof e.span == "number" ? e.span : 1, p = Math.min(l, f), o = `${w}-${e._key}-label`;
+      return /* @__PURE__ */ y(g.Fragment, { children: [
+        /* @__PURE__ */ y(
+          "th",
+          {
+            id: o,
+            className: _(e),
+            style: N(e),
+            scope: "row",
+            "data-testid": `${s}-${e._key}-label`,
+            children: [
+              e.label,
+              C && e.label && /* @__PURE__ */ r("span", { "aria-hidden": "true", children: ":" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "td",
+          {
+            className: j(e),
+            style: L(e),
+            colSpan: p > 1 ? p * 2 - 1 : 1,
+            "aria-labelledby": o,
+            "data-testid": `${s}-${e._key}-content`,
+            children: e.children
+          }
+        )
+      ] }, e._key);
+    }) }, t.map((e) => e._key).join("-"))), K = [
+      "w-full",
+      i && "border-collapse",
+      U[k],
+      b?.table ?? "",
+      z
+    ].filter(Boolean).join(" "), W = [b?.root ?? ""].filter(Boolean).join(" ");
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        ref: M,
+        className: W || void 0,
+        style: { ...d?.root, ...B },
+        "data-testid": s,
+        ...E,
+        children: [
+          (n || h) && /* @__PURE__ */ y(
+            "div",
             {
-              className: `${d ? "border border-base-content/10" : ""} bg-base-200/50 font-semibold text-left px-4 py-2 whitespace-nowrap`,
-              style: m,
-              scope: "row",
+              className: `flex items-center justify-between mb-4 ${b?.header ?? ""}`,
+              style: d?.header,
+              "data-testid": `${s}-header`,
               children: [
-                e.label,
-                g && e.label && ":"
+                n && /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: `text-lg font-semibold ${b?.title ?? ""}`,
+                    style: d?.title,
+                    "data-testid": `${s}-title`,
+                    children: n
+                  }
+                ),
+                h && /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: b?.extra ?? "",
+                    style: d?.extra,
+                    "data-testid": `${s}-extra`,
+                    children: h
+                  }
+                )
               ]
             }
           ),
-          /* @__PURE__ */ a(
-            "td",
-            {
-              className: `${d ? "border border-base-content/10" : ""} bg-base-100 px-4 py-2`,
-              style: A,
-              colSpan: p > 1 ? p * 2 - 1 : 1,
-              children: e.children
-            }
-          )
-        ] }, f);
-      }) }, o));
-    }, V = [
-      "w-full",
-      d && "border-collapse",
-      O[$],
-      M
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        ref: z,
-        style: R,
-        "data-testid": u,
-        ...L,
-        children: [
-          (c || S) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-4", "data-testid": `${u}-header`, children: [
-            c && /* @__PURE__ */ a("div", { className: "text-lg font-semibold", children: c }),
-            S && /* @__PURE__ */ a("div", { "data-testid": `${u}-extra`, children: S })
-          ] }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ y(
             "table",
             {
-              className: V,
-              role: "table",
-              "aria-label": typeof c == "string" ? c : void 0,
-              "data-testid": `${u}-table`,
-              children: /* @__PURE__ */ a("tbody", { children: j === "vertical" ? E() : F() })
+              className: K,
+              style: d?.table,
+              "data-testid": `${s}-table`,
+              children: [
+                n && /* @__PURE__ */ r("caption", { className: "sr-only", children: typeof n == "string" ? n : "Description list" }),
+                /* @__PURE__ */ r("tbody", { children: u === "vertical" ? A() : H() })
+              ]
             }
           )
         ]
@@ -136,12 +223,12 @@ const O = {
     );
   }
 );
-N.displayName = "Descriptions";
-const G = Object.assign(N, {
-  Item: H
+R.displayName = "Descriptions";
+const I = Object.assign(R, {
+  Item: T
 });
 export {
-  G as Descriptions,
-  G as default
+  I as Descriptions,
+  I as default
 };
 //# sourceMappingURL=Descriptions.js.map