@pichetch08/trip-ui 0.2.5 → 0.2.7

package/dist/components/shared/button.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Spinner } from "./spinner";
 const VARIANT = {
-  primary: "bg-primary text-on-primary hover:[filter:brightness(0.88)] shadow-sm hover:shadow-md active:scale-[0.98]",
+  primary: "bg-primary text-(--on-primary) hover:[filter:brightness(0.88)] shadow-sm hover:shadow-md active:scale-[0.98]",
   secondary: "bg-surface-container text-on-surface hover:bg-surface-container-high active:scale-[0.98]",
   outline: "bg-transparent border border-outline-variant text-on-surface hover:bg-surface-container-low hover:border-outline active:scale-[0.98]",
   ghost: "bg-transparent text-on-surface-variant hover:bg-surface-container hover:text-on-surface active:scale-[0.98]",

package/dist/components/shared/date-picker.d.ts

@@ -11,9 +11,10 @@ interface DatePickerProps {
     error?: string;
     icon?: string;
     name?: string;
+    size?: "sm" | "md";
     dayNames?: string[];
     monthNames?: string[];
 }
-declare function DatePicker({ label, value, onChange, placeholder, todayLabel, clearLabel, min, max, required, error, icon, name, dayNames, monthNames, }: DatePickerProps): React.ReactNode;
+declare function DatePicker({ label, value, onChange, placeholder, todayLabel, clearLabel, min, max, required, error, icon, name, size, dayNames, monthNames, }: DatePickerProps): React.ReactNode;
 
 export { DatePicker };

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

@@ -50,6 +50,7 @@ function DatePicker({
   error,
   icon = "calendar_today",
   name,
+  size = "md",
   dayNames = DAYS_TH,
   monthNames = MONTHS_TH
 }) {
@@ -137,9 +138,9 @@ function DatePicker({
         "aria-haspopup": "dialog",
         "aria-required": required,
         onClick: () => setOpen(!open),
-        className: `relative w-full bg-surface-container-low border rounded-xl py-4 px-6 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 ${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-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"}`,
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", children: icon }),
+          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.d.ts

@@ -17,9 +17,10 @@ interface DateRangePickerProps {
     icon?: string;
     nameStart?: string;
     nameEnd?: string;
+    size?: "sm" | "md";
     monthNames?: string[];
     dayNames?: string[];
 }
-declare function DateRangePicker({ label, startDate, endDate, onStartChange, onEndChange, required, error, placeholder, clearLabel, confirmLabel, minDate: minDateStr, maxDate: maxDateStr, icon, nameStart, nameEnd, monthNames, dayNames, }: DateRangePickerProps): React.ReactNode;
+declare function DateRangePicker({ label, startDate, endDate, onStartChange, onEndChange, required, error, placeholder, clearLabel, confirmLabel, minDate: minDateStr, maxDate: maxDateStr, icon, nameStart, nameEnd, size, monthNames, dayNames, }: DateRangePickerProps): React.ReactNode;
 
 export { DateRangePicker };

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

@@ -187,6 +187,7 @@ function DateRangePicker({
   icon = "calendar_month",
   nameStart,
   nameEnd,
+  size = "md",
   monthNames = THAI_MONTHS_SHORT,
   dayNames = WEEKDAY_LABELS
 }) {
@@ -316,9 +317,9 @@ function DateRangePicker({
         "aria-haspopup": "dialog",
         "aria-required": required,
         onClick: handleOpen,
-        className: `relative w-full bg-surface-container-low border rounded-xl py-4 pl-12 pr-10 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 ${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 pl-8 pr-8 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 left-4 top-1/2 -translate-y-1/2 text-on-surface-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 }),
           displayText ? /* @__PURE__ */ jsx("span", { className: "text-on-surface text-sm", children: displayText }) : /* @__PURE__ */ jsxs("span", { className: "text-outline/40 text-sm", children: [
             placeholder.start,
             " \u2192 ",

package/dist/components/shared/time-picker.d.ts

@@ -13,7 +13,8 @@ interface TimePickerProps {
     error?: string;
     icon?: string;
     name?: string;
+    size?: "sm" | "md";
 }
-declare function TimePicker({ label, value, onChange, onBlur, placeholder, hourLabel, minuteLabel, quickSelectLabel, clearLabel, confirmLabel, required, error, icon, name, }: TimePickerProps): React.ReactNode;
+declare function TimePicker({ label, value, onChange, onBlur, placeholder, hourLabel, minuteLabel, quickSelectLabel, clearLabel, confirmLabel, required, error, icon, name, size, }: TimePickerProps): React.ReactNode;
 
 export { TimePicker };

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

@@ -34,7 +34,8 @@ function TimePicker({
   required,
   error,
   icon = "schedule",
-  name
+  name,
+  size = "md"
 }) {
   const [open, setOpen] = useState(false);
   const containerRef = useRef(null);
@@ -124,9 +125,9 @@ function TimePicker({
         "aria-haspopup": "dialog",
         "aria-required": required,
         onClick: () => setOpen(!open),
-        className: `relative w-full bg-surface-container-low border rounded-xl py-4 px-6 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 ${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-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"}`,
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", children: icon }),
+          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.5",
+  "version": "0.2.7",
   "description": "Trip UI — shared React component library built with Tailwind v4 and Material Design 3 tokens",
   "author": "pichetch08",
   "license": "MIT",