@pichetch08/trip-ui 0.1.0

package/dist/rich-editor.js

@@ -0,0 +1,97 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import { useEffect } from "react";
+import clsx from "clsx";
+function RichEditor({ value, onChange, placeholder, minHeight = 180, disabled, loadingAriaLabel = "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u0E15\u0E31\u0E27\u0E41\u0E01\u0E49\u0E44\u0E02" }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ heading: { levels: [2, 3] } }),
+      Link.configure({ openOnClick: false, HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" } })
+    ],
+    content: value,
+    editable: !disabled,
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        class: clsx(
+          "prose prose-sm max-w-none focus:outline-none px-4 py-3",
+          "prose-headings:font-semibold prose-a:text-blue-600 prose-a:underline"
+        ),
+        style: `min-height: ${minHeight}px`
+      }
+    },
+    onUpdate: ({ editor: e }) => onChange(e.getHTML())
+  });
+  useEffect(() => {
+    if (!editor) return;
+    if (editor.getHTML() !== value) editor.commands.setContent(value, { emitUpdate: false });
+  }, [value, editor]);
+  if (!editor) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-label": loadingAriaLabel,
+        className: "rounded-lg border border-outline-variant bg-surface-container-low animate-pulse",
+        style: { minHeight: minHeight + 48 }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx(
+    "rounded-lg border border-outline-variant bg-surface overflow-hidden",
+    disabled && "opacity-60 pointer-events-none"
+  ), children: [
+    /* @__PURE__ */ jsx(Toolbar, { editor }),
+    /* @__PURE__ */ jsx(EditorContent, { editor, placeholder })
+  ] });
+}
+function Toolbar({ editor }) {
+  const Btn = ({ active, onClick, label, title }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title,
+      "aria-label": title,
+      "aria-pressed": active != null ? active : false,
+      className: clsx(
+        "px-2 py-1 text-xs font-medium rounded hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+        active ? "bg-surface-container-high text-on-surface" : "text-on-surface-variant"
+      ),
+      children: label
+    }
+  );
+  const promptLink = () => {
+    const previous = editor.getAttributes("link").href;
+    const url = window.prompt("URL (https://...)", previous != null ? previous : "https://");
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 px-2 py-1.5 border-b border-outline-variant bg-surface-container-low", children: [
+    /* @__PURE__ */ jsx(Btn, { label: "B", title: "Bold", active: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run() }),
+    /* @__PURE__ */ jsx(Btn, { label: "I", title: "Italic", active: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run() }),
+    /* @__PURE__ */ jsx(Btn, { label: "S", title: "Strike", active: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run() }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-px h-4 bg-outline-variant mx-1" }),
+    /* @__PURE__ */ jsx(Btn, { label: "H2", title: "Heading 2", active: editor.isActive("heading", { level: 2 }), onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run() }),
+    /* @__PURE__ */ jsx(Btn, { label: "H3", title: "Heading 3", active: editor.isActive("heading", { level: 3 }), onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run() }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-px h-4 bg-outline-variant mx-1" }),
+    /* @__PURE__ */ jsx(Btn, { label: "\u2022", title: "Bulleted list", active: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run() }),
+    /* @__PURE__ */ jsx(Btn, { label: "1.", title: "Numbered list", active: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run() }),
+    /* @__PURE__ */ jsx(Btn, { label: "\u275D", title: "Quote", active: editor.isActive("blockquote"), onClick: () => editor.chain().focus().toggleBlockquote().run() }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-px h-4 bg-outline-variant mx-1" }),
+    /* @__PURE__ */ jsx(Btn, { label: "\u{1F517}", title: "Link", active: editor.isActive("link"), onClick: promptLink }),
+    /* @__PURE__ */ jsx(Btn, { label: "\u21B6", title: "Undo", onClick: () => editor.chain().focus().undo().run() }),
+    /* @__PURE__ */ jsx(Btn, { label: "\u21B7", title: "Redo", onClick: () => editor.chain().focus().redo().run() })
+  ] });
+}
+export {
+  RichEditor
+};

package/dist/search-bar.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SearchBarProps {
+    placeholder?: string;
+    clearLabel?: string;
+    ariaLabel?: string;
+    value?: string;
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    debounce?: number;
+}
+declare function SearchBar({ placeholder, clearLabel, ariaLabel, value: controlledValue, onSearch, onClear, debounce, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+export { SearchBar };

package/dist/search-bar.js

@@ -0,0 +1,64 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+function SearchBar({
+  placeholder = "\u0E04\u0E49\u0E19\u0E2B\u0E32...",
+  clearLabel = "\u0E25\u0E49\u0E32\u0E07\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32",
+  ariaLabel,
+  value: controlledValue,
+  onSearch,
+  onClear,
+  debounce = 0
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState("");
+  const value = isControlled ? controlledValue : internalValue;
+  const debounceRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (!isControlled) setInternalValue(newValue);
+    if (debounce > 0) {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => onSearch == null ? void 0 : onSearch(newValue), debounce);
+    } else {
+      onSearch == null ? void 0 : onSearch(newValue);
+    }
+  };
+  const handleClear = () => {
+    if (!isControlled) setInternalValue("");
+    onClear == null ? void 0 : onClear();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-surface-container-low border border-outline-variant/40 rounded-xl px-4 py-2.5", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined text-outline text-xl", children: "search" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        value,
+        onChange: handleChange,
+        placeholder,
+        "aria-label": ariaLabel != null ? ariaLabel : placeholder,
+        className: "bg-transparent text-sm text-on-surface placeholder:text-outline/50 outline-none w-full"
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": clearLabel,
+        className: "p-1 rounded-lg hover:bg-surface-variant/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined text-outline text-lg", children: "close" })
+      }
+    )
+  ] });
+}
+export {
+  SearchBar
+};

package/dist/section-header.d.ts

@@ -0,0 +1,12 @@
+import { AppColor } from './icon-wrapper.js';
+
+interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    variant?: "bar" | "icon";
+    color?: AppColor;
+}
+declare function SectionHeader({ title, subtitle, icon, variant, color, }: SectionHeaderProps): React.ReactNode;
+
+export { SectionHeader };

package/dist/section-header.js

@@ -0,0 +1,41 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconWrapper, appColorFg } from "./icon-wrapper";
+const BAR_COLOR = {
+  primary: "bg-primary",
+  emerald: "bg-emerald-500",
+  amber: "bg-amber-500",
+  rose: "bg-rose-500",
+  red: "bg-red-500",
+  violet: "bg-violet-500",
+  blue: "bg-blue-500",
+  slate: "bg-outline",
+  cyan: "bg-cyan-500"
+};
+function SectionHeader({
+  title,
+  subtitle,
+  icon,
+  variant = "bar",
+  color = "primary"
+}) {
+  if (variant === "icon" && icon) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(IconWrapper, { icon, size: "md", color }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: `text-lg font-bold ${appColorFg[color]}`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface-variant", children: subtitle })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: `w-1 h-6 rounded-full ${BAR_COLOR[color]}` }),
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-bold text-on-surface", children: title })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface-variant ml-4", children: subtitle })
+  ] });
+}
+export {
+  SectionHeader
+};

package/dist/segmented-control.d.ts

@@ -0,0 +1,24 @@
+interface SegmentedControlOption<T extends string> {
+    value: T;
+    label: string;
+    /** Optional Material icon name. */
+    icon?: string;
+}
+interface SegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Optional label rendered above the control. */
+    label?: string;
+    /** Match other form controls' default 56px height when set. */
+    size?: "sm" | "md";
+    className?: string;
+}
+/**
+ * Pill-style toggle for picking one of N short options. Use over a
+ * `<select>` when there are 2-4 options and the user benefits from
+ * seeing them all at once (e.g. language picker, scope filter).
+ */
+declare function SegmentedControl<T extends string>({ options, value, onChange, label, size, className, }: SegmentedControlProps<T>): React.ReactNode;
+
+export { SegmentedControl };

package/dist/segmented-control.js

@@ -0,0 +1,38 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  label,
+  size = "md",
+  className = ""
+}) {
+  const heightCls = size === "md" ? "h-14" : "h-10";
+  const labelId = label ? `segmented-label-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [
+    label && /* @__PURE__ */ jsx("span", { id: labelId, className: "text-xs font-bold text-on-surface-variant uppercase tracking-widest px-1", children: label }),
+    /* @__PURE__ */ jsx("div", { className: `flex bg-surface-container-low rounded-xl p-1 ${heightCls}`, role: "tablist", "aria-labelledby": labelId, children: options.map((opt) => {
+      const active = value === opt.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": active,
+          onClick: () => onChange(opt.value),
+          className: `flex-1 rounded-lg text-xs font-bold flex items-center justify-center gap-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${active ? "bg-surface shadow-sm text-primary" : "text-on-surface-variant hover:text-on-surface"}`,
+          children: [
+            opt.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base", children: opt.icon }),
+            opt.label
+          ]
+        },
+        opt.value
+      );
+    }) })
+  ] });
+}
+export {
+  SegmentedControl
+};

package/dist/select-picker.d.ts

@@ -0,0 +1,24 @@
+interface SelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+}
+interface SelectPickerProps {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    required?: boolean;
+    error?: string;
+    searchable?: boolean;
+    icon?: string;
+    name?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare function SelectPicker({ label, value, onChange, options, placeholder, searchPlaceholder, emptyText, required, error, searchable, icon, name, onOpen, onClose, }: SelectPickerProps): React.ReactNode;
+
+export { type SelectOption, SelectPicker };

package/dist/select-picker.js

@@ -0,0 +1,157 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+function SelectPicker({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder = "\u0E40\u0E25\u0E37\u0E2D\u0E01",
+  searchPlaceholder = "\u0E04\u0E49\u0E19\u0E2B\u0E32...",
+  emptyText = "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
+  required,
+  error,
+  searchable = true,
+  icon,
+  name,
+  onOpen,
+  onClose
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const searchRef = useRef(null);
+  const selectedOption = options.find((o) => o.value === value);
+  const filtered = search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()) || o.value.toLowerCase().includes(search.toLowerCase())) : options;
+  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";
+    } else {
+      dropdown.style.top = "100%";
+      dropdown.style.bottom = "auto";
+      dropdown.style.marginTop = "4px";
+    }
+  }, [open]);
+  function handleSelect(val) {
+    onChange(val);
+    toggleOpen(false);
+  }
+  const triggerId = label ? `selectpicker-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 relative", ref: containerRef, children: [
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value }),
+    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": "select-picker-listbox",
+        "aria-required": required,
+        onClick: () => toggleOpen(!open),
+        className: `relative w-full bg-surface-container-low border rounded-xl py-4 px-6 text-left transition-all duration-200 font-medium outline-none active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${icon ? "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: [
+          icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", children: icon }),
+          selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-on-surface", children: [
+            selectedOption.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base text-on-surface-variant", children: selectedOption.icon }),
+            selectedOption.label
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder }),
+          /* @__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: [
+          searchable && /* @__PURE__ */ jsx("div", { className: "p-3 border-b border-outline-variant/20", children: /* @__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"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { id: "select-picker-listbox", role: "listbox", 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 = opt.value === value;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => handleSelect(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: [
+                  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 }),
+                  isSelected && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base text-primary", children: "check" })
+                ]
+              },
+              opt.value
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SelectPicker
+};

package/dist/skeleton.d.ts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+interface SkeletonProps {
+    className?: string;
+}
+declare function Skeleton({ className }: SkeletonProps): React__default.ReactNode;
+declare function TableRowSkeleton(): React__default.ReactNode;
+declare function CardSkeleton(): React__default.ReactNode;
+declare function StatCardSkeleton(): React__default.ReactNode;
+declare function PageSkeleton({ loadingLabel }: {
+    loadingLabel?: string;
+}): React__default.ReactNode;
+
+export { CardSkeleton, PageSkeleton, Skeleton, StatCardSkeleton, TableRowSkeleton };

package/dist/skeleton.js

@@ -0,0 +1,53 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Skeleton({ className = "" }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: `animate-pulse bg-surface-container rounded-lg ${className}` });
+}
+function TableRowSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "px-6 py-4 flex items-center gap-4 border-b border-outline-variant/20", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "w-10 h-10 rounded-full shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/4" })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
+  ] });
+}
+function CardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "bg-surface rounded-2xl border border-outline-variant/30 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-44 rounded-none" }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/3" })
+    ] })
+  ] });
+}
+function StatCardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "bg-surface rounded-2xl border border-outline-variant/30 p-6 space-y-3", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-16" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" })
+  ] });
+}
+function PageSkeleton({ loadingLabel = "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14" }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-label": loadingLabel, className: "p-4 md:p-8 space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-72" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsx(StatCardSkeleton, {}),
+      /* @__PURE__ */ jsx(StatCardSkeleton, {}),
+      /* @__PURE__ */ jsx(StatCardSkeleton, {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-surface rounded-2xl border border-outline-variant/30 overflow-hidden", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(TableRowSkeleton, {}, i)) })
+  ] });
+}
+export {
+  CardSkeleton,
+  PageSkeleton,
+  Skeleton,
+  StatCardSkeleton,
+  TableRowSkeleton
+};

package/dist/slider.d.ts

@@ -0,0 +1,17 @@
+interface SliderProps {
+    value: number | [number, number];
+    onChange: (value: number | [number, number]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    showValue?: boolean;
+    formatValue?: (v: number) => string;
+    disabled?: boolean;
+    minRangeLabel?: string;
+    maxRangeLabel?: string;
+    valueLabel?: string;
+}
+declare function Slider({ value, onChange, min, max, step, label, showValue, formatValue, disabled, minRangeLabel, maxRangeLabel, valueLabel, }: SliderProps): React.ReactNode;
+
+export { Slider };