@motor-hero/ui-kit 0.28.0 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/base-dialog.d.ts +5 -0
- package/dist/components/base-dialog.d.ts.map +1 -1
- package/dist/components/color-picker.d.ts +6 -1
- package/dist/components/color-picker.d.ts.map +1 -1
- package/dist/index.cjs +35 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +36 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/base-dialog.tsx +5 -0
- package/src/components/color-picker.tsx +35 -3
- package/src/components/combobox.tsx +1 -1
- package/src/components/multi-combobox.tsx +1 -1
|
@@ -6,6 +6,11 @@ declare const sizeClasses: {
|
|
|
6
6
|
readonly lg: "sm:max-w-lg";
|
|
7
7
|
readonly xl: "sm:max-w-xl";
|
|
8
8
|
readonly "2xl": "sm:max-w-2xl";
|
|
9
|
+
readonly "3xl": "sm:max-w-3xl";
|
|
10
|
+
readonly "4xl": "sm:max-w-4xl";
|
|
11
|
+
readonly "5xl": "sm:max-w-5xl";
|
|
12
|
+
readonly "6xl": "sm:max-w-6xl";
|
|
13
|
+
readonly "7xl": "sm:max-w-7xl";
|
|
9
14
|
};
|
|
10
15
|
export type BaseDialogSize = keyof typeof sizeClasses;
|
|
11
16
|
export interface BaseDialogProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW
|
|
1
|
+
{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW;;;;;;;;;;;CAWP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,KAAK,EACL,cAAqC,GACtC,EAAE,eAAe,qBA+DjB"}
|
|
@@ -5,6 +5,11 @@ export interface ColorPickerProps {
|
|
|
5
5
|
onChange: (value: string) => void;
|
|
6
6
|
/** Trigger text shown when no color is set. */
|
|
7
7
|
placeholder?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Show a clear (×) affordance when a color is set — emits `onChange("")`
|
|
10
|
+
* so the field can fall back to its default. On by default.
|
|
11
|
+
*/
|
|
12
|
+
clearable?: boolean;
|
|
8
13
|
disabled?: boolean;
|
|
9
14
|
id?: string;
|
|
10
15
|
className?: string;
|
|
@@ -19,5 +24,5 @@ export interface ColorPickerProps {
|
|
|
19
24
|
* `aria-invalid`/`aria-describedby` from FormField and shows a destructive
|
|
20
25
|
* border when invalid, matching the other kit inputs.
|
|
21
26
|
*/
|
|
22
|
-
export declare function ColorPicker({ value, onChange, placeholder, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: ColorPickerProps): React.JSX.Element;
|
|
27
|
+
export declare function ColorPicker({ value, onChange, placeholder, clearable, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: ColorPickerProps): React.JSX.Element;
|
|
23
28
|
//# sourceMappingURL=color-picker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/components/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,GACpC,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/components/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAgB,EAChB,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,GACpC,EAAE,gBAAgB,qBAyFlB"}
|
package/dist/index.cjs
CHANGED
|
@@ -480,7 +480,12 @@ var sizeClasses2 = {
|
|
|
480
480
|
md: "sm:max-w-md",
|
|
481
481
|
lg: "sm:max-w-lg",
|
|
482
482
|
xl: "sm:max-w-xl",
|
|
483
|
-
"2xl": "sm:max-w-2xl"
|
|
483
|
+
"2xl": "sm:max-w-2xl",
|
|
484
|
+
"3xl": "sm:max-w-3xl",
|
|
485
|
+
"4xl": "sm:max-w-4xl",
|
|
486
|
+
"5xl": "sm:max-w-5xl",
|
|
487
|
+
"6xl": "sm:max-w-6xl",
|
|
488
|
+
"7xl": "sm:max-w-7xl"
|
|
484
489
|
};
|
|
485
490
|
function BaseDialog({
|
|
486
491
|
open,
|
|
@@ -811,7 +816,7 @@ function Combobox({
|
|
|
811
816
|
"aria-describedby": ariaDescribedby,
|
|
812
817
|
disabled,
|
|
813
818
|
className: cn(
|
|
814
|
-
"flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
|
|
819
|
+
"flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
|
|
815
820
|
className
|
|
816
821
|
),
|
|
817
822
|
children: [
|
|
@@ -982,7 +987,7 @@ function MultiCombobox({
|
|
|
982
987
|
}
|
|
983
988
|
},
|
|
984
989
|
className: cn(
|
|
985
|
-
"flex min-h-9 w-full cursor-pointer flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
|
|
990
|
+
"flex min-h-9 w-full cursor-pointer flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm transition-colors hover:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
|
|
986
991
|
className
|
|
987
992
|
),
|
|
988
993
|
children: [
|
|
@@ -1108,6 +1113,7 @@ function ColorPicker({
|
|
|
1108
1113
|
value,
|
|
1109
1114
|
onChange,
|
|
1110
1115
|
placeholder = "Selecionar cor",
|
|
1116
|
+
clearable = true,
|
|
1111
1117
|
disabled,
|
|
1112
1118
|
id,
|
|
1113
1119
|
className,
|
|
@@ -1116,6 +1122,12 @@ function ColorPicker({
|
|
|
1116
1122
|
}) {
|
|
1117
1123
|
const [open, setOpen] = React8.useState(false);
|
|
1118
1124
|
const color = value || "";
|
|
1125
|
+
const showClear = clearable && !!color && !disabled;
|
|
1126
|
+
const clear = (event) => {
|
|
1127
|
+
event.stopPropagation();
|
|
1128
|
+
event.preventDefault();
|
|
1129
|
+
onChange("");
|
|
1130
|
+
};
|
|
1119
1131
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
|
|
1120
1132
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1121
1133
|
"button",
|
|
@@ -1126,7 +1138,7 @@ function ColorPicker({
|
|
|
1126
1138
|
"aria-describedby": ariaDescribedby,
|
|
1127
1139
|
disabled,
|
|
1128
1140
|
className: cn(
|
|
1129
|
-
"flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
|
|
1141
|
+
"flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
|
|
1130
1142
|
className
|
|
1131
1143
|
),
|
|
1132
1144
|
children: [
|
|
@@ -1146,7 +1158,25 @@ function ColorPicker({
|
|
|
1146
1158
|
),
|
|
1147
1159
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("truncate", !color && "text-muted-foreground"), children: color || placeholder })
|
|
1148
1160
|
] }),
|
|
1149
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.
|
|
1161
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "flex shrink-0 items-center gap-1", children: [
|
|
1162
|
+
showClear && // Not a <button> — nesting one inside the trigger button is
|
|
1163
|
+
// invalid HTML.
|
|
1164
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1165
|
+
"span",
|
|
1166
|
+
{
|
|
1167
|
+
role: "button",
|
|
1168
|
+
tabIndex: 0,
|
|
1169
|
+
"aria-label": "Limpar cor",
|
|
1170
|
+
onClick: clear,
|
|
1171
|
+
onKeyDown: (event) => {
|
|
1172
|
+
if (event.key === "Enter" || event.key === " ") clear(event);
|
|
1173
|
+
},
|
|
1174
|
+
className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
1175
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react6.X, { className: "h-3.5 w-3.5" })
|
|
1176
|
+
}
|
|
1177
|
+
),
|
|
1178
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react6.ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
|
|
1179
|
+
] })
|
|
1150
1180
|
]
|
|
1151
1181
|
}
|
|
1152
1182
|
) }),
|