@almadar/ui 4.57.4 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/avl/index.cjs +270 -69
  2. package/dist/avl/index.js +270 -69
  3. package/dist/components/index.cjs +101 -68
  4. package/dist/components/index.js +101 -68
  5. package/dist/context/index.cjs +199 -0
  6. package/dist/context/index.js +199 -0
  7. package/dist/context/themeTokens.d.ts +1 -1
  8. package/dist/docs/index.cjs +21 -21
  9. package/dist/docs/index.js +21 -21
  10. package/dist/marketing/index.cjs +18 -18
  11. package/dist/marketing/index.js +18 -18
  12. package/dist/providers/index.cjs +101 -68
  13. package/dist/providers/index.js +101 -68
  14. package/dist/runtime/index.cjs +270 -69
  15. package/dist/runtime/index.js +270 -69
  16. package/package.json +2 -2
  17. package/tailwind-preset.cjs +118 -3
  18. package/themes/_contract.md +198 -0
  19. package/themes/almadar-website.css +212 -0
  20. package/themes/almadar.css +210 -0
  21. package/themes/arctic.css +210 -0
  22. package/themes/atelier.css +427 -0
  23. package/themes/copper.css +210 -0
  24. package/themes/ember.css +210 -0
  25. package/themes/forest.css +210 -0
  26. package/themes/gazette.css +411 -0
  27. package/themes/index.css +7 -0
  28. package/themes/kiosk.css +412 -0
  29. package/themes/lavender.css +210 -0
  30. package/themes/midnight.css +210 -0
  31. package/themes/minimalist.css +210 -0
  32. package/themes/neon.css +210 -0
  33. package/themes/ocean.css +210 -0
  34. package/themes/prism.css +406 -0
  35. package/themes/rose.css +210 -0
  36. package/themes/sand.css +210 -0
  37. package/themes/slate.css +210 -0
  38. package/themes/sunset.css +210 -0
  39. package/themes/terminal.css +422 -0
  40. package/themes/trait-wars.css +210 -0
  41. package/themes/wireframe.css +216 -0
package/dist/avl/index.js CHANGED
@@ -5125,6 +5125,37 @@ var init_ThemeContext = __esm({
5125
5125
  displayName: "Copper",
5126
5126
  hasLightMode: true,
5127
5127
  hasDarkMode: true
5128
+ },
5129
+ // Layer 1 skin axes — truly-unique themes (compact tech / editorial / brutalist dense / display-heavy / touch-first)
5130
+ {
5131
+ name: "prism",
5132
+ displayName: "Prism",
5133
+ hasLightMode: true,
5134
+ hasDarkMode: true
5135
+ },
5136
+ {
5137
+ name: "gazette",
5138
+ displayName: "Gazette",
5139
+ hasLightMode: true,
5140
+ hasDarkMode: true
5141
+ },
5142
+ {
5143
+ name: "terminal",
5144
+ displayName: "Terminal",
5145
+ hasLightMode: true,
5146
+ hasDarkMode: true
5147
+ },
5148
+ {
5149
+ name: "atelier",
5150
+ displayName: "Atelier",
5151
+ hasLightMode: true,
5152
+ hasDarkMode: true
5153
+ },
5154
+ {
5155
+ name: "kiosk",
5156
+ displayName: "Kiosk",
5157
+ hasLightMode: true,
5158
+ hasDarkMode: true
5128
5159
  }
5129
5160
  ];
5130
5161
  ThemeContext = createContext(void 0);
@@ -5832,7 +5863,7 @@ var init_Button = __esm({
5832
5863
  };
5833
5864
  iconSizeStyles = {
5834
5865
  sm: "h-3.5 w-3.5",
5835
- md: "h-4 w-4",
5866
+ md: "h-icon-default w-icon-default",
5836
5867
  lg: "h-5 w-5"
5837
5868
  };
5838
5869
  Button = React96__default.forwardRef(
@@ -5885,7 +5916,7 @@ var init_Button = __esm({
5885
5916
  ...props,
5886
5917
  "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
5887
5918
  children: [
5888
- isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
5919
+ isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
5889
5920
  children || label,
5890
5921
  resolvedRightIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
5891
5922
  ]
@@ -6074,7 +6105,7 @@ var init_Modal = __esm({
6074
6105
  // Reset browser-default dialog chrome — we own styling.
6075
6106
  "m-0 p-0 border-0 bg-transparent",
6076
6107
  // Pre-existing dialog frame
6077
- "pointer-events-auto w-full flex flex-col bg-surface border shadow-lg rounded-md",
6108
+ "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
6078
6109
  // Desktop sizing + viewport-aware floor.
6079
6110
  sizeClasses2[size],
6080
6111
  minWidthClasses[size],
@@ -6501,7 +6532,7 @@ var init_Toast = __esm({
6501
6532
  // `min-w-[300px]` only kicks in at `sm:` and above so a phone
6502
6533
  // viewport doesn't get a toast wider than the screen near the
6503
6534
  // edge. `max-w-[calc(100vw-2rem)]` clamps to viewport too.
6504
- "border-l-4 p-4 shadow min-w-0 sm:min-w-[300px] max-w-md max-w-[calc(100vw-2rem)]",
6535
+ "border-l-4 p-4 shadow-elevation-toast min-w-0 sm:min-w-[300px] max-w-md max-w-[calc(100vw-2rem)]",
6505
6536
  "rounded-sm",
6506
6537
  variantClasses[variant],
6507
6538
  className
@@ -7421,7 +7452,7 @@ var init_Input = __esm({
7421
7452
  ...props
7422
7453
  }, ref) => {
7423
7454
  const type = inputType || htmlType || "text";
7424
- const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4" });
7455
+ const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-icon-default w-icon-default" });
7425
7456
  const showClearButton = clearable && value && String(value).length > 0;
7426
7457
  const baseClassName = cn(
7427
7458
  "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
@@ -7453,7 +7484,7 @@ var init_Input = __esm({
7453
7484
  ]
7454
7485
  }
7455
7486
  ),
7456
- /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
7487
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-icon-default w-icon-default" }) })
7457
7488
  ] });
7458
7489
  }
7459
7490
  if (type === "textarea") {
@@ -7507,7 +7538,7 @@ var init_Input = __esm({
7507
7538
  type: "button",
7508
7539
  onClick: onClear,
7509
7540
  className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
7510
- children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
7541
+ children: /* @__PURE__ */ jsx(X, { className: "h-icon-default w-icon-default" })
7511
7542
  }
7512
7543
  ),
7513
7544
  rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
@@ -7607,7 +7638,7 @@ var init_Select = __esm({
7607
7638
  ]
7608
7639
  }
7609
7640
  ),
7610
- /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-foreground" }) })
7641
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-icon-default w-icon-default text-foreground" }) })
7611
7642
  ] });
7612
7643
  }
7613
7644
  );
@@ -7660,23 +7691,23 @@ var init_Card = __esm({
7660
7691
  default: [
7661
7692
  "bg-card",
7662
7693
  "border-[length:var(--border-width)] border-border",
7663
- "shadow-sm",
7694
+ "shadow-elevation-card",
7664
7695
  "transition-all duration-[var(--transition-normal)]",
7665
- "hover:shadow-lg hover:-translate-y-0.5"
7696
+ "hover:shadow-elevation-dialog hover:-translate-y-0.5"
7666
7697
  ].join(" "),
7667
7698
  bordered: [
7668
7699
  "bg-card",
7669
7700
  "border-[length:var(--border-width)] border-border",
7670
- "shadow-sm",
7701
+ "shadow-elevation-card",
7671
7702
  "transition-all duration-[var(--transition-normal)]",
7672
- "hover:shadow-lg hover:-translate-y-0.5"
7703
+ "hover:shadow-elevation-dialog hover:-translate-y-0.5"
7673
7704
  ].join(" "),
7674
7705
  elevated: [
7675
7706
  "bg-card",
7676
7707
  "border-[length:var(--border-width)] border-border",
7677
7708
  "shadow",
7678
7709
  "transition-all duration-[var(--transition-normal)]",
7679
- "hover:shadow-lg hover:-translate-y-0.5"
7710
+ "hover:shadow-elevation-dialog hover:-translate-y-0.5"
7680
7711
  ].join(" "),
7681
7712
  // Interactive variant with theme-specific hover effects
7682
7713
  interactive: [
@@ -7685,20 +7716,20 @@ var init_Card = __esm({
7685
7716
  "shadow",
7686
7717
  "cursor-pointer",
7687
7718
  "transition-all duration-[var(--transition-normal)]",
7688
- "hover:shadow-lg"
7719
+ "hover:shadow-elevation-dialog"
7689
7720
  ].join(" ")
7690
7721
  };
7691
7722
  paddingStyles2 = {
7692
7723
  none: "",
7693
- sm: "p-3",
7694
- md: "p-4",
7695
- lg: "p-6"
7724
+ sm: "p-card-sm",
7725
+ md: "p-card-md",
7726
+ lg: "p-card-lg"
7696
7727
  };
7697
7728
  shadowStyles2 = {
7698
7729
  none: "shadow-none",
7699
- sm: "shadow-sm",
7730
+ sm: "shadow-elevation-card",
7700
7731
  md: "shadow",
7701
- lg: "shadow-lg"
7732
+ lg: "shadow-elevation-dialog"
7702
7733
  };
7703
7734
  Card = React96__default.forwardRef(
7704
7735
  ({
@@ -7716,7 +7747,7 @@ var init_Card = __esm({
7716
7747
  {
7717
7748
  ref,
7718
7749
  className: cn(
7719
- "rounded-md",
7750
+ "rounded-container",
7720
7751
  "transition-all duration-[var(--transition-normal)]",
7721
7752
  variantStyles4[variant],
7722
7753
  paddingStyles2[padding],
@@ -7845,7 +7876,7 @@ var init_FilterPill = __esm({
7845
7876
  {
7846
7877
  ref,
7847
7878
  className: cn(
7848
- "inline-flex items-center gap-1 font-bold rounded-full",
7879
+ "inline-flex items-center gap-1 font-bold rounded-pill",
7849
7880
  variantStyles5[variant],
7850
7881
  sizeStyles4[size],
7851
7882
  (onClick || clickEvent) && "cursor-pointer",
@@ -7946,8 +7977,8 @@ var init_Avatar = __esm({
7946
7977
  busy: "bg-error"
7947
7978
  };
7948
7979
  badgeSizeClasses = {
7949
- xs: "w-3 h-3 text-[8px]",
7950
- sm: "w-4 h-4 text-[10px]",
7980
+ xs: "w-3 h-3 text-xs",
7981
+ sm: "w-4 h-4 text-xs",
7951
7982
  md: "w-5 h-5 text-xs",
7952
7983
  lg: "w-6 h-6 text-sm",
7953
7984
  xl: "w-7 h-7 text-base"
@@ -8219,7 +8250,7 @@ var init_ProgressBar = __esm({
8219
8250
  "div",
8220
8251
  {
8221
8252
  className: cn(
8222
- "h-full transition-all duration-300 ease-out",
8253
+ "h-full transition-all duration-normal ease-emphasized",
8223
8254
  colorClasses[effectiveColor]
8224
8255
  ),
8225
8256
  style: { width: `${percentage}%` },
@@ -8275,7 +8306,7 @@ var init_ProgressBar = __esm({
8275
8306
  strokeDashoffset: offset,
8276
8307
  strokeLinecap: "round",
8277
8308
  className: cn(
8278
- "transition-all duration-300 ease-out",
8309
+ "transition-all duration-normal ease-emphasized",
8279
8310
  colorClasses[effectiveColor]
8280
8311
  )
8281
8312
  }
@@ -8314,7 +8345,7 @@ var init_ProgressBar = __esm({
8314
8345
  "div",
8315
8346
  {
8316
8347
  className: cn(
8317
- "h-full transition-all duration-300 ease-out",
8348
+ "h-full transition-all duration-normal ease-emphasized",
8318
8349
  (isActive || isPartial) && colorClasses[effectiveColor]
8319
8350
  ),
8320
8351
  style: {
@@ -8725,7 +8756,7 @@ var init_ThemeToggle = __esm({
8725
8756
  "text-foreground",
8726
8757
  "hover:bg-muted border-[length:var(--border-width)] border-transparent hover:border-border",
8727
8758
  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8728
- "transition-colors duration-200",
8759
+ "transition-colors duration-fast",
8729
8760
  sizeClasses4[size],
8730
8761
  className
8731
8762
  ),
@@ -8772,7 +8803,7 @@ var init_FlipContainer = __esm({
8772
8803
  children: /* @__PURE__ */ jsx(
8773
8804
  Box,
8774
8805
  {
8775
- className: "relative w-full h-full transition-transform duration-500",
8806
+ className: "relative w-full h-full transition-transform duration-slow",
8776
8807
  style: {
8777
8808
  transformStyle: "preserve-3d",
8778
8809
  transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)"
@@ -8830,7 +8861,7 @@ var init_ConditionalWrapper = __esm({
8830
8861
  Box,
8831
8862
  {
8832
8863
  overflow: "hidden",
8833
- className: `transition-all duration-200 ${isVisible ? "opacity-100 max-h-[1000px]" : "opacity-0 max-h-0"}`,
8864
+ className: `transition-all duration-fast ${isVisible ? "opacity-100 max-h-[1000px]" : "opacity-0 max-h-0"}`,
8834
8865
  children: isVisible ? children : fallback
8835
8866
  }
8836
8867
  );
@@ -12386,7 +12417,7 @@ var init_InstallBox = __esm({
12386
12417
  /* @__PURE__ */ jsx(
12387
12418
  Box,
12388
12419
  {
12389
- className: "bg-surface rounded-md border-[length:var(--border-width)] border-border",
12420
+ className: "bg-surface rounded-container border-[length:var(--border-width)] border-border",
12390
12421
  padding: "md",
12391
12422
  children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3", children: [
12392
12423
  /* @__PURE__ */ jsx(
@@ -13111,7 +13142,7 @@ var init_Tooltip = __esm({
13111
13142
  className: cn(
13112
13143
  "fixed z-50 px-3 py-2 max-w-xs",
13113
13144
  "bg-primary text-primary-foreground",
13114
- "shadow-sm rounded-sm",
13145
+ "shadow-elevation-popover rounded-sm",
13115
13146
  "text-sm pointer-events-none",
13116
13147
  "break-words whitespace-normal",
13117
13148
  "h-auto min-h-fit",
@@ -13266,7 +13297,7 @@ var init_Popover = __esm({
13266
13297
  ref: popoverRef,
13267
13298
  className: cn(
13268
13299
  "fixed z-50 p-4",
13269
- "bg-card border-2 border-border shadow-lg",
13300
+ "bg-card border-2 border-border shadow-elevation-popover",
13270
13301
  positionClasses2[position],
13271
13302
  className
13272
13303
  ),
@@ -13380,7 +13411,7 @@ var init_Menu = __esm({
13380
13411
  const menuContainerStyles = cn(
13381
13412
  "bg-card",
13382
13413
  "border-[length:var(--border-width)] border-border",
13383
- "shadow",
13414
+ "shadow-elevation-popover",
13384
13415
  "rounded-sm",
13385
13416
  "min-w-0 sm:min-w-[200px] max-w-[calc(100vw-1rem)] py-1"
13386
13417
  );
@@ -13548,7 +13579,7 @@ var init_Accordion = __esm({
13548
13579
  "w-full flex items-center justify-between px-4 py-3",
13549
13580
  "bg-card",
13550
13581
  "hover:bg-muted",
13551
- "transition-colors duration-200",
13582
+ "transition-colors duration-fast",
13552
13583
  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset",
13553
13584
  "disabled:opacity-50 disabled:cursor-not-allowed",
13554
13585
  isOpen && "bg-muted font-bold"
@@ -13563,7 +13594,7 @@ var init_Accordion = __esm({
13563
13594
  icon: ChevronDown,
13564
13595
  size: "sm",
13565
13596
  className: cn(
13566
- "transition-transform duration-200",
13597
+ "transition-transform duration-fast",
13567
13598
  isOpen && "transform rotate-180"
13568
13599
  )
13569
13600
  }
@@ -13693,7 +13724,7 @@ var init_FloatingActionButton = __esm({
13693
13724
  {
13694
13725
  align: "center",
13695
13726
  gap: "sm",
13696
- className: "transition-all duration-200",
13727
+ className: "transition-all duration-fast",
13697
13728
  style: {
13698
13729
  opacity: isExpanded ? 1 : 0,
13699
13730
  transform: isExpanded ? "translateY(0)" : "translateY(10px)",
@@ -13731,7 +13762,7 @@ var init_FloatingActionButton = __esm({
13731
13762
  size: "lg",
13732
13763
  icon: isExpanded ? X : Plus,
13733
13764
  onClick: handleMainClick,
13734
- className: "rounded-full shadow-lg transition-all duration-300",
13765
+ className: "rounded-full shadow-lg transition-all duration-normal",
13735
13766
  "aria-label": isExpanded ? "Close actions" : "Open actions",
13736
13767
  "aria-expanded": isExpanded,
13737
13768
  children: /* @__PURE__ */ jsx(Typography, { as: "span", className: "sr-only", children: isExpanded ? t("common.close") : t("common.open") })
@@ -17107,8 +17138,8 @@ function Card2({
17107
17138
  className: `
17108
17139
  bg-card
17109
17140
  border border-border
17110
- rounded-md shadow-sm
17111
- ${isClickable ? "cursor-pointer hover:shadow-lg transition-shadow" : ""}
17141
+ rounded-container shadow-elevation-card
17142
+ ${isClickable ? "cursor-pointer hover:shadow-elevation-dialog transition-shadow" : ""}
17112
17143
  ${className}
17113
17144
  `,
17114
17145
  onClick: isClickable ? handleClick : void 0,
@@ -19913,7 +19944,7 @@ var init_BranchingLogicBuilder = __esm({
19913
19944
  const height = PADDING * 2 + items.length * (NODE_HEIGHT + NODE_GAP_Y);
19914
19945
  return { items, positions, width, height };
19915
19946
  }, [questions]);
19916
- return /* @__PURE__ */ jsx(Box, { className: "overflow-auto rounded-md border border-border bg-card p-2", children: /* @__PURE__ */ jsxs(
19947
+ return /* @__PURE__ */ jsx(Box, { className: "overflow-auto rounded-container border border-border bg-card p-2", children: /* @__PURE__ */ jsxs(
19917
19948
  "svg",
19918
19949
  {
19919
19950
  width: layout.width,
@@ -22811,7 +22842,7 @@ var init_Carousel = __esm({
22811
22842
  Box,
22812
22843
  {
22813
22844
  className: cn(
22814
- "rounded-full cursor-pointer transition-all duration-200"
22845
+ "rounded-full cursor-pointer transition-all duration-fast"
22815
22846
  ),
22816
22847
  style: {
22817
22848
  width: isActive ? 10 : 8,
@@ -23903,7 +23934,7 @@ var init_CodeExample = __esm({
23903
23934
  {
23904
23935
  className: cn(
23905
23936
  "bg-foreground",
23906
- "rounded-md",
23937
+ "rounded-container",
23907
23938
  "border-[length:var(--border-width)] border-border",
23908
23939
  "overflow-hidden",
23909
23940
  className
@@ -26284,7 +26315,7 @@ function DataGrid({
26284
26315
  className: cn(
26285
26316
  "bg-card rounded-lg",
26286
26317
  "border border-border",
26287
- "shadow-sm hover:shadow-lg",
26318
+ "shadow-elevation-card hover:shadow-elevation-dialog",
26288
26319
  "hover:border-primary transition-all",
26289
26320
  "flex flex-col",
26290
26321
  isSelected && "ring-2 ring-primary border-primary"
@@ -26658,7 +26689,7 @@ function DataList({
26658
26689
  {
26659
26690
  variant: "caption",
26660
26691
  className: cn(
26661
- "mt-1 text-[0.65rem]",
26692
+ "mt-1 text-xs",
26662
26693
  isSent ? "opacity-70" : "text-muted-foreground"
26663
26694
  ),
26664
26695
  children: formatDate3(timestamp)
@@ -26723,7 +26754,7 @@ function DataList({
26723
26754
  Box,
26724
26755
  {
26725
26756
  className: cn(
26726
- "group flex items-center gap-4 transition-all duration-200",
26757
+ "group flex items-center gap-4 transition-all duration-fast",
26727
26758
  isCompact ? "px-4 py-2" : "px-6 py-4",
26728
26759
  "hover:bg-muted/80",
26729
26760
  !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -26810,7 +26841,7 @@ function DataList({
26810
26841
  Box,
26811
26842
  {
26812
26843
  className: cn(
26813
- isCard && "bg-card rounded-xl border border-border shadow-lg overflow-hidden",
26844
+ isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
26814
26845
  !isCard && gapClass,
26815
26846
  className
26816
26847
  ),
@@ -26952,7 +26983,7 @@ var init_FileTree = __esm({
26952
26983
  Typography,
26953
26984
  {
26954
26985
  variant: "caption",
26955
- className: `truncate font-mono text-[11px] !text-inherit ${isSelected ? "font-semibold" : ""}`,
26986
+ className: `truncate font-mono text-xs !text-inherit ${isSelected ? "font-semibold" : ""}`,
26956
26987
  children: node.name
26957
26988
  }
26958
26989
  ),
@@ -27402,7 +27433,7 @@ var init_FilterGroup = __esm({
27402
27433
  "div",
27403
27434
  {
27404
27435
  className: cn(
27405
- "p-4 rounded-md",
27436
+ "p-4 rounded-container",
27406
27437
  "bg-card",
27407
27438
  "border-[length:var(--border-width)] border-border",
27408
27439
  className
@@ -28084,7 +28115,7 @@ var init_SidePanel = __esm({
28084
28115
  "border-l-2 border-border",
28085
28116
  position === "left" && "border-l-0 border-r-2",
28086
28117
  "flex flex-col",
28087
- "transition-transform duration-300 ease-in-out",
28118
+ "transition-transform duration-normal ease-standard",
28088
28119
  width,
28089
28120
  position === "right" ? "right-0" : "left-0",
28090
28121
  className
@@ -28486,7 +28517,7 @@ var init_ViolationAlert = __esm({
28486
28517
  Box,
28487
28518
  {
28488
28519
  className: cn(
28489
- "px-3 py-2 rounded-md border",
28520
+ "px-3 py-2 rounded-container border",
28490
28521
  bgColor,
28491
28522
  className
28492
28523
  ),
@@ -28747,7 +28778,7 @@ var init_FlipCard = __esm({
28747
28778
  /* @__PURE__ */ jsx(
28748
28779
  Box,
28749
28780
  {
28750
- className: "absolute inset-0 w-full h-full rounded-lg shadow-lg flex items-center justify-center p-6",
28781
+ className: "absolute inset-0 w-full h-full rounded-lg shadow-elevation-dialog flex items-center justify-center p-6",
28751
28782
  style: { backfaceVisibility: "hidden", transform: "rotateY(0deg)" },
28752
28783
  children: front
28753
28784
  }
@@ -28755,7 +28786,7 @@ var init_FlipCard = __esm({
28755
28786
  /* @__PURE__ */ jsx(
28756
28787
  Box,
28757
28788
  {
28758
- className: "absolute inset-0 w-full h-full rounded-lg shadow-lg flex items-center justify-center p-6",
28789
+ className: "absolute inset-0 w-full h-full rounded-lg shadow-elevation-dialog flex items-center justify-center p-6",
28759
28790
  style: { backfaceVisibility: "hidden", transform: "rotateY(180deg)" },
28760
28791
  children: back
28761
28792
  }
@@ -29100,7 +29131,7 @@ var init_ProgressDots = __esm({
29100
29131
  Box,
29101
29132
  {
29102
29133
  className: cn(
29103
- "rounded-full transition-all duration-200",
29134
+ "rounded-full transition-all duration-fast",
29104
29135
  onDotClick && "cursor-pointer"
29105
29136
  ),
29106
29137
  style: {
@@ -32121,7 +32152,7 @@ var init_Meter = __esm({
32121
32152
  strokeDasharray: circumference,
32122
32153
  strokeDashoffset: offset,
32123
32154
  strokeLinecap: "round",
32124
- className: "transition-all duration-500 ease-out"
32155
+ className: "transition-all duration-slow ease-emphasized"
32125
32156
  }
32126
32157
  )
32127
32158
  ]
@@ -32164,7 +32195,7 @@ var init_Meter = __esm({
32164
32195
  Box,
32165
32196
  {
32166
32197
  className: cn(
32167
- "h-2 flex-1 rounded-sm transition-all duration-300",
32198
+ "h-2 flex-1 rounded-sm transition-all duration-normal",
32168
32199
  !isActive && "bg-muted"
32169
32200
  ),
32170
32201
  style: isActive ? { backgroundColor: segColor } : void 0
@@ -32183,7 +32214,7 @@ var init_Meter = __esm({
32183
32214
  /* @__PURE__ */ jsx(Box, { className: "w-full h-3 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
32184
32215
  Box,
32185
32216
  {
32186
- className: "h-full rounded-full transition-all duration-500 ease-out",
32217
+ className: "h-full rounded-full transition-all duration-slow ease-emphasized",
32187
32218
  style: {
32188
32219
  width: `${percentage}%`,
32189
32220
  backgroundColor: activeColor
@@ -32709,7 +32740,7 @@ var init_PullToRefresh = __esm({
32709
32740
  className: cn(
32710
32741
  "top-0 left-0 right-0 z-10",
32711
32742
  "items-center justify-center",
32712
- "transition-opacity duration-200",
32743
+ "transition-opacity duration-fast",
32713
32744
  showIndicator ? "opacity-100" : "opacity-0"
32714
32745
  ),
32715
32746
  style: {
@@ -32895,7 +32926,7 @@ var init_PricingCard = __esm({
32895
32926
  "hover:-translate-y-1 transition-all",
32896
32927
  highlighted && [
32897
32928
  "border-[length:2px] border-primary",
32898
- "shadow-lg",
32929
+ "shadow-elevation-dialog",
32899
32930
  "scale-[1.05]",
32900
32931
  "ring-2 ring-primary"
32901
32932
  ],
@@ -34952,7 +34983,7 @@ var init_PositionedCanvas = __esm({
34952
34983
  {
34953
34984
  ref: containerRef,
34954
34985
  "data-testid": "positioned-canvas",
34955
- className: "relative bg-background border border-border rounded-md overflow-hidden",
34986
+ className: "relative bg-background border border-border rounded-container overflow-hidden",
34956
34987
  style: { width, height },
34957
34988
  onClick: handleContainerClick,
34958
34989
  children: items.map((item) => {
@@ -35153,7 +35184,7 @@ function BlockMenu({ block, readOnly, onDelete, onDuplicate, onChangeType }) {
35153
35184
  role: "menu",
35154
35185
  className: cn(
35155
35186
  "absolute right-0 z-10 mt-1 w-44",
35156
- "rounded-md border border-border bg-popover shadow-md",
35187
+ "rounded-container border border-border bg-popover shadow-elevation-popover",
35157
35188
  "py-1 text-sm"
35158
35189
  ),
35159
35190
  children: [
@@ -36429,7 +36460,7 @@ function DocCodeBlock({
36429
36460
  Box,
36430
36461
  {
36431
36462
  className: cn(
36432
- "rounded-md border border-border overflow-hidden",
36463
+ "rounded-container border border-border overflow-hidden",
36433
36464
  className
36434
36465
  ),
36435
36466
  position: "relative",
@@ -36588,11 +36619,11 @@ var init_DocPagination = __esm({
36588
36619
  init_Typography();
36589
36620
  linkCardStyles = [
36590
36621
  "border border-border",
36591
- "rounded-md",
36622
+ "rounded-container",
36592
36623
  "p-4",
36593
36624
  "transition-all",
36594
36625
  "hover:border-primary",
36595
- "hover:shadow-lg",
36626
+ "hover:shadow-elevation-dialog",
36596
36627
  "no-underline",
36597
36628
  "flex-1",
36598
36629
  "min-w-0",
@@ -36729,7 +36760,7 @@ function DocSearch({
36729
36760
  Box,
36730
36761
  {
36731
36762
  position: "absolute",
36732
- className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg max-h-80 overflow-y-auto",
36763
+ className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-container shadow-elevation-popover max-h-80 overflow-y-auto",
36733
36764
  children: /* @__PURE__ */ jsx(VStack, { gap: "none", children: results.map((result, index) => /* @__PURE__ */ jsx(
36734
36765
  Box,
36735
36766
  {
@@ -39266,10 +39297,11 @@ var init_Form = __esm({
39266
39297
  type: f3.type,
39267
39298
  required: f3.required,
39268
39299
  defaultValue: f3.default,
39269
- values: f3.values,
39300
+ // EntityField is a discriminated union — `values` lives on Scalar/Enum, `relation` lives on Relation.
39301
+ values: "values" in f3 ? f3.values : void 0,
39270
39302
  min: f3.min,
39271
39303
  max: f3.max,
39272
- relation: f3.relation ? { entity: f3.relation.entity } : void 0
39304
+ relation: "relation" in f3 ? { entity: f3.relation.entity } : void 0
39273
39305
  })
39274
39306
  );
39275
39307
  }, [entity, fields]);
@@ -39497,10 +39529,11 @@ var init_Form = __esm({
39497
39529
  type: entityField.type,
39498
39530
  required: entityField.required,
39499
39531
  defaultValue: entityField.default,
39500
- values: entityField.values,
39532
+ // EntityField is a discriminated union — `values` lives on Scalar/Enum, `relation` lives on Relation.
39533
+ values: "values" in entityField ? entityField.values : void 0,
39501
39534
  min: entityField.min,
39502
39535
  max: entityField.max,
39503
- relation: entityField.relation ? { entity: entityField.relation.entity } : void 0
39536
+ relation: "relation" in entityField ? { entity: entityField.relation.entity } : void 0
39504
39537
  };
39505
39538
  }
39506
39539
  return { name: field, type: "string" };
@@ -59686,8 +59719,176 @@ function themeTokensToCssVars(tokens, mode = "light", darkVariant) {
59686
59719
  vars[`--shadow-${key}`] = value;
59687
59720
  }
59688
59721
  }
59722
+ const pickDensity = isDark && darkVariant?.density ? darkVariant.density : tokens.density;
59723
+ emitDensity(pickDensity, vars);
59724
+ const pickTypeScale = isDark && darkVariant?.typeScale ? darkVariant.typeScale : tokens.typeScale;
59725
+ emitTypeScale(pickTypeScale, vars);
59726
+ const pickMotion = isDark && darkVariant?.motion ? darkVariant.motion : tokens.motion;
59727
+ emitMotion(pickMotion, vars);
59728
+ const pickIconography = isDark && darkVariant?.iconography ? darkVariant.iconography : tokens.iconography;
59729
+ emitIconography(pickIconography, vars);
59730
+ const pickElevation = isDark && darkVariant?.elevation ? darkVariant.elevation : tokens.elevation;
59731
+ emitElevation(pickElevation, vars);
59732
+ const pickGeometry = isDark && darkVariant?.geometry ? darkVariant.geometry : tokens.geometry;
59733
+ emitGeometry(pickGeometry, vars);
59689
59734
  return vars;
59690
59735
  }
59736
+ function emitDensity(density, vars) {
59737
+ if (!density) return;
59738
+ if (density.spacing) {
59739
+ const s = density.spacing;
59740
+ const pairs2 = [
59741
+ ["0", s.space0],
59742
+ ["1", s.space1],
59743
+ ["2", s.space2],
59744
+ ["3", s.space3],
59745
+ ["4", s.space4],
59746
+ ["5", s.space5],
59747
+ ["6", s.space6],
59748
+ ["7", s.space7],
59749
+ ["8", s.space8],
59750
+ ["9", s.space9],
59751
+ ["10", s.space10],
59752
+ ["11", s.space11],
59753
+ ["12", s.space12]
59754
+ ];
59755
+ for (const [k, v] of pairs2) {
59756
+ if (v !== void 0) vars[`--space-${k}`] = v;
59757
+ }
59758
+ }
59759
+ const pairs = [
59760
+ ["button-height-sm", density.buttonHeightSm],
59761
+ ["button-height-md", density.buttonHeightMd],
59762
+ ["button-height-lg", density.buttonHeightLg],
59763
+ ["input-height-sm", density.inputHeightSm],
59764
+ ["input-height-md", density.inputHeightMd],
59765
+ ["input-height-lg", density.inputHeightLg],
59766
+ ["row-height-compact", density.rowHeightCompact],
59767
+ ["row-height-normal", density.rowHeightNormal],
59768
+ ["row-height-spacious", density.rowHeightSpacious],
59769
+ ["card-padding-sm", density.cardPaddingSm],
59770
+ ["card-padding-md", density.cardPaddingMd],
59771
+ ["card-padding-lg", density.cardPaddingLg],
59772
+ ["dialog-padding", density.dialogPadding],
59773
+ ["section-gap", density.sectionGap]
59774
+ ];
59775
+ for (const [k, v] of pairs) {
59776
+ if (v !== void 0) vars[`--${k}`] = v;
59777
+ }
59778
+ }
59779
+ function typeSizeKeyStr(k) {
59780
+ return k;
59781
+ }
59782
+ function typeWeightStr(w) {
59783
+ return w;
59784
+ }
59785
+ function emitTypeIntent(name, intent, vars) {
59786
+ const sizeKey = typeSizeKeyStr(intent.size);
59787
+ const weight = typeWeightStr(intent.weight);
59788
+ vars[`--intent-${name}-size`] = `var(--text-${sizeKey})`;
59789
+ vars[`--intent-${name}-weight`] = `var(--font-weight-${weight})`;
59790
+ vars[`--intent-${name}-leading`] = `var(--leading-${sizeKey})`;
59791
+ }
59792
+ function emitTypeScale(ts, vars) {
59793
+ if (!ts) return;
59794
+ if (ts.displayFamily !== void 0) vars["--font-family-display"] = ts.displayFamily;
59795
+ if (ts.bodyFamily !== void 0) vars["--font-family-body"] = ts.bodyFamily;
59796
+ if (ts.monoFamily !== void 0) vars["--font-family-mono"] = ts.monoFamily;
59797
+ if (ts.scale) {
59798
+ const s = ts.scale;
59799
+ const pairs = [
59800
+ ["xs", s.xs],
59801
+ ["sm", s.sm],
59802
+ ["base", s.base],
59803
+ ["lg", s.lg],
59804
+ ["xl", s.xl],
59805
+ ["2xl", s["2xl"]],
59806
+ ["3xl", s["3xl"]],
59807
+ ["4xl", s["4xl"]],
59808
+ ["display-1", s["display-1"]],
59809
+ ["display-2", s["display-2"]]
59810
+ ];
59811
+ for (const [k, entry] of pairs) {
59812
+ if (entry !== void 0) {
59813
+ vars[`--text-${k}`] = entry.size;
59814
+ vars[`--leading-${k}`] = entry.lineHeight;
59815
+ }
59816
+ }
59817
+ }
59818
+ if (ts.intents) {
59819
+ const i = ts.intents;
59820
+ if (i.headingMajor) emitTypeIntent("heading-major", i.headingMajor, vars);
59821
+ if (i.headingMinor) emitTypeIntent("heading-minor", i.headingMinor, vars);
59822
+ if (i.bodyEmphasis) emitTypeIntent("body-emphasis", i.bodyEmphasis, vars);
59823
+ if (i.bodyDefault) emitTypeIntent("body-default", i.bodyDefault, vars);
59824
+ if (i.bodyQuiet) emitTypeIntent("body-quiet", i.bodyQuiet, vars);
59825
+ if (i.caption) emitTypeIntent("caption", i.caption, vars);
59826
+ if (i.numeric) emitTypeIntent("numeric", i.numeric, vars);
59827
+ }
59828
+ }
59829
+ function emitMotionIntent(name, intent, vars) {
59830
+ vars[`--intent-${name}-duration`] = `var(--duration-${intent.duration})`;
59831
+ vars[`--intent-${name}-easing`] = `var(--easing-${intent.easing})`;
59832
+ }
59833
+ function emitMotion(m, vars) {
59834
+ if (!m) return;
59835
+ if (m.durations) {
59836
+ const d = m.durations;
59837
+ const pairs = [
59838
+ ["instant", d.instant],
59839
+ ["fast", d.fast],
59840
+ ["normal", d.normal],
59841
+ ["slow", d.slow],
59842
+ ["dramatic", d.dramatic]
59843
+ ];
59844
+ for (const [k, v] of pairs) {
59845
+ if (v !== void 0) vars[`--duration-${k}`] = v;
59846
+ }
59847
+ }
59848
+ if (m.easings) {
59849
+ const e = m.easings;
59850
+ const pairs = [
59851
+ ["linear", e.linear],
59852
+ ["standard", e.standard],
59853
+ ["emphasized", e.emphasized],
59854
+ ["spring", e.spring]
59855
+ ];
59856
+ for (const [k, v] of pairs) {
59857
+ if (v !== void 0) vars[`--easing-${k}`] = v;
59858
+ }
59859
+ }
59860
+ if (m.intents) {
59861
+ const i = m.intents;
59862
+ if (i.enter) emitMotionIntent("enter", i.enter, vars);
59863
+ if (i.exit) emitMotionIntent("exit", i.exit, vars);
59864
+ if (i.hover) emitMotionIntent("hover", i.hover, vars);
59865
+ if (i.press) emitMotionIntent("press", i.press, vars);
59866
+ if (i.expand) emitMotionIntent("expand", i.expand, vars);
59867
+ if (i.transition) emitMotionIntent("transition", i.transition, vars);
59868
+ }
59869
+ }
59870
+ function emitIconography(i, vars) {
59871
+ if (!i) return;
59872
+ if (i.family !== void 0) vars["--icon-family"] = i.family;
59873
+ if (i.strokeWidth !== void 0) vars["--icon-stroke-width"] = i.strokeWidth;
59874
+ if (i.defaultSize !== void 0) vars["--icon-default-size"] = i.defaultSize;
59875
+ }
59876
+ function emitElevation(e, vars) {
59877
+ if (!e) return;
59878
+ if (e.cardElevation !== void 0) vars["--elevation-card"] = e.cardElevation;
59879
+ if (e.popoverElevation !== void 0) vars["--elevation-popover"] = e.popoverElevation;
59880
+ if (e.dialogElevation !== void 0) vars["--elevation-dialog"] = e.dialogElevation;
59881
+ if (e.toastElevation !== void 0) vars["--elevation-toast"] = e.toastElevation;
59882
+ }
59883
+ function emitGeometry(g, vars) {
59884
+ if (!g) return;
59885
+ if (g.radiusContainer !== void 0) vars["--radius-container"] = g.radiusContainer;
59886
+ if (g.radiusInteractive !== void 0) vars["--radius-interactive"] = g.radiusInteractive;
59887
+ if (g.radiusPill !== void 0) vars["--radius-pill"] = g.radiusPill;
59888
+ if (g.borderHairline !== void 0) vars["--border-hairline"] = g.borderHairline;
59889
+ if (g.borderStandard !== void 0) vars["--border-standard"] = g.borderStandard;
59890
+ if (g.borderHeavy !== void 0) vars["--border-heavy"] = g.borderHeavy;
59891
+ }
59691
59892
  function resolveThemeForRuntime(theme) {
59692
59893
  if (theme === void 0) return void 0;
59693
59894
  if (typeof theme === "string") return void 0;
@@ -59789,7 +59990,7 @@ function generateEntityRow(entity, idx) {
59789
59990
  return row;
59790
59991
  }
59791
59992
  function generateFieldValue(entityName, field, idx) {
59792
- if (field.values && field.values.length > 0) {
59993
+ if ("values" in field && field.values && field.values.length > 0) {
59793
59994
  return field.values[(idx - 1) % field.values.length];
59794
59995
  }
59795
59996
  const fieldName = field.name ?? "";