@pichetch08/trip-ui 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @pichetch08/trip-ui
+
+Shared React component library for Trip applications, built with Tailwind v4 and Material Design 3 tokens.
+
+## Install
+
+```bash
+npm install @pichetch08/trip-ui
+```
+
+### Peer dependencies
+
+```bash
+npm install react react-dom clsx tailwind-merge
+```
+
+> `next` is optional — only required if you use Next.js-specific components (e.g. `TripDayMapLazy`).
+
+## Usage
+
+```tsx
+import { Button, Modal, TimePicker, RichEditor } from "@pichetch08/trip-ui";
+```
+
+All components are tree-shakeable. Import only what you need.
+
+## Requirements
+
+- React ≥ 19
+- Tailwind CSS v4 configured in your project with the MD3 design tokens
+- Material Symbols icon font loaded in your app
+
+## Components
+
+Over 70 shared components including:
+
+- **Form**: `TextField`, `Select`, `TimePicker`, `DatePicker`, `NumberInput`, `Slider`, `RichEditor`, `FileUpload`, `OtpInput`, `TagGroup`, `RadioGroup`, `SegmentedControl`, `MultiSelect`
+- **Feedback**: `Modal`, `Drawer`, `PreviewDrawer`, `Toast`, `Alert`, `Spinner`, `ProgressBar`, `Skeleton`, `PageState`
+- **Display**: `Tag`, `StatusBadge`, `StatCard`, `Tooltip`, `Popover`, `Timeline`, `Stepper`, `Rating`, `Tabs`
+- **Layout**: `SectionHeader`, `StatsSummary`, `MobilePreview`
+- **Maps**: `TripDayMap`, `TripDayMapLazy`
+- **Misc**: `QrCodeDisplay`, `SearchBar`, `Kbd`
+
+## License
+
+MIT

package/dist/accordion.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AccordionItem {
+    id: string;
+    title: string;
+    icon?: string;
+    subtitle?: string;
+    badge?: string;
+    children: React.ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    defaultOpen?: string[];
+    allowMultiple?: boolean;
+}
+declare function Accordion({ items, defaultOpen, allowMultiple, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionItem };

package/dist/accordion.js

@@ -0,0 +1,76 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function Accordion({
+  items,
+  defaultOpen = [],
+  allowMultiple = false
+}) {
+  const [openIds, setOpenIds] = useState(new Set(defaultOpen));
+  function toggle(id) {
+    setOpenIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (!allowMultiple) {
+          next.clear();
+        }
+        next.add(id);
+      }
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { children: items.map((item) => {
+    const isOpen = openIds.has(item.id);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-2xl border border-outline-variant/30 bg-surface shadow-sm overflow-hidden mb-3",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: `accordion-btn-${item.id}`,
+              type: "button",
+              onClick: () => toggle(item.id),
+              "aria-expanded": isOpen,
+              "aria-controls": `accordion-panel-${item.id}`,
+              className: "w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-surface-container-low/50 active:bg-surface-container-low transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-inset",
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-xl text-on-surface-variant", children: item.icon }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-on-surface block", children: item.title }),
+                  item.subtitle && /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant block mt-0.5", children: item.subtitle })
+                ] }),
+                item.badge && !isOpen && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary text-xs font-medium px-2 py-0.5 rounded-full shrink-0", children: item.badge }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `material-symbols-outlined text-xl text-on-surface-variant shrink-0 transition-transform duration-300 ${isOpen ? "rotate-180" : "rotate-0"}`,
+                    children: "expand_more"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: `accordion-panel-${item.id}`,
+              role: "region",
+              "aria-labelledby": `accordion-btn-${item.id}`,
+              className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`,
+              children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "px-5 pb-5 pt-1", children: item.children }) })
+            }
+          )
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+export {
+  Accordion
+};

package/dist/agreement-modal.d.ts

@@ -0,0 +1,16 @@
+interface AgreementModalProps {
+    open: boolean;
+    onClose: () => void;
+    onAccept: () => void;
+    title: string;
+    children: React.ReactNode;
+    scrollHintText?: string;
+    scrollDownText?: string;
+    readCompleteText?: string;
+    closeLabel?: string;
+    acceptLabel?: string;
+    closeAriaLabel?: string;
+}
+declare function AgreementModal({ open, onClose, onAccept, title, children, scrollHintText, scrollDownText, readCompleteText, closeLabel, acceptLabel, closeAriaLabel, }: AgreementModalProps): React.ReactNode;
+
+export { AgreementModal };

package/dist/agreement-modal.js

@@ -0,0 +1,67 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+function AgreementModal({
+  open,
+  onClose,
+  onAccept,
+  title,
+  children,
+  scrollHintText = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E2D\u0E48\u0E32\u0E19\u0E08\u0E19\u0E08\u0E1A\u0E01\u0E48\u0E2D\u0E19\u0E01\u0E14\u0E22\u0E2D\u0E21\u0E23\u0E31\u0E1A",
+  scrollDownText = "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E25\u0E07\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E48\u0E32\u0E19\u0E15\u0E48\u0E2D",
+  readCompleteText = "\u0E2D\u0E48\u0E32\u0E19\u0E04\u0E23\u0E1A\u0E41\u0E25\u0E49\u0E27",
+  closeLabel = "\u0E1B\u0E34\u0E14",
+  acceptLabel = "\u0E09\u0E31\u0E19\u0E44\u0E14\u0E49\u0E2D\u0E48\u0E32\u0E19\u0E41\u0E25\u0E30\u0E22\u0E2D\u0E21\u0E23\u0E31\u0E1A",
+  closeAriaLabel = "\u0E1B\u0E34\u0E14"
+}) {
+  const scrollRef = useRef(null);
+  const [scrolledToBottom, setScrolledToBottom] = useState(false);
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    if (isBottom) setScrolledToBottom(true);
+  }, []);
+  useEffect(() => {
+    if (open) setScrolledToBottom(false);
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-100 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm cursor-pointer", onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { className: "relative bg-surface rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-outline-variant", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-on-surface", children: title }),
+        /* @__PURE__ */ jsx(IconButton, { icon: "close", variant: "ghost", size: "sm", onClick: onClose, "aria-label": closeAriaLabel })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          onScroll: handleScroll,
+          className: "flex-1 overflow-y-auto px-6 py-6 text-sm text-on-surface-variant leading-relaxed",
+          children
+        }
+      ),
+      !scrolledToBottom && /* @__PURE__ */ jsx("div", { className: "absolute bottom-18 left-0 right-0 h-16 bg-linear-to-t from-white to-transparent pointer-events-none flex items-end justify-center pb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-on-surface-variant animate-bounce", children: [
+        /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "keyboard_arrow_down" }),
+        scrollDownText
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-t border-outline-variant flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", children: scrolledToBottom ? /* @__PURE__ */ jsxs("span", { className: "text-green-600 flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "check_circle" }),
+          readCompleteText
+        ] }) : scrollHintText }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: closeLabel }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onAccept, disabled: !scrolledToBottom, children: acceptLabel })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AgreementModal
+};

package/dist/alert.d.ts

@@ -0,0 +1,13 @@
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertProps {
+    variant: AlertVariant;
+    title?: string;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+    icon?: string;
+    closeAriaLabel?: string;
+}
+declare function Alert({ variant, title, children, onClose, className, icon, closeAriaLabel, }: AlertProps): React.ReactNode;
+
+export { Alert, type AlertVariant };

package/dist/alert.js

@@ -0,0 +1,47 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const VARIANT_STYLES = {
+  info: { container: "bg-blue-50 border border-blue-200 text-blue-800", icon: "text-blue-500", defaultIcon: "info" },
+  success: { container: "bg-emerald-50 border border-emerald-200 text-emerald-800", icon: "text-emerald-500", defaultIcon: "check_circle" },
+  warning: { container: "bg-amber-50 border border-amber-200 text-amber-800", icon: "text-amber-500", defaultIcon: "warning" },
+  error: { container: "bg-red-50 border border-red-200 text-red-800", icon: "text-red-500", defaultIcon: "error" }
+};
+function Alert({
+  variant,
+  title,
+  children,
+  onClose,
+  className = "",
+  icon,
+  closeAriaLabel = "Close"
+}) {
+  const styles = VARIANT_STYLES[variant];
+  const resolvedIcon = icon != null ? icon : styles.defaultIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-start gap-3 p-4 rounded-xl ${styles.container} ${className}`,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined text-xl shrink-0 ${styles.icon}`, "aria-hidden": "true", children: resolvedIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-semibold text-sm", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm mt-0.5 opacity-90", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "shrink-0 ml-auto -mt-0.5 p-0.5 rounded-md opacity-60 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current",
+            "aria-label": closeAriaLabel,
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-xl", "aria-hidden": "true", children: "close" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Alert
+};

package/dist/auth-hero.d.ts

@@ -0,0 +1,7 @@
+interface AuthHeroProps {
+    imageUrl?: string;
+    overlayOpacity?: number;
+}
+declare function AuthHero({ imageUrl, overlayOpacity }: AuthHeroProps): React.ReactNode;
+
+export { AuthHero };

package/dist/auth-hero.js

@@ -0,0 +1,63 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AuthHero({ imageUrl, overlayOpacity = 0.35 }) {
+  if (imageUrl) {
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 w-full h-full overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: "",
+          "aria-hidden": "true",
+          className: "absolute inset-0 w-full h-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-linear-to-t from-black/40 to-transparent" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 w-full h-full overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-br from-blue-500 via-blue-700 to-indigo-900" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 opacity-50",
+        style: {
+          background: "radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 50%)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "absolute inset-0 w-full h-full opacity-[0.08]",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: "hero-dots", x: "0", y: "0", width: "32", height: "32", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("circle", { cx: "2", cy: "2", r: "1", fill: "white" }) }) }),
+          /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "url(#hero-dots)" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "absolute -right-20 -bottom-10 w-[500px] h-[500px] opacity-10 rotate-[-15deg]",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "white",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("path", { d: "M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z" })
+      }
+    )
+  ] });
+}
+export {
+  AuthHero
+};

package/dist/avatar.d.ts

@@ -0,0 +1,21 @@
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface AvatarProps {
+    src?: string;
+    name?: string;
+    size?: AvatarSize;
+    className?: string;
+    online?: boolean;
+    unknownUserLabel?: string;
+    onlineLabel?: string;
+}
+interface AvatarGroupProps {
+    avatars: Pick<AvatarProps, "src" | "name">[];
+    size?: AvatarSize;
+    max?: number;
+    className?: string;
+    moreLabel?: (n: number) => string;
+}
+declare function Avatar({ src, name, size, className, online, unknownUserLabel, onlineLabel, }: AvatarProps): React.ReactNode;
+declare function AvatarGroup({ avatars, size, max, className, moreLabel, }: AvatarGroupProps): React.ReactNode;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize };

package/dist/avatar.js

@@ -0,0 +1,114 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SIZE_CLASSES = {
+  xs: "w-6 h-6",
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-12 h-12",
+  xl: "w-16 h-16"
+};
+const TEXT_CLASSES = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-xl"
+};
+const ICON_CLASSES = {
+  xs: "text-sm",
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-2xl",
+  xl: "text-3xl"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  const letters = parts.map((p) => {
+    var _a, _b;
+    return (_b = (_a = p[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
+  }).filter(Boolean);
+  return letters.slice(0, 2).join("");
+}
+function Avatar({
+  src,
+  name,
+  size = "md",
+  className = "",
+  online = false,
+  unknownUserLabel = "Unknown user",
+  onlineLabel = "Online"
+}) {
+  const sizeClass = SIZE_CLASSES[size];
+  const textClass = TEXT_CLASSES[size];
+  const iconClass = ICON_CLASSES[size];
+  return /* @__PURE__ */ jsxs("div", { className: `relative inline-flex shrink-0 ${sizeClass} ${className}`, children: [
+    src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: name != null ? name : "Avatar",
+        className: `${sizeClass} rounded-full object-cover`
+      }
+    ) : name ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${sizeClass} rounded-full bg-primary-container text-(--on-primary-container) font-bold flex items-center justify-center ${textClass} select-none`,
+        "aria-label": name,
+        children: getInitials(name)
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${sizeClass} rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center`,
+        "aria-label": unknownUserLabel,
+        children: /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined ${iconClass} leading-none`, "aria-hidden": "true", children: "person" })
+      }
+    ),
+    online && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-emerald-500 ring-2 ring-white",
+        "aria-label": onlineLabel
+      }
+    )
+  ] });
+}
+function AvatarGroup({
+  avatars,
+  size = "md",
+  max = 4,
+  className = "",
+  moreLabel = (n) => `${n} more`
+}) {
+  const visible = avatars.slice(0, max);
+  const overflow = avatars.length - visible.length;
+  const sizeClass = SIZE_CLASSES[size];
+  const textClass = TEXT_CLASSES[size];
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center ${className}`, children: [
+    visible.map((avatar, i) => /* @__PURE__ */ jsx("div", { className: i > 0 ? "-ml-2" : "", children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        src: avatar.src,
+        name: avatar.name,
+        size,
+        className: "ring-2 ring-white"
+      }
+    ) }, i)),
+    overflow > 0 && /* @__PURE__ */ jsx("div", { className: "-ml-2", children: /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `${sizeClass} rounded-full bg-surface-container text-on-surface-variant font-bold flex items-center justify-center ${textClass} ring-2 ring-white select-none`,
+        "aria-label": moreLabel(overflow),
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  Avatar,
+  AvatarGroup
+};

package/dist/badge.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "error" | "info";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    icon?: string;
+}
+declare function Badge({ children, variant, size, icon }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge };

package/dist/badge.js

@@ -0,0 +1,36 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Badge({ children, variant = "default", size = "md", icon }) {
+  const variantClasses = {
+    default: "bg-surface-container text-on-surface-variant",
+    primary: "bg-primary-container text-(--on-primary-container)",
+    secondary: "bg-(--secondary-container) text-(--on-secondary-container)",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning",
+    error: "bg-error/10 text-error",
+    info: "bg-info/10 text-info"
+  };
+  const sizeClasses = {
+    sm: "px-2 py-0.5 text-[10px]",
+    md: "px-3 py-1 text-xs",
+    lg: "px-4 py-1.5 text-sm"
+  };
+  const iconSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-1.5 rounded-full font-medium transition-colors ${sizeClasses[size]} ${variantClasses[variant]}`,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined ${iconSizeClasses[size]}`, "aria-hidden": "true", children: icon }),
+        children
+      ]
+    }
+  );
+}
+export {
+  Badge
+};

package/dist/banner.d.ts

@@ -0,0 +1,14 @@
+type BannerVariant = "info" | "success" | "warning" | "danger";
+interface BannerProps {
+    variant?: BannerVariant;
+    icon?: string;
+    title?: string;
+    children?: React.ReactNode;
+    onDismiss?: () => void;
+    action?: React.ReactNode;
+    className?: string;
+    closeAriaLabel?: string;
+}
+declare function Banner({ variant, icon, title, children, onDismiss, action, className, closeAriaLabel, }: BannerProps): React.ReactNode;
+
+export { Banner, type BannerVariant };

package/dist/banner.js

@@ -0,0 +1,57 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const VARIANTS = {
+  info: { wrap: "bg-info/10 border-info/30", iconColor: "text-info", titleColor: "text-info" },
+  success: { wrap: "bg-success/10 border-success/30", iconColor: "text-success", titleColor: "text-success" },
+  warning: { wrap: "bg-warning/10 border-warning/30", iconColor: "text-warning", titleColor: "text-warning" },
+  danger: { wrap: "bg-error/10 border-error/30", iconColor: "text-error", titleColor: "text-error" }
+};
+const DEFAULT_ICON = {
+  info: "info",
+  success: "check_circle",
+  warning: "warning",
+  danger: "error"
+};
+function Banner({
+  variant = "info",
+  icon,
+  title,
+  children,
+  onDismiss,
+  action,
+  className = "",
+  closeAriaLabel = "\u0E1B\u0E34\u0E14"
+}) {
+  const v = VARIANTS[variant];
+  const resolvedIcon = icon != null ? icon : DEFAULT_ICON[variant];
+  return /* @__PURE__ */ jsxs("div", { className: `border rounded-2xl p-4 flex items-start gap-3 ${v.wrap} ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `material-symbols-outlined mt-0.5 text-2xl ${v.iconColor}`,
+        style: { fontVariationSettings: "'FILL' 1" },
+        "aria-hidden": "true",
+        children: resolvedIcon
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      title && /* @__PURE__ */ jsx("p", { className: `text-sm font-bold ${v.titleColor}`, children: title }),
+      children && (typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: `text-xs ${v.titleColor} opacity-80 ${title ? "mt-1" : ""} leading-relaxed`, children }) : /* @__PURE__ */ jsx("div", { className: title ? "mt-1" : "", children }))
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }),
+    onDismiss && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onDismiss,
+        className: `shrink-0 p-1 rounded ${v.iconColor} hover:opacity-70 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current`,
+        "aria-label": closeAriaLabel,
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg", "aria-hidden": "true", children: "close" })
+      }
+    )
+  ] });
+}
+export {
+  Banner
+};

package/dist/breadcrumb.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+    navAriaLabel?: string;
+    homeAriaLabel?: string;
+}
+declare function Breadcrumb({ items, className, navAriaLabel, homeAriaLabel }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbItem };