@pichetch08/trip-ui 0.2.7 → 0.2.10
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.
|
@@ -138,7 +138,7 @@ function DatePicker({
|
|
|
138
138
|
"aria-haspopup": "dialog",
|
|
139
139
|
"aria-required": required,
|
|
140
140
|
onClick: () => setOpen(!open),
|
|
141
|
-
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${size === "sm" ? `h-10 px-3 text-sm ${icon ? "pl-
|
|
141
|
+
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${size === "sm" ? `h-10 px-3 text-sm ${icon ? "pl-10" : ""}` : `py-4 px-6 ${icon ? "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"}`,
|
|
142
142
|
children: [
|
|
143
143
|
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 }),
|
|
144
144
|
displayValue ? /* @__PURE__ */ jsx("span", { className: "text-on-surface", children: displayValue }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder })
|
|
@@ -300,7 +300,7 @@ function DateRangePicker({
|
|
|
300
300
|
setLeftMonth({ year: d.getFullYear(), month: d.getMonth() });
|
|
301
301
|
}
|
|
302
302
|
const triggerId = label ? `daterange-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
|
|
303
|
-
return /* @__PURE__ */ jsxs("div", { className:
|
|
303
|
+
return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 ${size === "sm" ? "min-w-[200px]" : ""}`, ref: containerRef, children: [
|
|
304
304
|
nameStart && /* @__PURE__ */ jsx("input", { type: "hidden", name: nameStart, value: startDate }),
|
|
305
305
|
nameEnd && /* @__PURE__ */ jsx("input", { type: "hidden", name: nameEnd, value: endDate }),
|
|
306
306
|
label && /* @__PURE__ */ jsxs("label", { htmlFor: triggerId, className: "text-xs font-bold text-on-surface-variant uppercase tracking-widest px-1", children: [
|
|
@@ -317,10 +317,10 @@ function DateRangePicker({
|
|
|
317
317
|
"aria-haspopup": "dialog",
|
|
318
318
|
"aria-required": required,
|
|
319
319
|
onClick: handleOpen,
|
|
320
|
-
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${size === "sm" ? "h-10 pl-
|
|
320
|
+
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 overflow-hidden ${size === "sm" ? "h-10 pl-10 pr-9 text-sm" : "py-4 pl-12 pr-10"} ${open ? "bg-surface ring-2 ring-primary/20 border-primary" : error ? "border-red-400 bg-red-50/30" : "border-transparent hover:border-outline-variant"}`,
|
|
321
321
|
children: [
|
|
322
322
|
/* @__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 }),
|
|
323
|
-
displayText ? /* @__PURE__ */ jsx("span", { className: "text-on-surface text-sm", children: displayText }) : /* @__PURE__ */ jsxs("span", { className: "text-outline/40 text-sm", children: [
|
|
323
|
+
displayText ? /* @__PURE__ */ jsx("span", { className: "text-on-surface text-sm truncate block", children: displayText }) : /* @__PURE__ */ jsxs("span", { className: "text-outline/40 text-sm truncate block", children: [
|
|
324
324
|
placeholder.start,
|
|
325
325
|
" \u2192 ",
|
|
326
326
|
placeholder.end
|
|
@@ -5,7 +5,7 @@ function FilterTabs({
|
|
|
5
5
|
activeTab,
|
|
6
6
|
onTabChange
|
|
7
7
|
}) {
|
|
8
|
-
return /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex items-center gap-2 border-b border-outline-variant/20 overflow-x-auto", children: tabs.map((tab) => {
|
|
8
|
+
return /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex items-center gap-2 border-b border-outline-variant/20 overflow-x-auto w-full scrollbar-hide", children: tabs.map((tab) => {
|
|
9
9
|
const isActive = activeTab === tab.id;
|
|
10
10
|
return /* @__PURE__ */ jsxs(
|
|
11
11
|
"button",
|
|
@@ -94,7 +94,7 @@ function SelectPicker({
|
|
|
94
94
|
"aria-controls": "select-picker-listbox",
|
|
95
95
|
"aria-required": required,
|
|
96
96
|
onClick: () => toggleOpen(!open),
|
|
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" ? "h-10 px-3 text-sm" : "py-4 px-6"} ${icon ? size === "sm" ? "pl-
|
|
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" ? "h-10 px-3 text-sm" : "py-4 px-6"} ${icon ? size === "sm" ? "pl-10" : "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"}`,
|
|
98
98
|
children: [
|
|
99
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 }),
|
|
100
100
|
selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-on-surface", children: [
|
|
@@ -125,7 +125,7 @@ function TimePicker({
|
|
|
125
125
|
"aria-haspopup": "dialog",
|
|
126
126
|
"aria-required": required,
|
|
127
127
|
onClick: () => setOpen(!open),
|
|
128
|
-
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${size === "sm" ? `h-10 px-3 text-sm ${icon ? "pl-
|
|
128
|
+
className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${size === "sm" ? `h-10 px-3 text-sm ${icon ? "pl-10" : ""}` : `py-4 px-6 ${icon ? "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"}`,
|
|
129
129
|
children: [
|
|
130
130
|
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 }),
|
|
131
131
|
displayValue ? /* @__PURE__ */ jsx("span", { className: "text-on-surface", children: displayValue }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder })
|