@pichetch08/trip-ui 0.1.0

package/dist/form-textarea.js

@@ -0,0 +1,41 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const FormTextarea = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, error, required, hint, inputId, id, className = "", requiredText = "(\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19)" } = _b, props = __objRest(_b, ["label", "error", "required", "hint", "inputId", "id", "className", "requiredText"]);
+    var _a2;
+    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__ */ jsx(
+        "textarea",
+        __spreadValues({
+          ref,
+          id: resolvedId,
+          "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 resize-y ${error ? "border-red-400 bg-red-50/30" : "border-transparent"} ${className}`
+        }, props)
+      ),
+      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
+      ] })
+    ] });
+  }
+);
+FormTextarea.displayName = "FormTextarea";
+export {
+  FormTextarea
+};

package/dist/icon-button.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from 'react';
+
+type IconButtonVariant = "default" | "ghost" | "primary" | "danger";
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    variant?: IconButtonVariant;
+    size?: "sm" | "md";
+    loading?: boolean;
+}
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonVariant };

package/dist/icon-button.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const variants = {
+  default: "bg-surface-container-low text-on-surface-variant hover:bg-surface-container hover:text-on-surface",
+  ghost: "bg-transparent text-on-surface-variant hover:bg-surface-container hover:text-on-surface",
+  primary: "bg-surface-container-low text-primary hover:bg-primary hover:text-on-primary",
+  danger: "bg-surface-container-low text-on-surface-variant hover:bg-red-50 hover:text-red-600"
+};
+const sizes = {
+  sm: "w-8 h-8 text-base",
+  md: "w-10 h-10 text-xl"
+};
+const IconButton = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { icon, variant = "default", size = "md", loading = false, className = "", disabled } = _b, props = __objRest(_b, ["icon", "variant", "size", "loading", "className", "disabled"]);
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        disabled: disabled || loading,
+        className: [
+          "rounded-full flex items-center justify-center shrink-0",
+          "transition-all duration-150",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+          "active:scale-[0.92]",
+          "disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none",
+          sizes[size],
+          variants[variant],
+          className
+        ].filter(Boolean).join(" ")
+      }, props), {
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `material-symbols-outlined leading-none ${loading ? "animate-spin" : ""}`,
+            "aria-hidden": "true",
+            children: loading ? "progress_activity" : icon
+          }
+        )
+      })
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton
+};

package/dist/icon-picker.d.ts

@@ -0,0 +1,15 @@
+interface IconPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    emptyText?: string;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    closeAriaLabel?: string;
+    categories?: Record<string, string[]>;
+}
+declare function IconPicker({ value, onChange, open, onClose, title, emptyText, searchPlaceholder, searchLabel, closeAriaLabel, categories, }: IconPickerProps): React.ReactNode;
+
+export { IconPicker };

package/dist/icon-picker.js

@@ -0,0 +1,311 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { IconButton } from "./icon-button";
+const ICON_LIBRARIES = [
+  { id: "material", label: "Material Symbols", prefix: "" }
+];
+const MATERIAL_CATEGORIES = {
+  "\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B": [
+    "dashboard",
+    "home",
+    "settings",
+    "search",
+    "menu",
+    "close",
+    "add",
+    "remove",
+    "check",
+    "check_circle",
+    "error",
+    "warning",
+    "info",
+    "help",
+    "visibility",
+    "visibility_off",
+    "refresh",
+    "more_vert",
+    "more_horiz",
+    "arrow_back",
+    "arrow_forward",
+    "expand_more",
+    "expand_less",
+    "launch",
+    "open_in_new"
+  ],
+  "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49": [
+    "person",
+    "group",
+    "people",
+    "admin_panel_settings",
+    "manage_accounts",
+    "badge",
+    "account_circle",
+    "face",
+    "supervisor_account",
+    "person_add",
+    "person_remove",
+    "groups",
+    "support_agent",
+    "engineering",
+    "verified_user"
+  ],
+  "\u0E01\u0E32\u0E23\u0E19\u0E33\u0E17\u0E32\u0E07": [
+    "route",
+    "flight_takeoff",
+    "flight_land",
+    "directions_car",
+    "directions_bus",
+    "train",
+    "directions_boat",
+    "airport_shuttle",
+    "luggage",
+    "map",
+    "location_on",
+    "explore",
+    "near_me",
+    "navigation",
+    "travel_explore",
+    "landscape"
+  ],
+  "\u0E01\u0E32\u0E23\u0E40\u0E07\u0E34\u0E19": [
+    "payments",
+    "credit_card",
+    "account_balance",
+    "receipt_long",
+    "paid",
+    "price_check",
+    "currency_exchange",
+    "savings",
+    "shopping_cart",
+    "card_membership",
+    "layers",
+    "speed",
+    "trending_up",
+    "trending_down"
+  ],
+  "\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32": [
+    "article",
+    "description",
+    "text_snippet",
+    "edit_note",
+    "post_add",
+    "photo_library",
+    "image",
+    "video_library",
+    "folder",
+    "cloud_upload",
+    "file_copy",
+    "attach_file",
+    "link",
+    "campaign",
+    "newspaper"
+  ],
+  "\u0E01\u0E32\u0E23\u0E2A\u0E37\u0E48\u0E2D\u0E2A\u0E32\u0E23": [
+    "mail",
+    "chat",
+    "forum",
+    "comment",
+    "notifications",
+    "notifications_active",
+    "send",
+    "call",
+    "contact_phone",
+    "sms",
+    "inbox",
+    "forward_to_inbox",
+    "mark_email_read",
+    "announcement",
+    "share"
+  ],
+  "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25 & \u0E27\u0E34\u0E40\u0E04\u0E23\u0E32\u0E30\u0E2B\u0E4C": [
+    "analytics",
+    "assessment",
+    "bar_chart",
+    "pie_chart",
+    "show_chart",
+    "timeline",
+    "insights",
+    "summarize",
+    "leaderboard",
+    "query_stats",
+    "monitoring",
+    "data_usage",
+    "storage",
+    "database",
+    "table_chart"
+  ],
+  "\u0E23\u0E30\u0E1A\u0E1A": [
+    "settings",
+    "tune",
+    "build",
+    "code",
+    "terminal",
+    "dns",
+    "cloud",
+    "security",
+    "lock",
+    "vpn_key",
+    "api",
+    "integration_instructions",
+    "monitor_heart",
+    "health_and_safety",
+    "shield",
+    "task_alt"
+  ],
+  "\u0E01\u0E32\u0E23\u0E08\u0E31\u0E14\u0E01\u0E32\u0E23": [
+    "confirmation_number",
+    "assignment",
+    "checklist",
+    "event",
+    "calendar_month",
+    "schedule",
+    "alarm",
+    "bookmark",
+    "star",
+    "flag",
+    "label",
+    "category",
+    "inventory_2",
+    "package_2",
+    "local_shipping"
+  ]
+};
+function IconPicker({
+  value,
+  onChange,
+  open,
+  onClose,
+  title = "\u0E40\u0E25\u0E37\u0E2D\u0E01 Icon",
+  emptyText = "\u0E44\u0E21\u0E48\u0E1E\u0E1A icon",
+  searchPlaceholder = "\u0E04\u0E49\u0E19\u0E2B\u0E32 icon...",
+  searchLabel = "\u0E04\u0E49\u0E19\u0E2B\u0E32 icon",
+  closeAriaLabel = "\u0E1B\u0E34\u0E14",
+  categories
+}) {
+  const activeCategories = categories != null ? categories : MATERIAL_CATEGORIES;
+  const [library, setLibrary] = useState("material");
+  const [category, setCategory] = useState(Object.keys(activeCategories)[0]);
+  const [search, setSearch] = useState("");
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (!open) return;
+    (_a = dialogRef.current) == null ? void 0 : _a.focus();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+        const focusable = dialog.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last == null ? void 0 : last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first == null ? void 0 : first.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  const categoryKeys = Object.keys(activeCategories);
+  const icons = search ? Object.values(activeCategories).flat().filter((icon) => icon.includes(search.toLowerCase())) : activeCategories[category] || [];
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-sm cursor-pointer", onClick: onClose }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "icon-picker-title",
+        tabIndex: -1,
+        className: "relative bg-surface rounded-2xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden focus:outline-none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-outline-variant/30", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { id: "icon-picker-title", className: "text-lg font-bold text-on-surface", children: title }),
+              value && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined text-lg text-primary", children: value }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-on-surface-variant", children: value })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(IconButton, { icon: "close", variant: "ghost", size: "sm", onClick: onClose, "aria-label": closeAriaLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-5 py-3 border-b border-outline-variant/30", children: [
+            ICON_LIBRARIES.map((lib) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setLibrary(lib.id),
+                "aria-pressed": library === lib.id,
+                className: `px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors ${library === lib.id ? "bg-primary text-on-primary" : "bg-surface-container text-on-surface-variant hover:bg-surface-container-high"}`,
+                children: lib.label
+              },
+              lib.id
+            )),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-1 ml-2", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", 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",
+                {
+                  type: "search",
+                  "aria-label": searchLabel,
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: searchPlaceholder,
+                  className: "w-full pl-10 pr-4 py-1.5 bg-surface-container-low border border-outline-variant rounded-lg text-sm outline-none focus:border-primary transition-[border-color]"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+            !search && /* @__PURE__ */ jsx("div", { className: "w-40 shrink-0 border-r border-outline-variant/30 overflow-y-auto py-2", children: categoryKeys.map((cat) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCategory(cat),
+                className: `w-full text-left px-4 py-2 text-xs font-medium transition-colors ${category === cat ? "text-primary bg-primary/10 font-semibold" : "text-on-surface-variant hover:bg-surface-container-low"}`,
+                children: cat
+              },
+              cat
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: icons.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-on-surface-variant text-sm", children: emptyText }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 gap-1", children: icons.map((icon) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange(icon);
+                  onClose();
+                },
+                "aria-label": icon,
+                className: `flex flex-col items-center gap-1 p-2 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${value === icon ? "bg-primary/10 ring-2 ring-primary" : "hover:bg-surface-container"}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined text-2xl text-on-surface", children: icon }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[8px] text-on-surface-variant truncate w-full text-center", children: icon })
+                ]
+              },
+              icon
+            )) }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  IconPicker
+};

package/dist/icon-wrapper.d.ts

@@ -0,0 +1,15 @@
+type AppColor = "primary" | "emerald" | "amber" | "rose" | "red" | "violet" | "blue" | "slate" | "cyan";
+/** @deprecated use AppColor */
+type IconWrapperColor = AppColor;
+interface IconWrapperProps {
+    icon: string;
+    color?: AppColor;
+    size?: "sm" | "md" | "lg";
+    filled?: boolean;
+    className?: string;
+}
+declare const appColorMap: Record<AppColor, string>;
+declare const appColorFg: Record<AppColor, string>;
+declare function IconWrapper({ icon, color, size, filled, className, }: IconWrapperProps): React.ReactNode;
+
+export { type AppColor, IconWrapper, type IconWrapperColor, appColorFg, appColorMap };

package/dist/icon-wrapper.js

@@ -0,0 +1,52 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+const sizeMap = {
+  sm: { wrapper: "w-8 h-8 rounded-lg", icon: "text-lg" },
+  md: { wrapper: "w-10 h-10 rounded-xl", icon: "text-xl" },
+  lg: { wrapper: "w-12 h-12 rounded-2xl", icon: "text-3xl" }
+};
+const appColorMap = {
+  primary: "bg-primary/10 text-primary",
+  emerald: "bg-emerald-100 text-emerald-600",
+  amber: "bg-amber-100 text-amber-600",
+  rose: "bg-rose-100 text-rose-600",
+  red: "bg-red-100 text-red-600",
+  violet: "bg-violet-100 text-violet-600",
+  blue: "bg-blue-100 text-blue-600",
+  slate: "bg-surface-container text-on-surface-variant",
+  cyan: "bg-cyan-100 text-cyan-600"
+};
+const appColorFg = {
+  primary: "text-primary",
+  emerald: "text-emerald-600",
+  amber: "text-amber-600",
+  rose: "text-rose-600",
+  red: "text-red-600",
+  violet: "text-violet-600",
+  blue: "text-blue-600",
+  slate: "text-on-surface-variant",
+  cyan: "text-cyan-600"
+};
+function IconWrapper({
+  icon,
+  color = "primary",
+  size = "md",
+  filled = false,
+  className = ""
+}) {
+  const s = sizeMap[size];
+  return /* @__PURE__ */ jsx("div", { className: `${s.wrapper} flex items-center justify-center ${appColorMap[color]} ${className}`, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: `material-symbols-outlined ${s.icon}`,
+      style: filled ? { fontVariationSettings: "'FILL' 1" } : void 0,
+      children: icon
+    }
+  ) });
+}
+export {
+  IconWrapper,
+  appColorFg,
+  appColorMap
+};

package/dist/image-upload.d.ts

@@ -0,0 +1,24 @@
+interface ImageUploadProps {
+    value?: string | null;
+    onChange?: (url: string | null) => void;
+    onUpload: (file: File) => Promise<string>;
+    onUploadProgress?: (progress: number) => void;
+    onBrowseLibrary?: () => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    accept?: string;
+    maxSizeMB?: number;
+    aspect?: "square" | "video" | "wide";
+    disabled?: boolean;
+    uploadLabel?: string;
+    libraryLabel?: string;
+    deleteLabel?: string;
+    uploadingText?: string;
+    invalidTypeText?: string;
+    maxSizeErrorText?: (mb: number) => string;
+    uploadFailText?: string;
+}
+declare function ImageUpload({ value, onChange, onUpload, onUploadProgress, onBrowseLibrary, label, hint, error: externalError, accept, maxSizeMB, aspect, disabled, uploadLabel, libraryLabel, deleteLabel, uploadingText, invalidTypeText, maxSizeErrorText, uploadFailText, }: ImageUploadProps): React.ReactNode;
+
+export { ImageUpload };

package/dist/image-upload.js

@@ -0,0 +1,122 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Button } from "./button";
+function ImageUpload({
+  value,
+  onChange,
+  onUpload,
+  onUploadProgress,
+  onBrowseLibrary,
+  label,
+  hint,
+  error: externalError,
+  accept = "image/jpeg,image/png,image/webp,image/gif",
+  maxSizeMB = 5,
+  aspect = "square",
+  disabled = false,
+  uploadLabel = "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14",
+  libraryLabel = "\u0E04\u0E25\u0E31\u0E07\u0E2A\u0E37\u0E48\u0E2D",
+  deleteLabel = "\u0E25\u0E1A",
+  uploadingText = "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14...",
+  invalidTypeText = "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17\u0E44\u0E1F\u0E25\u0E4C\u0E44\u0E21\u0E48\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A",
+  maxSizeErrorText = (mb) => `\u0E02\u0E19\u0E32\u0E14\u0E44\u0E1F\u0E25\u0E4C\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${mb} MB`,
+  uploadFailText = "\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48"
+}) {
+  const inputRef = useRef(null);
+  const inputId = useRef(`image-upload-${Math.random().toString(36).slice(2)}`).current;
+  const [uploading, setUploading] = useState(false);
+  const [internalError, setInternalError] = useState(null);
+  const [hovering, setHovering] = useState(false);
+  const error = externalError != null ? externalError : internalError;
+  const containerClass = aspect === "square" ? "w-32 h-32" : "aspect-video w-full";
+  const handleFileChange = async (e) => {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    setInternalError(null);
+    const acceptedTypes = accept.split(",").map((t) => t.trim());
+    if (!acceptedTypes.includes(file.type)) {
+      setInternalError(invalidTypeText);
+      return;
+    }
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      setInternalError(maxSizeErrorText(maxSizeMB));
+      return;
+    }
+    try {
+      setUploading(true);
+      onUploadProgress == null ? void 0 : onUploadProgress(0);
+      const url = await onUpload(file);
+      onUploadProgress == null ? void 0 : onUploadProgress(100);
+      onChange == null ? void 0 : onChange(url);
+    } catch (e2) {
+      setInternalError(uploadFailText);
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+  const handleRemove = () => {
+    onChange == null ? void 0 : onChange(null);
+    setInternalError(null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm font-semibold text-on-surface", children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative border-2 border-dashed rounded-2xl overflow-hidden bg-surface transition-colors ${containerClass} ${error ? "border-red-400" : "border-outline-variant/40"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        onMouseEnter: () => setHovering(true),
+        onMouseLeave: () => setHovering(false),
+        children: [
+          uploading ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface", children: [
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined animate-spin text-primary", style: { fontSize: "28px" }, children: "progress_activity" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant font-medium", children: uploadingText })
+          ] }) : value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("img", { src: value, alt: "uploaded", className: "w-full h-full object-cover" }),
+            hovering && !disabled && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-2 bg-black/40", children: [
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", icon: "upload", onClick: () => {
+                var _a;
+                return (_a = inputRef.current) == null ? void 0 : _a.click();
+              }, children: uploadLabel }),
+              onBrowseLibrary && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", icon: "photo_library", onClick: onBrowseLibrary, children: libraryLabel }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", icon: "delete", onClick: handleRemove, children: deleteLabel })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-on-surface-variant", style: { fontSize: "32px" }, children: "add_photo_alternate" }),
+            hint && aspect !== "square" && /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", children: hint }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", disabled, onClick: () => {
+                var _a;
+                return (_a = inputRef.current) == null ? void 0 : _a.click();
+              }, children: uploadLabel }),
+              onBrowseLibrary && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", disabled, onClick: onBrowseLibrary, children: libraryLabel })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              type: "file",
+              accept,
+              disabled,
+              className: "hidden",
+              onChange: handleFileChange
+            }
+          )
+        ]
+      }
+    ),
+    hint && aspect === "square" && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", children: hint }),
+    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 {
+  ImageUpload
+};