klun-ui 0.6.0 → 0.7.1

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.
@@ -1973,6 +1973,275 @@ var locales = {
1973
1973
  viVN,
1974
1974
  idID
1975
1975
  };
1976
+
1977
+ // src/components/config/size.ts
1978
+ var SIZE_CONTRACTS = {
1979
+ /* ── 控件族:跟随全局档位,且自有档位 = 规范档位 ── */
1980
+ Button: {
1981
+ scale: ["tiny", "xsmall", "small", "medium", "large"],
1982
+ fallback: "medium",
1983
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
1984
+ tiers: { xsmall: "xsmall", small: "small", medium: "medium", large: "large" },
1985
+ // 同一个文件里还有 fancy / compact / link 三种按钮刻度(KDS §2.4 的显式附属动作)
1986
+ extraScales: [
1987
+ ["small", "medium", "large"],
1988
+ ["small", "medium"]
1989
+ ]
1990
+ },
1991
+ ButtonGroup: {
1992
+ scale: ["small", "medium", "large"],
1993
+ fallback: "medium",
1994
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
1995
+ },
1996
+ Input: {
1997
+ scale: ["xsmall", "small", "medium", "large"],
1998
+ fallback: "medium",
1999
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
2000
+ tiers: { xsmall: "xsmall", small: "small", medium: "medium", large: "large" }
2001
+ },
2002
+ Select: {
2003
+ scale: ["xsmall", "small", "medium", "large"],
2004
+ fallback: "medium",
2005
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
2006
+ tiers: { xsmall: "xsmall", small: "small", medium: "medium", large: "large" }
2007
+ },
2008
+ Textarea: {
2009
+ scale: ["xsmall", "small", "medium", "large"],
2010
+ fallback: "medium",
2011
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2012
+ },
2013
+ AutoComplete: {
2014
+ scale: ["small", "medium", "large"],
2015
+ fallback: "medium",
2016
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2017
+ },
2018
+ Cascader: {
2019
+ scale: ["small", "medium", "large"],
2020
+ fallback: "medium",
2021
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2022
+ },
2023
+ SelectMenu: {
2024
+ scale: ["small", "medium", "large"],
2025
+ fallback: "medium",
2026
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2027
+ },
2028
+ CounterInput: {
2029
+ scale: ["small", "medium", "large"],
2030
+ fallback: "medium",
2031
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2032
+ },
2033
+ DigitInput: {
2034
+ scale: ["small", "medium", "large"],
2035
+ fallback: "medium",
2036
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2037
+ },
2038
+ CronEditor: {
2039
+ scale: ["small", "medium"],
2040
+ fallback: "medium",
2041
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2042
+ },
2043
+ Checkbox: {
2044
+ scale: ["small", "medium", "large"],
2045
+ fallback: "medium",
2046
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2047
+ },
2048
+ Radio: {
2049
+ scale: ["small", "medium", "large"],
2050
+ fallback: "medium",
2051
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2052
+ },
2053
+ Switch: {
2054
+ scale: ["small", "medium", "large"],
2055
+ fallback: "medium",
2056
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2057
+ },
2058
+ Slider: {
2059
+ scale: ["small", "medium", "large"],
2060
+ fallback: "medium",
2061
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2062
+ },
2063
+ RangeSlider: {
2064
+ scale: ["sm", "md", "lg"],
2065
+ fallback: "md",
2066
+ fromGlobal: { small: "sm", medium: "md", large: "lg" },
2067
+ tiers: { small: "sm", medium: "md", large: "lg" }
2068
+ },
2069
+ ColorSlider: {
2070
+ scale: ["small", "medium", "large"],
2071
+ fallback: "medium",
2072
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2073
+ },
2074
+ HorizontalFilter: {
2075
+ scale: ["small", "medium"],
2076
+ fallback: "medium",
2077
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2078
+ },
2079
+ CompactSelect: {
2080
+ scale: ["xsmall", "small", "medium"],
2081
+ fallback: "small",
2082
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2083
+ },
2084
+ CompactSelectForInput: {
2085
+ scale: ["small", "medium", "large"],
2086
+ fallback: "small",
2087
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2088
+ },
2089
+ ColorDot: {
2090
+ scale: ["sm", "md", "lg"],
2091
+ fallback: "md",
2092
+ fromGlobal: { small: "sm", medium: "md", large: "lg" },
2093
+ tiers: { small: "sm", medium: "md", large: "lg" }
2094
+ },
2095
+ /* ── 信息/展示族:跟随全局档位,但档位刻意比控件少 ── */
2096
+ Badge: {
2097
+ scale: ["small", "medium"],
2098
+ fallback: "medium",
2099
+ fromGlobal: { small: "small", medium: "medium", large: "medium" },
2100
+ tiers: { xsmall: "small", small: "small", medium: "medium", large: "medium" }
2101
+ },
2102
+ StatusBadge: {
2103
+ scale: ["small", "medium"],
2104
+ fallback: "medium",
2105
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2106
+ },
2107
+ ChartLegend: {
2108
+ scale: ["sm", "md"],
2109
+ fallback: "md",
2110
+ fromGlobal: { small: "sm", medium: "md", large: "md" }
2111
+ },
2112
+ ContentLabel: {
2113
+ scale: ["sm", "md"],
2114
+ fallback: "md",
2115
+ fromGlobal: { small: "sm", medium: "md", large: "md" }
2116
+ },
2117
+ GaugeBar: {
2118
+ scale: ["sm", "md", "lg"],
2119
+ fallback: "md",
2120
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2121
+ },
2122
+ KeyIcon: {
2123
+ scale: ["xs", "sm", "md", "lg", "xl"],
2124
+ fallback: "md",
2125
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2126
+ },
2127
+ Money: {
2128
+ scale: ["sm", "md", "lg", "big"],
2129
+ fallback: "md",
2130
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2131
+ },
2132
+ StatusDot: {
2133
+ scale: ["xs", "sm", "md", "lg"],
2134
+ fallback: "sm",
2135
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2136
+ },
2137
+ Item: {
2138
+ scale: ["default", "small", "xsmall"],
2139
+ fallback: "default",
2140
+ fromGlobal: { small: "small", medium: "default", large: "default" }
2141
+ },
2142
+ Toggle: {
2143
+ scale: ["small", "medium", "large"],
2144
+ fallback: "medium",
2145
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2146
+ },
2147
+ CopyButton: {
2148
+ scale: ["sm", "md", "lg"],
2149
+ fallback: "md",
2150
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2151
+ },
2152
+ CheckboxGroup: {
2153
+ scale: ["small", "medium", "large"],
2154
+ fallback: "medium",
2155
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
2156
+ inherits: "Checkbox"
2157
+ },
2158
+ Statistic: {
2159
+ scale: ["small", "medium", "large"],
2160
+ fallback: "medium",
2161
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2162
+ },
2163
+ Descriptions: {
2164
+ scale: ["small", "medium", "large"],
2165
+ fallback: "medium",
2166
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2167
+ },
2168
+ List: {
2169
+ scale: ["small", "medium", "large"],
2170
+ fallback: "medium",
2171
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2172
+ },
2173
+ /* ── 组件自有刻度:不跟随全局档位,理由必须写清 ── */
2174
+ Avatar: {
2175
+ scale: ["20", "24", "32", "40", "48", "56", "64", "72", "80"],
2176
+ fallback: "40",
2177
+ exempt: "\u5C3A\u5BF8\u5373\u50CF\u7D20\u523B\u5EA6\uFF08\u540C MUI/Ant \u7684 Avatar size:number \u53E3\u5F84\uFF09\uFF0C9 \u6863\u8986\u76D6\u5934\u50CF\u5806\u53E0\u7684\u5168\u90E8\u7528\u6CD5\uFF1B\u63A5\u5168\u5C40\u6863\u4F4D\u4F1A\u628A 40px \u5934\u50CF\u5728\u4E24\u6863\u4E4B\u95F4\u8DF3\u53D8\uFF0C\u5C5E\u7834\u574F\u6027\u89C6\u89C9\u53D8\u66F4\uFF0C\u987B\u5355\u72EC\u51B3\u8BAE\u3002"
2178
+ },
2179
+ ActorAvatar: {
2180
+ scale: ["20", "24", "32", "40", "56"],
2181
+ fallback: "24",
2182
+ exempt: "\u540C Avatar\uFF1A\u50CF\u7D20\u523B\u5EA6\uFF0C\u4E0D\u662F\u63A7\u4EF6\u6863\u4F4D\u3002"
2183
+ },
2184
+ AvatarGroup: {
2185
+ scale: ["24", "32", "40", "48"],
2186
+ fallback: "40",
2187
+ exempt: "\u540C Avatar\uFF1A\u50CF\u7D20\u523B\u5EA6\uFF08\u51B3\u5B9A\u53E0\u52A0\u5934\u50CF\u4E0E +N \u5FBD\u6807\u7684\u76F4\u5F84\uFF09\u3002"
2188
+ },
2189
+ Space: {
2190
+ scale: ["none", "xs", "sm", "md", "lg", "xl", "2xl"],
2191
+ fallback: "md",
2192
+ exempt: "\u8FD9\u662F**\u95F4\u8DDD\u523B\u5EA6**\uFF08gap\uFF09\uFF0C\u4E0D\u662F\u63A7\u4EF6\u5C3A\u5BF8\uFF1BKDS \xA71.4 \u7684\u7A7A\u95F4\u9636\u4E0E\u63A7\u4EF6\u6863\u4F4D\u662F\u4E24\u6761\u8F74\u3002"
2193
+ },
2194
+ InputGroup: {
2195
+ scale: ["xsmall", "icon-xsmall", "icon-small"],
2196
+ fallback: "xsmall",
2197
+ exempt: "\u8BE5 size \u63CF\u8FF0\u7684\u662F\u7EC4\u5185\u5D4C\u6309\u94AE\u7684\u53D8\u4F53\uFF08\u542B icon-* \u5F62\u6001\uFF09\uFF0C\u4E0D\u662F\u63A7\u4EF6\u9AD8\u5EA6\u6863\u4F4D\u3002"
2198
+ },
2199
+ Drawer: {
2200
+ scale: ["default", "large"],
2201
+ fallback: "default",
2202
+ exempt: "\u5BBD\u5EA6\u6863\u4F4D\uFF08480/640/800 \u53E3\u5F84\uFF09\uFF0C\u4E0D\u662F\u63A7\u4EF6\u5C3A\u5BF8\uFF1B\u6D6E\u5C42\u5BBD\u5EA6\u7531\u4EFB\u52A1\u51B3\u5B9A\uFF0C\u4E0D\u968F\u5168\u5C40 size \u6F02\u79FB\u3002"
2203
+ },
2204
+ CircularProgress: {
2205
+ scale: ["number"],
2206
+ fallback: "number",
2207
+ exempt: "\u6570\u503C\u76F4\u5F84\uFF08px\uFF09\uFF0C\u7531\u8C03\u7528\u65B9\u6309\u5BB9\u5668\u7ED9\u5B9A\u3002"
2208
+ },
2209
+ ImageUpload: {
2210
+ scale: ["number"],
2211
+ fallback: "number",
2212
+ exempt: "\u6570\u503C\u8FB9\u957F\uFF08px\uFF09\uFF0C\u7531\u8C03\u7528\u65B9\u6309\u5BB9\u5668\u7ED9\u5B9A\u3002"
2213
+ },
2214
+ Rating: {
2215
+ scale: ["number"],
2216
+ fallback: "number",
2217
+ exempt: "\u6570\u503C\u661F\u6807\u5B57\u53F7\uFF08px\uFF09\u3002"
2218
+ },
2219
+ Spinner: {
2220
+ scale: ["number"],
2221
+ fallback: "number",
2222
+ exempt: "\u6570\u503C\u76F4\u5F84\uFF08px\uFF09\uFF1B\u547D\u540D\u6863\u4F4D\u89C1 SpinnerSize\uFF0C\u7531\u8C03\u7528\u65B9\u6309\u5BB9\u5668\u9009\u5B9A\u3002"
2223
+ },
2224
+ Splitter: {
2225
+ scale: ["number"],
2226
+ fallback: "number",
2227
+ exempt: "\u5206\u5272\u6761\u539A\u5EA6/\u5C3A\u5BF8\uFF0C\u63A5\u53D7\u6570\u503C\u6216 CSS \u957F\u5EA6\uFF0C\u5C5E\u5E03\u5C40\u91CF\u800C\u975E\u63A7\u4EF6\u6863\u4F4D\u3002"
2228
+ }
2229
+ };
2230
+ function resolveSize(name, explicit, global) {
2231
+ const contract = SIZE_CONTRACTS[name];
2232
+ if (explicit !== void 0) return explicit;
2233
+ if (global && contract.fromGlobal) {
2234
+ const mapped = contract.fromGlobal[global];
2235
+ if (mapped !== void 0) return mapped;
2236
+ }
2237
+ return contract.fallback;
2238
+ }
2239
+ function tierOf(name, tier) {
2240
+ const contract = SIZE_CONTRACTS[name];
2241
+ if (contract.tiers?.[tier]) return contract.tiers[tier];
2242
+ const entry = Object.entries(contract.fromGlobal ?? {}).find(([g]) => g === tier);
2243
+ return entry ? entry[1] : void 0;
2244
+ }
1976
2245
  var DEFAULT_CONFIG = {
1977
2246
  locale: enUS,
1978
2247
  size: void 0,
@@ -2075,6 +2344,41 @@ function useMappedSize(explicit, map, fallback) {
2075
2344
  if (size !== void 0) return map[size];
2076
2345
  return fallback;
2077
2346
  }
2347
+ function useScaleSize(name, explicit) {
2348
+ const { size } = useContext(ConfigContext);
2349
+ return resolveSize(name, explicit, size);
2350
+ }
2351
+ function domDensity() {
2352
+ if (typeof document === "undefined") return void 0;
2353
+ const v = document.documentElement.dataset.density;
2354
+ return v === "compact" || v === "default" || v === "kk" ? v : void 0;
2355
+ }
2356
+ var densityObserver = null;
2357
+ var densityListeners = /* @__PURE__ */ new Set();
2358
+ function subscribeDensity(cb) {
2359
+ densityListeners.add(cb);
2360
+ if (!densityObserver && typeof MutationObserver !== "undefined" && typeof document !== "undefined") {
2361
+ densityObserver = new MutationObserver(() => {
2362
+ for (const l of densityListeners) l();
2363
+ });
2364
+ densityObserver.observe(document.documentElement, {
2365
+ attributes: true,
2366
+ attributeFilter: ["data-density"]
2367
+ });
2368
+ }
2369
+ return () => {
2370
+ densityListeners.delete(cb);
2371
+ if (!densityListeners.size && densityObserver) {
2372
+ densityObserver.disconnect();
2373
+ densityObserver = null;
2374
+ }
2375
+ };
2376
+ }
2377
+ function useDensity() {
2378
+ const { density } = useContext(ConfigContext);
2379
+ const dom = useSyncExternalStore(subscribeDensity, domDensity, () => void 0);
2380
+ return density ?? dom ?? "default";
2381
+ }
2078
2382
  var COMPACT_SIZE_MAP = { small: "small", medium: "medium", large: "medium" };
2079
2383
  function Spinner({ className, size }) {
2080
2384
  return /* @__PURE__ */ jsxs(
@@ -2371,7 +2675,7 @@ var CopyButton = forwardRef(
2371
2675
  value,
2372
2676
  children,
2373
2677
  onCopied,
2374
- size = "md",
2678
+ size: sizeProp,
2375
2679
  variant = "ghost",
2376
2680
  copyIcon = "ri-file-copy-line",
2377
2681
  doneIcon = "ri-check-line",
@@ -2380,6 +2684,7 @@ var CopyButton = forwardRef(
2380
2684
  className,
2381
2685
  ...props
2382
2686
  }, ref) {
2687
+ const size = useScaleSize("CopyButton", sizeProp);
2383
2688
  const { copy: localeCopy } = useLocale();
2384
2689
  const title = titleProp ?? localeCopy.label;
2385
2690
  const [done, setDone] = useState(false);
@@ -2422,7 +2727,7 @@ var CopyButton = forwardRef(
2422
2727
  CopyButton.displayName = "CopyButton";
2423
2728
  var Toggle = forwardRef(function Toggle2({
2424
2729
  variant = "default",
2425
- size = "medium",
2730
+ size: sizeProp,
2426
2731
  pressed,
2427
2732
  defaultPressed = false,
2428
2733
  onPressedChange,
@@ -2431,6 +2736,7 @@ var Toggle = forwardRef(function Toggle2({
2431
2736
  disabled,
2432
2737
  ...props
2433
2738
  }, ref) {
2739
+ const size = useScaleSize("Toggle", sizeProp);
2434
2740
  const [internal, setInternal] = useState(defaultPressed);
2435
2741
  const controlled = pressed !== void 0;
2436
2742
  const isPressed = controlled ? pressed : internal;
@@ -2724,7 +3030,8 @@ var AvatarGroup = forwardRef(function AvatarGroup2({ avatars = [], size = "40",
2724
3030
  );
2725
3031
  });
2726
3032
  AvatarGroup.displayName = "AvatarGroup";
2727
- var Badge = forwardRef(function Badge2({ color = "gray", variant = "lighter", size = "medium", leadingIcon, dot = false, className, children, ...props }, ref) {
3033
+ var Badge = forwardRef(function Badge2({ color = "gray", variant = "lighter", size: sizeProp, leadingIcon, dot = false, className, children, ...props }, ref) {
3034
+ const size = useScaleSize("Badge", sizeProp);
2728
3035
  return /* @__PURE__ */ jsxs(
2729
3036
  "span",
2730
3037
  {
@@ -2949,7 +3256,8 @@ var Carousel = forwardRef(function Carousel2({
2949
3256
  );
2950
3257
  });
2951
3258
  Carousel.displayName = "Carousel";
2952
- var ChartLegend = forwardRef(function ChartLegend2({ items: items2 = [], direction = "row", dot = "round", size = "md", className, ...props }, ref) {
3259
+ var ChartLegend = forwardRef(function ChartLegend2({ items: items2 = [], direction = "row", dot = "round", size: sizeProp, className, ...props }, ref) {
3260
+ const size = useScaleSize("ChartLegend", sizeProp);
2953
3261
  return /* @__PURE__ */ jsx(
2954
3262
  "div",
2955
3263
  {
@@ -3162,7 +3470,8 @@ var LogViewer = forwardRef(function LogViewer2({
3162
3470
  );
3163
3471
  });
3164
3472
  LogViewer.displayName = "LogViewer";
3165
- var ContentLabel = forwardRef(function ContentLabel2({ children, icon, color = "gray", size = "md", className, ...props }, ref) {
3473
+ var ContentLabel = forwardRef(function ContentLabel2({ children, icon, color = "gray", size: sizeProp, className, ...props }, ref) {
3474
+ const size = useScaleSize("ContentLabel", sizeProp);
3166
3475
  return /* @__PURE__ */ jsxs(
3167
3476
  "span",
3168
3477
  {
@@ -3285,11 +3594,12 @@ function StatusBadge({
3285
3594
  map,
3286
3595
  dot = true,
3287
3596
  variant = "light",
3288
- size = "medium",
3597
+ size: sizeProp,
3289
3598
  pulse = false,
3290
3599
  className,
3291
3600
  ...props
3292
3601
  }) {
3602
+ const size = useScaleSize("StatusBadge", sizeProp);
3293
3603
  const k2 = keyOf(status);
3294
3604
  const resolvedTone = tone || map && map[k2] || STATUS_TONE[k2] || "neutral";
3295
3605
  const color = TONE_COLOR[resolvedTone] || "gray";
@@ -3858,7 +4168,8 @@ var ItemGroup = forwardRef(
3858
4168
  }
3859
4169
  );
3860
4170
  ItemGroup.displayName = "ItemGroup";
3861
- var Item = forwardRef(function Item2({ variant = "default", size = "default", className, ...props }, ref) {
4171
+ var Item = forwardRef(function Item2({ variant = "default", size: sizeProp, className, ...props }, ref) {
4172
+ const size = useScaleSize("Item", sizeProp);
3862
4173
  return /* @__PURE__ */ jsx(
3863
4174
  "div",
3864
4175
  {
@@ -4124,7 +4435,8 @@ var Kbd = forwardRef(function Kbd2({ className, children, ...props }, ref) {
4124
4435
  return /* @__PURE__ */ jsx("kbd", { ref, className: cx("klun-kbd", className), ...props, children });
4125
4436
  });
4126
4437
  Kbd.displayName = "Kbd";
4127
- var KeyIcon = forwardRef(function KeyIcon2({ icon, color = "blue", appearance = "light", size = "md", css, className, style, ...props }, ref) {
4438
+ var KeyIcon = forwardRef(function KeyIcon2({ icon, color = "blue", appearance = "light", size: sizeProp, css, className, style, ...props }, ref) {
4439
+ const size = useScaleSize("KeyIcon", sizeProp);
4128
4440
  return /* @__PURE__ */ jsx(
4129
4441
  "span",
4130
4442
  {
@@ -4548,13 +4860,14 @@ var Money = forwardRef(function Money2({
4548
4860
  maximumFractionDigits,
4549
4861
  signDisplay,
4550
4862
  tone = "default",
4551
- size = "md",
4863
+ size: sizeProp,
4552
4864
  strikethrough = false,
4553
4865
  prefix,
4554
4866
  suffix,
4555
4867
  className,
4556
4868
  ...props
4557
4869
  }, ref) {
4870
+ const size = useScaleSize("Money", sizeProp);
4558
4871
  const { locale: ctxLocaleName } = useLocale();
4559
4872
  const locale = localeProp ?? ctxLocaleName;
4560
4873
  const { text, period: periodSuffix } = Format.money(value, {
@@ -5658,7 +5971,8 @@ var Statistic = forwardRef(function Statistic2({ label, value, prefix, suffix, p
5658
5971
  });
5659
5972
  Statistic.displayName = "Statistic";
5660
5973
  var SIZES2 = { xs: 6, sm: 8, md: 10, lg: 12 };
5661
- var StatusDot = forwardRef(function StatusDot2({ tone = "neutral", size = "sm", pulse = false, label, className, style, ...props }, ref) {
5974
+ var StatusDot = forwardRef(function StatusDot2({ tone = "neutral", size: sizeProp, pulse = false, label, className, style, ...props }, ref) {
5975
+ const size = useScaleSize("StatusDot", sizeProp);
5662
5976
  const sizeStyle = { ["--klun-status-dot-size"]: `${SIZES2[size] ?? SIZES2.sm}px` };
5663
5977
  const dot = /* @__PURE__ */ jsx("span", { className: cx("klun-status-dot__dot", pulse && "klun-status-dot--pulse"), style: sizeStyle });
5664
5978
  if (label == null) {
@@ -7094,7 +7408,7 @@ function Table({
7094
7408
  style,
7095
7409
  ...props
7096
7410
  }) {
7097
- const providerDensity = useConfig().density;
7411
+ const providerDensity = useDensity();
7098
7412
  const density = densityProp ?? (providerDensity === "compact" ? "compact" : "comfortable");
7099
7413
  const densityClass = DENSITY[density] || DENSITY.comfortable;
7100
7414
  const { menu, setMenu } = useTableContextMenu();
@@ -8256,12 +8570,13 @@ var GaugeBar = forwardRef(function GaugeBar2({
8256
8570
  label,
8257
8571
  caption,
8258
8572
  color = "blue",
8259
- size = "md",
8573
+ size: sizeProp,
8260
8574
  showValue = true,
8261
8575
  className,
8262
8576
  style,
8263
8577
  ...props
8264
8578
  }, ref) {
8579
+ const size = useScaleSize("GaugeBar", sizeProp);
8265
8580
  const pct2 = Math.max(0, Math.min(100, max ? value / max * 100 : 0));
8266
8581
  const showHeader = label || showValue && caption !== false;
8267
8582
  return /* @__PURE__ */ jsxs(
@@ -10474,6 +10789,7 @@ var DatePicker = forwardRef(
10474
10789
  Input,
10475
10790
  {
10476
10791
  readOnly: true,
10792
+ className: "klun-input--trigger",
10477
10793
  disabled,
10478
10794
  value: label,
10479
10795
  placeholder: placeholder ?? "Select date",
@@ -10583,6 +10899,7 @@ var DateRangePicker = forwardRef(
10583
10899
  Input,
10584
10900
  {
10585
10901
  readOnly: true,
10902
+ className: "klun-input--trigger",
10586
10903
  disabled,
10587
10904
  value: label,
10588
10905
  placeholder: placeholder ?? "Select range",
@@ -10851,6 +11168,7 @@ var DateTimePicker = forwardRef(
10851
11168
  Input,
10852
11169
  {
10853
11170
  readOnly: true,
11171
+ className: "klun-input--trigger",
10854
11172
  disabled,
10855
11173
  value: label,
10856
11174
  placeholder: placeholder ?? "Select date & time",
@@ -11399,8 +11717,12 @@ Hint.displayName = "Hint";
11399
11717
 
11400
11718
  // src/components/overlays/overlayStack.ts
11401
11719
  var OVERLAY_LAYER = {
11720
+ pagePopup: 100,
11402
11721
  modalRoot: 1e3,
11403
- modalStep: 100};
11722
+ modalStep: 100,
11723
+ popupOffset: 20,
11724
+ tooltipOffset: 30
11725
+ };
11404
11726
  var stack = [];
11405
11727
  var scopeRoots = /* @__PURE__ */ new Map();
11406
11728
  var scrollLockCount = 0;
@@ -11617,7 +11939,16 @@ function useOverlayScope({
11617
11939
  layerBase: scopeId ? layerBaseFor(scopeId) : OVERLAY_LAYER.modalRoot
11618
11940
  };
11619
11941
  }
11620
- createContext(null);
11942
+ var OverlayLayerContext = createContext(null);
11943
+ function OverlayLayerProvider({ layerBase, children }) {
11944
+ return /* @__PURE__ */ jsx(OverlayLayerContext.Provider, { value: { layerBase }, children });
11945
+ }
11946
+ function useOverlayLayer(kind = "popup") {
11947
+ const ctx = useContext(OverlayLayerContext);
11948
+ const offset = kind === "tooltip" ? OVERLAY_LAYER.tooltipOffset : OVERLAY_LAYER.popupOffset;
11949
+ if (ctx) return ctx.layerBase + offset;
11950
+ return kind === "tooltip" ? OVERLAY_LAYER.modalRoot + OVERLAY_LAYER.tooltipOffset : OVERLAY_LAYER.pagePopup;
11951
+ }
11621
11952
  var Modal = forwardRef(function Modal2({
11622
11953
  open,
11623
11954
  onClose,
@@ -15802,6 +16133,6 @@ var Popconfirm = forwardRef(function Popconfirm2({
15802
16133
  });
15803
16134
  Popconfirm.displayName = "Popconfirm";
15804
16135
 
15805
- export { Accordion, ActivityHeatmap, ActorAvatar, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, BorderBeam, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, CapabilityBanner, CappedNumberFlow, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactNumberFlow, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, CurrencyNumberFlow, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, DotSphere, Drawer, Dropdown, EmojiPicker, EmptyState, ExpiryCountdown, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldTitle, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, HoverCard, HoverCardContent, HoverCardTrigger, ICON_GROUPS, IconPicker, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kanban, Kbd, KeyIcon, LIST_GRID_BOTTOM_CLEARANCE, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListGrid, ListGridBody, ListGridCell, ListGridHeader, ListGridHeaderCell, ListGridRow, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, NavigationProgress, Notification, NumberFlow, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, QUICK_EMOJIS, QuickEmojiPicker, Radio, RadioCard, RangeSlider, Rating, ReactionBar, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, ShimmerText, Sidebar, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Toggle, Tooltip, Tree, UnicodeSpinner, VirtualTable, Wizard, arSA, buildHeatmapGrid, deDE, describeCron, enUS, esES, fmt, formatAvatarEmoji, frFR, groupReactions, idID, itIT, jaJP, koKR, localTodayIso, locales, nlNL, parseAvatarEmoji, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, reorderRows, resolveMove, ruRU, summarizeHeatmap, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, useStepItem, useStepper, viVN, zhCN, zhTW };
15806
- //# sourceMappingURL=chunk-K5GUNGCR.js.map
15807
- //# sourceMappingURL=chunk-K5GUNGCR.js.map
16136
+ export { Accordion, ActivityHeatmap, ActorAvatar, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, BorderBeam, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, CapabilityBanner, CappedNumberFlow, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactNumberFlow, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, CurrencyNumberFlow, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, DotSphere, Drawer, Dropdown, EmojiPicker, EmptyState, ExpiryCountdown, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldTitle, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, HoverCard, HoverCardContent, HoverCardTrigger, ICON_GROUPS, IconPicker, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kanban, Kbd, KeyIcon, LIST_GRID_BOTTOM_CLEARANCE, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListGrid, ListGridBody, ListGridCell, ListGridHeader, ListGridHeaderCell, ListGridRow, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, NavigationProgress, Notification, NumberFlow, OverlayLayerProvider, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, QUICK_EMOJIS, QuickEmojiPicker, Radio, RadioCard, RangeSlider, Rating, ReactionBar, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SIZE_CONTRACTS, SegmentedControl, SegmentedProgress, Select, SelectMenu, ShimmerText, Sidebar, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Toggle, Tooltip, Tree, UnicodeSpinner, VirtualTable, Wizard, arSA, buildHeatmapGrid, deDE, describeCron, enUS, esES, fmt, formatAvatarEmoji, frFR, groupReactions, idID, itIT, jaJP, koKR, localTodayIso, locales, nlNL, parseAvatarEmoji, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, reorderRows, resolveMove, resolveSize, ruRU, summarizeHeatmap, tierOf, toast, trTR, useBreakpoint, useConfig, useContextMenu, useDensity, useForm, useLocale, useMappedSize, useMessage, useNotification, useOverlayLayer, useOverlayScope, useScaleSize, useSize, useStepItem, useStepper, viVN, zhCN, zhTW };
16137
+ //# sourceMappingURL=chunk-2S6ZRGPW.js.map
16138
+ //# sourceMappingURL=chunk-2S6ZRGPW.js.map