@pichetch08/trip-ui 0.2.8 → 0.2.11

package/dist/components/shared/date-picker.js

@@ -138,7 +138,7 @@ function DatePicker({
         "aria-haspopup": "dialog",
         "aria-required": required,
         onClick: () => setOpen(!open),
-        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-8" : ""}` : `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"}`,
+        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"}`,
         children: [
           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 }),
           displayValue ? /* @__PURE__ */ jsx("span", { className: "text-on-surface", children: displayValue }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder })

package/dist/components/shared/date-range-picker.js

@@ -317,7 +317,7 @@ function DateRangePicker({
         "aria-haspopup": "dialog",
         "aria-required": required,
         onClick: handleOpen,
-        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-8 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"}`,
+        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"}`,
         children: [
           /* @__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 }),
           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: [

package/dist/components/shared/filter-tabs.js

@@ -5,7 +5,7 @@ function FilterTabs({
   activeTab,
   onTabChange
 }) {
-  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) => {
+  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) => {
     const isActive = activeTab === tab.id;
     return /* @__PURE__ */ jsxs(
       "button",

package/dist/components/shared/number-input.js

@@ -69,11 +69,11 @@ function NumberInput({
               "aria-label": decrementLabel,
               disabled: disabled || !canDecrement,
               onClick: decrement,
-              className: "px-4 py-4 text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 active:scale-[0.95] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+              className: "px-4 py-3 text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 active:scale-[0.95] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
               children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined leading-none text-xl", "aria-hidden": "true", children: "remove" })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center flex-1 gap-1 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center flex-1 gap-1 py-3", children: [
             prefix && /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant font-medium text-sm shrink-0", children: prefix }),
             /* @__PURE__ */ jsx(
               "input",
@@ -102,7 +102,7 @@ function NumberInput({
               "aria-label": incrementLabel,
               disabled: disabled || !canIncrement,
               onClick: increment,
-              className: "px-4 py-4 text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 active:scale-[0.95] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+              className: "px-4 py-3 text-on-surface-variant hover:bg-surface-container hover:text-on-surface transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0 active:scale-[0.95] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
               children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined leading-none text-xl", "aria-hidden": "true", children: "add" })
             }
           )

package/dist/components/shared/select-picker.js

@@ -94,7 +94,7 @@ function SelectPicker({
         "aria-controls": "select-picker-listbox",
         "aria-required": required,
         onClick: () => toggleOpen(!open),
-        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-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"}`,
+        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"}`,
         children: [
           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 }),
           selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-on-surface", children: [

package/dist/components/shared/time-picker.js

@@ -125,7 +125,7 @@ function TimePicker({
         "aria-haspopup": "dialog",
         "aria-required": required,
         onClick: () => setOpen(!open),
-        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-8" : ""}` : `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"}`,
+        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"}`,
         children: [
           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 }),
           displayValue ? /* @__PURE__ */ jsx("span", { className: "text-on-surface", children: displayValue }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pichetch08/trip-ui",
-  "version": "0.2.8",
+  "version": "0.2.11",
   "description": "Trip UI — shared React component library built with Tailwind v4 and Material Design 3 tokens",
   "author": "pichetch08",
   "license": "MIT",