@pichetch08/trip-ui 0.1.0

package/dist/multi-select.js

@@ -0,0 +1,261 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+function MultiSelect({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder = "\u0E40\u0E25\u0E37\u0E2D\u0E01",
+  searchPlaceholder = "\u0E04\u0E49\u0E19\u0E2B\u0E32...",
+  selectAllText = "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  clearAllText = "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  emptyText = "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
+  moreLabel = "\u0E2D\u0E37\u0E48\u0E19\u0E46",
+  required,
+  error,
+  searchable = true,
+  maxDisplay = 3,
+  icon,
+  disabled = false,
+  name,
+  onOpen,
+  onClose,
+  removePillLabel = (lbl) => `Remove ${lbl}`
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const searchRef = useRef(null);
+  const filtered = search ? options.filter(
+    (o) => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase())
+  ) : options;
+  const selectedOptions = options.filter((o) => value.includes(o.value));
+  const displayedPills = selectedOptions.slice(0, maxDisplay);
+  const extraCount = selectedOptions.length - maxDisplay;
+  function toggleOpen(next) {
+    setOpen(next);
+    if (next) onOpen == null ? void 0 : onOpen();
+    else onClose == null ? void 0 : onClose();
+  }
+  useEffect(() => {
+    if (open && searchable) {
+      requestAnimationFrame(() => {
+        var _a;
+        return (_a = searchRef.current) == null ? void 0 : _a.focus();
+      });
+    }
+    if (!open) setSearch("");
+  }, [open, searchable]);
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        toggleOpen(false);
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") toggleOpen(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open || !dropdownRef.current || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const dropdown = dropdownRef.current;
+    if (spaceBelow < 300) {
+      dropdown.style.bottom = "100%";
+      dropdown.style.top = "auto";
+      dropdown.style.marginBottom = "4px";
+      dropdown.style.marginTop = "0";
+    } else {
+      dropdown.style.top = "100%";
+      dropdown.style.bottom = "auto";
+      dropdown.style.marginTop = "4px";
+      dropdown.style.marginBottom = "0";
+    }
+  }, [open]);
+  function toggleOption(val) {
+    if (value.includes(val)) {
+      onChange(value.filter((v) => v !== val));
+    } else {
+      onChange([...value, val]);
+    }
+  }
+  function removeOption(val, e) {
+    e.stopPropagation();
+    onChange(value.filter((v) => v !== val));
+  }
+  function selectAll() {
+    const allValues = filtered.map((o) => o.value);
+    const merged = Array.from(/* @__PURE__ */ new Set([...value, ...allValues]));
+    onChange(merged);
+  }
+  function clearAll(e) {
+    if (e) e.stopPropagation();
+    onChange([]);
+  }
+  const allFilteredSelected = filtered.length > 0 && filtered.every((o) => value.includes(o.value));
+  const triggerId = label ? `multiselect-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 relative", ref: containerRef, children: [
+    name && value.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, v)),
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: triggerId, className: "text-xs font-bold text-on-surface-variant uppercase tracking-widest px-1", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: triggerId,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": "multi-select-listbox",
+        "aria-multiselectable": "true",
+        "aria-required": required,
+        disabled,
+        onClick: () => !disabled && toggleOpen(!open),
+        className: `relative w-full bg-surface-container-low border rounded-xl min-h-13 h-auto py-3 px-4 text-left transition-all duration-200 outline-none flex flex-wrap gap-1.5 items-center active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${icon ? "pl-12" : ""} pr-10 ${disabled ? "opacity-50 cursor-not-allowed" : 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 }),
+          selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-outline/40 font-medium", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            displayedPills.map((opt) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 bg-primary-container text-(--on-primary-container) text-xs font-medium px-2 py-0.5 rounded-md",
+                children: [
+                  opt.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-xs leading-none", children: opt.icon }),
+                  opt.label,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-label": removePillLabel(opt.label),
+                      onClick: (e) => removeOption(opt.value, e),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.stopPropagation();
+                          onChange(value.filter((v) => v !== opt.value));
+                        }
+                      },
+                      className: "material-symbols-outlined text-xs leading-none cursor-pointer opacity-70 hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 rounded",
+                      children: "close"
+                    }
+                  )
+                ]
+              },
+              opt.value
+            )),
+            extraCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center bg-primary-container text-(--on-primary-container) text-xs font-medium px-2 py-0.5 rounded-md", children: [
+              "+",
+              extraCount,
+              " ",
+              moreLabel
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-lg transition-transform ${open ? "rotate-180" : ""}`,
+              children: "expand_more"
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-500 px-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "error" }),
+      error
+    ] }),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "absolute z-50 left-0 right-0 bg-surface rounded-2xl shadow-2xl border border-outline-variant/30 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-3 border-b border-outline-variant/20 flex flex-col gap-2", children: [
+            searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-lg", children: "search" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchRef,
+                  type: "text",
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: searchPlaceholder,
+                  className: "w-full pl-10 pr-4 py-2.5 rounded-xl bg-surface-container-low border border-transparent text-sm text-on-surface font-medium placeholder:text-outline/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all"
+                }
+              )
+            ] }),
+            options.length > 3 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: selectAll,
+                  disabled: allFilteredSelected,
+                  className: "text-xs font-semibold text-primary hover:opacity-70 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed",
+                  children: selectAllText
+                }
+              ),
+              value.length > 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => clearAll(e),
+                  className: "text-xs font-semibold text-red-500 hover:opacity-70 transition-opacity",
+                  children: clearAllText
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { id: "multi-select-listbox", role: "listbox", "aria-multiselectable": "true", className: "max-h-56 overflow-y-auto scrollbar-hide py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-on-surface-variant", children: emptyText }) : filtered.map((opt) => {
+            const isSelected = value.includes(opt.value);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => toggleOption(opt.value),
+                className: `w-full flex items-center gap-3 px-4 py-3 text-left text-sm font-medium transition-all ${isSelected ? "bg-primary-container text-(--on-primary-container)" : "text-on-surface hover:bg-surface-variant/50"}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `shrink-0 w-4 h-4 rounded border-2 flex items-center justify-center transition-all ${isSelected ? "border-primary bg-primary" : "border-outline-variant"}`,
+                      children: isSelected && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-white text-xs leading-none", style: { fontSize: "12px" }, children: "check" })
+                    }
+                  ),
+                  opt.icon && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `material-symbols-outlined text-base ${isSelected ? "text-(--on-primary-container)" : "text-on-surface-variant"}`,
+                      children: opt.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: opt.label })
+                ]
+              },
+              opt.value
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MultiSelect
+};

package/dist/number-input.d.ts

@@ -0,0 +1,21 @@
+interface NumberInputProps {
+    label?: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    required?: boolean;
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    prefix?: string;
+    suffix?: string;
+    name?: string;
+    decrementLabel?: string;
+    incrementLabel?: string;
+    requiredText?: string;
+}
+declare function NumberInput({ label, value, onChange, min, max, step, required, error, hint, disabled, prefix, suffix, name, decrementLabel, incrementLabel, requiredText, }: NumberInputProps): React.ReactNode;
+
+export { NumberInput, type NumberInputProps };

package/dist/number-input.js

@@ -0,0 +1,129 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NumberInput({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  required = false,
+  error,
+  hint,
+  disabled = false,
+  prefix,
+  suffix,
+  name,
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+  requiredText = "(\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19)"
+}) {
+  const canDecrement = min === void 0 || value > min;
+  const canIncrement = max === void 0 || value < max;
+  function decrement() {
+    if (canDecrement) {
+      const next = value - step;
+      onChange(min !== void 0 ? Math.max(next, min) : next);
+    }
+  }
+  function increment() {
+    if (canIncrement) {
+      const next = value + step;
+      onChange(max !== void 0 ? Math.min(next, max) : next);
+    }
+  }
+  function handleInputChange(e) {
+    const raw = parseFloat(e.target.value);
+    if (isNaN(raw)) return;
+    let clamped = raw;
+    if (min !== void 0) clamped = Math.max(clamped, min);
+    if (max !== void 0) clamped = Math.min(clamped, max);
+    onChange(clamped);
+  }
+  const inputId = label ? `number-input-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-xs font-bold text-on-surface-variant uppercase tracking-widest px-1",
+        children: [
+          label,
+          required && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", "aria-hidden": "true", children: "*" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: requiredText })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center bg-surface-container-low border rounded-xl overflow-hidden transition-all ${error ? "border-red-400 bg-red-50/30" : "border-transparent focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "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",
+              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: [
+            prefix && /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant font-medium text-sm shrink-0", children: prefix }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: inputId,
+                name,
+                type: "number",
+                value,
+                onChange: handleInputChange,
+                min,
+                max,
+                step,
+                disabled,
+                required,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": error ? `${inputId}-error` : hint ? `${inputId}-hint` : void 0,
+                className: "text-center font-medium bg-transparent outline-none w-16 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-on-surface"
+              }
+            ),
+            suffix && /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant font-medium text-sm shrink-0", children: suffix })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "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",
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined leading-none text-xl", "aria-hidden": "true", children: "add" })
+            }
+          )
+        ]
+      }
+    ),
+    hint && !error && /* @__PURE__ */ jsx("p", { id: `${inputId}-hint`, className: "text-[11px] text-on-surface-variant px-1", children: hint }),
+    error && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        id: `${inputId}-error`,
+        className: "text-xs text-red-500 px-1 flex items-center gap-1",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", "aria-hidden": "true", children: "error" }),
+          error
+        ]
+      }
+    )
+  ] });
+}
+export {
+  NumberInput
+};

package/dist/otp-input.d.ts

@@ -0,0 +1,13 @@
+interface OTPInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    error?: string;
+    label?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+declare function OTPInput({ length, value, onChange, onComplete, error, label, disabled, ariaLabel, }: OTPInputProps): React.ReactNode;
+
+export { OTPInput };

package/dist/otp-input.js

@@ -0,0 +1,114 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+function OTPInput({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  error,
+  label,
+  disabled = false,
+  ariaLabel
+}) {
+  const inputsRef = useRef([]);
+  const labelId = label ? "otp-label" : void 0;
+  const digits = Array.from({ length }, (_, i) => {
+    var _a;
+    return (_a = value[i]) != null ? _a : "";
+  });
+  useEffect(() => {
+    inputsRef.current = inputsRef.current.slice(0, length);
+  }, [length]);
+  const updateValue = (newDigits) => {
+    const next = newDigits.join("");
+    onChange(next);
+    if (next.length === length && onComplete) {
+      onComplete(next);
+    }
+  };
+  const handleChange = (index, char) => {
+    var _a;
+    const digit = char.replace(/\D/g, "").slice(-1);
+    const newDigits = [...digits];
+    newDigits[index] = digit;
+    updateValue(newDigits);
+    if (digit && index < length - 1) {
+      (_a = inputsRef.current[index + 1]) == null ? void 0 : _a.focus();
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    var _a, _b, _c;
+    if (e.key === "Backspace") {
+      if (digits[index]) {
+        const newDigits = [...digits];
+        newDigits[index] = "";
+        updateValue(newDigits);
+      } else if (index > 0) {
+        const newDigits = [...digits];
+        newDigits[index - 1] = "";
+        updateValue(newDigits);
+        (_a = inputsRef.current[index - 1]) == null ? void 0 : _a.focus();
+      }
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      (_b = inputsRef.current[index - 1]) == null ? void 0 : _b.focus();
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      (_c = inputsRef.current[index + 1]) == null ? void 0 : _c.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    var _a;
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    const newDigits = [...digits];
+    pasted.split("").forEach((ch, i) => {
+      newDigits[i] = ch;
+    });
+    updateValue(newDigits);
+    const focusIndex = Math.min(pasted.length, length - 1);
+    (_a = inputsRef.current[focusIndex]) == null ? void 0 : _a.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    label && /* @__PURE__ */ jsx("label", { id: labelId, className: "text-sm font-semibold text-on-surface", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-label": !label ? ariaLabel != null ? ariaLabel : "OTP input" : void 0,
+        className: "flex gap-2",
+        children: Array.from({ length }, (_, index) => {
+          const isFilled = Boolean(digits[index]);
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (el) => {
+                if (el) inputsRef.current[index] = el;
+              },
+              type: "text",
+              inputMode: "numeric",
+              maxLength: 1,
+              value: digits[index],
+              disabled,
+              "aria-label": `Digit ${index + 1} of ${length}`,
+              onChange: (e) => handleChange(index, e.target.value),
+              onKeyDown: (e) => handleKeyDown(index, e),
+              onPaste: handlePaste,
+              onFocus: (e) => e.target.select(),
+              className: `w-12 h-14 text-center text-xl font-bold rounded-xl border-2 bg-surface-container-low outline-none transition-all disabled:opacity-50 disabled:cursor-not-allowed ${error ? "border-red-400 bg-red-50/30" : isFilled ? "border-outline-variant bg-surface" : "border-transparent"} focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20`
+            },
+            index
+          );
+        })
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-500 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: "error" }),
+      error
+    ] })
+  ] });
+}
+export {
+  OTPInput
+};

package/dist/page-header.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    actions?: React.ReactNode;
+    breadcrumbs?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    breadcrumbNavLabel?: string;
+}
+declare function PageHeader({ title, description, actions, breadcrumbs, breadcrumbNavLabel, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { PageHeader };

package/dist/page-header.js

@@ -0,0 +1,43 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  description,
+  actions,
+  breadcrumbs,
+  breadcrumbNavLabel = "breadcrumb"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 mb-8", children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": breadcrumbNavLabel, className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((item, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      item.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-primary hover:underline",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        __spreadProps(__spreadValues({
+          className: "text-on-surface-variant"
+        }, idx === breadcrumbs.length - 1 ? { "aria-current": "page" } : {}), {
+          children: item.label
+        })
+      ),
+      idx < breadcrumbs.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-outline", children: "/" })
+    ] }, idx)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-on-surface mb-2", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-base text-on-surface-variant", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: actions })
+    ] })
+  ] });
+}
+export {
+  PageHeader
+};

package/dist/page-state.d.ts

@@ -0,0 +1,14 @@
+interface LoadingStateProps {
+    message?: string;
+    loadingText?: string;
+    size?: "page" | "section";
+}
+declare function LoadingState({ message, loadingText, size }: LoadingStateProps): React.ReactNode;
+interface ErrorStateProps {
+    message: string;
+    onRetry?: () => void;
+    retryLabel?: string;
+}
+declare function ErrorState({ message, onRetry, retryLabel }: ErrorStateProps): React.ReactNode;
+
+export { ErrorState, LoadingState };

package/dist/page-state.js

@@ -0,0 +1,29 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LoadingState({ message, loadingText = "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14...", size = "page" }) {
+  const padding = size === "page" ? "p-8 min-h-60" : "py-12";
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: `${padding} flex flex-col items-center justify-center gap-3`, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined animate-spin text-primary text-3xl", children: "progress_activity" }),
+    message ? /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface-variant", children: message }) : /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText })
+  ] });
+}
+function ErrorState({ message, onRetry, retryLabel = "\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "p-8 text-center space-y-3", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined text-4xl text-red-400", children: "error" }),
+    /* @__PURE__ */ jsx("p", { className: "text-on-surface-variant text-sm", children: message }),
+    onRetry && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: "text-sm text-primary font-semibold cursor-pointer hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        children: retryLabel
+      }
+    )
+  ] });
+}
+export {
+  ErrorState,
+  LoadingState
+};

package/dist/pagination.d.ts

@@ -0,0 +1,20 @@
+interface PaginationLabels {
+    showing?: (from: number, to: number, total: number) => string;
+    page?: (current: number, total: number) => string;
+    prevPage?: string;
+    nextPage?: string;
+    pageLabel?: (page: number) => string;
+    nav?: string;
+}
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /** When provided with pageSize, shows item range summary */
+    totalItems?: number;
+    pageSize?: number;
+    labels?: PaginationLabels;
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, totalItems, pageSize, labels, }: PaginationProps): React.ReactNode;
+
+export { Pagination };