@deepnoid/ui 0.1.201 → 0.1.202
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/.turbo/turbo-build.log +174 -174
- package/dist/{chunk-YBXBTE5T.mjs → chunk-COGGK5Q6.mjs} +1 -1
- package/dist/{chunk-75ZDPLJ4.mjs → chunk-K2RW5KLO.mjs} +20 -0
- package/dist/components/list/index.mjs +3 -3
- package/dist/components/picker/index.js +17 -0
- package/dist/components/picker/index.mjs +5 -5
- package/dist/components/picker/timePicker.js +508 -60
- package/dist/components/picker/timePicker.mjs +10 -2
- package/dist/components/select/index.js +476 -28
- package/dist/components/select/index.mjs +9 -1
- package/dist/components/select/select.d.mts +1 -0
- package/dist/components/select/select.d.ts +1 -0
- package/dist/components/select/select.js +476 -28
- package/dist/components/select/select.mjs +9 -1
- package/dist/components/table/index.mjs +4 -4
- package/dist/components/table/table-body.mjs +1 -1
- package/dist/components/table/table-head.mjs +1 -1
- package/dist/components/table/table.mjs +1 -1
- package/dist/components/toast/index.mjs +2 -2
- package/dist/components/toast/use-toast.mjs +2 -2
- package/dist/index.js +17 -0
- package/dist/index.mjs +43 -43
- package/package.json +1 -1
- package/dist/{chunk-L3A3IEKZ.mjs → chunk-SSGCTWWW.mjs} +3 -3
|
@@ -2,9 +2,17 @@
|
|
|
2
2
|
import {
|
|
3
3
|
timePickerStyle,
|
|
4
4
|
timePicker_default
|
|
5
|
-
} from "../../chunk-
|
|
5
|
+
} from "../../chunk-COGGK5Q6.mjs";
|
|
6
6
|
import "../../chunk-QCEKPS7U.mjs";
|
|
7
|
-
import "../../chunk-
|
|
7
|
+
import "../../chunk-K2RW5KLO.mjs";
|
|
8
|
+
import "../../chunk-MY5U63QO.mjs";
|
|
9
|
+
import "../../chunk-4LUASWAN.mjs";
|
|
10
|
+
import "../../chunk-5VTYO3RF.mjs";
|
|
11
|
+
import "../../chunk-FFUZAOFL.mjs";
|
|
12
|
+
import "../../chunk-TB2DOWSM.mjs";
|
|
13
|
+
import "../../chunk-6WSACUIB.mjs";
|
|
14
|
+
import "../../chunk-LXHUO6VM.mjs";
|
|
15
|
+
import "../../chunk-SZL743JC.mjs";
|
|
8
16
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
9
17
|
import "../../chunk-YEYUS6DW.mjs";
|
|
10
18
|
import "../../chunk-E3G5QXSH.mjs";
|
|
@@ -107,7 +107,7 @@ __export(select_exports, {
|
|
|
107
107
|
module.exports = __toCommonJS(select_exports);
|
|
108
108
|
|
|
109
109
|
// src/components/select/select.tsx
|
|
110
|
-
var
|
|
110
|
+
var import_react3 = require("react");
|
|
111
111
|
var import_react_dom = require("react-dom");
|
|
112
112
|
|
|
113
113
|
// src/utils/tailwind-variants.ts
|
|
@@ -5198,10 +5198,441 @@ function toVal(mix) {
|
|
|
5198
5198
|
return str;
|
|
5199
5199
|
}
|
|
5200
5200
|
|
|
5201
|
-
// src/components/
|
|
5201
|
+
// src/components/ripple/ripple.tsx
|
|
5202
|
+
var import_framer_motion = require("framer-motion");
|
|
5202
5203
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
5204
|
+
var Ripple = (props) => {
|
|
5205
|
+
const { ripples = [], motionProps, color = "currentColor", style, onClear } = props;
|
|
5206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: ripples.map((ripple) => {
|
|
5207
|
+
const duration = (0, import_framer_motion.clamp)(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
|
|
5208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
5209
|
+
import_framer_motion.m.span,
|
|
5210
|
+
{
|
|
5211
|
+
animate: { transform: "scale(2)", opacity: 0 },
|
|
5212
|
+
className: "deepnoidui-ripple",
|
|
5213
|
+
exit: { opacity: 0 },
|
|
5214
|
+
initial: { transform: "scale(0)", opacity: 0.35 },
|
|
5215
|
+
style: {
|
|
5216
|
+
position: "absolute",
|
|
5217
|
+
backgroundColor: color,
|
|
5218
|
+
borderRadius: "100%",
|
|
5219
|
+
transformOrigin: "center",
|
|
5220
|
+
pointerEvents: "none",
|
|
5221
|
+
overflow: "hidden",
|
|
5222
|
+
inset: 0,
|
|
5223
|
+
zIndex: 0,
|
|
5224
|
+
top: ripple.y,
|
|
5225
|
+
left: ripple.x,
|
|
5226
|
+
width: `${ripple.size}px`,
|
|
5227
|
+
height: `${ripple.size}px`,
|
|
5228
|
+
...style
|
|
5229
|
+
},
|
|
5230
|
+
transition: { duration },
|
|
5231
|
+
onAnimationComplete: () => {
|
|
5232
|
+
onClear(ripple.key);
|
|
5233
|
+
},
|
|
5234
|
+
...motionProps
|
|
5235
|
+
}
|
|
5236
|
+
) }) }, ripple.key);
|
|
5237
|
+
}) });
|
|
5238
|
+
};
|
|
5239
|
+
Ripple.displayName = "HeroUI.Ripple";
|
|
5240
|
+
var ripple_default = Ripple;
|
|
5241
|
+
|
|
5242
|
+
// src/components/ripple/useRipple.ts
|
|
5243
|
+
var import_react = require("react");
|
|
5244
|
+
function useRipple(props = {}) {
|
|
5245
|
+
const [ripples, setRipples] = (0, import_react.useState)([]);
|
|
5246
|
+
const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
|
|
5247
|
+
const onPress = (0, import_react.useCallback)((event) => {
|
|
5248
|
+
const trigger = event.currentTarget;
|
|
5249
|
+
const rect = trigger.getBoundingClientRect();
|
|
5250
|
+
const size = Math.max(trigger.clientWidth, trigger.clientHeight);
|
|
5251
|
+
setRipples((prevRipples) => [
|
|
5252
|
+
...prevRipples,
|
|
5253
|
+
{
|
|
5254
|
+
key: getUniqueID(prevRipples.length.toString()),
|
|
5255
|
+
size,
|
|
5256
|
+
x: event.clientX - rect.left - size / 2,
|
|
5257
|
+
y: event.clientY - rect.top - size / 2
|
|
5258
|
+
}
|
|
5259
|
+
]);
|
|
5260
|
+
}, []);
|
|
5261
|
+
const onClear = (0, import_react.useCallback)((key) => {
|
|
5262
|
+
setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
|
|
5263
|
+
}, []);
|
|
5264
|
+
return { ripples, onClear, onPress, ...props };
|
|
5265
|
+
}
|
|
5266
|
+
|
|
5267
|
+
// src/components/button/icon-button.tsx
|
|
5268
|
+
var import_react2 = require("react");
|
|
5269
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
5270
|
+
var IconButton = (0, import_react2.forwardRef)((props, ref) => {
|
|
5271
|
+
const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
|
|
5272
|
+
const { classNames, name, disableRipple, disabled, isLoading, size, full, isInGroup, onMouseDown, ...buttonProps } = {
|
|
5273
|
+
...localProps,
|
|
5274
|
+
...variantProps
|
|
5275
|
+
};
|
|
5276
|
+
const slots = (0, import_react2.useMemo)(() => iconButtonStyle({ ...variantProps }), [variantProps]);
|
|
5277
|
+
const { onPress, onClear, ripples } = useRipple();
|
|
5278
|
+
const handleRipple = (0, import_react2.useCallback)(
|
|
5279
|
+
(e) => {
|
|
5280
|
+
if (!disableRipple && !disabled) {
|
|
5281
|
+
onPress(e);
|
|
5282
|
+
}
|
|
5283
|
+
},
|
|
5284
|
+
[disableRipple, disabled, onPress]
|
|
5285
|
+
);
|
|
5286
|
+
const handleMouseDown = (0, import_react2.useCallback)(
|
|
5287
|
+
(e) => {
|
|
5288
|
+
onMouseDown == null ? void 0 : onMouseDown(e);
|
|
5289
|
+
handleRipple(e);
|
|
5290
|
+
},
|
|
5291
|
+
[onMouseDown, handleRipple]
|
|
5292
|
+
);
|
|
5293
|
+
const rippleProps = (0, import_react2.useMemo)(() => ({ ripples, onClear }), [ripples, onClear]);
|
|
5294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
5295
|
+
"button",
|
|
5296
|
+
{
|
|
5297
|
+
...buttonProps,
|
|
5298
|
+
onMouseDown: handleMouseDown,
|
|
5299
|
+
ref,
|
|
5300
|
+
disabled: disabled || isLoading,
|
|
5301
|
+
"data-loading": isLoading,
|
|
5302
|
+
className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
|
|
5303
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
5304
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name, size }),
|
|
5305
|
+
!disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...rippleProps })
|
|
5306
|
+
] })
|
|
5307
|
+
}
|
|
5308
|
+
);
|
|
5309
|
+
});
|
|
5310
|
+
IconButton.displayName = "IconButton";
|
|
5311
|
+
var icon_button_default = IconButton;
|
|
5312
|
+
var iconButtonStyle = tv({
|
|
5313
|
+
slots: {
|
|
5314
|
+
base: [
|
|
5315
|
+
"relative",
|
|
5316
|
+
"flex",
|
|
5317
|
+
"items-center",
|
|
5318
|
+
"justify-center",
|
|
5319
|
+
"whitespace-nowrap",
|
|
5320
|
+
"transition",
|
|
5321
|
+
"duration-200",
|
|
5322
|
+
"select-none",
|
|
5323
|
+
"overflow-hidden",
|
|
5324
|
+
"box-border"
|
|
5325
|
+
]
|
|
5326
|
+
},
|
|
5327
|
+
variants: {
|
|
5328
|
+
variant: {
|
|
5329
|
+
solid: [],
|
|
5330
|
+
soft: [],
|
|
5331
|
+
outline: [],
|
|
5332
|
+
ghost: []
|
|
5333
|
+
},
|
|
5334
|
+
color: {
|
|
5335
|
+
primary: [],
|
|
5336
|
+
secondary: [],
|
|
5337
|
+
neutral: [],
|
|
5338
|
+
info: [],
|
|
5339
|
+
success: [],
|
|
5340
|
+
warning: [],
|
|
5341
|
+
danger: []
|
|
5342
|
+
},
|
|
5343
|
+
size: {
|
|
5344
|
+
sm: {
|
|
5345
|
+
base: ["w-[24px]", "h-[24px]", "rounded-sm"]
|
|
5346
|
+
},
|
|
5347
|
+
md: {
|
|
5348
|
+
base: ["w-[32px]", "h-[32px]", "rounded-md"]
|
|
5349
|
+
},
|
|
5350
|
+
lg: {
|
|
5351
|
+
base: ["w-[40px]", "h-[40px]", "rounded-lg"]
|
|
5352
|
+
},
|
|
5353
|
+
xl: {
|
|
5354
|
+
base: ["w-[50px]", "h-[50px]", "rounded-xl"]
|
|
5355
|
+
}
|
|
5356
|
+
},
|
|
5357
|
+
isLoading: {
|
|
5358
|
+
true: {}
|
|
5359
|
+
},
|
|
5360
|
+
disabled: {
|
|
5361
|
+
true: {
|
|
5362
|
+
base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
|
|
5363
|
+
}
|
|
5364
|
+
},
|
|
5365
|
+
isInGroup: {
|
|
5366
|
+
true: {
|
|
5367
|
+
base: [
|
|
5368
|
+
"[&:not(:first-child):not(:last-child)]:rounded-none",
|
|
5369
|
+
"first:rounded-r-none",
|
|
5370
|
+
"last:rounded-l-none",
|
|
5371
|
+
"[&:not(:first-child)]:border-l-0"
|
|
5372
|
+
]
|
|
5373
|
+
}
|
|
5374
|
+
}
|
|
5375
|
+
},
|
|
5376
|
+
compoundVariants: [
|
|
5377
|
+
{
|
|
5378
|
+
variant: "solid",
|
|
5379
|
+
color: "primary",
|
|
5380
|
+
class: {
|
|
5381
|
+
base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5382
|
+
}
|
|
5383
|
+
},
|
|
5384
|
+
{
|
|
5385
|
+
variant: "solid",
|
|
5386
|
+
color: "secondary",
|
|
5387
|
+
class: {
|
|
5388
|
+
base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5389
|
+
}
|
|
5390
|
+
},
|
|
5391
|
+
{
|
|
5392
|
+
variant: "solid",
|
|
5393
|
+
color: "neutral",
|
|
5394
|
+
class: {
|
|
5395
|
+
base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5396
|
+
}
|
|
5397
|
+
},
|
|
5398
|
+
{
|
|
5399
|
+
variant: "solid",
|
|
5400
|
+
color: "info",
|
|
5401
|
+
class: {
|
|
5402
|
+
base: ["text-white", "bg-info-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5403
|
+
}
|
|
5404
|
+
},
|
|
5405
|
+
{
|
|
5406
|
+
variant: "solid",
|
|
5407
|
+
color: "success",
|
|
5408
|
+
class: {
|
|
5409
|
+
base: ["text-white", "bg-success-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5410
|
+
}
|
|
5411
|
+
},
|
|
5412
|
+
{
|
|
5413
|
+
variant: "solid",
|
|
5414
|
+
color: "warning",
|
|
5415
|
+
class: {
|
|
5416
|
+
base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5417
|
+
}
|
|
5418
|
+
},
|
|
5419
|
+
{
|
|
5420
|
+
variant: "solid",
|
|
5421
|
+
color: "danger",
|
|
5422
|
+
class: {
|
|
5423
|
+
base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
|
|
5424
|
+
}
|
|
5425
|
+
},
|
|
5426
|
+
// soft
|
|
5427
|
+
{
|
|
5428
|
+
variant: "soft",
|
|
5429
|
+
color: "primary",
|
|
5430
|
+
class: {
|
|
5431
|
+
base: ["text-primary-main", "bg-primary-soft", "!border-primary-soft", "hover:!border-primary-light"]
|
|
5432
|
+
}
|
|
5433
|
+
},
|
|
5434
|
+
{
|
|
5435
|
+
variant: "soft",
|
|
5436
|
+
color: "secondary",
|
|
5437
|
+
class: {
|
|
5438
|
+
base: ["text-secondary-main", "bg-secondary-soft", "!border-secondary-soft", "hover:!border-secondary-light"]
|
|
5439
|
+
}
|
|
5440
|
+
},
|
|
5441
|
+
{
|
|
5442
|
+
variant: "soft",
|
|
5443
|
+
color: "neutral",
|
|
5444
|
+
class: {
|
|
5445
|
+
base: ["text-neutral-main", "bg-neutral-soft", "!border-neutral-soft", "hover:!border-neutral-light"]
|
|
5446
|
+
}
|
|
5447
|
+
},
|
|
5448
|
+
{
|
|
5449
|
+
variant: "soft",
|
|
5450
|
+
color: "info",
|
|
5451
|
+
class: {
|
|
5452
|
+
base: ["text-info-main", "bg-info-soft", "!border-info-soft", "hover:!border-info-light"]
|
|
5453
|
+
}
|
|
5454
|
+
},
|
|
5455
|
+
{
|
|
5456
|
+
variant: "soft",
|
|
5457
|
+
color: "success",
|
|
5458
|
+
class: {
|
|
5459
|
+
base: ["text-success-main", "bg-success-soft", "!border-success-soft", "hover:!border-success-light"]
|
|
5460
|
+
}
|
|
5461
|
+
},
|
|
5462
|
+
{
|
|
5463
|
+
variant: "soft",
|
|
5464
|
+
color: "warning",
|
|
5465
|
+
class: {
|
|
5466
|
+
base: ["text-warning-main", "bg-warning-soft", "!border-warning-soft", "hover:!border-warning-light"]
|
|
5467
|
+
}
|
|
5468
|
+
},
|
|
5469
|
+
{
|
|
5470
|
+
variant: "soft",
|
|
5471
|
+
color: "danger",
|
|
5472
|
+
class: {
|
|
5473
|
+
base: ["text-danger-main", "bg-danger-soft", "!border-danger-soft", "hover:!border-danger-light"]
|
|
5474
|
+
}
|
|
5475
|
+
},
|
|
5476
|
+
// outline
|
|
5477
|
+
{
|
|
5478
|
+
variant: "outline",
|
|
5479
|
+
color: "primary",
|
|
5480
|
+
class: {
|
|
5481
|
+
base: ["bg-body-background", "!border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
|
|
5482
|
+
}
|
|
5483
|
+
},
|
|
5484
|
+
{
|
|
5485
|
+
variant: "outline",
|
|
5486
|
+
color: "secondary",
|
|
5487
|
+
class: {
|
|
5488
|
+
base: ["bg-body-background", "!border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
|
|
5489
|
+
}
|
|
5490
|
+
},
|
|
5491
|
+
{
|
|
5492
|
+
variant: "outline",
|
|
5493
|
+
color: "neutral",
|
|
5494
|
+
class: {
|
|
5495
|
+
base: ["bg-body-background", "!border-neutral-light", "text-neutral-main", "hover:bg-neutral-soft"]
|
|
5496
|
+
}
|
|
5497
|
+
},
|
|
5498
|
+
{
|
|
5499
|
+
variant: "outline",
|
|
5500
|
+
color: "info",
|
|
5501
|
+
class: {
|
|
5502
|
+
base: ["bg-body-background", "!border-info-main", "text-info-main", "hover:bg-info-soft"]
|
|
5503
|
+
}
|
|
5504
|
+
},
|
|
5505
|
+
{
|
|
5506
|
+
variant: "outline",
|
|
5507
|
+
color: "success",
|
|
5508
|
+
class: {
|
|
5509
|
+
base: ["bg-body-background", "!border-success-main", "text-success-main", "hover:bg-success-soft"]
|
|
5510
|
+
}
|
|
5511
|
+
},
|
|
5512
|
+
{
|
|
5513
|
+
variant: "outline",
|
|
5514
|
+
color: "warning",
|
|
5515
|
+
class: {
|
|
5516
|
+
base: ["bg-body-background", "!border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
|
|
5517
|
+
}
|
|
5518
|
+
},
|
|
5519
|
+
{
|
|
5520
|
+
variant: "outline",
|
|
5521
|
+
color: "danger",
|
|
5522
|
+
class: {
|
|
5523
|
+
base: ["bg-body-background", "!border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
|
|
5524
|
+
}
|
|
5525
|
+
},
|
|
5526
|
+
// ghost
|
|
5527
|
+
{
|
|
5528
|
+
variant: "ghost",
|
|
5529
|
+
color: "primary",
|
|
5530
|
+
class: {
|
|
5531
|
+
base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
|
|
5532
|
+
}
|
|
5533
|
+
},
|
|
5534
|
+
{
|
|
5535
|
+
variant: "ghost",
|
|
5536
|
+
color: "secondary",
|
|
5537
|
+
class: {
|
|
5538
|
+
base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
|
|
5539
|
+
}
|
|
5540
|
+
},
|
|
5541
|
+
{
|
|
5542
|
+
variant: "ghost",
|
|
5543
|
+
color: "neutral",
|
|
5544
|
+
class: {
|
|
5545
|
+
base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
|
|
5546
|
+
}
|
|
5547
|
+
},
|
|
5548
|
+
{
|
|
5549
|
+
variant: "ghost",
|
|
5550
|
+
color: "info",
|
|
5551
|
+
class: {
|
|
5552
|
+
base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
|
|
5553
|
+
}
|
|
5554
|
+
},
|
|
5555
|
+
{
|
|
5556
|
+
variant: "ghost",
|
|
5557
|
+
color: "success",
|
|
5558
|
+
class: {
|
|
5559
|
+
base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
|
|
5560
|
+
}
|
|
5561
|
+
},
|
|
5562
|
+
{
|
|
5563
|
+
variant: "ghost",
|
|
5564
|
+
color: "warning",
|
|
5565
|
+
class: {
|
|
5566
|
+
base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
|
|
5567
|
+
}
|
|
5568
|
+
},
|
|
5569
|
+
{
|
|
5570
|
+
variant: "ghost",
|
|
5571
|
+
color: "danger",
|
|
5572
|
+
class: {
|
|
5573
|
+
base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
|
|
5574
|
+
}
|
|
5575
|
+
},
|
|
5576
|
+
// soft/outline + size
|
|
5577
|
+
{
|
|
5578
|
+
variant: ["soft", "outline"],
|
|
5579
|
+
size: "sm",
|
|
5580
|
+
class: {
|
|
5581
|
+
base: ["border-sm"]
|
|
5582
|
+
}
|
|
5583
|
+
},
|
|
5584
|
+
{
|
|
5585
|
+
variant: ["soft", "outline"],
|
|
5586
|
+
size: "md",
|
|
5587
|
+
class: {
|
|
5588
|
+
base: ["border-md"]
|
|
5589
|
+
}
|
|
5590
|
+
},
|
|
5591
|
+
{
|
|
5592
|
+
variant: ["soft", "outline"],
|
|
5593
|
+
size: "lg",
|
|
5594
|
+
class: {
|
|
5595
|
+
base: ["border-lg"]
|
|
5596
|
+
}
|
|
5597
|
+
},
|
|
5598
|
+
{
|
|
5599
|
+
variant: ["soft", "outline"],
|
|
5600
|
+
size: "xl",
|
|
5601
|
+
class: {
|
|
5602
|
+
base: ["border-xl"]
|
|
5603
|
+
}
|
|
5604
|
+
},
|
|
5605
|
+
// disabled + variant
|
|
5606
|
+
{
|
|
5607
|
+
variant: ["soft", "ghost"],
|
|
5608
|
+
disabled: true,
|
|
5609
|
+
class: {
|
|
5610
|
+
base: ["!border-neutral-soft"]
|
|
5611
|
+
}
|
|
5612
|
+
},
|
|
5613
|
+
{
|
|
5614
|
+
variant: ["outline"],
|
|
5615
|
+
disabled: true,
|
|
5616
|
+
class: {
|
|
5617
|
+
base: ["!border-neutral-light"]
|
|
5618
|
+
}
|
|
5619
|
+
}
|
|
5620
|
+
],
|
|
5621
|
+
defaultVariants: {
|
|
5622
|
+
size: "md",
|
|
5623
|
+
variant: "solid",
|
|
5624
|
+
color: "primary",
|
|
5625
|
+
full: false,
|
|
5626
|
+
disabled: false,
|
|
5627
|
+
isLoading: false,
|
|
5628
|
+
isInGroup: false
|
|
5629
|
+
}
|
|
5630
|
+
});
|
|
5631
|
+
|
|
5632
|
+
// src/components/select/select.tsx
|
|
5633
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
5203
5634
|
var ALL_OPTION_VALUE = "__ALL__";
|
|
5204
|
-
var Select = (0,
|
|
5635
|
+
var Select = (0, import_react3.forwardRef)((originalProps, ref) => {
|
|
5205
5636
|
var _a, _b, _c;
|
|
5206
5637
|
const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
|
|
5207
5638
|
const {
|
|
@@ -5217,16 +5648,17 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5217
5648
|
dropdownIconName = "brace-up",
|
|
5218
5649
|
optionIconName,
|
|
5219
5650
|
optionIconPlacement,
|
|
5651
|
+
clearable,
|
|
5220
5652
|
...inputProps
|
|
5221
5653
|
} = props;
|
|
5222
|
-
const slots = (0,
|
|
5223
|
-
const [selectedOptions, setSelectedOptions] = (0,
|
|
5224
|
-
const [targetRect, setTargetRect] = (0,
|
|
5225
|
-
const [optionWrapperHeight, setOptionWrapperHeight] = (0,
|
|
5226
|
-
const [isVisible, setIsVisible] = (0,
|
|
5227
|
-
const [isOpen, setIsOpen] = (0,
|
|
5228
|
-
const selectWrapperRef = (0,
|
|
5229
|
-
const optionWrapperRef = (0,
|
|
5654
|
+
const slots = (0, import_react3.useMemo)(() => select({ ...variantProps }), [variantProps]);
|
|
5655
|
+
const [selectedOptions, setSelectedOptions] = (0, import_react3.useState)(defaultSelectedOptions || []);
|
|
5656
|
+
const [targetRect, setTargetRect] = (0, import_react3.useState)(null);
|
|
5657
|
+
const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react3.useState)(0);
|
|
5658
|
+
const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
|
|
5659
|
+
const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
|
|
5660
|
+
const selectWrapperRef = (0, import_react3.useRef)(null);
|
|
5661
|
+
const optionWrapperRef = (0, import_react3.useRef)(null);
|
|
5230
5662
|
const isControlled = originalProps.value !== void 0;
|
|
5231
5663
|
const openSelect = () => {
|
|
5232
5664
|
if (selectWrapperRef.current) {
|
|
@@ -5270,7 +5702,12 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5270
5702
|
setSelectedOptions(nextOptions);
|
|
5271
5703
|
onChange == null ? void 0 : onChange(nextOptions);
|
|
5272
5704
|
};
|
|
5273
|
-
|
|
5705
|
+
const handleClear = (e) => {
|
|
5706
|
+
e.stopPropagation();
|
|
5707
|
+
setSelectedOptions([]);
|
|
5708
|
+
onChange == null ? void 0 : onChange([]);
|
|
5709
|
+
};
|
|
5710
|
+
(0, import_react3.useEffect)(() => {
|
|
5274
5711
|
const handleClickOutside = (e) => {
|
|
5275
5712
|
var _a2;
|
|
5276
5713
|
const target = e.target;
|
|
@@ -5281,12 +5718,12 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5281
5718
|
window.addEventListener("mousedown", handleClickOutside);
|
|
5282
5719
|
return () => window.removeEventListener("mousedown", handleClickOutside);
|
|
5283
5720
|
}, []);
|
|
5284
|
-
(0,
|
|
5721
|
+
(0, import_react3.useEffect)(() => {
|
|
5285
5722
|
if (optionWrapperRef.current) {
|
|
5286
5723
|
setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
|
|
5287
5724
|
}
|
|
5288
5725
|
}, [targetRect]);
|
|
5289
|
-
(0,
|
|
5726
|
+
(0, import_react3.useEffect)(() => {
|
|
5290
5727
|
if (isControlled) {
|
|
5291
5728
|
const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
|
|
5292
5729
|
const matched = options.filter((opt) => valueArray.includes(opt.value));
|
|
@@ -5317,7 +5754,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5317
5754
|
renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
|
|
5318
5755
|
}
|
|
5319
5756
|
return (0, import_react_dom.createPortal)(
|
|
5320
|
-
/* @__PURE__ */ (0,
|
|
5757
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5321
5758
|
"div",
|
|
5322
5759
|
{
|
|
5323
5760
|
ref: optionWrapperRef,
|
|
@@ -5335,7 +5772,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5335
5772
|
},
|
|
5336
5773
|
children: renderedOptions.map((option) => {
|
|
5337
5774
|
const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
|
|
5338
|
-
return /* @__PURE__ */ (0,
|
|
5775
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5339
5776
|
"div",
|
|
5340
5777
|
{
|
|
5341
5778
|
role: "option",
|
|
@@ -5345,9 +5782,9 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5345
5782
|
optionIconPlacement === "end" ? "justify-between" : ""
|
|
5346
5783
|
),
|
|
5347
5784
|
children: [
|
|
5348
|
-
optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0,
|
|
5785
|
+
optionIconName && optionIconPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: optionIconName, size: originalProps.size }),
|
|
5349
5786
|
option.label,
|
|
5350
|
-
optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0,
|
|
5787
|
+
optionIconName && optionIconPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: optionIconName, size: originalProps.size })
|
|
5351
5788
|
]
|
|
5352
5789
|
},
|
|
5353
5790
|
option.value
|
|
@@ -5358,8 +5795,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5358
5795
|
document.body
|
|
5359
5796
|
);
|
|
5360
5797
|
};
|
|
5361
|
-
return /* @__PURE__ */ (0,
|
|
5362
|
-
/* @__PURE__ */ (0,
|
|
5798
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
5799
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5363
5800
|
"div",
|
|
5364
5801
|
{
|
|
5365
5802
|
className: clsx(
|
|
@@ -5367,9 +5804,9 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5367
5804
|
variantProps.direction === "horizon" ? slots.horizon({ class: classNames == null ? void 0 : classNames.horizon }) : slots.vertical({ class: classNames == null ? void 0 : classNames.vertical })
|
|
5368
5805
|
),
|
|
5369
5806
|
children: [
|
|
5370
|
-
label && /* @__PURE__ */ (0,
|
|
5371
|
-
/* @__PURE__ */ (0,
|
|
5372
|
-
/* @__PURE__ */ (0,
|
|
5807
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
|
|
5808
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
|
|
5809
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
5373
5810
|
"div",
|
|
5374
5811
|
{
|
|
5375
5812
|
"data-expanded": isOpen,
|
|
@@ -5380,7 +5817,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5380
5817
|
ref: selectWrapperRef,
|
|
5381
5818
|
onClick: handleToggleSelect,
|
|
5382
5819
|
children: [
|
|
5383
|
-
/* @__PURE__ */ (0,
|
|
5820
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5384
5821
|
"input",
|
|
5385
5822
|
{
|
|
5386
5823
|
...inputProps,
|
|
@@ -5395,8 +5832,19 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5395
5832
|
size: 0
|
|
5396
5833
|
}
|
|
5397
5834
|
),
|
|
5398
|
-
/* @__PURE__ */ (0,
|
|
5399
|
-
/* @__PURE__ */ (0,
|
|
5835
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "hidden", name: inputProps.name, value: selectedValue }),
|
|
5836
|
+
clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5837
|
+
icon_button_default,
|
|
5838
|
+
{
|
|
5839
|
+
name: "close",
|
|
5840
|
+
variant: "ghost",
|
|
5841
|
+
size: "sm",
|
|
5842
|
+
color: "neutral",
|
|
5843
|
+
onClick: handleClear,
|
|
5844
|
+
classNames: { base: "pr-[2px]" }
|
|
5845
|
+
}
|
|
5846
|
+
),
|
|
5847
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
5400
5848
|
Icon_default,
|
|
5401
5849
|
{
|
|
5402
5850
|
name: dropdownIconName,
|
|
@@ -5407,8 +5855,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
|
|
|
5407
5855
|
]
|
|
5408
5856
|
}
|
|
5409
5857
|
),
|
|
5410
|
-
helperMessage && !errorMessage && /* @__PURE__ */ (0,
|
|
5411
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
5858
|
+
helperMessage && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.helperMessage({ class: classNames == null ? void 0 : classNames.helperMessage }), children: helperMessage }),
|
|
5859
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: clsx("error", slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })), children: errorMessage })
|
|
5412
5860
|
] })
|
|
5413
5861
|
]
|
|
5414
5862
|
}
|
|
@@ -2,7 +2,15 @@
|
|
|
2
2
|
import "../../chunk-QCEKPS7U.mjs";
|
|
3
3
|
import {
|
|
4
4
|
select_default
|
|
5
|
-
} from "../../chunk-
|
|
5
|
+
} from "../../chunk-K2RW5KLO.mjs";
|
|
6
|
+
import "../../chunk-MY5U63QO.mjs";
|
|
7
|
+
import "../../chunk-4LUASWAN.mjs";
|
|
8
|
+
import "../../chunk-5VTYO3RF.mjs";
|
|
9
|
+
import "../../chunk-FFUZAOFL.mjs";
|
|
10
|
+
import "../../chunk-TB2DOWSM.mjs";
|
|
11
|
+
import "../../chunk-6WSACUIB.mjs";
|
|
12
|
+
import "../../chunk-LXHUO6VM.mjs";
|
|
13
|
+
import "../../chunk-SZL743JC.mjs";
|
|
6
14
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
7
15
|
import "../../chunk-YEYUS6DW.mjs";
|
|
8
16
|
import "../../chunk-E3G5QXSH.mjs";
|
|
@@ -28,6 +28,7 @@ interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value
|
|
|
28
28
|
dropdownIconName?: IconName;
|
|
29
29
|
optionIconName?: IconName;
|
|
30
30
|
optionIconPlacement?: OptionIconPlacement;
|
|
31
|
+
clearable?: boolean;
|
|
31
32
|
}
|
|
32
33
|
type SelectProps = Props & SelectVariantProps;
|
|
33
34
|
declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
@@ -28,6 +28,7 @@ interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value
|
|
|
28
28
|
dropdownIconName?: IconName;
|
|
29
29
|
optionIconName?: IconName;
|
|
30
30
|
optionIconPlacement?: OptionIconPlacement;
|
|
31
|
+
clearable?: boolean;
|
|
31
32
|
}
|
|
32
33
|
type SelectProps = Props & SelectVariantProps;
|
|
33
34
|
declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|