klun-ui 0.6.0 → 0.7.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.
@@ -1975,6 +1975,275 @@ var locales = {
1975
1975
  viVN,
1976
1976
  idID
1977
1977
  };
1978
+
1979
+ // src/components/config/size.ts
1980
+ var SIZE_CONTRACTS = {
1981
+ /* ── 控件族:跟随全局档位,且自有档位 = 规范档位 ── */
1982
+ Button: {
1983
+ scale: ["tiny", "xsmall", "small", "medium", "large"],
1984
+ fallback: "medium",
1985
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
1986
+ tiers: { xsmall: "xsmall", small: "small", medium: "medium", large: "large" },
1987
+ // 同一个文件里还有 fancy / compact / link 三种按钮刻度(KDS §2.4 的显式附属动作)
1988
+ extraScales: [
1989
+ ["small", "medium", "large"],
1990
+ ["small", "medium"]
1991
+ ]
1992
+ },
1993
+ ButtonGroup: {
1994
+ scale: ["small", "medium", "large"],
1995
+ fallback: "medium",
1996
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
1997
+ },
1998
+ Input: {
1999
+ scale: ["xsmall", "small", "medium", "large"],
2000
+ fallback: "medium",
2001
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
2002
+ tiers: { xsmall: "xsmall", small: "small", medium: "medium", large: "large" }
2003
+ },
2004
+ Select: {
2005
+ scale: ["xsmall", "small", "medium", "large"],
2006
+ fallback: "medium",
2007
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
2008
+ tiers: { xsmall: "xsmall", small: "small", medium: "medium", large: "large" }
2009
+ },
2010
+ Textarea: {
2011
+ scale: ["xsmall", "small", "medium", "large"],
2012
+ fallback: "medium",
2013
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2014
+ },
2015
+ AutoComplete: {
2016
+ scale: ["small", "medium", "large"],
2017
+ fallback: "medium",
2018
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2019
+ },
2020
+ Cascader: {
2021
+ scale: ["small", "medium", "large"],
2022
+ fallback: "medium",
2023
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2024
+ },
2025
+ SelectMenu: {
2026
+ scale: ["small", "medium", "large"],
2027
+ fallback: "medium",
2028
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2029
+ },
2030
+ CounterInput: {
2031
+ scale: ["small", "medium", "large"],
2032
+ fallback: "medium",
2033
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2034
+ },
2035
+ DigitInput: {
2036
+ scale: ["small", "medium", "large"],
2037
+ fallback: "medium",
2038
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2039
+ },
2040
+ CronEditor: {
2041
+ scale: ["small", "medium"],
2042
+ fallback: "medium",
2043
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2044
+ },
2045
+ Checkbox: {
2046
+ scale: ["small", "medium", "large"],
2047
+ fallback: "medium",
2048
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2049
+ },
2050
+ Radio: {
2051
+ scale: ["small", "medium", "large"],
2052
+ fallback: "medium",
2053
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2054
+ },
2055
+ Switch: {
2056
+ scale: ["small", "medium", "large"],
2057
+ fallback: "medium",
2058
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2059
+ },
2060
+ Slider: {
2061
+ scale: ["small", "medium", "large"],
2062
+ fallback: "medium",
2063
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2064
+ },
2065
+ RangeSlider: {
2066
+ scale: ["sm", "md", "lg"],
2067
+ fallback: "md",
2068
+ fromGlobal: { small: "sm", medium: "md", large: "lg" },
2069
+ tiers: { small: "sm", medium: "md", large: "lg" }
2070
+ },
2071
+ ColorSlider: {
2072
+ scale: ["small", "medium", "large"],
2073
+ fallback: "medium",
2074
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2075
+ },
2076
+ HorizontalFilter: {
2077
+ scale: ["small", "medium"],
2078
+ fallback: "medium",
2079
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2080
+ },
2081
+ CompactSelect: {
2082
+ scale: ["xsmall", "small", "medium"],
2083
+ fallback: "small",
2084
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2085
+ },
2086
+ CompactSelectForInput: {
2087
+ scale: ["small", "medium", "large"],
2088
+ fallback: "small",
2089
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2090
+ },
2091
+ ColorDot: {
2092
+ scale: ["sm", "md", "lg"],
2093
+ fallback: "md",
2094
+ fromGlobal: { small: "sm", medium: "md", large: "lg" },
2095
+ tiers: { small: "sm", medium: "md", large: "lg" }
2096
+ },
2097
+ /* ── 信息/展示族:跟随全局档位,但档位刻意比控件少 ── */
2098
+ Badge: {
2099
+ scale: ["small", "medium"],
2100
+ fallback: "medium",
2101
+ fromGlobal: { small: "small", medium: "medium", large: "medium" },
2102
+ tiers: { xsmall: "small", small: "small", medium: "medium", large: "medium" }
2103
+ },
2104
+ StatusBadge: {
2105
+ scale: ["small", "medium"],
2106
+ fallback: "medium",
2107
+ fromGlobal: { small: "small", medium: "medium", large: "medium" }
2108
+ },
2109
+ ChartLegend: {
2110
+ scale: ["sm", "md"],
2111
+ fallback: "md",
2112
+ fromGlobal: { small: "sm", medium: "md", large: "md" }
2113
+ },
2114
+ ContentLabel: {
2115
+ scale: ["sm", "md"],
2116
+ fallback: "md",
2117
+ fromGlobal: { small: "sm", medium: "md", large: "md" }
2118
+ },
2119
+ GaugeBar: {
2120
+ scale: ["sm", "md", "lg"],
2121
+ fallback: "md",
2122
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2123
+ },
2124
+ KeyIcon: {
2125
+ scale: ["xs", "sm", "md", "lg", "xl"],
2126
+ fallback: "md",
2127
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2128
+ },
2129
+ Money: {
2130
+ scale: ["sm", "md", "lg", "big"],
2131
+ fallback: "md",
2132
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2133
+ },
2134
+ StatusDot: {
2135
+ scale: ["xs", "sm", "md", "lg"],
2136
+ fallback: "sm",
2137
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2138
+ },
2139
+ Item: {
2140
+ scale: ["default", "small", "xsmall"],
2141
+ fallback: "default",
2142
+ fromGlobal: { small: "small", medium: "default", large: "default" }
2143
+ },
2144
+ Toggle: {
2145
+ scale: ["small", "medium", "large"],
2146
+ fallback: "medium",
2147
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2148
+ },
2149
+ CopyButton: {
2150
+ scale: ["sm", "md", "lg"],
2151
+ fallback: "md",
2152
+ fromGlobal: { small: "sm", medium: "md", large: "lg" }
2153
+ },
2154
+ CheckboxGroup: {
2155
+ scale: ["small", "medium", "large"],
2156
+ fallback: "medium",
2157
+ fromGlobal: { small: "small", medium: "medium", large: "large" },
2158
+ inherits: "Checkbox"
2159
+ },
2160
+ Statistic: {
2161
+ scale: ["small", "medium", "large"],
2162
+ fallback: "medium",
2163
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2164
+ },
2165
+ Descriptions: {
2166
+ scale: ["small", "medium", "large"],
2167
+ fallback: "medium",
2168
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2169
+ },
2170
+ List: {
2171
+ scale: ["small", "medium", "large"],
2172
+ fallback: "medium",
2173
+ fromGlobal: { small: "small", medium: "medium", large: "large" }
2174
+ },
2175
+ /* ── 组件自有刻度:不跟随全局档位,理由必须写清 ── */
2176
+ Avatar: {
2177
+ scale: ["20", "24", "32", "40", "48", "56", "64", "72", "80"],
2178
+ fallback: "40",
2179
+ 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"
2180
+ },
2181
+ ActorAvatar: {
2182
+ scale: ["20", "24", "32", "40", "56"],
2183
+ fallback: "24",
2184
+ exempt: "\u540C Avatar\uFF1A\u50CF\u7D20\u523B\u5EA6\uFF0C\u4E0D\u662F\u63A7\u4EF6\u6863\u4F4D\u3002"
2185
+ },
2186
+ AvatarGroup: {
2187
+ scale: ["24", "32", "40", "48"],
2188
+ fallback: "40",
2189
+ exempt: "\u540C Avatar\uFF1A\u50CF\u7D20\u523B\u5EA6\uFF08\u51B3\u5B9A\u53E0\u52A0\u5934\u50CF\u4E0E +N \u5FBD\u6807\u7684\u76F4\u5F84\uFF09\u3002"
2190
+ },
2191
+ Space: {
2192
+ scale: ["none", "xs", "sm", "md", "lg", "xl", "2xl"],
2193
+ fallback: "md",
2194
+ 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"
2195
+ },
2196
+ InputGroup: {
2197
+ scale: ["xsmall", "icon-xsmall", "icon-small"],
2198
+ fallback: "xsmall",
2199
+ 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"
2200
+ },
2201
+ Drawer: {
2202
+ scale: ["default", "large"],
2203
+ fallback: "default",
2204
+ 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"
2205
+ },
2206
+ CircularProgress: {
2207
+ scale: ["number"],
2208
+ fallback: "number",
2209
+ exempt: "\u6570\u503C\u76F4\u5F84\uFF08px\uFF09\uFF0C\u7531\u8C03\u7528\u65B9\u6309\u5BB9\u5668\u7ED9\u5B9A\u3002"
2210
+ },
2211
+ ImageUpload: {
2212
+ scale: ["number"],
2213
+ fallback: "number",
2214
+ exempt: "\u6570\u503C\u8FB9\u957F\uFF08px\uFF09\uFF0C\u7531\u8C03\u7528\u65B9\u6309\u5BB9\u5668\u7ED9\u5B9A\u3002"
2215
+ },
2216
+ Rating: {
2217
+ scale: ["number"],
2218
+ fallback: "number",
2219
+ exempt: "\u6570\u503C\u661F\u6807\u5B57\u53F7\uFF08px\uFF09\u3002"
2220
+ },
2221
+ Spinner: {
2222
+ scale: ["number"],
2223
+ fallback: "number",
2224
+ 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"
2225
+ },
2226
+ Splitter: {
2227
+ scale: ["number"],
2228
+ fallback: "number",
2229
+ 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"
2230
+ }
2231
+ };
2232
+ function resolveSize(name, explicit, global) {
2233
+ const contract = SIZE_CONTRACTS[name];
2234
+ if (explicit !== void 0) return explicit;
2235
+ if (global && contract.fromGlobal) {
2236
+ const mapped = contract.fromGlobal[global];
2237
+ if (mapped !== void 0) return mapped;
2238
+ }
2239
+ return contract.fallback;
2240
+ }
2241
+ function tierOf(name, tier) {
2242
+ const contract = SIZE_CONTRACTS[name];
2243
+ if (contract.tiers?.[tier]) return contract.tiers[tier];
2244
+ const entry = Object.entries(contract.fromGlobal ?? {}).find(([g]) => g === tier);
2245
+ return entry ? entry[1] : void 0;
2246
+ }
1978
2247
  var DEFAULT_CONFIG = {
1979
2248
  locale: enUS,
1980
2249
  size: void 0,
@@ -2077,6 +2346,41 @@ function useMappedSize(explicit, map, fallback) {
2077
2346
  if (size !== void 0) return map[size];
2078
2347
  return fallback;
2079
2348
  }
2349
+ function useScaleSize(name, explicit) {
2350
+ const { size } = react.useContext(ConfigContext);
2351
+ return resolveSize(name, explicit, size);
2352
+ }
2353
+ function domDensity() {
2354
+ if (typeof document === "undefined") return void 0;
2355
+ const v = document.documentElement.dataset.density;
2356
+ return v === "compact" || v === "default" || v === "kk" ? v : void 0;
2357
+ }
2358
+ var densityObserver = null;
2359
+ var densityListeners = /* @__PURE__ */ new Set();
2360
+ function subscribeDensity(cb) {
2361
+ densityListeners.add(cb);
2362
+ if (!densityObserver && typeof MutationObserver !== "undefined" && typeof document !== "undefined") {
2363
+ densityObserver = new MutationObserver(() => {
2364
+ for (const l of densityListeners) l();
2365
+ });
2366
+ densityObserver.observe(document.documentElement, {
2367
+ attributes: true,
2368
+ attributeFilter: ["data-density"]
2369
+ });
2370
+ }
2371
+ return () => {
2372
+ densityListeners.delete(cb);
2373
+ if (!densityListeners.size && densityObserver) {
2374
+ densityObserver.disconnect();
2375
+ densityObserver = null;
2376
+ }
2377
+ };
2378
+ }
2379
+ function useDensity() {
2380
+ const { density } = react.useContext(ConfigContext);
2381
+ const dom = react.useSyncExternalStore(subscribeDensity, domDensity, () => void 0);
2382
+ return density ?? dom ?? "default";
2383
+ }
2080
2384
  var COMPACT_SIZE_MAP = { small: "small", medium: "medium", large: "medium" };
2081
2385
  function Spinner({ className, size }) {
2082
2386
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2373,7 +2677,7 @@ var CopyButton = react.forwardRef(
2373
2677
  value,
2374
2678
  children,
2375
2679
  onCopied,
2376
- size = "md",
2680
+ size: sizeProp,
2377
2681
  variant = "ghost",
2378
2682
  copyIcon = "ri-file-copy-line",
2379
2683
  doneIcon = "ri-check-line",
@@ -2382,6 +2686,7 @@ var CopyButton = react.forwardRef(
2382
2686
  className,
2383
2687
  ...props
2384
2688
  }, ref) {
2689
+ const size = useScaleSize("CopyButton", sizeProp);
2385
2690
  const { copy: localeCopy } = useLocale();
2386
2691
  const title = titleProp ?? localeCopy.label;
2387
2692
  const [done, setDone] = react.useState(false);
@@ -2424,7 +2729,7 @@ var CopyButton = react.forwardRef(
2424
2729
  CopyButton.displayName = "CopyButton";
2425
2730
  var Toggle = react.forwardRef(function Toggle2({
2426
2731
  variant = "default",
2427
- size = "medium",
2732
+ size: sizeProp,
2428
2733
  pressed,
2429
2734
  defaultPressed = false,
2430
2735
  onPressedChange,
@@ -2433,6 +2738,7 @@ var Toggle = react.forwardRef(function Toggle2({
2433
2738
  disabled,
2434
2739
  ...props
2435
2740
  }, ref) {
2741
+ const size = useScaleSize("Toggle", sizeProp);
2436
2742
  const [internal, setInternal] = react.useState(defaultPressed);
2437
2743
  const controlled = pressed !== void 0;
2438
2744
  const isPressed = controlled ? pressed : internal;
@@ -2726,7 +3032,8 @@ var AvatarGroup = react.forwardRef(function AvatarGroup2({ avatars = [], size =
2726
3032
  );
2727
3033
  });
2728
3034
  AvatarGroup.displayName = "AvatarGroup";
2729
- var Badge = react.forwardRef(function Badge2({ color = "gray", variant = "lighter", size = "medium", leadingIcon, dot = false, className, children, ...props }, ref) {
3035
+ var Badge = react.forwardRef(function Badge2({ color = "gray", variant = "lighter", size: sizeProp, leadingIcon, dot = false, className, children, ...props }, ref) {
3036
+ const size = useScaleSize("Badge", sizeProp);
2730
3037
  return /* @__PURE__ */ jsxRuntime.jsxs(
2731
3038
  "span",
2732
3039
  {
@@ -2951,7 +3258,8 @@ var Carousel = react.forwardRef(function Carousel2({
2951
3258
  );
2952
3259
  });
2953
3260
  Carousel.displayName = "Carousel";
2954
- var ChartLegend = react.forwardRef(function ChartLegend2({ items: items2 = [], direction = "row", dot = "round", size = "md", className, ...props }, ref) {
3261
+ var ChartLegend = react.forwardRef(function ChartLegend2({ items: items2 = [], direction = "row", dot = "round", size: sizeProp, className, ...props }, ref) {
3262
+ const size = useScaleSize("ChartLegend", sizeProp);
2955
3263
  return /* @__PURE__ */ jsxRuntime.jsx(
2956
3264
  "div",
2957
3265
  {
@@ -3164,7 +3472,8 @@ var LogViewer = react.forwardRef(function LogViewer2({
3164
3472
  );
3165
3473
  });
3166
3474
  LogViewer.displayName = "LogViewer";
3167
- var ContentLabel = react.forwardRef(function ContentLabel2({ children, icon, color = "gray", size = "md", className, ...props }, ref) {
3475
+ var ContentLabel = react.forwardRef(function ContentLabel2({ children, icon, color = "gray", size: sizeProp, className, ...props }, ref) {
3476
+ const size = useScaleSize("ContentLabel", sizeProp);
3168
3477
  return /* @__PURE__ */ jsxRuntime.jsxs(
3169
3478
  "span",
3170
3479
  {
@@ -3287,11 +3596,12 @@ function StatusBadge({
3287
3596
  map,
3288
3597
  dot = true,
3289
3598
  variant = "light",
3290
- size = "medium",
3599
+ size: sizeProp,
3291
3600
  pulse = false,
3292
3601
  className,
3293
3602
  ...props
3294
3603
  }) {
3604
+ const size = useScaleSize("StatusBadge", sizeProp);
3295
3605
  const k2 = keyOf(status);
3296
3606
  const resolvedTone = tone || map && map[k2] || STATUS_TONE[k2] || "neutral";
3297
3607
  const color = TONE_COLOR[resolvedTone] || "gray";
@@ -3860,7 +4170,8 @@ var ItemGroup = react.forwardRef(
3860
4170
  }
3861
4171
  );
3862
4172
  ItemGroup.displayName = "ItemGroup";
3863
- var Item = react.forwardRef(function Item2({ variant = "default", size = "default", className, ...props }, ref) {
4173
+ var Item = react.forwardRef(function Item2({ variant = "default", size: sizeProp, className, ...props }, ref) {
4174
+ const size = useScaleSize("Item", sizeProp);
3864
4175
  return /* @__PURE__ */ jsxRuntime.jsx(
3865
4176
  "div",
3866
4177
  {
@@ -4126,7 +4437,8 @@ var Kbd = react.forwardRef(function Kbd2({ className, children, ...props }, ref)
4126
4437
  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { ref, className: chunkTPGAXYFU_cjs.cx("klun-kbd", className), ...props, children });
4127
4438
  });
4128
4439
  Kbd.displayName = "Kbd";
4129
- var KeyIcon = react.forwardRef(function KeyIcon2({ icon, color = "blue", appearance = "light", size = "md", css, className, style, ...props }, ref) {
4440
+ var KeyIcon = react.forwardRef(function KeyIcon2({ icon, color = "blue", appearance = "light", size: sizeProp, css, className, style, ...props }, ref) {
4441
+ const size = useScaleSize("KeyIcon", sizeProp);
4130
4442
  return /* @__PURE__ */ jsxRuntime.jsx(
4131
4443
  "span",
4132
4444
  {
@@ -4550,13 +4862,14 @@ var Money = react.forwardRef(function Money2({
4550
4862
  maximumFractionDigits,
4551
4863
  signDisplay,
4552
4864
  tone = "default",
4553
- size = "md",
4865
+ size: sizeProp,
4554
4866
  strikethrough = false,
4555
4867
  prefix,
4556
4868
  suffix,
4557
4869
  className,
4558
4870
  ...props
4559
4871
  }, ref) {
4872
+ const size = useScaleSize("Money", sizeProp);
4560
4873
  const { locale: ctxLocaleName } = useLocale();
4561
4874
  const locale = localeProp ?? ctxLocaleName;
4562
4875
  const { text, period: periodSuffix } = Format.money(value, {
@@ -5660,7 +5973,8 @@ var Statistic = react.forwardRef(function Statistic2({ label, value, prefix, suf
5660
5973
  });
5661
5974
  Statistic.displayName = "Statistic";
5662
5975
  var SIZES2 = { xs: 6, sm: 8, md: 10, lg: 12 };
5663
- var StatusDot = react.forwardRef(function StatusDot2({ tone = "neutral", size = "sm", pulse = false, label, className, style, ...props }, ref) {
5976
+ var StatusDot = react.forwardRef(function StatusDot2({ tone = "neutral", size: sizeProp, pulse = false, label, className, style, ...props }, ref) {
5977
+ const size = useScaleSize("StatusDot", sizeProp);
5664
5978
  const sizeStyle = { ["--klun-status-dot-size"]: `${SIZES2[size] ?? SIZES2.sm}px` };
5665
5979
  const dot = /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkTPGAXYFU_cjs.cx("klun-status-dot__dot", pulse && "klun-status-dot--pulse"), style: sizeStyle });
5666
5980
  if (label == null) {
@@ -7096,7 +7410,7 @@ function Table({
7096
7410
  style,
7097
7411
  ...props
7098
7412
  }) {
7099
- const providerDensity = useConfig().density;
7413
+ const providerDensity = useDensity();
7100
7414
  const density = densityProp ?? (providerDensity === "compact" ? "compact" : "comfortable");
7101
7415
  const densityClass = DENSITY[density] || DENSITY.comfortable;
7102
7416
  const { menu, setMenu } = useTableContextMenu();
@@ -8258,12 +8572,13 @@ var GaugeBar = react.forwardRef(function GaugeBar2({
8258
8572
  label,
8259
8573
  caption,
8260
8574
  color = "blue",
8261
- size = "md",
8575
+ size: sizeProp,
8262
8576
  showValue = true,
8263
8577
  className,
8264
8578
  style,
8265
8579
  ...props
8266
8580
  }, ref) {
8581
+ const size = useScaleSize("GaugeBar", sizeProp);
8267
8582
  const pct2 = Math.max(0, Math.min(100, max ? value / max * 100 : 0));
8268
8583
  const showHeader = label || showValue && caption !== false;
8269
8584
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10476,6 +10791,7 @@ var DatePicker = react.forwardRef(
10476
10791
  Input,
10477
10792
  {
10478
10793
  readOnly: true,
10794
+ className: "klun-input--trigger",
10479
10795
  disabled,
10480
10796
  value: label,
10481
10797
  placeholder: placeholder ?? "Select date",
@@ -10585,6 +10901,7 @@ var DateRangePicker = react.forwardRef(
10585
10901
  Input,
10586
10902
  {
10587
10903
  readOnly: true,
10904
+ className: "klun-input--trigger",
10588
10905
  disabled,
10589
10906
  value: label,
10590
10907
  placeholder: placeholder ?? "Select range",
@@ -10853,6 +11170,7 @@ var DateTimePicker = react.forwardRef(
10853
11170
  Input,
10854
11171
  {
10855
11172
  readOnly: true,
11173
+ className: "klun-input--trigger",
10856
11174
  disabled,
10857
11175
  value: label,
10858
11176
  placeholder: placeholder ?? "Select date & time",
@@ -11401,8 +11719,12 @@ Hint.displayName = "Hint";
11401
11719
 
11402
11720
  // src/components/overlays/overlayStack.ts
11403
11721
  var OVERLAY_LAYER = {
11722
+ pagePopup: 100,
11404
11723
  modalRoot: 1e3,
11405
- modalStep: 100};
11724
+ modalStep: 100,
11725
+ popupOffset: 20,
11726
+ tooltipOffset: 30
11727
+ };
11406
11728
  var stack = [];
11407
11729
  var scopeRoots = /* @__PURE__ */ new Map();
11408
11730
  var scrollLockCount = 0;
@@ -11619,7 +11941,16 @@ function useOverlayScope({
11619
11941
  layerBase: scopeId ? layerBaseFor(scopeId) : OVERLAY_LAYER.modalRoot
11620
11942
  };
11621
11943
  }
11622
- react.createContext(null);
11944
+ var OverlayLayerContext = react.createContext(null);
11945
+ function OverlayLayerProvider({ layerBase, children }) {
11946
+ return /* @__PURE__ */ jsxRuntime.jsx(OverlayLayerContext.Provider, { value: { layerBase }, children });
11947
+ }
11948
+ function useOverlayLayer(kind = "popup") {
11949
+ const ctx = react.useContext(OverlayLayerContext);
11950
+ const offset = kind === "tooltip" ? OVERLAY_LAYER.tooltipOffset : OVERLAY_LAYER.popupOffset;
11951
+ if (ctx) return ctx.layerBase + offset;
11952
+ return kind === "tooltip" ? OVERLAY_LAYER.modalRoot + OVERLAY_LAYER.tooltipOffset : OVERLAY_LAYER.pagePopup;
11953
+ }
11623
11954
  var Modal = react.forwardRef(function Modal2({
11624
11955
  open,
11625
11956
  onClose,
@@ -15936,6 +16267,7 @@ exports.Money = Money;
15936
16267
  exports.NavigationProgress = NavigationProgress;
15937
16268
  exports.Notification = Notification;
15938
16269
  exports.NumberFlow = NumberFlow;
16270
+ exports.OverlayLayerProvider = OverlayLayerProvider;
15939
16271
  exports.PageHeader = PageHeader;
15940
16272
  exports.Pagination = Pagination;
15941
16273
  exports.PasswordStrength = PasswordStrength;
@@ -15954,6 +16286,7 @@ exports.Result = Result;
15954
16286
  exports.RichEditor = RichEditor;
15955
16287
  exports.RichEditorToolbar = RichEditorToolbar;
15956
16288
  exports.Row = Row;
16289
+ exports.SIZE_CONTRACTS = SIZE_CONTRACTS;
15957
16290
  exports.SegmentedControl = SegmentedControl;
15958
16291
  exports.SegmentedProgress = SegmentedProgress;
15959
16292
  exports.Select = Select;
@@ -16021,23 +16354,29 @@ exports.ptBR = ptBR;
16021
16354
  exports.renderMarkdown = renderMarkdown;
16022
16355
  exports.reorderRows = reorderRows;
16023
16356
  exports.resolveMove = resolveMove;
16357
+ exports.resolveSize = resolveSize;
16024
16358
  exports.ruRU = ruRU;
16025
16359
  exports.summarizeHeatmap = summarizeHeatmap;
16360
+ exports.tierOf = tierOf;
16026
16361
  exports.toast = toast;
16027
16362
  exports.trTR = trTR;
16028
16363
  exports.useBreakpoint = useBreakpoint;
16029
16364
  exports.useConfig = useConfig;
16030
16365
  exports.useContextMenu = useContextMenu;
16366
+ exports.useDensity = useDensity;
16031
16367
  exports.useForm = useForm;
16032
16368
  exports.useLocale = useLocale;
16033
16369
  exports.useMappedSize = useMappedSize;
16034
16370
  exports.useMessage = useMessage;
16035
16371
  exports.useNotification = useNotification;
16372
+ exports.useOverlayLayer = useOverlayLayer;
16373
+ exports.useOverlayScope = useOverlayScope;
16374
+ exports.useScaleSize = useScaleSize;
16036
16375
  exports.useSize = useSize;
16037
16376
  exports.useStepItem = useStepItem;
16038
16377
  exports.useStepper = useStepper;
16039
16378
  exports.viVN = viVN;
16040
16379
  exports.zhCN = zhCN;
16041
16380
  exports.zhTW = zhTW;
16042
- //# sourceMappingURL=chunk-GDPWRDDU.cjs.map
16043
- //# sourceMappingURL=chunk-GDPWRDDU.cjs.map
16381
+ //# sourceMappingURL=chunk-DW4IUUWE.cjs.map
16382
+ //# sourceMappingURL=chunk-DW4IUUWE.cjs.map