@pichetch08/trip-ui 0.1.0

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface DropdownItem {
+    label: string;
+    icon?: string;
+    onClick?: () => void;
+    href?: string;
+    variant?: "default" | "danger";
+    disabled?: boolean;
+    divider?: boolean;
+}
+interface DropdownMenuProps {
+    trigger: React.ReactNode;
+    items: DropdownItem[];
+    align?: "left" | "right";
+    className?: string;
+}
+declare function DropdownMenu({ trigger, items, align, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+export { type DropdownItem, DropdownMenu };

package/dist/dropdown-menu.js

@@ -0,0 +1,94 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+function DropdownMenu({
+  trigger,
+  items,
+  align = "left",
+  className = ""
+}) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    function handleMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative inline-block ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setOpen((prev) => !prev),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        children: trigger
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "menu",
+        className: `absolute top-full mt-1 z-50 bg-white rounded-xl shadow-xl border border-outline-variant/20 overflow-hidden min-w-40 py-1 ${align === "right" ? "right-0" : "left-0"}`,
+        children: items.map((item, index) => {
+          const baseItemClass = `flex items-center gap-2.5 px-3 py-2.5 text-sm transition-colors duration-150 w-full text-left active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30`;
+          const variantClass = item.variant === "danger" ? "text-red-600 hover:bg-red-50" : "text-on-surface hover:bg-surface-container-low";
+          const disabledClass = item.disabled ? "opacity-40 cursor-not-allowed pointer-events-none" : "";
+          return /* @__PURE__ */ jsxs("div", { children: [
+            item.divider && /* @__PURE__ */ jsx("div", { className: "border-t border-outline-variant/20 my-1" }),
+            item.href && !item.disabled ? /* @__PURE__ */ jsxs(
+              "a",
+              {
+                role: "menuitem",
+                href: item.href,
+                className: `${baseItemClass} ${variantClass} ${disabledClass}`,
+                onClick: () => setOpen(false),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base", "aria-hidden": "true", children: item.icon }),
+                  /* @__PURE__ */ jsx("span", { children: item.label })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                role: "menuitem",
+                type: "button",
+                disabled: item.disabled,
+                "aria-disabled": item.disabled,
+                onClick: () => {
+                  var _a;
+                  if (!item.disabled) {
+                    (_a = item.onClick) == null ? void 0 : _a.call(item);
+                    setOpen(false);
+                  }
+                },
+                className: `${baseItemClass} ${variantClass} ${disabledClass}`,
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base", "aria-hidden": "true", children: item.icon }),
+                  /* @__PURE__ */ jsx("span", { children: item.label })
+                ]
+              }
+            )
+          ] }, index);
+        })
+      }
+    )
+  ] });
+}
+export {
+  DropdownMenu
+};

package/dist/empty-state.d.ts

@@ -0,0 +1,13 @@
+interface EmptyStateProps {
+    icon: string;
+    title: string;
+    description: string;
+    actionLabel?: string;
+    actionHref?: string;
+    onAction?: () => void;
+    actionIcon?: string;
+    actionVariant?: "primary" | "secondary";
+}
+declare function EmptyState({ icon, title, description, actionLabel, actionHref, onAction, actionIcon, actionVariant, }: EmptyStateProps): React.ReactNode;
+
+export { EmptyState };

package/dist/empty-state.js

@@ -0,0 +1,24 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "./button";
+function EmptyState({
+  icon,
+  title,
+  description,
+  actionLabel,
+  actionHref,
+  onAction,
+  actionIcon = "add",
+  actionVariant = "primary"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-20 px-6 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-20 h-20 rounded-3xl bg-surface-container-low flex items-center justify-center mb-6", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-4xl text-on-surface-variant opacity-40", "aria-hidden": "true", children: icon }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-on-surface mb-2", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface-variant max-w-sm mb-8 leading-relaxed", children: description }),
+    actionLabel && actionHref && /* @__PURE__ */ jsx("a", { href: actionHref, children: /* @__PURE__ */ jsx(Button, { variant: actionVariant, icon: actionIcon, children: actionLabel }) }),
+    actionLabel && onAction && !actionHref && /* @__PURE__ */ jsx(Button, { variant: actionVariant, icon: actionIcon, onClick: onAction, children: actionLabel })
+  ] });
+}
+export {
+  EmptyState
+};

package/dist/file-upload.d.ts

@@ -0,0 +1,32 @@
+interface UploadedFile {
+    name: string;
+    size: number;
+    url: string;
+    type: string;
+}
+interface FileUploadProps {
+    value?: UploadedFile[];
+    onChange?: (files: UploadedFile[]) => void;
+    onUpload: (file: File) => Promise<string>;
+    onUploadProgress?: (fileName: string, progress: number) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    accept?: string;
+    maxSizeMB?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    name?: string;
+    dragText?: string;
+    uploadingText?: string;
+    maxFilesReachedText?: (max: number) => string;
+    limitHintText?: (mb: number, max: number) => string;
+    maxFilesErrorText?: (max: number) => string;
+    maxSizeErrorText?: (fileName: string, mb: number) => string;
+    uploadAreaLabel?: string;
+    removeFileLabel?: (name: string) => string;
+}
+declare function FileUpload({ value, onChange, onUpload, onUploadProgress, label, hint, error, accept, maxSizeMB, maxFiles, multiple, disabled, name, dragText, uploadingText, maxFilesReachedText, limitHintText, maxFilesErrorText, maxSizeErrorText, uploadAreaLabel, removeFileLabel, }: FileUploadProps): React.ReactNode;
+
+export { FileUpload, type UploadedFile };

package/dist/file-upload.js

@@ -0,0 +1,212 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Spinner } from "./spinner";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getFileIcon(type) {
+  if (type === "application/pdf") return "picture_as_pdf";
+  if (type === "application/msword" || type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document")
+    return "description";
+  if (type === "text/csv" || type === "application/vnd.ms-excel" || type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
+    return "table_chart";
+  return "attach_file";
+}
+function FileUpload({
+  value = [],
+  onChange,
+  onUpload,
+  onUploadProgress,
+  label,
+  hint,
+  error,
+  accept = "*",
+  maxSizeMB = 10,
+  maxFiles = 5,
+  multiple = true,
+  disabled = false,
+  name,
+  dragText = "\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E27\u0E32\u0E07\u0E17\u0E35\u0E48\u0E19\u0E35\u0E48 \u0E2B\u0E23\u0E37\u0E2D\u0E04\u0E25\u0E34\u0E01\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
+  uploadingText = "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14...",
+  maxFilesReachedText = (max) => `\u0E04\u0E23\u0E1A ${max} \u0E44\u0E1F\u0E25\u0E4C\u0E41\u0E25\u0E49\u0E27`,
+  limitHintText = (mb, max) => `\u0E44\u0E1F\u0E25\u0E4C\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${mb} MB \xB7 \u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${max} \u0E44\u0E1F\u0E25\u0E4C`,
+  maxFilesErrorText = (max) => `\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E14\u0E49\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14 ${max} \u0E44\u0E1F\u0E25\u0E4C`,
+  maxSizeErrorText = (fileName, mb) => `\u0E44\u0E1F\u0E25\u0E4C ${fileName} \u0E21\u0E35\u0E02\u0E19\u0E32\u0E14\u0E40\u0E01\u0E34\u0E19 ${mb} MB`,
+  uploadAreaLabel = "Upload files",
+  removeFileLabel = (name2) => `Remove ${name2}`
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [internalError, setInternalError] = useState(null);
+  const [uploadingRows, setUploadingRows] = useState([]);
+  const displayError = error != null ? error : internalError;
+  const handleFiles = async (files) => {
+    if (!files || files.length === 0) return;
+    setInternalError(null);
+    const incoming = Array.from(files);
+    if (value.length + incoming.length > maxFiles) {
+      setInternalError(maxFilesErrorText(maxFiles));
+      return;
+    }
+    for (const file of incoming) {
+      if (file.size > maxSizeMB * 1024 * 1024) {
+        setInternalError(maxSizeErrorText(file.name, maxSizeMB));
+        return;
+      }
+    }
+    const rows = incoming.map((f) => ({
+      id: `${Date.now()}-${f.name}`,
+      name: f.name
+    }));
+    setUploadingRows((prev) => [...prev, ...rows]);
+    const results = [];
+    await Promise.all(
+      incoming.map(async (file, i) => {
+        onUploadProgress == null ? void 0 : onUploadProgress(file.name, 0);
+        try {
+          const url = await onUpload(file);
+          results.push({ name: file.name, size: file.size, url, type: file.type });
+          onUploadProgress == null ? void 0 : onUploadProgress(file.name, 100);
+        } finally {
+          const rowId = rows[i].id;
+          setUploadingRows((prev) => prev.filter((r) => r.id !== rowId));
+        }
+      })
+    );
+    if (results.length > 0) {
+      onChange == null ? void 0 : onChange([...value, ...results]);
+    }
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const handleRemove = (index) => {
+    const next = value.filter((_, i) => i !== index);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) setDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  };
+  const canUploadMore = value.length + uploadingRows.length < maxFiles;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    label && /* @__PURE__ */ jsx("label", { className: "text-sm font-semibold text-on-surface", children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": uploadAreaLabel,
+        className: [
+          "border-2 border-dashed rounded-2xl p-8 text-center transition-colors cursor-pointer select-none",
+          dragging ? "border-primary bg-primary/5" : displayError ? "border-red-400 bg-surface-container-low/50" : "border-outline-variant/40 bg-surface-container-low/50",
+          disabled || !canUploadMore ? "opacity-50 cursor-not-allowed pointer-events-none" : "hover:border-primary/50 hover:bg-primary/5"
+        ].join(" "),
+        onClick: () => {
+          var _a;
+          return !disabled && canUploadMore && ((_a = inputRef.current) == null ? void 0 : _a.click());
+        },
+        onKeyDown: (e) => {
+          var _a;
+          if ((e.key === "Enter" || e.key === " ") && !disabled && canUploadMore)
+            (_a = inputRef.current) == null ? void 0 : _a.click();
+        },
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "material-symbols-outlined text-on-surface-variant mb-2 block",
+              style: { fontSize: "40px" },
+              children: "cloud_upload"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-on-surface", children: canUploadMore ? dragText : maxFilesReachedText(maxFiles) }),
+          hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant mt-1", children: hint }),
+          canUploadMore && /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant mt-1", children: limitHintText(maxSizeMB, maxFiles) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        className: "hidden",
+        onChange: (e) => handleFiles(e.target.files)
+      }
+    ),
+    displayError && /* @__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" }),
+      displayError
+    ] }),
+    (value.length > 0 || uploadingRows.length > 0) && /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-2", children: [
+      value.map((file, i) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-center gap-3 p-3 bg-surface-container-low rounded-xl",
+          children: [
+            name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: file.url }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "material-symbols-outlined text-primary shrink-0",
+                style: { fontSize: "22px" },
+                children: getFileIcon(file.type)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-on-surface truncate", children: file.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", children: formatBytes(file.size) })
+            ] }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleRemove(i),
+                className: "shrink-0 p-1 rounded-lg text-on-surface-variant hover:bg-surface-container hover:text-red-500 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+                "aria-label": removeFileLabel(file.name),
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: "close" })
+              }
+            )
+          ]
+        },
+        `${file.name}-${i}`
+      )),
+      uploadingRows.map((row) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-center gap-3 p-3 bg-surface-container-low rounded-xl",
+          children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "sm", color: "primary", className: "shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-on-surface truncate", children: row.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", children: uploadingText })
+            ] })
+          ]
+        },
+        row.id
+      ))
+    ] })
+  ] });
+}
+export {
+  FileUpload
+};

package/dist/filter-tabs.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface FilterTab {
+    id: string;
+    label: string;
+    icon?: string;
+    count?: number;
+}
+interface FilterTabsProps {
+    tabs: FilterTab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+}
+declare function FilterTabs({ tabs, activeTab, onTabChange, }: FilterTabsProps): react_jsx_runtime.JSX.Element;
+
+export { type FilterTab, FilterTabs };

package/dist/filter-tabs.js

@@ -0,0 +1,30 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterTabs({
+  tabs,
+  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) => {
+    const isActive = activeTab === tab.id;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": isActive,
+        onClick: () => onTabChange(tab.id),
+        className: `flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isActive ? "border-primary text-primary" : "border-transparent text-on-surface-variant hover:text-primary"}`,
+        children: [
+          tab.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg", "aria-hidden": "true", children: tab.icon }),
+          /* @__PURE__ */ jsx("span", { children: tab.label }),
+          tab.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs px-2 py-0.5 rounded-full bg-surface-container", children: tab.count })
+        ]
+      },
+      tab.id
+    );
+  }) });
+}
+export {
+  FilterTabs
+};

package/dist/footer-action-bar.d.ts

@@ -0,0 +1,21 @@
+interface FooterActionBarProps {
+    backHref?: string;
+    backLabel: string;
+    backIcon?: string;
+    onBack?: () => void;
+    onSaveDraft?: () => void;
+    saveDraftLabel?: string;
+    savingText?: string;
+    savingDraft?: boolean;
+    middleSlot?: React.ReactNode;
+    nextHref?: string;
+    nextLabel: string;
+    nextIcon?: string;
+    nextVariant?: "primary" | "success";
+    onNext?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare function FooterActionBar({ backHref, backLabel, onBack, backIcon, onSaveDraft, saveDraftLabel, savingText, savingDraft, middleSlot, nextHref, nextLabel, nextIcon, nextVariant, onNext, disabled, loading, }: FooterActionBarProps): React.ReactNode;
+
+export { FooterActionBar };

package/dist/footer-action-bar.js

@@ -0,0 +1,95 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FooterActionBar({
+  backHref,
+  backLabel,
+  onBack,
+  backIcon = "arrow_back",
+  onSaveDraft,
+  saveDraftLabel = "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E23\u0E48\u0E32\u0E07",
+  savingText = "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01...",
+  savingDraft = false,
+  middleSlot,
+  nextHref,
+  nextLabel,
+  nextIcon = "arrow_forward",
+  nextVariant = "primary",
+  onNext,
+  disabled = false,
+  loading = false
+}) {
+  const nextColor = nextVariant === "success" ? "bg-green-600 text-white shadow-xl shadow-green-600/25" : "bg-primary text-on-primary shadow-xl shadow-primary/25";
+  const nextContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx("div", { className: "w-5 h-5 border-2 border-white/40 border-t-white rounded-full animate-spin" }) : nextVariant === "success" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontVariationSettings: "'FILL' 1" }, "aria-hidden": "true", children: "rocket_launch" }) : null,
+    nextLabel,
+    !loading && nextVariant === "primary" && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined group-hover:translate-x-1 transition-transform", "aria-hidden": "true", children: nextIcon })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "sticky top-32 z-19 bg-surface/95 backdrop-blur-sm border-b border-outline-variant/30 px-4 md:px-8 py-3 flex flex-col md:flex-row items-center justify-between gap-3 flex-wrap", children: [
+    onBack ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "w-full md:w-auto px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:bg-surface-container-low transition-colors flex items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: backIcon }),
+          " ",
+          backLabel
+        ]
+      }
+    ) : backHref ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: backHref,
+        className: "w-full md:w-auto px-6 py-2.5 rounded-full text-sm font-bold text-on-surface-variant hover:bg-surface-container-low transition-colors flex items-center justify-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: backIcon }),
+          " ",
+          backLabel
+        ]
+      }
+    ) : /* @__PURE__ */ jsx("div", {}),
+    middleSlot && /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: middleSlot }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full md:w-auto flex flex-col sm:flex-row items-center gap-4", children: [
+      onSaveDraft && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onSaveDraft,
+          disabled: savingDraft || loading,
+          className: "w-full sm:w-auto px-6 py-2.5 rounded-full text-sm font-bold text-primary hover:bg-primary/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+          children: savingDraft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-primary/40 border-t-primary rounded-full animate-spin" }),
+            " ",
+            savingText
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg", "aria-hidden": "true", children: "save" }),
+            " ",
+            saveDraftLabel
+          ] })
+        }
+      ),
+      nextHref && !disabled ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: nextHref,
+          className: `w-full sm:w-auto px-8 py-3 rounded-full font-bold text-sm hover:scale-[1.02] active:scale-[0.98] transition-colors flex items-center justify-center gap-3 group ${nextColor}`,
+          children: nextContent
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onNext,
+          disabled: disabled || loading,
+          className: `w-full sm:w-auto px-8 py-3 rounded-full font-bold text-sm transition-colors flex items-center justify-center gap-3 group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${nextColor} ${disabled || loading ? "opacity-60 cursor-not-allowed" : "hover:scale-[1.02] active:scale-[0.98]"}`,
+          children: nextContent
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  FooterActionBar
+};

package/dist/form-input.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from 'react';
+
+interface FormInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "required"> {
+    label?: string;
+    icon?: string;
+    error?: string;
+    required?: boolean;
+    hint?: string;
+    inputId?: string;
+    requiredText?: string;
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+}
+declare const FormInput: React$1.ForwardRefExoticComponent<FormInputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+export { FormInput };

package/dist/form-input.js

@@ -0,0 +1,58 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+const FormInput = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, icon, error, required, hint, type, inputId, id, className = "", requiredText = "(\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19)", showPasswordLabel = "\u0E41\u0E2A\u0E14\u0E07\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19", hidePasswordLabel = "\u0E0B\u0E48\u0E2D\u0E19\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19" } = _b, props = __objRest(_b, ["label", "icon", "error", "required", "hint", "type", "inputId", "id", "className", "requiredText", "showPasswordLabel", "hidePasswordLabel"]);
+    var _a2;
+    const isPassword = type === "password";
+    const [showPassword, setShowPassword] = useState(false);
+    const resolvedId = (_a2 = inputId != null ? inputId : id) != null ? _a2 : label ? label.replace(/\s+/g, "-").toLowerCase() : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      label && /* @__PURE__ */ jsxs("label", { htmlFor: resolvedId, 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", "aria-hidden": "true", children: "*" }),
+        required && /* @__PURE__ */ jsx("span", { className: "sr-only", children: requiredText })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadValues({
+            ref,
+            id: resolvedId,
+            type: isPassword && showPassword ? "text" : type,
+            "aria-required": required,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": error ? `${resolvedId}-error` : hint ? `${resolvedId}-hint` : void 0,
+            className: `w-full bg-surface-container-low border rounded-xl py-4 px-6 focus-visible:bg-surface focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary transition-[border-color,box-shadow,background-color] text-on-surface font-medium placeholder:text-outline/40 outline-none ${icon ? "pl-12" : ""} ${isPassword ? "pr-12" : ""} ${error ? "border-red-400 bg-red-50/30" : "border-transparent"} ${className}`
+          }, props)
+        ),
+        isPassword && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPassword(!showPassword),
+            className: "absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 flex items-center justify-center text-outline hover:text-on-surface hover:bg-surface-container rounded-full transition-colors",
+            "aria-label": showPassword ? hidePasswordLabel : showPasswordLabel,
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-xl leading-none", children: showPassword ? "visibility_off" : "visibility" })
+          }
+        )
+      ] }),
+      hint && !error && /* @__PURE__ */ jsx("p", { id: `${resolvedId}-hint`, className: "text-[11px] text-on-surface-variant px-1", children: hint }),
+      error && /* @__PURE__ */ jsxs("p", { id: `${resolvedId}-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
+      ] })
+    ] });
+  }
+);
+FormInput.displayName = "FormInput";
+export {
+  FormInput
+};

package/dist/form-textarea.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from 'react';
+
+interface FormTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
+    label?: string;
+    error?: string;
+    required?: boolean;
+    hint?: string;
+    inputId?: string;
+    requiredText?: string;
+}
+declare const FormTextarea: React$1.ForwardRefExoticComponent<FormTextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+export { FormTextarea };