@seedgrid/fe-components 2026.3.11 → 2026.3.13
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/LICENSE +21 -0
- package/README.md +181 -0
- package/dist/buttons/SgButton.d.ts +2 -0
- package/dist/buttons/SgButton.d.ts.map +1 -1
- package/dist/buttons/SgButton.js +4 -3
- package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts.map +1 -1
- package/dist/digits/roller3d-digit/SgRoller3DDigit.js +4 -2
- package/dist/digits/segment-digit/SgSegmentDigit.js +1 -1
- package/dist/gadgets/calendar/SgCalendar.js +1 -1
- package/dist/gadgets/clock/SgClock.d.ts.map +1 -1
- package/dist/gadgets/clock/SgClock.js +10 -5
- package/dist/gadgets/clock/themes/SgClockThemePicker.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/SgClockThemePicker.js +3 -3
- package/dist/gadgets/clock/themes/renderTheme.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/renderTheme.js +3 -1
- package/dist/gadgets/clock/themes/useDarkFlag.d.ts.map +1 -1
- package/dist/gadgets/clock/themes/useDarkFlag.js +34 -3
- package/dist/inputs/SgAutocomplete.js +3 -3
- package/dist/inputs/SgCombobox.js +4 -4
- package/dist/inputs/SgDatatable.js +3 -3
- package/dist/inputs/SgInputCurrency.d.ts.map +1 -1
- package/dist/inputs/SgInputCurrency.js +5 -3
- package/dist/inputs/SgInputDate.js +2 -2
- package/dist/inputs/SgInputNumber.d.ts.map +1 -1
- package/dist/inputs/SgInputNumber.js +8 -4
- package/dist/inputs/SgInputOTP.js +1 -1
- package/dist/inputs/SgInputSelect.js +3 -3
- package/dist/inputs/SgInputText.d.ts.map +1 -1
- package/dist/inputs/SgInputText.js +8 -4
- package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
- package/dist/inputs/SgInputTextArea.js +8 -4
- package/dist/inputs/SgOrderList.js +2 -2
- package/dist/inputs/SgPickList.js +3 -3
- package/dist/inputs/SgTextEditor.d.ts.map +1 -1
- package/dist/inputs/SgTextEditor.js +9 -4
- package/dist/inputs/SgToggleSwitch.js +1 -1
- package/dist/layout/SgCarousel.js +3 -3
- package/dist/layout/SgGroupBox.js +1 -1
- package/dist/layout/SgMenu.js +1 -1
- package/dist/menus/SgDockMenu.d.ts.map +1 -1
- package/dist/menus/SgDockMenu.js +20 -10
- package/dist/others/SgPlayground.d.ts.map +1 -1
- package/dist/others/SgPlayground.js +24 -1
- package/dist/overlay/SgDialog.d.ts.map +1 -1
- package/dist/overlay/SgDialog.js +203 -1
- package/dist/sandbox.cjs +80 -80
- package/dist/wizard/SgWizard.js +4 -4
- package/package.json +5 -4
|
@@ -407,14 +407,16 @@ function SgInputCurrencyBase(props) {
|
|
|
407
407
|
const hasSuffix = canShowClear || iconButtonsCount > 0;
|
|
408
408
|
const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
|
|
409
409
|
const paddingRight = hasSuffix ? "pr-10" : "pr-3";
|
|
410
|
-
const baseClass = "peer h-11 w-full rounded-md text-sm placeholder-transparent focus:outline-none text-right";
|
|
410
|
+
const baseClass = "peer h-11 w-full rounded-md text-sm text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] placeholder-transparent disabled:text-[var(--sg-input-disabled-fg,hsl(var(--muted-foreground)))] disabled:bg-[var(--sg-input-disabled-bg,hsl(var(--muted)))] focus:outline-none text-right";
|
|
411
411
|
const hasError = Boolean(props.error ?? internalError);
|
|
412
412
|
const borderClass = (props.withBorder ?? true) || hasError
|
|
413
413
|
? hasError
|
|
414
414
|
? "border border-[hsl(var(--destructive))] shadow-sm focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
415
415
|
: "border border-border shadow-sm focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
|
|
416
416
|
: "border border-transparent";
|
|
417
|
-
const bgClass = props.filled
|
|
417
|
+
const bgClass = props.filled
|
|
418
|
+
? "bg-muted/40"
|
|
419
|
+
: "bg-[var(--sg-input-bg,hsl(var(--background)))]";
|
|
418
420
|
const finalClass = [
|
|
419
421
|
baseClass,
|
|
420
422
|
borderClass,
|
|
@@ -452,7 +454,7 @@ function SgInputCurrencyBase(props) {
|
|
|
452
454
|
...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
453
455
|
...(inputProps.style ?? {})
|
|
454
456
|
}, inputMode: props.textInputType ?? "decimal", readOnly: props.readOnly, disabled: props.enabled === false, ...restInputProps, ref: mergeRefs(inputRef, inputProps?.ref), onKeyDown: handleKeyDown, onChange: handleChange, onPaste: handlePaste, onBlur: handleBlur, onFocus: handleFocus }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, _jsxs("label", { htmlFor: props.id, className: [
|
|
455
|
-
"absolute bg-
|
|
457
|
+
"absolute bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
456
458
|
isFilled
|
|
457
459
|
? "-top-2 left-3 text-xs"
|
|
458
460
|
: `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
|
|
@@ -110,7 +110,7 @@ export function SgInputDate(props) {
|
|
|
110
110
|
: props.elevation === "lg"
|
|
111
111
|
? "shadow-lg"
|
|
112
112
|
: "shadow-sm";
|
|
113
|
-
const baseClass = "peer h-11 w-full rounded-md bg-
|
|
113
|
+
const baseClass = "peer h-11 w-full rounded-md bg-[var(--sg-input-bg,hsl(var(--background)))] text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] pl-3 pr-7 py-2.5 text-sm placeholder-transparent focus:outline-none";
|
|
114
114
|
const borderClass = hasError
|
|
115
115
|
? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
116
116
|
: "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
|
|
@@ -121,7 +121,7 @@ export function SgInputDate(props) {
|
|
|
121
121
|
cursor: pointer;
|
|
122
122
|
}
|
|
123
123
|
` }), showStaticLabel && labelText ? (_jsx("label", { htmlFor: rest.id, className: [
|
|
124
|
-
"pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-
|
|
124
|
+
"pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 text-[11px] font-medium leading-none",
|
|
125
125
|
hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70"
|
|
126
126
|
].join(" "), children: labelText })) : null, _jsx(SgInputText, { ...rest, type: "date", error: error ?? internalError ?? undefined, inputProps: mergedInputProps, className: inputClassName, labelClassName: showStaticLabel ? "sr-only" : undefined })] }));
|
|
127
127
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputNumber.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputNumber.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;AA4lBlB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAuDtD"}
|
|
@@ -355,8 +355,10 @@ function SgInputNumberBase(props) {
|
|
|
355
355
|
const hasSuffix = canShowClear || iconButtonsCount > 0;
|
|
356
356
|
const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
|
|
357
357
|
const paddingRight = hasSuffix ? "pr-10" : "pr-3";
|
|
358
|
-
const placeholderClass = isFloatLabel
|
|
359
|
-
|
|
358
|
+
const placeholderClass = isFloatLabel
|
|
359
|
+
? "placeholder-transparent"
|
|
360
|
+
: "placeholder:text-[var(--sg-input-placeholder,hsl(var(--muted-foreground)))]";
|
|
361
|
+
const baseClass = `peer h-11 w-full rounded-md text-sm text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] disabled:text-[var(--sg-input-disabled-fg,hsl(var(--muted-foreground)))] disabled:bg-[var(--sg-input-disabled-bg,hsl(var(--muted)))] focus:outline-none text-right ${placeholderClass}`;
|
|
360
362
|
const hasError = Boolean(props.error ?? internalError);
|
|
361
363
|
const elevationClass = props.elevation === "none"
|
|
362
364
|
? ""
|
|
@@ -370,7 +372,9 @@ function SgInputNumberBase(props) {
|
|
|
370
372
|
? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
371
373
|
: "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
|
|
372
374
|
: "border border-transparent";
|
|
373
|
-
const bgClass = props.filled
|
|
375
|
+
const bgClass = props.filled
|
|
376
|
+
? "bg-muted/40"
|
|
377
|
+
: "bg-[var(--sg-input-bg,hsl(var(--background)))]";
|
|
374
378
|
const finalClass = [
|
|
375
379
|
baseClass,
|
|
376
380
|
borderClass,
|
|
@@ -428,7 +432,7 @@ function SgInputNumberBase(props) {
|
|
|
428
432
|
...(props.suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
429
433
|
...(inputProps.style ?? {})
|
|
430
434
|
}, inputMode: props.textInputType ?? "decimal", readOnly: props.readOnly, disabled: props.enabled === false, ...restInputProps, ref: mergeRefs(inputRef, inputProps?.ref), onKeyDown: handleKeyDown, onChange: handleChange, onPaste: handlePaste, onBlur: handleBlur, onFocus: handleFocus }), props.suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: props.suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
|
|
431
|
-
"absolute bg-
|
|
435
|
+
"absolute bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
432
436
|
isFilled
|
|
433
437
|
? "-top-2 left-3 text-xs"
|
|
434
438
|
: `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
|
|
@@ -409,7 +409,7 @@ const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
|
|
|
409
409
|
const isDisabled = enabled === false || Boolean(inputDisabled);
|
|
410
410
|
const isReadOnly = readOnly || Boolean(inputReadOnly);
|
|
411
411
|
const mergedSlotClass = [
|
|
412
|
-
"h-12 w-11 border bg-
|
|
412
|
+
"h-12 w-11 border bg-[var(--sg-input-bg,hsl(var(--background)))] text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] px-0 text-center text-base font-medium shadow-sm outline-none transition-all",
|
|
413
413
|
hasError
|
|
414
414
|
? "border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
415
415
|
: "border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]",
|
|
@@ -76,18 +76,18 @@ function SgInputSelectBase(props) {
|
|
|
76
76
|
};
|
|
77
77
|
const alwaysFloat = props.alwaysFloat ?? (props.selectProps?.["data-floating"] === "always");
|
|
78
78
|
return (_jsxs("div", { children: [_jsxs("div", { className: "relative", children: [alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: [
|
|
79
|
-
"pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-
|
|
79
|
+
"pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 text-[11px] font-medium leading-none",
|
|
80
80
|
props.error ? "text-[hsl(var(--destructive))]" : "text-foreground/70"
|
|
81
81
|
].join(" "), children: props.label })) : null, (() => {
|
|
82
82
|
const hasError = Boolean(props.error);
|
|
83
|
-
const baseClass = "peer h-11 w-full rounded-md bg-
|
|
83
|
+
const baseClass = "peer h-11 w-full rounded-md bg-[var(--sg-input-bg,hsl(var(--background)))] text-[var(--sg-input-fg,hsl(var(--foreground)))] px-3 pt-4 text-sm shadow-sm focus:outline-none";
|
|
84
84
|
const borderClass = hasError
|
|
85
85
|
? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
86
86
|
: "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
|
|
87
87
|
const resolvedClassName = props.className ?? [baseClass, borderClass].join(" ");
|
|
88
88
|
return (_jsxs("select", { id: props.id, className: resolvedClassName, ...props.selectProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, children: [_jsx("option", { value: "", children: "Selecione" }), props.options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
|
|
89
89
|
})(), alwaysFloat ? (_jsx("label", { htmlFor: props.id, className: "sr-only", children: props.label })) : (_jsx("label", { htmlFor: props.id, className: [
|
|
90
|
-
"absolute left-3 bg-
|
|
90
|
+
"absolute left-3 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
91
91
|
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
92
92
|
props.error ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
|
|
93
93
|
props.error
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"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"}
|
|
@@ -242,8 +242,10 @@ function SgInputTextBase(props) {
|
|
|
242
242
|
const hasSuffix = canShowClear || (props.iconButtons?.length ?? 0) > 0;
|
|
243
243
|
const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
|
|
244
244
|
const paddingRight = hasSuffix ? "pr-10" : "pr-3";
|
|
245
|
-
const placeholderClass = isFloatLabel
|
|
246
|
-
|
|
245
|
+
const placeholderClass = isFloatLabel
|
|
246
|
+
? "placeholder-transparent"
|
|
247
|
+
: "placeholder:text-[var(--sg-input-placeholder,hsl(var(--muted-foreground)))]";
|
|
248
|
+
const baseClass = `peer h-11 w-full rounded-md text-sm text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] disabled:text-[var(--sg-input-disabled-fg,hsl(var(--muted-foreground)))] disabled:bg-[var(--sg-input-disabled-bg,hsl(var(--muted)))] focus:outline-none ${placeholderClass}`;
|
|
247
249
|
const hasError = Boolean(props.error ?? internalError);
|
|
248
250
|
const elevationClass = props.elevation === "none"
|
|
249
251
|
? ""
|
|
@@ -257,7 +259,9 @@ function SgInputTextBase(props) {
|
|
|
257
259
|
? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
258
260
|
: "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
|
|
259
261
|
: "border border-transparent";
|
|
260
|
-
const bgClass = props.filled
|
|
262
|
+
const bgClass = props.filled
|
|
263
|
+
? "bg-muted/40"
|
|
264
|
+
: "bg-[var(--sg-input-bg,hsl(var(--background)))]";
|
|
261
265
|
const finalClass = [
|
|
262
266
|
baseClass,
|
|
263
267
|
borderClass,
|
|
@@ -312,7 +316,7 @@ function SgInputTextBase(props) {
|
|
|
312
316
|
...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
313
317
|
...(resolvedInputProps.style ?? {})
|
|
314
318
|
}, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
|
|
315
|
-
"absolute bg-
|
|
319
|
+
"absolute bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
316
320
|
isFilled
|
|
317
321
|
? "-top-2 left-3 text-xs"
|
|
318
322
|
: `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,GAAG,aAAa,CAAC;AAqVlB,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAwBpE"}
|
|
@@ -164,8 +164,10 @@ function SgInputTextAreaBase(props) {
|
|
|
164
164
|
const hasSuffix = canShowClear;
|
|
165
165
|
const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
|
|
166
166
|
const paddingRight = hasSuffix ? "pr-10" : "pr-3";
|
|
167
|
-
const placeholderClass = isFloatLabel
|
|
168
|
-
|
|
167
|
+
const placeholderClass = isFloatLabel
|
|
168
|
+
? "placeholder-transparent"
|
|
169
|
+
: "placeholder:text-[var(--sg-input-placeholder,hsl(var(--muted-foreground)))]";
|
|
170
|
+
const baseClass = `peer w-full rounded-md text-sm text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] disabled:text-[var(--sg-input-disabled-fg,hsl(var(--muted-foreground)))] disabled:bg-[var(--sg-input-disabled-bg,hsl(var(--muted)))] focus:outline-none ${placeholderClass}`;
|
|
169
171
|
const hasError = Boolean(props.error ?? internalError);
|
|
170
172
|
const elevationClass = props.elevation === "none"
|
|
171
173
|
? ""
|
|
@@ -179,7 +181,9 @@ function SgInputTextAreaBase(props) {
|
|
|
179
181
|
? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
180
182
|
: "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
|
|
181
183
|
: "border border-transparent";
|
|
182
|
-
const bgClass = props.filled
|
|
184
|
+
const bgClass = props.filled
|
|
185
|
+
? "bg-muted/40"
|
|
186
|
+
: "bg-[var(--sg-input-bg,hsl(var(--background)))]";
|
|
183
187
|
const finalClass = [
|
|
184
188
|
baseClass,
|
|
185
189
|
borderClass,
|
|
@@ -226,7 +230,7 @@ function SgInputTextAreaBase(props) {
|
|
|
226
230
|
? { ["--sg-input-label-width"]: resolvedLabelWidth }
|
|
227
231
|
: undefined;
|
|
228
232
|
const fieldNode = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-3 text-foreground/60", children: props.prefixIcon })) : null, _jsx("textarea", { id: props.id, placeholder: placeholder, className: props.className ?? finalClass, style: textareaStyle, maxLength: props.maxLength, rows: props.maxLines ?? 2, readOnly: props.enabled === false ? true : textareaProps.readOnly, disabled: props.enabled === false, ...textareaProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), isFloatLabel ? (_jsx("label", { htmlFor: props.id, className: [
|
|
229
|
-
"absolute left-3 bg-
|
|
233
|
+
"absolute left-3 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
230
234
|
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
231
235
|
hasError ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
|
|
232
236
|
hasError
|
|
@@ -295,14 +295,14 @@ function SgOrderListBase(props, imperativeRef) {
|
|
|
295
295
|
const canMoveUp = canInteract && moveSelectionUp(currentItems, movableSelection) !== currentItems;
|
|
296
296
|
const canMoveDown = canInteract && moveSelectionDown(currentItems, movableSelection) !== currentItems;
|
|
297
297
|
const canMoveBottom = canInteract && moveSelectionBottom(currentItems, movableSelection) !== currentItems;
|
|
298
|
-
const renderedList = (_jsxs("ul", { id: id, role: "listbox", "aria-multiselectable": selectionMode === "multiple" ? true : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, className: cn("w-full min-w-0 overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-
|
|
298
|
+
const renderedList = (_jsxs("ul", { id: id, role: "listbox", "aria-multiselectable": selectionMode === "multiple" ? true : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, className: cn("w-full min-w-0 overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-1", "max-h-[22rem]", listClassName), children: [currentItems.length === 0 ? (_jsx("li", { className: "list-none px-3 py-4 text-sm text-[rgb(var(--sg-muted))]", children: emptyLabel })) : (currentItems.map((item, index) => {
|
|
299
299
|
const isItemSelected = selectedSet.has(item.value);
|
|
300
300
|
const isItemDisabled = disabled || Boolean(item.disabled);
|
|
301
301
|
const isDropTarget = dropIndex === index && draggingIndex !== null && draggingIndex !== index;
|
|
302
302
|
const isDragging = draggingIndex === index;
|
|
303
303
|
return (_jsx("li", { className: "list-none", children: _jsxs("button", { type: "button", role: "option", "aria-selected": isItemSelected, draggable: allowDrag && !item.disabled, disabled: isItemDisabled, onClick: (event) => handleItemSelection(event, item, index), onKeyDown: (event) => handleItemKeyDown(event, item, index), onDragStart: (event) => handleDragStart(event, item, index), onDragOver: (event) => handleDragOver(event, index), onDrop: (event) => handleDrop(event, index), onDragEnd: clearDragState, className: cn("group flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-all", isItemSelected
|
|
304
304
|
? "bg-[rgb(var(--sg-primary-100))] text-[rgb(var(--sg-text))] ring-1 ring-[rgb(var(--sg-primary-300))]"
|
|
305
|
-
: "bg-
|
|
305
|
+
: "bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] text-[rgb(var(--sg-text))] hover:bg-[rgb(var(--sg-primary-50))]", isItemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", allowDrag && !item.disabled ? "active:cursor-grabbing" : "", isDropTarget ? "ring-2 ring-[rgb(var(--sg-primary-400))]" : "", isDragging ? "opacity-50" : "", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1", children: itemTemplate ? (itemTemplate(item, {
|
|
306
306
|
index,
|
|
307
307
|
selected: isItemSelected,
|
|
308
308
|
disabled: isItemDisabled
|
|
@@ -311,7 +311,7 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
311
311
|
const filteredTarget = targetItems
|
|
312
312
|
.map((item, index) => ({ item, index }))
|
|
313
313
|
.filter(({ item }) => !targetFilter || matchFilter(item.label, targetFilter, filterMatchMode));
|
|
314
|
-
const renderList = (list, items, selected) => (_jsx("ul", { id: id ? `${id}-${list}` : undefined, role: "listbox", "aria-multiselectable": selectionMode === "multiple" || undefined, className: cn("max-h-[22rem] min-w-0 w-full overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-
|
|
314
|
+
const renderList = (list, items, selected) => (_jsx("ul", { id: id ? `${id}-${list}` : undefined, role: "listbox", "aria-multiselectable": selectionMode === "multiple" || undefined, className: cn("max-h-[22rem] min-w-0 w-full overflow-y-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] p-1", listClassName), onDragOver: (event) => {
|
|
315
315
|
if (!dragEnabled)
|
|
316
316
|
return;
|
|
317
317
|
event.preventDefault();
|
|
@@ -350,13 +350,13 @@ function SgPickListBase(props, imperativeRef) {
|
|
|
350
350
|
handleDrop(list, index);
|
|
351
351
|
}, onDragEnd: () => setDragState(null), className: cn("flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm", selectedItem
|
|
352
352
|
? "bg-[rgb(var(--sg-primary-100))] ring-1 ring-[rgb(var(--sg-primary-300))]"
|
|
353
|
-
: "bg-
|
|
353
|
+
: "bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] hover:bg-[rgb(var(--sg-primary-50))]", itemDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", itemClassName), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: itemTemplate
|
|
354
354
|
? itemTemplate(item, { index, selected: selectedItem, disabled: itemDisabled, list })
|
|
355
355
|
: (_jsxs("span", { className: "flex items-center gap-2", children: [item.icon ? _jsx("span", { className: "shrink-0", children: item.icon }) : null, _jsx("span", { className: "truncate", children: item.label })] })) }), dragEnabled && !item.disabled ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-xs text-[rgb(var(--sg-muted))]", children: "::" })) : null] }) }, `${item.value}-${index}`));
|
|
356
356
|
})) }));
|
|
357
357
|
const renderReorderControls = (list) => (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveTopLabel, title: moveTopLabel, onClick: () => applyReorder(list, "top"), children: "Top" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveUpLabel, title: moveUpLabel, onClick: () => applyReorder(list, "up"), children: "Up" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveDownLabel, title: moveDownLabel, onClick: () => applyReorder(list, "down"), children: "Down" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveBottomLabel, title: moveBottomLabel, onClick: () => applyReorder(list, "bottom"), children: "Bottom" })] }));
|
|
358
358
|
const transferControls = showTransferControls ? (_jsxs("div", { className: "flex shrink-0 flex-row gap-2 md:flex-col", children: [_jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveToTargetLabel, title: moveToTargetLabel, onClick: moveToTarget, children: ">" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveAllToTargetLabel, title: moveAllToTargetLabel, onClick: moveAllToTarget, children: ">>" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveToSourceLabel, title: moveToSourceLabel, onClick: moveToSource, children: "<" }), _jsx(SgButton, { size: "sm", appearance: "outline", disabled: !canInteract, "aria-label": moveAllToSourceLabel, title: moveAllToSourceLabel, onClick: moveAllToSource, children: "<<" })] })) : null;
|
|
359
359
|
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
360
|
-
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: sourceHeaderLabel }), showSourceFilter ? (_jsx("input", { value: sourceFilter, onChange: (event) => setSourceFilter(event.target.value), placeholder: sourceFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-
|
|
360
|
+
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: sourceHeaderLabel }), showSourceFilter ? (_jsx("input", { value: sourceFilter, onChange: (event) => setSourceFilter(event.target.value), placeholder: sourceFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [showSourceControls ? renderReorderControls("source") : null, _jsx("div", { className: "min-w-0 flex-1", children: renderList("source", filteredSource, sourceSelectedSet) })] })] }), _jsx("div", { className: "flex justify-center md:pt-7", children: transferControls }), _jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-[rgb(var(--sg-muted))]", children: targetHeaderLabel }), showTargetFilter ? (_jsx("input", { value: targetFilter, onChange: (event) => setTargetFilter(event.target.value), placeholder: targetFilterLabel, className: "w-full rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: renderList("target", filteredTarget, targetSelectedSet) }), showTargetControls ? renderReorderControls("target") : null] })] })] }) }) }));
|
|
361
361
|
}
|
|
362
362
|
export const SgPickList = React.forwardRef((props, ref) => SgPickListBase(props, ref));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAgZ9D;yBAhZe,YAAY"}
|
|
@@ -13,6 +13,7 @@ import Highlight from "@tiptap/extension-highlight";
|
|
|
13
13
|
import Subscript from "@tiptap/extension-subscript";
|
|
14
14
|
import Superscript from "@tiptap/extension-superscript";
|
|
15
15
|
import FontFamily from "@tiptap/extension-font-family";
|
|
16
|
+
import { AlignCenter, AlignJustify, AlignLeft, AlignRight, FileImage, Highlighter, IndentDecrease, IndentIncrease, List, ListOrdered, Palette } from "lucide-react";
|
|
16
17
|
function cn(...parts) {
|
|
17
18
|
return parts.filter(Boolean).join(" ");
|
|
18
19
|
}
|
|
@@ -182,7 +183,7 @@ export function SgTextEditor(props) {
|
|
|
182
183
|
if (!editor)
|
|
183
184
|
return;
|
|
184
185
|
editor.chain().focus().setMark("textStyle", { fontSize: size }).run();
|
|
185
|
-
}, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bold",
|
|
186
|
+
}, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bold", icon: _jsx("span", { className: "font-bold leading-none", "aria-hidden": "true", children: "B" }), active: active("bold"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleBold().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: _jsx("span", { className: "italic leading-none", "aria-hidden": "true", children: "I" }), active: active("italic"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleItalic().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: _jsx("span", { className: "underline leading-none", "aria-hidden": "true", children: "U" }), active: active("underline"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleUnderline().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strike", icon: _jsx("span", { className: "line-through leading-none", "aria-hidden": "true", children: "S" }), active: active("strike"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleStrike().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleStrike().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ColorPickerButton, { label: "Text color", hint: "Text color", icon: _jsx(Palette, { size: 14, "aria-hidden": "true" }), disabled: !editor || !!disabled, onChange: (color) => editor?.chain().focus().setColor(color).run() }), _jsx(ColorPickerButton, { label: "Highlight color", hint: "Highlight color", icon: _jsx(Highlighter, { size: 14, "aria-hidden": "true" }), disabled: !editor || !!disabled, onChange: (color) => editor?.chain().focus().toggleHighlight({ color }).run() }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Subscript", text: "x2", active: active("subscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSubscript().run()) }), _jsx(ToolbarButton, { label: "Superscript", text: "x^", active: active("superscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSuperscript().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bullets", icon: _jsx(List, { size: 14, "aria-hidden": "true" }), active: active("bulletList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered", icon: _jsx(ListOrdered, { size: 14, "aria-hidden": "true" }), active: active("orderedList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Outdent", icon: _jsx(IndentDecrease, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Indent", icon: _jsx(IndentIncrease, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().sinkListItem("listItem").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Align left", icon: _jsx(AlignLeft, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "left" }) || active("heading", { textAlign: "left" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: _jsx(AlignCenter, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "center" }) || active("heading", { textAlign: "center" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: _jsx(AlignRight, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "right" }) || active("heading", { textAlign: "right" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: _jsx(AlignJustify, { size: 14, "aria-hidden": "true" }), active: active("paragraph", { textAlign: "justify" }) || active("heading", { textAlign: "justify" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("justify").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Link", text: "Link", active: active("link"), disabled: !editor || !!disabled, onClick: () => {
|
|
186
187
|
if (!editor)
|
|
187
188
|
return;
|
|
188
189
|
const prev = editor.getAttributes("link").href;
|
|
@@ -192,7 +193,7 @@ export function SgTextEditor(props) {
|
|
|
192
193
|
return;
|
|
193
194
|
}
|
|
194
195
|
editor.chain().focus().setLink({ href: url }).run();
|
|
195
|
-
} }), _jsx(ToolbarButton, { label: "Image",
|
|
196
|
+
} }), _jsx(ToolbarButton, { label: "Image", icon: _jsx(FileImage, { size: 14, "aria-hidden": "true" }), active: false, disabled: !editor || !!disabled, onClick: () => {
|
|
196
197
|
if (!editor)
|
|
197
198
|
return;
|
|
198
199
|
const src = window.prompt("Image URL");
|
|
@@ -212,7 +213,11 @@ export function SgTextEditor(props) {
|
|
|
212
213
|
} })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: editorContainerStyle, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs", style: cssTextareaStyle }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "CSS is embedded inside the saved HTML document." })] })) : null] }));
|
|
213
214
|
}
|
|
214
215
|
function ToolbarButton(props) {
|
|
215
|
-
const { label, text, active, disabled, onClick } = props;
|
|
216
|
-
return (_jsx("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: onClick, className: cn("h-9 min-w-9 rounded-md border px-2 text-sm", "hover:bg-muted/80 disabled:opacity-50", active ? "bg-muted" : "bg-background"), children: text }));
|
|
216
|
+
const { label, text, icon, active, disabled, onClick } = props;
|
|
217
|
+
return (_jsx("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: onClick, className: cn("inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-2 text-sm", "hover:bg-muted/80 disabled:opacity-50", active ? "bg-muted" : "bg-background"), children: icon ?? text }));
|
|
218
|
+
}
|
|
219
|
+
function ColorPickerButton(props) {
|
|
220
|
+
const { label, hint, icon, disabled, onChange } = props;
|
|
221
|
+
return (_jsxs("label", { title: hint ?? label, "aria-label": label, className: cn("relative inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-2 text-sm", "bg-background hover:bg-muted/80", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"), children: [icon, _jsx("input", { type: "color", disabled: disabled, onChange: (e) => onChange(e.target.value), className: cn("absolute inset-0 h-full w-full opacity-0", disabled ? "cursor-not-allowed" : "cursor-pointer"), "aria-label": label })] }));
|
|
217
222
|
}
|
|
218
223
|
SgTextEditor.displayName = "SgTextEditor";
|
|
@@ -146,7 +146,7 @@ function SgToggleSwitchBase(props) {
|
|
|
146
146
|
: "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]"
|
|
147
147
|
: hasError
|
|
148
148
|
? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.05)]"
|
|
149
|
-
: "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-
|
|
149
|
+
: "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
|
|
150
150
|
}
|
|
151
151
|
export function SgToggleSwitch(props) {
|
|
152
152
|
const { control, name, register, rules, ...rest } = props;
|
|
@@ -127,8 +127,8 @@ export function SgCarousel(props) {
|
|
|
127
127
|
}
|
|
128
128
|
return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: `
|
|
129
129
|
absolute z-10 flex h-10 w-10 items-center justify-center rounded-full
|
|
130
|
-
bg-
|
|
131
|
-
${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 hover:bg-
|
|
130
|
+
bg-background/90 shadow-lg opacity-70 transition-all
|
|
131
|
+
${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 hover:bg-background cursor-pointer"}
|
|
132
132
|
${isHorizontal
|
|
133
133
|
? `top-1/2 -translate-y-1/2 ${isPrev ? "left-2" : "right-2"}`
|
|
134
134
|
: `left-1/2 -translate-x-1/2 ${isPrev ? "-top-5" : "-bottom-5"}`}
|
|
@@ -159,7 +159,7 @@ export function SgCarousel(props) {
|
|
|
159
159
|
${isHorizontal ? "h-2" : "w-2"}
|
|
160
160
|
${isActive
|
|
161
161
|
? `${isHorizontal ? "w-8" : "h-8"} bg-primary`
|
|
162
|
-
: `${isHorizontal ? "w-2" : "h-2"} bg-
|
|
162
|
+
: `${isHorizontal ? "w-2" : "h-2"} bg-foreground/20 hover:bg-foreground/35`}
|
|
163
163
|
rounded-full
|
|
164
164
|
`, "aria-label": `Go to slide ${index + 1}` }, index));
|
|
165
165
|
}) }))] }));
|
|
@@ -11,5 +11,5 @@ export function SgGroupBox(props) {
|
|
|
11
11
|
width: toCssSize(width) ?? "100%",
|
|
12
12
|
height: toCssSize(height),
|
|
13
13
|
...style
|
|
14
|
-
}, children: _jsxs("fieldset", { className: "relative rounded-lg border border-border bg-
|
|
14
|
+
}, children: _jsxs("fieldset", { className: "relative rounded-lg border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-4 pb-4 pt-5", children: [_jsx("legend", { className: "px-2 text-xs font-semibold uppercase tracking-wider text-foreground/70", children: title }), _jsx("div", { children: children })] }) }));
|
|
15
15
|
}
|
package/dist/layout/SgMenu.js
CHANGED
|
@@ -745,7 +745,7 @@ export function SgMenu(props) {
|
|
|
745
745
|
return;
|
|
746
746
|
}
|
|
747
747
|
activateNode(node);
|
|
748
|
-
}, className: cn("min-w-0 flex-1 rounded-md", "flex items-center", densityCfg.gap, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(node.label, 1) }), !isCollapsed ? _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }) : null, !isCollapsed && node.badge !== undefined ? (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground", densityCfg.badge), children: node.badge })) : null] }), !isCollapsed && hasChildren ? (_jsx("button", { type: "button", "aria-label": openNow ? "Collapse group" : "Expand group", onClick: () => !disabled && toggleExpanded(node.id), className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: openNow ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) })) : null] }), !hideChildren && hasChildren && openNow ? (_jsx("div", { className: "mt-0.5 space-y-0.5", children: node.children?.map((child) => renderNode(child, depth + 1)) })) : null] }, node.id));
|
|
748
|
+
}, className: cn("min-w-0 flex-1 rounded-md", "flex items-center text-left", densityCfg.gap, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(node.label, 1) }), !isCollapsed ? _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }) : null, !isCollapsed && node.badge !== undefined ? (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground", densityCfg.badge), children: node.badge })) : null] }), !isCollapsed && hasChildren ? (_jsx("button", { type: "button", "aria-label": openNow ? "Collapse group" : "Expand group", onClick: () => !disabled && toggleExpanded(node.id), className: cn("inline-flex size-7 shrink-0 items-center justify-center rounded", "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: openNow ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) })) : null] }), !hideChildren && hasChildren && openNow ? (_jsx("div", { className: "mt-0.5 space-y-0.5", children: node.children?.map((child) => renderNode(child, depth + 1)) })) : null] }, node.id));
|
|
749
749
|
}, [
|
|
750
750
|
activateNode,
|
|
751
751
|
activeSets.branch,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA2hB1D"}
|
package/dist/menus/SgDockMenu.js
CHANGED
|
@@ -72,7 +72,7 @@ export function SgDockMenu(props) {
|
|
|
72
72
|
const i18n = useComponentsI18n();
|
|
73
73
|
const hasEnvironmentProvider = useHasSgEnvironmentProvider();
|
|
74
74
|
const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
|
|
75
|
-
const { id, items, position = "center-bottom", enableDragDrop = false, dragId, offset, className = "", itemClassName = "", zIndex = 50, itemSize = 48, gap = 16, backgroundColor = "
|
|
75
|
+
const { id, items, position = "center-bottom", enableDragDrop = false, dragId, offset, className = "", itemClassName = "", zIndex = 50, itemSize = 48, gap = 16, backgroundColor = "rgb(var(--sg-surface, 248 250 252) / 0.9)", showLabels = true, magnify = true, magnifyScale = 1.5, borderRadius = 16, elevation = "lg", style, } = props;
|
|
76
76
|
const [dragPos, setDragPos] = React.useState(null);
|
|
77
77
|
const dragPosRef = React.useRef(null);
|
|
78
78
|
const hasStoredPosRef = React.useRef(false);
|
|
@@ -90,6 +90,11 @@ export function SgDockMenu(props) {
|
|
|
90
90
|
const storageKey = dragId
|
|
91
91
|
? `sg-dockmenu-pos:${dragId}:${isAbsolutePosition ? "parent" : "viewport"}`
|
|
92
92
|
: null;
|
|
93
|
+
const itemSurfaceColor = "rgb(var(--sg-muted-surface, 241 245 249) / 0.92)";
|
|
94
|
+
const itemSurfaceHoverColor = "rgb(var(--sg-primary-500, 34 197 94) / 0.18)";
|
|
95
|
+
const itemIconColor = "rgb(var(--sg-text, 15 23 42))";
|
|
96
|
+
const tooltipBgColor = "rgb(var(--sg-surface, 15 23 42) / 0.96)";
|
|
97
|
+
const tooltipTextColor = "rgb(var(--sg-text, 255 255 255))";
|
|
93
98
|
const loadStoredPosition = React.useCallback(async () => {
|
|
94
99
|
if (!storageKey)
|
|
95
100
|
return null;
|
|
@@ -359,6 +364,7 @@ export function SgDockMenu(props) {
|
|
|
359
364
|
paddingRight: crossPadding
|
|
360
365
|
}),
|
|
361
366
|
backgroundColor,
|
|
367
|
+
border: "1px solid rgb(var(--sg-border, 226 232 240) / 0.85)",
|
|
362
368
|
borderRadius: `${borderRadius}px`,
|
|
363
369
|
backdropFilter: "blur(10px)",
|
|
364
370
|
transition: "all 0.3s ease",
|
|
@@ -405,18 +411,19 @@ export function SgDockMenu(props) {
|
|
|
405
411
|
alignItems: "center",
|
|
406
412
|
justifyContent: "center",
|
|
407
413
|
borderRadius: `${borderRadius * 0.5}px`,
|
|
408
|
-
backgroundColor:
|
|
414
|
+
backgroundColor: itemSurfaceColor,
|
|
415
|
+
color: itemIconColor,
|
|
409
416
|
transition: "background-color 0.2s ease",
|
|
410
417
|
}, onMouseEnter: (e) => {
|
|
411
|
-
e.currentTarget.style.backgroundColor =
|
|
418
|
+
e.currentTarget.style.backgroundColor = itemSurfaceHoverColor;
|
|
412
419
|
}, onMouseLeave: (e) => {
|
|
413
|
-
e.currentTarget.style.backgroundColor =
|
|
420
|
+
e.currentTarget.style.backgroundColor = itemSurfaceColor;
|
|
414
421
|
}, children: item.icon }), item.badge && (_jsx("div", { className: "sg-dock-item-badge", style: {
|
|
415
422
|
position: "absolute",
|
|
416
423
|
top: -4,
|
|
417
424
|
right: -4,
|
|
418
425
|
backgroundColor: "hsl(var(--destructive))",
|
|
419
|
-
color: "
|
|
426
|
+
color: "hsl(var(--destructive-foreground))",
|
|
420
427
|
borderRadius: "50%",
|
|
421
428
|
minWidth: 20,
|
|
422
429
|
height: 20,
|
|
@@ -434,8 +441,8 @@ export function SgDockMenu(props) {
|
|
|
434
441
|
: position.startsWith("left")
|
|
435
442
|
? { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: 8 }
|
|
436
443
|
: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: 8 }),
|
|
437
|
-
backgroundColor:
|
|
438
|
-
color:
|
|
444
|
+
backgroundColor: tooltipBgColor,
|
|
445
|
+
color: tooltipTextColor,
|
|
439
446
|
padding: "4px 8px",
|
|
440
447
|
borderRadius: 6,
|
|
441
448
|
fontSize: 12,
|
|
@@ -456,7 +463,9 @@ export function SgDockMenu(props) {
|
|
|
456
463
|
top: "50%",
|
|
457
464
|
left: "50%",
|
|
458
465
|
transform: "translate(-50%, -50%)",
|
|
459
|
-
backgroundColor: "
|
|
466
|
+
backgroundColor: "rgb(var(--sg-surface, 248 250 252))",
|
|
467
|
+
color: "rgb(var(--sg-text, 15 23 42))",
|
|
468
|
+
border: "1px solid rgb(var(--sg-border, 226 232 240))",
|
|
460
469
|
borderRadius: 12,
|
|
461
470
|
padding: 24,
|
|
462
471
|
boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
|
|
@@ -465,7 +474,8 @@ export function SgDockMenu(props) {
|
|
|
465
474
|
padding: "8px 16px",
|
|
466
475
|
borderRadius: 6,
|
|
467
476
|
border: "1px solid hsl(var(--border))",
|
|
468
|
-
backgroundColor: "
|
|
477
|
+
backgroundColor: "rgb(var(--sg-muted-surface, 241 245 249))",
|
|
478
|
+
color: "rgb(var(--sg-text, 15 23 42))",
|
|
469
479
|
cursor: "pointer",
|
|
470
480
|
fontSize: 14,
|
|
471
481
|
}, children: t(i18n, "components.actions.cancel") }), _jsx("button", { onClick: handleResetPosition, style: {
|
|
@@ -473,7 +483,7 @@ export function SgDockMenu(props) {
|
|
|
473
483
|
borderRadius: 6,
|
|
474
484
|
border: "none",
|
|
475
485
|
backgroundColor: "hsl(var(--primary))",
|
|
476
|
-
color: "
|
|
486
|
+
color: "hsl(var(--primary-foreground))",
|
|
477
487
|
cursor: "pointer",
|
|
478
488
|
fontSize: 14,
|
|
479
489
|
fontWeight: 500,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA6nCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAkmBtE"}
|