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.
- package/CHANGELOG.md +493 -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 +821 -745
- 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
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 =
|
|
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
|
|
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-
|
|
15807
|
-
//# sourceMappingURL=chunk-
|
|
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
|