@wellingtonhlc/shared-ui 0.25.0 → 0.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionField.d.ts","sourceRoot":"","sources":["../../src/components/SelectionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIvG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AACjD,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEvD,KAAK,qBAAqB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC7D;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAqC,EACrC,IAAI,EACJ,SAAS,EACT,WAAW,EACX,SAAiB,EACjB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,YAAY,EACZ,IAAW,EACX,OAAmB,EACnB,YAAY,EACZ,aAA4B,EAC5B,YAA+B,EAC/B,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAqB,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EAAE,YAAY,EACnB,IAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"SelectionField.d.ts","sourceRoot":"","sources":["../../src/components/SelectionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIvG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AACjD,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEvD,KAAK,qBAAqB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC7D;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAqC,EACrC,IAAI,EACJ,SAAS,EACT,WAAW,EACX,SAAiB,EACjB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,YAAY,EACZ,IAAW,EACX,OAAmB,EACnB,YAAY,EACZ,aAA4B,EAC5B,YAA+B,EAC/B,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAqB,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EAAE,YAAY,EACnB,IAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,mBAAmB,qBAiMrB"}
|
|
@@ -58,11 +58,28 @@ export function SelectionField({ label, description, value, placeholder = 'Selec
|
|
|
58
58
|
const generatedDescriptionId = React.useId().replace(/:/g, '');
|
|
59
59
|
const describedById = description ? `${generatedDescriptionId}-description` : undefined;
|
|
60
60
|
const showClear = clearable && hasValue && !disabled && !loading && !!onClear;
|
|
61
|
+
const [isClearHover, setIsClearHover] = React.useState(false);
|
|
61
62
|
function handleClear(event) {
|
|
62
63
|
event.stopPropagation();
|
|
63
64
|
onClear?.();
|
|
64
65
|
}
|
|
65
|
-
|
|
66
|
+
function handleClearMouseEnter() {
|
|
67
|
+
setIsClearHover(true);
|
|
68
|
+
}
|
|
69
|
+
function handleClearMouseLeave() {
|
|
70
|
+
setIsClearHover(false);
|
|
71
|
+
}
|
|
72
|
+
function handleOpen(event) {
|
|
73
|
+
if (disabled || loading || event.defaultPrevented) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
if (onClick) {
|
|
77
|
+
onClick(event);
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
triggerSlot?.props.onClick?.(event);
|
|
81
|
+
}
|
|
82
|
+
const triggerClassName = cn('inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-foreground-muted transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:pointer-events-none disabled:opacity-50', actionSizeClass[size]);
|
|
66
83
|
const selectionTrigger = triggerSlot
|
|
67
84
|
? React.cloneElement(triggerSlot, {
|
|
68
85
|
'aria-label': triggerSlot.props['aria-label'] ?? selectTooltip,
|
|
@@ -79,7 +96,10 @@ export function SelectionField({ label, description, value, placeholder = 'Selec
|
|
|
79
96
|
errorMessage: controlError,
|
|
80
97
|
disabled: disabled || loading,
|
|
81
98
|
variant,
|
|
82
|
-
extra: cn('group flex items-center overflow-hidden', !hasValue && '
|
|
83
|
-
|
|
99
|
+
extra: cn('group flex items-center overflow-hidden border-dashed', !hasValue && 'bg-[color-mix(in_srgb,var(--brand)_5%,var(--surface))]', hasValue && 'bg-surface', disabled || loading
|
|
100
|
+
? 'cursor-not-allowed'
|
|
101
|
+
: cn('cursor-pointer', !isClearHover &&
|
|
102
|
+
'hover:border-[color-mix(in_srgb,var(--brand)_58%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,var(--surface))]'), size === 'lg' ? 'rounded-lg' : 'rounded-md', controlSizeClass[size], controlGapClass[size], resolvedIcon ? controlIconPaddingClass[size] : controlLeadingPaddingClass[size], controlClassName),
|
|
103
|
+
}), "data-empty": !hasValue || undefined, "data-loading": loading || undefined, onClick: handleOpen, children: [resolvedIcon ? (_jsx("span", { className: cn('inline-flex shrink-0 items-center justify-center rounded-md text-foreground-muted', !hasValue && 'text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground-muted))]', actionSizeClass[size], iconSizeClass[size]), "aria-hidden": "true", children: resolvedIcon })) : null, _jsxs("div", { className: cn('min-w-0 flex-1 text-left', textGapClass[size]), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("span", { className: cn('min-w-0 truncate font-semibold', hasValue ? 'text-foreground' : 'text-foreground-muted'), children: [title, required && !hasValue ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), meta ? (_jsx("span", { className: "border-app-border bg-background text-foreground-muted shrink-0 rounded border px-1.5 py-0.5 font-mono text-[0.65rem] leading-none", children: meta })) : null] }), subtitle ? (_jsx("p", { className: cn('text-foreground-muted truncate text-xs font-medium', (size === 'xs' || size === 'sm') && 'sr-only'), children: subtitle })) : null] }), shortcutHint ? (_jsx("kbd", { className: "border-app-border bg-background text-foreground-muted hidden shrink-0 rounded border px-1.5 py-1 font-mono text-[0.65rem] leading-none sm:inline-flex", children: shortcutHint })) : null, showClear ? (_jsx("button", { type: "button", "aria-label": clearTooltip, className: cn('inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-foreground-muted transition-colors', 'hover:bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] hover:text-[var(--destructive)]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive)]/25', actionSizeClass[size]), title: clearTooltip, onClick: handleClear, onMouseEnter: handleClearMouseEnter, onMouseLeave: handleClearMouseLeave, children: _jsx(X, { "aria-hidden": "true" }) })) : null, _jsx("span", { onClick: stopPropagation, children: selectionTrigger })] }), description ? (_jsx("p", { id: describedById, className: "mt-1 text-xs font-medium text-foreground-muted", children: description })) : null] }));
|
|
84
104
|
} }));
|
|
85
105
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1552,9 +1552,6 @@ h2.react-datepicker__current-month {
|
|
|
1552
1552
|
.animate-pulse {
|
|
1553
1553
|
animation: var(--animate-pulse);
|
|
1554
1554
|
}
|
|
1555
|
-
.cursor-default {
|
|
1556
|
-
cursor: default;
|
|
1557
|
-
}
|
|
1558
1555
|
.cursor-not-allowed {
|
|
1559
1556
|
cursor: not-allowed;
|
|
1560
1557
|
}
|
|
@@ -2863,6 +2860,16 @@ h2.react-datepicker__current-month {
|
|
|
2863
2860
|
}
|
|
2864
2861
|
}
|
|
2865
2862
|
}
|
|
2863
|
+
.hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_58\%\,var\(--app-border\)\)\] {
|
|
2864
|
+
&:hover {
|
|
2865
|
+
@media (hover: hover) {
|
|
2866
|
+
border-color: var(--brand);
|
|
2867
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2868
|
+
border-color: color-mix(in srgb,var(--brand) 58%,var(--app-border));
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
}
|
|
2872
|
+
}
|
|
2866
2873
|
.hover\:border-\[var\(--destructive\)\] {
|
|
2867
2874
|
&:hover {
|
|
2868
2875
|
@media (hover: hover) {
|
|
@@ -2938,6 +2945,16 @@ h2.react-datepicker__current-month {
|
|
|
2938
2945
|
}
|
|
2939
2946
|
}
|
|
2940
2947
|
}
|
|
2948
|
+
.hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,var\(--surface\)\)\] {
|
|
2949
|
+
&:hover {
|
|
2950
|
+
@media (hover: hover) {
|
|
2951
|
+
background-color: var(--brand);
|
|
2952
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2953
|
+
background-color: color-mix(in srgb,var(--brand) 8%,var(--surface));
|
|
2954
|
+
}
|
|
2955
|
+
}
|
|
2956
|
+
}
|
|
2957
|
+
}
|
|
2941
2958
|
.hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_10\%\,transparent\)\] {
|
|
2942
2959
|
&:hover {
|
|
2943
2960
|
@media (hover: hover) {
|