@pichetch08/trip-ui 0.2.2 → 0.2.3
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.
|
@@ -16,9 +16,10 @@ interface SelectPickerProps {
|
|
|
16
16
|
searchable?: boolean;
|
|
17
17
|
icon?: string;
|
|
18
18
|
name?: string;
|
|
19
|
+
size?: "sm" | "md";
|
|
19
20
|
onOpen?: () => void;
|
|
20
21
|
onClose?: () => void;
|
|
21
22
|
}
|
|
22
|
-
declare function SelectPicker({ label, value, onChange, options, placeholder, searchPlaceholder, emptyText, required, error, searchable, icon, name, onOpen, onClose, }: SelectPickerProps): React.ReactNode;
|
|
23
|
+
declare function SelectPicker({ label, value, onChange, options, placeholder, searchPlaceholder, emptyText, required, error, searchable, icon, name, size, onOpen, onClose, }: SelectPickerProps): React.ReactNode;
|
|
23
24
|
|
|
24
25
|
export { type SelectOption, SelectPicker };
|
|
@@ -15,6 +15,7 @@ function SelectPicker({
|
|
|
15
15
|
searchable = true,
|
|
16
16
|
icon,
|
|
17
17
|
name,
|
|
18
|
+
size = "md",
|
|
18
19
|
onOpen,
|
|
19
20
|
onClose
|
|
20
21
|
}) {
|
|
@@ -93,14 +94,14 @@ function SelectPicker({
|
|
|
93
94
|
"aria-controls": "select-picker-listbox",
|
|
94
95
|
"aria-required": required,
|
|
95
96
|
onClick: () => toggleOpen(!open),
|
|
96
|
-
className: `relative w-full bg-surface-container-low border rounded-xl
|
|
97
|
+
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all duration-200 font-medium outline-none active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 pr-10 ${size === "sm" ? "py-2 px-3 text-sm" : "py-4 px-6"} ${icon ? size === "sm" ? "pl-8" : "pl-12" : ""} ${open ? "bg-surface ring-2 ring-primary/20 border-primary" : error ? "border-red-400 bg-red-50/30" : "border-transparent hover:border-outline-variant"}`,
|
|
97
98
|
children: [
|
|
98
|
-
icon && /* @__PURE__ */ jsx("span", { className:
|
|
99
|
+
icon && /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined absolute top-1/2 -translate-y-1/2 text-on-surface-variant ${size === "sm" ? "left-2.5 text-base" : "left-4"}`, children: icon }),
|
|
99
100
|
selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-on-surface", children: [
|
|
100
101
|
selectedOption.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base text-on-surface-variant", children: selectedOption.icon }),
|
|
101
102
|
selectedOption.label
|
|
102
103
|
] }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder }),
|
|
103
|
-
/* @__PURE__ */ jsx("span", { className: `material-symbols-outlined absolute right-
|
|
104
|
+
/* @__PURE__ */ jsx("span", { className: `material-symbols-outlined absolute right-2.5 top-1/2 -translate-y-1/2 text-on-surface-variant transition-transform ${size === "sm" ? "text-base" : "text-lg"} ${open ? "rotate-180" : ""}`, children: "expand_more" })
|
|
104
105
|
]
|
|
105
106
|
}
|
|
106
107
|
),
|