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.
- package/CHANGELOG.md +478 -0
- package/dist/{chunk-K5GUNGCR.js → chunk-2S6ZRGPW.js} +348 -17
- package/dist/chunk-2S6ZRGPW.js.map +1 -0
- package/dist/{chunk-GDPWRDDU.cjs → chunk-DW4IUUWE.cjs} +355 -16
- package/dist/chunk-DW4IUUWE.cjs.map +1 -0
- package/dist/index.cjs +267 -235
- package/dist/index.d.cts +567 -8
- package/dist/index.d.ts +567 -8
- package/dist/index.js +1 -1
- package/dist/styles.css +820 -744
- package/dist/templates/index.cjs +943 -943
- package/dist/templates/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-GDPWRDDU.cjs.map +0 -1
- package/dist/chunk-K5GUNGCR.js.map +0 -1
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 =
|
|
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
|
|
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-
|
|
16043
|
-
//# sourceMappingURL=chunk-
|
|
16381
|
+
//# sourceMappingURL=chunk-DW4IUUWE.cjs.map
|
|
16382
|
+
//# sourceMappingURL=chunk-DW4IUUWE.cjs.map
|