@hexclave/dashboard-ui-components 1.0.5 → 1.0.6

package/dist/esm/components/alert.js

@@ -14,7 +14,7 @@ const variantIconMap = new Map([
 ]);
 const variantStyles = new Map([
 	["default", {
-		container: "bg-background border-border",
+		container: "border-black/[0.08] bg-white/90 ring-1 ring-black/[0.06] dark:border-border dark:bg-background dark:ring-0",
 		icon: "text-foreground",
 		title: "text-foreground"
 	}],
@@ -34,9 +34,9 @@ const variantStyles = new Map([
 		title: "text-amber-700 dark:text-amber-300"
 	}],
 	["info", {
-		container: "bg-blue-500/[0.06] border-blue-500/30",
-		icon: "text-blue-500",
-		title: "text-blue-600 dark:text-blue-400"
+		container: "border-blue-500/20 bg-blue-50/90 ring-1 ring-blue-500/10 dark:border-blue-500/30 dark:bg-blue-500/[0.06] dark:ring-0",
+		icon: "text-blue-600 dark:text-blue-400",
+		title: "text-blue-700 dark:text-blue-400"
 	}]
 ]);
 function getMapValueOrThrow(map, key, mapName) {

package/dist/esm/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircle, Info, WarningCircle, XCircle } from \"@phosphor-icons/react\";\nimport { cn } from \"@hexclave/ui\";\n\ntype DesignAlertVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nconst variantIconMap = new Map<DesignAlertVariant, React.ElementType>([\n  [\"default\", Info],\n  [\"success\", CheckCircle],\n  [\"error\", XCircle],\n  [\"warning\", WarningCircle],\n  [\"info\", Info],\n]);\n\ntype VariantStyles = {\n  container: string,\n  icon: string,\n  title: string,\n};\n\nconst variantStyles = new Map<DesignAlertVariant, VariantStyles>([\n  [\n    \"default\",\n    {\n      container: \"bg-background border-border\",\n      icon: \"text-foreground\",\n      title: \"text-foreground\",\n    },\n  ],\n  [\n    \"success\",\n    {\n      container: \"bg-green-500/[0.06] border-green-500/30\",\n      icon: \"text-green-500\",\n      title: \"text-green-600 dark:text-green-400\",\n    },\n  ],\n  [\n    \"error\",\n    {\n      container: \"bg-red-500/[0.06] border-red-500/30\",\n      icon: \"text-red-500\",\n      title: \"text-red-600 dark:text-red-400\",\n    },\n  ],\n  [\n    \"warning\",\n    {\n      container: \"bg-amber-500/[0.08] border-amber-500/40\",\n      icon: \"text-amber-600 dark:text-amber-400\",\n      title: \"text-amber-700 dark:text-amber-300\",\n    },\n  ],\n  [\n    \"info\",\n    {\n      container: \"bg-blue-500/[0.06] border-blue-500/30\",\n      icon: \"text-blue-500\",\n      title: \"text-blue-600 dark:text-blue-400\",\n    },\n  ],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {\n  variant?: DesignAlertVariant,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n  glassmorphic?: boolean,\n};\n\nexport function DesignAlert({\n  variant = \"default\",\n  title,\n  description,\n  glassmorphic = false,\n  className,\n  children,\n  ...props\n}: DesignAlertProps) {\n  const styles = getMapValueOrThrow(variantStyles, variant, \"variantStyles\");\n  const Icon = getMapValueOrThrow(variantIconMap, variant, \"variantIconMap\");\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        \"relative w-full rounded-2xl border p-4 text-sm\",\n        \"flex gap-3 items-start\",\n        styles.container,\n        glassmorphic && \"backdrop-blur-xl\",\n        className\n      )}\n      {...props}\n    >\n      <Icon className={cn(\"h-4 w-4 mt-0.5 flex-shrink-0\", styles.icon)} />\n      <div className=\"min-w-0\">\n        {title && (\n          <h5 className={cn(\"mb-1 font-medium leading-none tracking-tight\", styles.title)}>\n            {title}\n          </h5>\n        )}\n        {description && (\n          <div className=\"text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed\">\n            {description}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB,IAAI,IAA2C;CACpE,CAAC,WAAW,KAAK;CACjB,CAAC,WAAW,YAAY;CACxB,CAAC,SAAS,QAAQ;CAClB,CAAC,WAAW,cAAc;CAC1B,CAAC,QAAQ,KAAK;CACf,CAAC;AAQF,MAAM,gBAAgB,IAAI,IAAuC;CAC/D,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,SACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,QACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACF,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAUT,SAAgB,YAAY,EAC1B,UAAU,WACV,OACA,aACA,eAAe,OACf,WACA,UACA,GAAG,SACgB;CACnB,MAAM,SAAS,mBAAmB,eAAe,SAAS,gBAAgB;CAC1E,MAAM,OAAO,mBAAmB,gBAAgB,SAAS,iBAAiB;AAE1E,QACE,qBAAC;EACC,MAAK;EACL,WAAW,GACT,kDACA,0BACA,OAAO,WACP,gBAAgB,oBAChB,UACD;EACD,GAAI;aAEJ,oBAAC,QAAK,WAAW,GAAG,gCAAgC,OAAO,KAAK,GAAI,EACpE,qBAAC;GAAI,WAAU;;IACZ,SACC,oBAAC;KAAG,WAAW,GAAG,gDAAgD,OAAO,MAAM;eAC5E;MACE;IAEN,eACC,oBAAC;KAAI,WAAU;eACZ;MACG;IAEP;;IACG;GACF"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircle, Info, WarningCircle, XCircle } from \"@phosphor-icons/react\";\nimport { cn } from \"@hexclave/ui\";\n\ntype DesignAlertVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nconst variantIconMap = new Map<DesignAlertVariant, React.ElementType>([\n  [\"default\", Info],\n  [\"success\", CheckCircle],\n  [\"error\", XCircle],\n  [\"warning\", WarningCircle],\n  [\"info\", Info],\n]);\n\ntype VariantStyles = {\n  container: string,\n  icon: string,\n  title: string,\n};\n\nconst variantStyles = new Map<DesignAlertVariant, VariantStyles>([\n  [\n    \"default\",\n    {\n      container: \"border-black/[0.08] bg-white/90 ring-1 ring-black/[0.06] dark:border-border dark:bg-background dark:ring-0\",\n      icon: \"text-foreground\",\n      title: \"text-foreground\",\n    },\n  ],\n  [\n    \"success\",\n    {\n      container: \"bg-green-500/[0.06] border-green-500/30\",\n      icon: \"text-green-500\",\n      title: \"text-green-600 dark:text-green-400\",\n    },\n  ],\n  [\n    \"error\",\n    {\n      container: \"bg-red-500/[0.06] border-red-500/30\",\n      icon: \"text-red-500\",\n      title: \"text-red-600 dark:text-red-400\",\n    },\n  ],\n  [\n    \"warning\",\n    {\n      container: \"bg-amber-500/[0.08] border-amber-500/40\",\n      icon: \"text-amber-600 dark:text-amber-400\",\n      title: \"text-amber-700 dark:text-amber-300\",\n    },\n  ],\n  [\n    \"info\",\n    {\n      container: \"border-blue-500/20 bg-blue-50/90 ring-1 ring-blue-500/10 dark:border-blue-500/30 dark:bg-blue-500/[0.06] dark:ring-0\",\n      icon: \"text-blue-600 dark:text-blue-400\",\n      title: \"text-blue-700 dark:text-blue-400\",\n    },\n  ],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\nexport type DesignAlertProps = React.HTMLAttributes<HTMLDivElement> & {\n  variant?: DesignAlertVariant,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n  glassmorphic?: boolean,\n};\n\nexport function DesignAlert({\n  variant = \"default\",\n  title,\n  description,\n  glassmorphic = false,\n  className,\n  children,\n  ...props\n}: DesignAlertProps) {\n  const styles = getMapValueOrThrow(variantStyles, variant, \"variantStyles\");\n  const Icon = getMapValueOrThrow(variantIconMap, variant, \"variantIconMap\");\n\n  return (\n    <div\n      role=\"alert\"\n      className={cn(\n        \"relative w-full rounded-2xl border p-4 text-sm\",\n        \"flex gap-3 items-start\",\n        styles.container,\n        glassmorphic && \"backdrop-blur-xl\",\n        className\n      )}\n      {...props}\n    >\n      <Icon className={cn(\"h-4 w-4 mt-0.5 flex-shrink-0\", styles.icon)} />\n      <div className=\"min-w-0\">\n        {title && (\n          <h5 className={cn(\"mb-1 font-medium leading-none tracking-tight\", styles.title)}>\n            {title}\n          </h5>\n        )}\n        {description && (\n          <div className=\"text-sm text-foreground/80 dark:text-muted-foreground [&_p]:leading-relaxed\">\n            {description}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB,IAAI,IAA2C;CACpE,CAAC,WAAW,KAAK;CACjB,CAAC,WAAW,YAAY;CACxB,CAAC,SAAS,QAAQ;CAClB,CAAC,WAAW,cAAc;CAC1B,CAAC,QAAQ,KAAK;CACf,CAAC;AAQF,MAAM,gBAAgB,IAAI,IAAuC;CAC/D,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,SACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,WACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACD,CACE,QACA;EACE,WAAW;EACX,MAAM;EACN,OAAO;EACR,CACF;CACF,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAUT,SAAgB,YAAY,EAC1B,UAAU,WACV,OACA,aACA,eAAe,OACf,WACA,UACA,GAAG,SACgB;CACnB,MAAM,SAAS,mBAAmB,eAAe,SAAS,gBAAgB;CAC1E,MAAM,OAAO,mBAAmB,gBAAgB,SAAS,iBAAiB;AAE1E,QACE,qBAAC;EACC,MAAK;EACL,WAAW,GACT,kDACA,0BACA,OAAO,WACP,gBAAgB,oBAChB,UACD;EACD,GAAI;aAEJ,oBAAC,QAAK,WAAW,GAAG,gCAAgC,OAAO,KAAK,GAAI,EACpE,qBAAC;GAAI,WAAU;;IACZ,SACC,oBAAC;KAAG,WAAW,GAAG,gDAAgD,OAAO,MAAM;eAC5E;MACE;IAEN,eACC,oBAAC;KAAI,WAAU;eACZ;MACG;IAEP;;IACG;GACF"}

package/dist/esm/components/badge.js

@@ -61,7 +61,7 @@ function DesignBadge({ label, color, icon, size = "md", contentMode = "both" })
 	if (!showLabel && !showIcon) throw new Error("DesignBadge must show at least label or icon.");
 	const sizeClasses = size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-1 text-[11px]";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("inline-flex items-center gap-1.5 rounded-full font-medium", getMapValueOrThrow(badgeStyles, color, "badgeStyles"), sizeClasses),
+		className: cn("inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none", getMapValueOrThrow(badgeStyles, color, "badgeStyles"), sizeClasses),
 		title: !showLabel ? label : void 0,
 		"aria-label": label,
 		children: [showIcon && Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }), showLabel ? label : null]

package/dist/esm/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\n/**\n * Small pill used for status tags, roles, categories, and other short\n * labels. Not a variant-based component — pick a semantic `color` and\n * optionally pass an `icon` (as a component type, not a rendered node).\n *\n * ```tsx\n * <DesignBadge label=\"Verified\" color=\"green\" icon={CheckIcon} />\n * <DesignBadge label=\"Beta\" color=\"purple\" />\n * <DesignBadge label=\"Error\" color=\"red\" size=\"sm\" />\n * ```\n *\n * Notes:\n * - Props are `label` + `color`, NOT `variant` + children.\n * - `color` is one of: `\"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\"`.\n * - `icon` is optional but, if set via `contentMode: \"icon\"`, is required.\n */\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-full font-medium\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className=\"h-3 w-3\" />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,MAAM,cAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,UAAU,gIAAgI;CAC3I,CAAC,SAAS,sIAAsI;CAChJ,CAAC,UAAU,0HAA0H;CACrI,CAAC,OAAO,8GAA8G;CACvH,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAeT,SAAS,qBACP,aACA,SAC2C;AAC3C,SAAQ,aAAR;EACE,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAS;EAE/C,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAO;EAE7C,KAAK;AACH,OAAI,CAAC,QACH,OAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAO;IAAE,WAAW;IAAO,UAAU;IAAM;EAE7C,SAAS;GACP,MAAM,cAAqB;AAC3B,SAAM,IAAI,MAAM,wBAAwB,OAAO,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;AAqBpE,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,KAAK;AACzE,KAAI,CAAC,aAAa,CAAC,SACjB,OAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,cAAc,SAAS,OACzB,4BACA;AAGJ,QACE,qBAAC;EACC,WAAW,GACT,6DALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,oBAAC,QAAK,WAAU,YAAY,EAChD,YAAY,QAAQ;GACjB"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\n\nexport type DesignBadgeColor = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\";\nexport type DesignBadgeSize = \"sm\" | \"md\";\n\nconst badgeStyles = new Map<DesignBadgeColor, string>([\n  [\"blue\", \"text-blue-700 dark:text-blue-400 bg-blue-500/20 dark:bg-blue-500/10 ring-1 ring-blue-500/30 dark:ring-blue-500/20\"],\n  [\"cyan\", \"text-cyan-700 dark:text-cyan-400 bg-cyan-500/20 dark:bg-cyan-500/10 ring-1 ring-cyan-500/30 dark:ring-cyan-500/20\"],\n  [\"purple\", \"text-purple-700 dark:text-purple-400 bg-purple-500/20 dark:bg-purple-500/10 ring-1 ring-purple-500/30 dark:ring-purple-500/20\"],\n  [\"green\", \"text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 dark:bg-emerald-500/10 ring-1 ring-emerald-500/30 dark:ring-emerald-500/20\"],\n  [\"orange\", \"text-amber-700 dark:text-amber-300 bg-amber-500/20 dark:bg-amber-500/10 ring-1 ring-amber-500/30 dark:ring-amber-500/20\"],\n  [\"red\", \"text-red-700 dark:text-red-400 bg-red-500/20 dark:bg-red-500/10 ring-1 ring-red-500/30 dark:ring-red-500/20\"],\n]);\n\nfunction getMapValueOrThrow<TKey, TValue>(map: Map<TKey, TValue>, key: TKey, mapName: string) {\n  const value = map.get(key);\n  if (!value) {\n    throw new Error(`Missing ${mapName} entry for key \"${String(key)}\"`);\n  }\n  return value;\n}\n\n/** At least one of showLabel or showIcon must be true. */\nexport type DesignBadgeContentMode = \"both\" | \"text\" | \"icon\";\n\nexport type DesignBadgeProps = {\n  label: string,\n  color: DesignBadgeColor,\n  icon?: React.ElementType,\n  size?: DesignBadgeSize,\n  /** What to display: \"both\" (default), \"text\" (label only), or \"icon\" (icon only; requires icon prop). */\n  contentMode?: DesignBadgeContentMode,\n};\n\nfunction getShowLabelShowIcon(\n  contentMode: DesignBadgeContentMode,\n  hasIcon: boolean,\n): { showLabel: boolean, showIcon: boolean } {\n  switch (contentMode) {\n    case \"both\": {\n      return { showLabel: true, showIcon: hasIcon };\n    }\n    case \"text\": {\n      return { showLabel: true, showIcon: false };\n    }\n    case \"icon\": {\n      if (!hasIcon) {\n        throw new Error(\"DesignBadge contentMode 'icon' requires the icon prop to be provided.\");\n      }\n      return { showLabel: false, showIcon: true };\n    }\n    default: {\n      const _exhaustive: never = contentMode;\n      throw new Error(`Unknown contentMode: ${String(_exhaustive)}`);\n    }\n  }\n}\n\n/**\n * Small pill used for status tags, roles, categories, and other short\n * labels. Not a variant-based component — pick a semantic `color` and\n * optionally pass an `icon` (as a component type, not a rendered node).\n *\n * ```tsx\n * <DesignBadge label=\"Verified\" color=\"green\" icon={CheckIcon} />\n * <DesignBadge label=\"Beta\" color=\"purple\" />\n * <DesignBadge label=\"Error\" color=\"red\" size=\"sm\" />\n * ```\n *\n * Notes:\n * - Props are `label` + `color`, NOT `variant` + children.\n * - `color` is one of: `\"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"red\"`.\n * - `icon` is optional but, if set via `contentMode: \"icon\"`, is required.\n */\nexport function DesignBadge({\n  label,\n  color,\n  icon,\n  size = \"md\",\n  contentMode = \"both\",\n}: DesignBadgeProps) {\n  const Icon = icon;\n  const { showLabel, showIcon } = getShowLabelShowIcon(contentMode, !!Icon);\n  if (!showLabel && !showIcon) {\n    throw new Error(\"DesignBadge must show at least label or icon.\");\n  }\n  const sizeClasses = size === \"sm\"\n    ? \"px-2 py-0.5 text-[10px]\"\n    : \"px-2.5 py-1 text-[11px]\";\n  const colorClasses = getMapValueOrThrow(badgeStyles, color, \"badgeStyles\");\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex max-w-full items-center gap-1.5 whitespace-nowrap rounded-full font-medium leading-none\",\n        colorClasses,\n        sizeClasses\n      )}\n      title={!showLabel ? label : undefined}\n      aria-label={label}\n    >\n      {showIcon && Icon && <Icon className=\"h-3 w-3\" />}\n      {showLabel ? label : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,MAAM,cAAc,IAAI,IAA8B;CACpD,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,QAAQ,oHAAoH;CAC7H,CAAC,UAAU,gIAAgI;CAC3I,CAAC,SAAS,sIAAsI;CAChJ,CAAC,UAAU,0HAA0H;CACrI,CAAC,OAAO,8GAA8G;CACvH,CAAC;AAEF,SAAS,mBAAiC,KAAwB,KAAW,SAAiB;CAC5F,MAAM,QAAQ,IAAI,IAAI,IAAI;AAC1B,KAAI,CAAC,MACH,OAAM,IAAI,MAAM,WAAW,QAAQ,kBAAkB,OAAO,IAAI,CAAC,GAAG;AAEtE,QAAO;;AAeT,SAAS,qBACP,aACA,SAC2C;AAC3C,SAAQ,aAAR;EACE,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAS;EAE/C,KAAK,OACH,QAAO;GAAE,WAAW;GAAM,UAAU;GAAO;EAE7C,KAAK;AACH,OAAI,CAAC,QACH,OAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAO;IAAE,WAAW;IAAO,UAAU;IAAM;EAE7C,SAAS;GACP,MAAM,cAAqB;AAC3B,SAAM,IAAI,MAAM,wBAAwB,OAAO,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;AAqBpE,SAAgB,YAAY,EAC1B,OACA,OACA,MACA,OAAO,MACP,cAAc,UACK;CACnB,MAAM,OAAO;CACb,MAAM,EAAE,WAAW,aAAa,qBAAqB,aAAa,CAAC,CAAC,KAAK;AACzE,KAAI,CAAC,aAAa,CAAC,SACjB,OAAM,IAAI,MAAM,gDAAgD;CAElE,MAAM,cAAc,SAAS,OACzB,4BACA;AAGJ,QACE,qBAAC;EACC,WAAW,GACT,uGALe,mBAAmB,aAAa,OAAO,cAAc,EAOpE,YACD;EACD,OAAO,CAAC,YAAY,QAAQ;EAC5B,cAAY;aAEX,YAAY,QAAQ,oBAAC,QAAK,WAAU,YAAY,EAChD,YAAY,QAAQ;GACjB"}

package/dist/esm/components/button.d.ts

@@ -4,8 +4,8 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/components/button.d.ts
 declare const designButtonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
-  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
+  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type DesignOriginalButtonProps = {
   asChild?: boolean;
@@ -36,8 +36,8 @@ declare const DesignButton: React.FC<{
 } & {
   asChild?: boolean;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "plain" | null | undefined;
-  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plain" | null | undefined;
+  size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string> & {
   ref?: React.Ref<HTMLButtonElement> | undefined;
 }>;

package/dist/esm/components/button.js

@@ -13,9 +13,9 @@ const designButtonVariants = cva("stack-scope inline-flex items-center justify-c
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline: "border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
+			outline: "border border-input bg-white/85 dark:bg-background hover:bg-zinc-50 dark:hover:bg-accent dark:hover:text-accent-foreground",
+			secondary: "bg-white dark:bg-secondary text-secondary-foreground hover:bg-zinc-50 dark:hover:bg-secondary/80",
+			ghost: "hover:bg-zinc-100 dark:hover:bg-accent dark:hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline",
 			plain: ""
 		},

package/dist/esm/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { forwardRefIfNeeded } from \"@hexclave/shared/dist/utils/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn, Spinner } from \"@hexclave/ui\";\nimport { useAsyncCallback } from \"@hexclave/shared/dist/hooks/use-async-callback\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\n\nconst designButtonVariants = cva(\n  \"stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-white/85 dark:bg-background hover:bg-white dark:hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        plain: \"\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport type DesignOriginalButtonProps = {\n  asChild?: boolean,\n} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;\n\nconst DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(designButtonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nDesignOriginalButton.displayName = \"DesignButton\";\n\nexport type DesignButtonProps = {\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,\n  loading?: boolean,\n  loadingStyle?: \"spinner\" | \"disabled\",\n} & DesignOriginalButtonProps;\n\n/**\n * Standard button. Variants: `default | destructive | outline | secondary | ghost | link | plain`.\n * Sizes: `default | sm | lg | icon`.\n *\n * ```tsx\n * <DesignButton variant=\"default\" onClick={handleSave}>Save</DesignButton>\n * <DesignButton variant=\"outline\" size=\"sm\" onClick={handleCancel}>Cancel</DesignButton>\n * <DesignButton variant=\"ghost\" size=\"icon\"><PlusIcon className=\"h-4 w-4\" /></DesignButton>\n * ```\n *\n * Pass an async `onClick` and the button will automatically show a spinner\n * while the promise is pending (set `loadingStyle=\"disabled\"` if you prefer\n * a simple disabled state instead).\n */\nexport const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(\n  ({ onClick, loading: loadingProp, loadingStyle = \"spinner\", children, size, ...props }, ref) => {\n    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {\n      await onClick?.(e);\n    }, [onClick]);\n\n    const loading = loadingProp || isLoading;\n\n    return (\n      <DesignOriginalButton\n        {...props}\n        ref={ref}\n        disabled={props.disabled || loading}\n        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}\n        size={size}\n        className={cn(\"relative\", loading && \"[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible\", props.className)}\n      >\n        {loadingStyle === \"spinner\" && <Spinner className={cn(\"absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are\", !loading && \"invisible\")} />}\n        <Slottable>\n          {typeof children === \"string\" ? <span>{children}</span> : children}\n        </Slottable>\n      </DesignOriginalButton>\n    );\n  }\n);\nDesignButton.displayName = \"DesignButton\";\n"],"mappings":";;;;;;;;;;AASA,MAAM,uBAAuB,IAC3B,iOACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAMD,MAAM,uBAAuB,oBAC1B,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,oBAFW,UAAU,OAAO;EAG1B,WAAW,GAAG,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;;;;;;;;;;;;;;;AAsBnC,MAAa,eAAe,oBACzB,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,aAAa,iBAAiB,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,qBAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,MAAM,2BAA2B,YAAY,EAAE,CAAC;EACpD;EACN,WAAW,GAAG,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,oBAAC,WAAQ,WAAW,GAAG,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,oBAAC,uBACE,OAAO,aAAa,WAAW,oBAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { forwardRefIfNeeded } from \"@hexclave/shared/dist/utils/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn, Spinner } from \"@hexclave/ui\";\nimport { useAsyncCallback } from \"@hexclave/shared/dist/hooks/use-async-callback\";\nimport { runAsynchronouslyWithAlert } from \"@hexclave/shared/dist/utils/promises\";\n\nconst designButtonVariants = cva(\n  \"stack-scope inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-white/85 dark:bg-background hover:bg-zinc-50 dark:hover:bg-accent dark:hover:text-accent-foreground\",\n        secondary:\n          \"bg-white dark:bg-secondary text-secondary-foreground hover:bg-zinc-50 dark:hover:bg-secondary/80\",\n        ghost: \"hover:bg-zinc-100 dark:hover:bg-accent dark:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        plain: \"\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport type DesignOriginalButtonProps = {\n  asChild?: boolean,\n} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof designButtonVariants>;\n\nconst DesignOriginalButton = forwardRefIfNeeded<HTMLButtonElement, DesignOriginalButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(designButtonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nDesignOriginalButton.displayName = \"DesignButton\";\n\nexport type DesignButtonProps = {\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,\n  loading?: boolean,\n  loadingStyle?: \"spinner\" | \"disabled\",\n} & DesignOriginalButtonProps;\n\n/**\n * Standard button. Variants: `default | destructive | outline | secondary | ghost | link | plain`.\n * Sizes: `default | sm | lg | icon`.\n *\n * ```tsx\n * <DesignButton variant=\"default\" onClick={handleSave}>Save</DesignButton>\n * <DesignButton variant=\"outline\" size=\"sm\" onClick={handleCancel}>Cancel</DesignButton>\n * <DesignButton variant=\"ghost\" size=\"icon\"><PlusIcon className=\"h-4 w-4\" /></DesignButton>\n * ```\n *\n * Pass an async `onClick` and the button will automatically show a spinner\n * while the promise is pending (set `loadingStyle=\"disabled\"` if you prefer\n * a simple disabled state instead).\n */\nexport const DesignButton = forwardRefIfNeeded<HTMLButtonElement, DesignButtonProps>(\n  ({ onClick, loading: loadingProp, loadingStyle = \"spinner\", children, size, ...props }, ref) => {\n    const [handleClick, isLoading] = useAsyncCallback(async (e: React.MouseEvent<HTMLButtonElement>) => {\n      await onClick?.(e);\n    }, [onClick]);\n\n    const loading = loadingProp || isLoading;\n\n    return (\n      <DesignOriginalButton\n        {...props}\n        ref={ref}\n        disabled={props.disabled || loading}\n        onClick={(e) => runAsynchronouslyWithAlert(handleClick(e))}\n        size={size}\n        className={cn(\"relative\", loading && \"[&>:not(.stack-button-do-not-hide-when-siblings-are)]:invisible\", props.className)}\n      >\n        {loadingStyle === \"spinner\" && <Spinner className={cn(\"absolute inset-0 flex items-center justify-center stack-button-do-not-hide-when-siblings-are\", !loading && \"invisible\")} />}\n        <Slottable>\n          {typeof children === \"string\" ? <span>{children}</span> : children}\n        </Slottable>\n      </DesignOriginalButton>\n    );\n  }\n);\nDesignButton.displayName = \"DesignButton\";\n"],"mappings":";;;;;;;;;;AASA,MAAM,uBAAuB,IAC3B,iOACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAMD,MAAM,uBAAuB,oBAC1B,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAS,QAAQ;AAEhE,QACE,oBAFW,UAAU,OAAO;EAG1B,WAAW,GAAG,qBAAqB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC5D;EACL,GAAI;GACJ;EAGP;AACD,qBAAqB,cAAc;;;;;;;;;;;;;;;AAsBnC,MAAa,eAAe,oBACzB,EAAE,SAAS,SAAS,aAAa,eAAe,WAAW,UAAU,MAAM,GAAG,SAAS,QAAQ;CAC9F,MAAM,CAAC,aAAa,aAAa,iBAAiB,OAAO,MAA2C;AAClG,QAAM,UAAU,EAAE;IACjB,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,eAAe;AAE/B,QACE,qBAAC;EACC,GAAI;EACC;EACL,UAAU,MAAM,YAAY;EAC5B,UAAU,MAAM,2BAA2B,YAAY,EAAE,CAAC;EACpD;EACN,WAAW,GAAG,YAAY,WAAW,mEAAmE,MAAM,UAAU;aAEvH,iBAAiB,aAAa,oBAAC,WAAQ,WAAW,GAAG,gGAAgG,CAAC,WAAW,YAAY,GAAI,EAClL,oBAAC,uBACE,OAAO,aAAa,WAAW,oBAAC,UAAM,WAAgB,GAAG,WAChD;GACS;EAG5B;AACD,aAAa,cAAc"}

package/dist/esm/components/data-grid/data-grid-toolbar.js

@@ -42,10 +42,10 @@ function QuickSearch({ value, onChange, placeholder }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative flex min-w-0 flex-1 items-center sm:flex-initial",
 		children: [
-			/* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" }),
+			/* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none" }),
 			/* @__PURE__ */ jsx("input", {
 				type: "text",
-				className: cn("h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs", "bg-background", "border border-black/[0.08] dark:border-white/[0.08]", "placeholder:text-muted-foreground/40", "focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]", "transition-all duration-150"),
+				className: cn("h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs", "border border-black/[0.08] dark:border-white/[0.06]", "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]", "placeholder:text-muted-foreground/50", "focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]", "transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]"),
 				placeholder,
 				value,
 				onChange: (e) => onChange(e.target.value)
@@ -134,13 +134,13 @@ function ColumnManager({ columns, visibility, onChange, strings, dateDisplay, on
 						className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground",
 						children: strings.dateFormat
 					}), /* @__PURE__ */ jsxs("div", {
-						className: "inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.04] p-0.5",
+						className: "inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]",
 						children: [/* @__PURE__ */ jsx("button", {
-							className: cn("px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75", dateDisplay === "relative" ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]" : "text-muted-foreground hover:text-foreground"),
+							className: cn("px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none", dateDisplay === "relative" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"),
 							onClick: () => onDateDisplayChange("relative"),
 							children: strings.dateFormatRelative
 						}), /* @__PURE__ */ jsx("button", {
-							className: cn("px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75", dateDisplay === "absolute" ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]" : "text-muted-foreground hover:text-foreground"),
+							className: cn("px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none", dateDisplay === "absolute" ? "bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]" : "text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]"),
 							onClick: () => onDateDisplayChange("absolute"),
 							children: strings.dateFormatAbsolute
 						})]

package/dist/esm/components/data-grid/data-grid-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-toolbar.js","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport {\n  Check,\n  DownloadSimple,\n  Eye,\n  EyeSlash,\n  MagnifyingGlass,\n  X,\n} from \"@phosphor-icons/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport type {\n  DataGridColumnDef,\n  DataGridDateDisplay,\n  DataGridStrings,\n  DataGridToolbarContext,\n} from \"./types\";\n\n// ─── Popover primitive ───────────────────────────────────────────────\n\nfunction usePopover() {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [open]);\n\n  return { open, setOpen, ref };\n}\n\nfunction PopoverPanel({\n  children,\n  className,\n  popoverRef,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  popoverRef: React.Ref<HTMLDivElement>;\n}) {\n  return (\n    <div\n      ref={popoverRef}\n      className={cn(\n        \"absolute top-full left-0 mt-1 z-50\",\n        \"bg-popover text-popover-foreground rounded-xl shadow-lg\",\n        \"ring-1 ring-black/[0.08] dark:ring-white/[0.1]\",\n        \"backdrop-blur-xl\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── Quick search ────────────────────────────────────────────────────\n\nfunction QuickSearch({\n  value,\n  onChange,\n  placeholder,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n}) {\n  return (\n    <div className=\"relative flex min-w-0 flex-1 items-center sm:flex-initial\">\n      <MagnifyingGlass className=\"absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none\" />\n      <input\n        type=\"text\"\n        className={cn(\n          \"h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs\",\n          \"bg-background\",\n          \"border border-black/[0.08] dark:border-white/[0.08]\",\n          \"placeholder:text-muted-foreground/40\",\n          \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n          \"transition-all duration-150\",\n        )}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      {value && (\n        <button\n          className=\"absolute right-2 text-muted-foreground/40 hover:text-muted-foreground\"\n          onClick={() => onChange(\"\")}\n          aria-label=\"Clear search\"\n        >\n          <X className=\"h-3 w-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ─── Toolbar button ──────────────────────────────────────────────────\n\nfunction ToolbarButton({\n  children,\n  onClick,\n  active,\n  title,\n  className: extraClassName,\n}: {\n  children: React.ReactNode;\n  onClick?: () => void;\n  active?: boolean;\n  title?: string;\n  className?: string;\n}) {\n  return (\n    <button\n      className={cn(\n        \"relative flex items-center justify-center rounded-lg text-xs font-medium\",\n        \"h-7 w-7\",\n        \"transition-colors duration-75\",\n        active\n          ? \"bg-foreground/[0.06] text-foreground\"\n          : \"text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]\",\n        extraClassName,\n      )}\n      onClick={onClick}\n      title={title}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ─── Column manager ──────────────────────────────────────────────────\n\nfunction ColumnManager<TRow>({\n  columns,\n  visibility,\n  onChange,\n  strings,\n  dateDisplay,\n  onDateDisplayChange,\n  hasDateColumns,\n}: {\n  columns: readonly DataGridColumnDef<TRow>[];\n  visibility: Record<string, boolean>;\n  onChange: (visibility: Record<string, boolean>) => void;\n  strings: DataGridStrings;\n  dateDisplay: DataGridDateDisplay;\n  onDateDisplayChange: (mode: DataGridDateDisplay) => void;\n  hasDateColumns: boolean;\n}) {\n  const hideableColumns = useMemo(\n    () => columns.filter((c) => c.hideable !== false),\n    [columns],\n  );\n\n  const toggleColumn = (id: string) => {\n    const current = visibility[id] !== false;\n    onChange({ ...visibility, [id]: !current });\n  };\n\n  const showAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = true;\n    onChange(next);\n  };\n\n  const hideAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = false;\n    onChange(next);\n  };\n\n  return (\n    <div className=\"p-2 min-w-[240px] max-w-[300px]\">\n      <div className=\"max-h-[280px] overflow-y-auto space-y-0.5\">\n        {hideableColumns.map((col) => {\n          const visible = visibility[col.id] !== false;\n          return (\n            <button\n              key={col.id}\n              className={cn(\n                \"flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs\",\n                \"hover:bg-foreground/[0.06] transition-colors duration-75\",\n                visible ? \"text-foreground\" : \"text-muted-foreground/50\",\n              )}\n              onClick={() => toggleColumn(col.id)}\n            >\n              {visible ? (\n                <Eye className=\"h-3.5 w-3.5 flex-shrink-0 text-blue-500\" />\n              ) : (\n                <EyeSlash className=\"h-3.5 w-3.5 flex-shrink-0\" />\n              )}\n              <span className=\"truncate text-left\">\n                {typeof col.header === \"string\" ? col.header : col.id}\n              </span>\n              {visible && <Check className=\"h-3 w-3 ml-auto flex-shrink-0 text-blue-500\" />}\n            </button>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]\">\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={showAll}>\n          {strings.showAll}\n        </button>\n        <span className=\"text-muted-foreground/20\">|</span>\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={hideAll}>\n          {strings.hideAll}\n        </button>\n      </div>\n\n      {/* Date format toggle — only rendered when at least one column\n          uses `type: \"date\"` or `\"dateTime\"`. Toggling writes to\n          `state.dateDisplay` and the grid re-renders every date cell. */}\n      {hasDateColumns && (\n        <div className=\"mt-2 pt-2 border-t border-foreground/[0.06]\">\n          <div className=\"flex items-center justify-between gap-2 px-1\">\n            <span className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground\">\n              {strings.dateFormat}\n            </span>\n            <div className=\"inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.04] p-0.5\">\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75\",\n                  dateDisplay === \"relative\"\n                    ? \"bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground\",\n                )}\n                onClick={() => onDateDisplayChange(\"relative\")}\n              >\n                {strings.dateFormatRelative}\n              </button>\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-75\",\n                  dateDisplay === \"absolute\"\n                    ? \"bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground\",\n                )}\n                onClick={() => onDateDisplayChange(\"absolute\")}\n              >\n                {strings.dateFormatAbsolute}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─── Main toolbar ────────────────────────────────────────────────────\n\nexport function DataGridToolbar<TRow>({\n  ctx,\n  extra,\n  extraLeading,\n  hideQuickSearch,\n}: {\n  ctx: DataGridToolbarContext<TRow>;\n  /** Extra content rendered inside the toolbar row, to the left of the\n   *  built-in columns / export actions. Use this to add table-specific\n   *  affordances (refresh, custom toggles, row counts) without giving up\n   *  the default actions. */\n  extra?: React.ReactNode;\n  /** Extra content rendered at the START of the toolbar row — occupies\n   *  the same position as the built-in quick search (after it, if the\n   *  quick search is visible). Use this together with `hideQuickSearch`\n   *  to fully replace the quick search with a custom input, e.g. an\n   *  AI-powered search bar. */\n  extraLeading?: React.ReactNode;\n  /** Whether to hide the built-in quick-search input. When `true`,\n   *  callers are expected to provide their own search UI via\n   *  `extraLeading`. */\n  hideQuickSearch?: boolean;\n}) {\n  const { state, onChange, columns, strings, exportCsv } = ctx;\n\n  const columnPopover = usePopover();\n\n  const updateVisibility = useCallback(\n    (visibility: Record<string, boolean>) => {\n      onChange((s) => ({ ...s, columnVisibility: visibility }));\n    },\n    [onChange],\n  );\n\n  const updateDateDisplay = useCallback(\n    (mode: DataGridDateDisplay) => {\n      onChange((s) => ({ ...s, dateDisplay: mode }));\n    },\n    [onChange],\n  );\n\n  const updateQuickSearch = useCallback(\n    (value: string) => {\n      onChange((s) => ({\n        ...s,\n        quickSearch: value,\n        // Reset to first page whenever the search text changes,\n        // otherwise you can end up on a page index that no longer\n        // exists in the filtered / refetched result set.\n        pagination: { ...s.pagination, pageIndex: 0 },\n      }));\n    },\n    [onChange],\n  );\n\n  const hasDateColumns = useMemo(\n    () => columns.some((c) => c.type === \"date\" || c.type === \"dateTime\"),\n    [columns],\n  );\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2\">\n      <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        {!hideQuickSearch && (\n          <QuickSearch\n            value={state.quickSearch}\n            onChange={updateQuickSearch}\n            placeholder={strings.searchPlaceholder}\n          />\n        )}\n        {extraLeading}\n        {extra}\n      </div>\n      <div className=\"flex shrink-0 items-center justify-end gap-2\">\n        <div className=\"relative shrink-0\" ref={columnPopover.ref}>\n          <ToolbarButton\n            onClick={() => columnPopover.setOpen(!columnPopover.open)}\n            active={columnPopover.open}\n            title={strings.columns}\n          >\n            <Eye className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          {columnPopover.open && (\n            <PopoverPanel popoverRef={columnPopover.ref} className=\"right-0 left-auto\">\n              <ColumnManager\n                columns={columns}\n                visibility={state.columnVisibility}\n                onChange={updateVisibility}\n                strings={strings}\n                dateDisplay={state.dateDisplay}\n                onDateDisplayChange={updateDateDisplay}\n                hasDateColumns={hasDateColumns}\n              />\n            </PopoverPanel>\n          )}\n        </div>\n\n        <ToolbarButton onClick={exportCsv} title={strings.export}>\n          <DownloadSimple className=\"h-3.5 w-3.5\" />\n        </ToolbarButton>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-grid-toolbar.js","names":[],"sources":["../../../../src/components/data-grid/data-grid-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport {\n  Check,\n  DownloadSimple,\n  Eye,\n  EyeSlash,\n  MagnifyingGlass,\n  X,\n} from \"@phosphor-icons/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport type {\n  DataGridColumnDef,\n  DataGridDateDisplay,\n  DataGridStrings,\n  DataGridToolbarContext,\n} from \"./types\";\n\n// ─── Popover primitive ───────────────────────────────────────────────\n\nfunction usePopover() {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [open]);\n\n  return { open, setOpen, ref };\n}\n\nfunction PopoverPanel({\n  children,\n  className,\n  popoverRef,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  popoverRef: React.Ref<HTMLDivElement>;\n}) {\n  return (\n    <div\n      ref={popoverRef}\n      className={cn(\n        \"absolute top-full left-0 mt-1 z-50\",\n        \"bg-popover text-popover-foreground rounded-xl shadow-lg\",\n        \"ring-1 ring-black/[0.08] dark:ring-white/[0.1]\",\n        \"backdrop-blur-xl\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ─── Quick search ────────────────────────────────────────────────────\n\nfunction QuickSearch({\n  value,\n  onChange,\n  placeholder,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n}) {\n  return (\n    <div className=\"relative flex min-w-0 flex-1 items-center sm:flex-initial\">\n      <MagnifyingGlass className=\"absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none\" />\n      <input\n        type=\"text\"\n        className={cn(\n          \"h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs\",\n          \"border border-black/[0.08] dark:border-white/[0.06]\",\n          \"bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n          \"placeholder:text-muted-foreground/50\",\n          \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n          \"transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]\",\n        )}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      {value && (\n        <button\n          className=\"absolute right-2 text-muted-foreground/40 hover:text-muted-foreground\"\n          onClick={() => onChange(\"\")}\n          aria-label=\"Clear search\"\n        >\n          <X className=\"h-3 w-3\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ─── Toolbar button ──────────────────────────────────────────────────\n\nfunction ToolbarButton({\n  children,\n  onClick,\n  active,\n  title,\n  className: extraClassName,\n}: {\n  children: React.ReactNode;\n  onClick?: () => void;\n  active?: boolean;\n  title?: string;\n  className?: string;\n}) {\n  return (\n    <button\n      className={cn(\n        \"relative flex items-center justify-center rounded-lg text-xs font-medium\",\n        \"h-7 w-7\",\n        \"transition-colors duration-75\",\n        active\n          ? \"bg-foreground/[0.06] text-foreground\"\n          : \"text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]\",\n        extraClassName,\n      )}\n      onClick={onClick}\n      title={title}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ─── Column manager ──────────────────────────────────────────────────\n\nfunction ColumnManager<TRow>({\n  columns,\n  visibility,\n  onChange,\n  strings,\n  dateDisplay,\n  onDateDisplayChange,\n  hasDateColumns,\n}: {\n  columns: readonly DataGridColumnDef<TRow>[];\n  visibility: Record<string, boolean>;\n  onChange: (visibility: Record<string, boolean>) => void;\n  strings: DataGridStrings;\n  dateDisplay: DataGridDateDisplay;\n  onDateDisplayChange: (mode: DataGridDateDisplay) => void;\n  hasDateColumns: boolean;\n}) {\n  const hideableColumns = useMemo(\n    () => columns.filter((c) => c.hideable !== false),\n    [columns],\n  );\n\n  const toggleColumn = (id: string) => {\n    const current = visibility[id] !== false;\n    onChange({ ...visibility, [id]: !current });\n  };\n\n  const showAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = true;\n    onChange(next);\n  };\n\n  const hideAll = () => {\n    const next = { ...visibility };\n    for (const col of hideableColumns) next[col.id] = false;\n    onChange(next);\n  };\n\n  return (\n    <div className=\"p-2 min-w-[240px] max-w-[300px]\">\n      <div className=\"max-h-[280px] overflow-y-auto space-y-0.5\">\n        {hideableColumns.map((col) => {\n          const visible = visibility[col.id] !== false;\n          return (\n            <button\n              key={col.id}\n              className={cn(\n                \"flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs\",\n                \"hover:bg-foreground/[0.06] transition-colors duration-75\",\n                visible ? \"text-foreground\" : \"text-muted-foreground/50\",\n              )}\n              onClick={() => toggleColumn(col.id)}\n            >\n              {visible ? (\n                <Eye className=\"h-3.5 w-3.5 flex-shrink-0 text-blue-500\" />\n              ) : (\n                <EyeSlash className=\"h-3.5 w-3.5 flex-shrink-0\" />\n              )}\n              <span className=\"truncate text-left\">\n                {typeof col.header === \"string\" ? col.header : col.id}\n              </span>\n              {visible && <Check className=\"h-3 w-3 ml-auto flex-shrink-0 text-blue-500\" />}\n            </button>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]\">\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={showAll}>\n          {strings.showAll}\n        </button>\n        <span className=\"text-muted-foreground/20\">|</span>\n        <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={hideAll}>\n          {strings.hideAll}\n        </button>\n      </div>\n\n      {/* Date format toggle — only rendered when at least one column\n          uses `type: \"date\"` or `\"dateTime\"`. Toggling writes to\n          `state.dateDisplay` and the grid re-renders every date cell. */}\n      {hasDateColumns && (\n        <div className=\"mt-2 pt-2 border-t border-foreground/[0.06]\">\n          <div className=\"flex items-center justify-between gap-2 px-1\">\n            <span className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground\">\n              {strings.dateFormat}\n            </span>\n            <div className=\"inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]\">\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n                  dateDisplay === \"relative\"\n                    ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                )}\n                onClick={() => onDateDisplayChange(\"relative\")}\n              >\n                {strings.dateFormatRelative}\n              </button>\n              <button\n                className={cn(\n                  \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n                  dateDisplay === \"absolute\"\n                    ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n                )}\n                onClick={() => onDateDisplayChange(\"absolute\")}\n              >\n                {strings.dateFormatAbsolute}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─── Main toolbar ────────────────────────────────────────────────────\n\nexport function DataGridToolbar<TRow>({\n  ctx,\n  extra,\n  extraLeading,\n  hideQuickSearch,\n}: {\n  ctx: DataGridToolbarContext<TRow>;\n  /** Extra content rendered inside the toolbar row, to the left of the\n   *  built-in columns / export actions. Use this to add table-specific\n   *  affordances (refresh, custom toggles, row counts) without giving up\n   *  the default actions. */\n  extra?: React.ReactNode;\n  /** Extra content rendered at the START of the toolbar row — occupies\n   *  the same position as the built-in quick search (after it, if the\n   *  quick search is visible). Use this together with `hideQuickSearch`\n   *  to fully replace the quick search with a custom input, e.g. an\n   *  AI-powered search bar. */\n  extraLeading?: React.ReactNode;\n  /** Whether to hide the built-in quick-search input. When `true`,\n   *  callers are expected to provide their own search UI via\n   *  `extraLeading`. */\n  hideQuickSearch?: boolean;\n}) {\n  const { state, onChange, columns, strings, exportCsv } = ctx;\n\n  const columnPopover = usePopover();\n\n  const updateVisibility = useCallback(\n    (visibility: Record<string, boolean>) => {\n      onChange((s) => ({ ...s, columnVisibility: visibility }));\n    },\n    [onChange],\n  );\n\n  const updateDateDisplay = useCallback(\n    (mode: DataGridDateDisplay) => {\n      onChange((s) => ({ ...s, dateDisplay: mode }));\n    },\n    [onChange],\n  );\n\n  const updateQuickSearch = useCallback(\n    (value: string) => {\n      onChange((s) => ({\n        ...s,\n        quickSearch: value,\n        // Reset to first page whenever the search text changes,\n        // otherwise you can end up on a page index that no longer\n        // exists in the filtered / refetched result set.\n        pagination: { ...s.pagination, pageIndex: 0 },\n      }));\n    },\n    [onChange],\n  );\n\n  const hasDateColumns = useMemo(\n    () => columns.some((c) => c.type === \"date\" || c.type === \"dateTime\"),\n    [columns],\n  );\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2\">\n      <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n        {!hideQuickSearch && (\n          <QuickSearch\n            value={state.quickSearch}\n            onChange={updateQuickSearch}\n            placeholder={strings.searchPlaceholder}\n          />\n        )}\n        {extraLeading}\n        {extra}\n      </div>\n      <div className=\"flex shrink-0 items-center justify-end gap-2\">\n        <div className=\"relative shrink-0\" ref={columnPopover.ref}>\n          <ToolbarButton\n            onClick={() => columnPopover.setOpen(!columnPopover.open)}\n            active={columnPopover.open}\n            title={strings.columns}\n          >\n            <Eye className=\"h-3.5 w-3.5\" />\n          </ToolbarButton>\n          {columnPopover.open && (\n            <PopoverPanel popoverRef={columnPopover.ref} className=\"right-0 left-auto\">\n              <ColumnManager\n                columns={columns}\n                visibility={state.columnVisibility}\n                onChange={updateVisibility}\n                strings={strings}\n                dateDisplay={state.dateDisplay}\n                onDateDisplayChange={updateDateDisplay}\n                hasDateColumns={hasDateColumns}\n              />\n            </PopoverPanel>\n          )}\n        </div>\n\n        <ToolbarButton onClick={exportCsv} title={strings.export}>\n          <DownloadSimple className=\"h-3.5 w-3.5\" />\n        </ToolbarButton>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/data-grid/data-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid.tsx"],"mappings":";;;;iBAmEgB,mCAAA,CAAoC,MAAA,EAAQ,WAAA;;;AAA5D;;;;;AAohBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,QAAA,MAAA,CAAe,KAAA,EAAO,aAAA,CAAc,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"data-grid.d.ts","names":[],"sources":["../../../../src/components/data-grid/data-grid.tsx"],"mappings":";;;;iBAmEgB,mCAAA,CAAoC,MAAA,EAAQ,WAAA;;;AAA5D;;;;;AAqhBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,QAAA,MAAA,CAAe,KAAA,EAAO,aAAA,CAAc,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/data-grid/data-grid.js

@@ -344,7 +344,7 @@ function DefaultFooter({ ctx, pagination, onChange }) {
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1.5",
 				children: [/* @__PURE__ */ jsx("span", { children: strings.rowsPerPage }), /* @__PURE__ */ jsx("select", {
-					className: cn("h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.08] bg-background px-1.5", "text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]", "cursor-pointer"),
+					className: cn("h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.06] px-1.5", "bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]", "text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]", "cursor-pointer transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]"),
 					value: state.pagination.pageSize,
 					onChange: (e) => setPageSize(Number(e.target.value)),
 					children: [
@@ -562,12 +562,18 @@ function DataGrid(props) {
 		const grid = gridRef.current;
 		const scroller = scrollContainerRef.current;
 		if (!grid) return;
-		const update = () => {
-			const w = scroller?.clientWidth ?? grid.clientWidth;
-			if (w > 0) setContainerWidth(w);
+		const update = (entries) => {
+			let measured = 0;
+			if (entries != null) for (const entry of entries) measured = Math.max(measured, entry.contentRect.width);
+			if (measured <= 0) {
+				const scrollerWidth = scroller?.clientWidth ?? 0;
+				const gridWidth = grid.clientWidth;
+				measured = scrollerWidth > 0 ? scrollerWidth : gridWidth;
+			}
+			if (measured > 0) setContainerWidth(measured);
 		};
 		update();
-		const observer = new ResizeObserver(update);
+		const observer = new ResizeObserver((entries) => update(entries));
 		observer.observe(grid);
 		if (scroller) observer.observe(scroller);
 		return () => observer.disconnect();