@pichetch08/trip-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+export { StatCard, StatCardTone } from './stat-card.js';
+export { PageHeader } from './page-header.js';
+export { EmptyState } from './empty-state.js';
+export { Badge } from './badge.js';
+export { SearchBar } from './search-bar.js';
+export { FilterTab, FilterTabs } from './filter-tabs.js';
+export { Pagination } from './pagination.js';
+export { ConfirmDialog } from './confirm-dialog.js';
+export { Column, DataTable } from './data-table.js';
+export { ToastProvider, useToast } from './toast.js';
+export { Drawer } from './drawer.js';
+export { ToggleSwitch } from './toggle-switch.js';
+export { ErrorState, LoadingState } from './page-state.js';
+export { Banner, BannerVariant } from './banner.js';
+export { Modal, ModalSize } from './modal.js';
+export { RichEditor } from './rich-editor.js';
+export { CardSkeleton, PageSkeleton, Skeleton, StatCardSkeleton, TableRowSkeleton } from './skeleton.js';
+export { StatusBadge, StatusConfig, StatusTone } from './status-badge.js';
+export { AppColor, IconWrapper, IconWrapperColor } from './icon-wrapper.js';
+export { IconButton, IconButtonVariant } from './icon-button.js';
+export { FormInput } from './form-input.js';
+export { FormTextarea } from './form-textarea.js';
+export { SectionHeader } from './section-header.js';
+export { FooterActionBar } from './footer-action-bar.js';
+export { DashedAddButton } from './dashed-add-button.js';
+export { StatsSummary } from './stats-summary.js';
+export { IconPicker } from './icon-picker.js';
+export { AgreementModal } from './agreement-modal.js';
+export { AuthHero } from './auth-hero.js';
+export { ChangeEntry, ChangeSummaryModal } from './change-summary-modal.js';
+export { ChannelBadge, FollowChannel } from './channel-badge.js';
+export { DatePicker } from './date-picker.js';
+export { DevAutoFill } from './dev-auto-fill.js';
+export { MobilePreview } from './mobile-preview.js';
+export { PreviewDrawer } from './preview-drawer.js';
+export { QRCodeDisplay } from './qr-code-display.js';
+export { SegmentedControl } from './segmented-control.js';
+export { SelectOption, SelectPicker } from './select-picker.js';
+export { TimePicker } from './time-picker.js';
+export { MapActivity, TripDayMapLazy } from './trip-day-map-lazy.js';
+export { Checkbox, CheckboxGroup } from './checkbox.js';
+export { RadioGroup } from './radio-group.js';
+export { Alert, AlertVariant } from './alert.js';
+export { Breadcrumb, BreadcrumbItem } from './breadcrumb.js';
+export { ProgressBar } from './progress-bar.js';
+export { Avatar, AvatarGroup } from './avatar.js';
+export { Rating } from './rating.js';
+export { NumberInput } from './number-input.js';
+export { Accordion, AccordionItem } from './accordion.js';
+export { TabItem, Tabs } from './tabs.js';
+export { DropdownItem, DropdownMenu } from './dropdown-menu.js';
+export { Tag, TagGroup } from './tag.js';
+export { Tooltip } from './tooltip.js';
+export { StepItem, Stepper } from './stepper.js';
+export { Timeline, TimelineItem } from './timeline.js';
+export { OTPInput } from './otp-input.js';
+export { Slider } from './slider.js';
+export { ImageUpload } from './image-upload.js';
+export { MultiSelect, MultiSelectOption } from './multi-select.js';
+export { DateRangePicker } from './date-range-picker.js';
+export { FullPageSpinner, Spinner } from './spinner.js';
+export { Popover } from './popover.js';
+export { FileUpload, UploadedFile } from './file-upload.js';
+export { ColorPicker } from './color-picker.js';
+export { Card, CardBody, CardFooter, CardHeader } from './card.js';
+export { Divider } from './divider.js';
+export { CopyButton } from './copy-button.js';
+export { KBD, Shortcut } from './kbd.js';
+export { Button, ButtonSize, ButtonVariant } from './button.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/index.js

@@ -0,0 +1,155 @@
+import "./chunk-ORMEWXMH.js";
+import { StatCard } from "./stat-card";
+import { PageHeader } from "./page-header";
+import { EmptyState } from "./empty-state";
+import { Badge } from "./badge";
+import { SearchBar } from "./search-bar";
+import { FilterTabs } from "./filter-tabs";
+import { Pagination } from "./pagination";
+import { ConfirmDialog } from "./confirm-dialog";
+import { DataTable } from "./data-table";
+import { ToastProvider, useToast } from "./toast";
+import { Drawer } from "./drawer";
+import { ToggleSwitch } from "./toggle-switch";
+import { LoadingState, ErrorState } from "./page-state";
+import { Banner } from "./banner";
+import { Modal } from "./modal";
+import { RichEditor } from "./rich-editor";
+import { Skeleton, CardSkeleton, TableRowSkeleton, StatCardSkeleton, PageSkeleton } from "./skeleton";
+import { StatusBadge } from "./status-badge";
+import { IconWrapper } from "./icon-wrapper";
+import { IconButton } from "./icon-button";
+import { FormInput } from "./form-input";
+import { FormTextarea } from "./form-textarea";
+import { SectionHeader } from "./section-header";
+import { FooterActionBar } from "./footer-action-bar";
+import { DashedAddButton } from "./dashed-add-button";
+import { StatsSummary } from "./stats-summary";
+import { IconPicker } from "./icon-picker";
+import { AgreementModal } from "./agreement-modal";
+import { AuthHero } from "./auth-hero";
+import { ChangeSummaryModal } from "./change-summary-modal";
+import { ChannelBadge } from "./channel-badge";
+import { DatePicker } from "./date-picker";
+import { DevAutoFill } from "./dev-auto-fill";
+import { MobilePreview } from "./mobile-preview";
+import { PreviewDrawer } from "./preview-drawer";
+import { QRCodeDisplay } from "./qr-code-display";
+import { SegmentedControl } from "./segmented-control";
+import { SelectPicker } from "./select-picker";
+import { TimePicker } from "./time-picker";
+import { TripDayMapLazy } from "./trip-day-map-lazy";
+import { Checkbox, CheckboxGroup } from "./checkbox";
+import { RadioGroup } from "./radio-group";
+import { Alert } from "./alert";
+import { Breadcrumb } from "./breadcrumb";
+import { ProgressBar } from "./progress-bar";
+import { Avatar, AvatarGroup } from "./avatar";
+import { Rating } from "./rating";
+import { NumberInput } from "./number-input";
+import { Accordion } from "./accordion";
+import { Tabs } from "./tabs";
+import { DropdownMenu } from "./dropdown-menu";
+import { Tag, TagGroup } from "./tag";
+import { Tooltip } from "./tooltip";
+import { Stepper } from "./stepper";
+import { Timeline } from "./timeline";
+import { OTPInput } from "./otp-input";
+import { Slider } from "./slider";
+import { ImageUpload } from "./image-upload";
+import { MultiSelect } from "./multi-select";
+import { DateRangePicker } from "./date-range-picker";
+import { Spinner, FullPageSpinner } from "./spinner";
+import { Popover } from "./popover";
+import { FileUpload } from "./file-upload";
+import { ColorPicker } from "./color-picker";
+import { Card, CardHeader, CardBody, CardFooter } from "./card";
+import { Divider } from "./divider";
+import { CopyButton } from "./copy-button";
+import { KBD, Shortcut } from "./kbd";
+import { Button } from "./button";
+export {
+  Accordion,
+  AgreementModal,
+  Alert,
+  AuthHero,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Banner,
+  Breadcrumb,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardSkeleton,
+  ChangeSummaryModal,
+  ChannelBadge,
+  Checkbox,
+  CheckboxGroup,
+  ColorPicker,
+  ConfirmDialog,
+  CopyButton,
+  DashedAddButton,
+  DataTable,
+  DatePicker,
+  DateRangePicker,
+  DevAutoFill,
+  Divider,
+  Drawer,
+  DropdownMenu,
+  EmptyState,
+  ErrorState,
+  FileUpload,
+  FilterTabs,
+  FooterActionBar,
+  FormInput,
+  FormTextarea,
+  FullPageSpinner,
+  IconButton,
+  IconPicker,
+  IconWrapper,
+  ImageUpload,
+  KBD,
+  LoadingState,
+  MobilePreview,
+  Modal,
+  MultiSelect,
+  NumberInput,
+  OTPInput,
+  PageHeader,
+  PageSkeleton,
+  Pagination,
+  Popover,
+  PreviewDrawer,
+  ProgressBar,
+  QRCodeDisplay,
+  RadioGroup,
+  Rating,
+  RichEditor,
+  SearchBar,
+  SectionHeader,
+  SegmentedControl,
+  SelectPicker,
+  Shortcut,
+  Skeleton,
+  Slider,
+  Spinner,
+  StatCard,
+  StatCardSkeleton,
+  StatsSummary,
+  StatusBadge,
+  Stepper,
+  TableRowSkeleton,
+  Tabs,
+  Tag,
+  TagGroup,
+  TimePicker,
+  Timeline,
+  ToastProvider,
+  ToggleSwitch,
+  Tooltip,
+  TripDayMapLazy,
+  useToast
+};

package/dist/kbd.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface KBDProps {
+    children: React__default.ReactNode;
+    size?: "sm" | "md";
+}
+declare function KBD({ children, size }: KBDProps): react_jsx_runtime.JSX.Element;
+interface ShortcutProps {
+    keys: string[];
+    size?: "sm" | "md";
+}
+declare function Shortcut({ keys, size }: ShortcutProps): react_jsx_runtime.JSX.Element;
+
+export { KBD, Shortcut };

package/dist/kbd.js

@@ -0,0 +1,27 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+function KBD({ children, size = "md" }) {
+  const sizeClasses = size === "sm" ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs";
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: [
+        "inline-flex items-center justify-center font-mono font-semibold",
+        "bg-surface-container border border-outline-variant/40 border-b-2 border-b-outline-variant/70 rounded-md shadow-sm text-on-surface-variant",
+        sizeClasses
+      ].join(" "),
+      children
+    }
+  );
+}
+function Shortcut({ keys, size = "md" }) {
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant font-medium select-none", children: "+" }),
+    /* @__PURE__ */ jsx(KBD, { size, children: key })
+  ] }, index)) });
+}
+export {
+  KBD,
+  Shortcut
+};

package/dist/mobile-preview.d.ts

@@ -0,0 +1,36 @@
+interface DayLite {
+    id: string;
+    title: string;
+    date: string | null;
+    coverImageUrl: string | null;
+    activities: {
+        id: string;
+        time: string | null;
+        name: string;
+        description: string | null;
+        emoji: string | null;
+    }[];
+}
+interface MobilePreviewProps {
+    title: string;
+    startDate: string;
+    endDate: string;
+    totalDays: number;
+    travelersCount: number;
+    coverImageUrl: string | null;
+    airlineName: string | null;
+    accommodationsCount: number;
+    countdownDays: number;
+    days: DayLite[];
+    activeDayIndex: number;
+    onActiveDayChange: (i: number) => void;
+    emptyText?: string;
+    previewLabel?: string;
+    countdownText?: (days: number) => string;
+    daysText?: string;
+    activitiesText?: string;
+    followLabel?: string;
+}
+declare function MobilePreview({ title, startDate, endDate, totalDays, travelersCount, coverImageUrl, airlineName, accommodationsCount, countdownDays, days, activeDayIndex, onActiveDayChange, emptyText, previewLabel, countdownText, daysText, activitiesText, followLabel, }: MobilePreviewProps): React.ReactNode;
+
+export { MobilePreview };

package/dist/mobile-preview.js

@@ -0,0 +1,167 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const DAY_GRADIENTS = [
+  "from-blue-600 to-indigo-700",
+  "from-rose-500 to-pink-600",
+  "from-emerald-500 to-teal-600",
+  "from-amber-500 to-orange-600",
+  "from-violet-500 to-purple-600",
+  "from-cyan-500 to-blue-600"
+];
+const formatDateTH = (dateStr) => new Date(dateStr).toLocaleDateString("th-TH", { day: "numeric", month: "short" });
+function MobilePreview({
+  title,
+  startDate,
+  endDate,
+  totalDays,
+  travelersCount,
+  coverImageUrl,
+  airlineName,
+  accommodationsCount,
+  countdownDays,
+  days,
+  activeDayIndex,
+  onActiveDayChange,
+  emptyText = "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21",
+  previewLabel = "\u0E15\u0E31\u0E27\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E2B\u0E19\u0E49\u0E32\u0E15\u0E32\u0E1A\u0E19\u0E21\u0E37\u0E2D\u0E16\u0E37\u0E2D",
+  countdownText = (days2) => `\u0E2D\u0E35\u0E01 ${days2} \u0E27\u0E31\u0E19`,
+  daysText = "\u0E27\u0E31\u0E19",
+  activitiesText = "\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21",
+  followLabel = "\u2B50 \u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E17\u0E23\u0E34\u0E1B\u0E19\u0E35\u0E49"
+}) {
+  var _a;
+  const currentDay = (_a = days[activeDayIndex]) != null ? _a : days[0];
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex justify-center", "aria-label": previewLabel, children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-22 flex flex-col gap-2 z-10", style: { left: "-10px" }, children: [
+      /* @__PURE__ */ jsx("div", { className: "w-1 h-8 bg-slate-700 rounded-l-sm shadow-inner" }),
+      /* @__PURE__ */ jsx("div", { className: "w-1 h-13 bg-slate-700 rounded-l-sm shadow-inner" }),
+      /* @__PURE__ */ jsx("div", { className: "w-1 h-13 bg-slate-700 rounded-l-sm shadow-inner" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-30 z-10", style: { right: "-10px" }, children: /* @__PURE__ */ jsx("div", { className: "w-1 h-18 bg-slate-700 rounded-r-sm shadow-inner" }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative w-67.5 bg-linear-to-b from-slate-800 to-slate-900 rounded-[3.5rem] shadow-2xl",
+        style: {
+          padding: "12px",
+          boxShadow: "0 40px 80px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.4)"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-black rounded-[2.8rem] overflow-hidden", style: { padding: "2px" }, children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-surface-container-lowest rounded-[2.6rem] overflow-hidden flex flex-col relative", style: { height: "556px" }, children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-0 right-0 h-10 flex items-end justify-between px-6 pb-1.5 z-30 pointer-events-none", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-1/2 -translate-x-1/2 w-20 h-5.5 bg-black rounded-full" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-white z-10", children: "9:41" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 z-10", children: [
+              /* @__PURE__ */ jsxs("svg", { width: "13", height: "10", viewBox: "0 0 13 10", fill: "currentColor", className: "text-white", children: [
+                /* @__PURE__ */ jsx("rect", { x: "0", y: "7", width: "2", height: "3", rx: "0.5" }),
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "2", height: "5", rx: "0.5" }),
+                /* @__PURE__ */ jsx("rect", { x: "6", y: "3", width: "2", height: "7", rx: "0.5" }),
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "1", width: "2", height: "9", rx: "0.5", opacity: "0.5" })
+              ] }),
+              /* @__PURE__ */ jsxs("svg", { width: "13", height: "10", viewBox: "0 0 13 10", fill: "currentColor", className: "text-white", children: [
+                /* @__PURE__ */ jsx("path", { d: "M6.5 7.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" }),
+                /* @__PURE__ */ jsx("path", { d: "M3.8 5.2a3.8 3.8 0 0 1 5.4 0l-1 1a2.4 2.4 0 0 0-3.4 0l-1-1z" }),
+                /* @__PURE__ */ jsx("path", { d: "M1.5 3a6.2 6.2 0 0 1 10 0l-1 1a4.8 4.8 0 0 0-8 0l-1-1z", opacity: "0.5" })
+              ] }),
+              /* @__PURE__ */ jsxs("svg", { width: "22", height: "10", viewBox: "0 0 22 10", fill: "currentColor", className: "text-white", children: [
+                /* @__PURE__ */ jsx("rect", { x: "0.5", y: "0.5", width: "18", height: "9", rx: "2.5", stroke: "currentColor", strokeWidth: "1", fill: "none", opacity: "0.5" }),
+                /* @__PURE__ */ jsx("rect", { x: "19.5", y: "3", width: "2", height: "4", rx: "1", opacity: "0.5" }),
+                /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "13", height: "6", rx: "1.5" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", style: { scrollbarWidth: "none" }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative h-52 w-full overflow-hidden", children: [
+              coverImageUrl ? /* @__PURE__ */ jsx("img", { className: "w-full h-full object-cover", src: coverImageUrl, alt: "" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-linear-to-br from-blue-400 to-indigo-600" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/85 via-black/30 to-transparent" }),
+              /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-4 text-white", children: [
+                countdownDays > 0 && /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-white/20 backdrop-blur-sm text-[8px] font-bold mb-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" }),
+                  countdownText(countdownDays)
+                ] }),
+                /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-extrabold leading-tight", children: title }),
+                /* @__PURE__ */ jsxs("p", { className: "text-[9px] text-white/75 mt-0.5", children: [
+                  formatDateTH(startDate),
+                  " \u2014 ",
+                  formatDateTH(endDate),
+                  " \xB7 ",
+                  totalDays,
+                  " ",
+                  daysText
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mt-2 flex-wrap", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-white/15 backdrop-blur-sm text-[7px] text-white/90", children: [
+                    "\u{1F465} ",
+                    travelersCount
+                  ] }),
+                  airlineName && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-white/15 backdrop-blur-sm text-[7px] text-white/90", children: [
+                    "\u2708\uFE0F ",
+                    airlineName
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-white/15 backdrop-blur-sm text-[7px] text-white/90", children: [
+                    "\u{1F3E8} ",
+                    accommodationsCount
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "mt-2.5 w-full py-1.5 rounded-full bg-linear-to-r from-primary to-blue-500 text-[9px] font-bold text-white flex items-center justify-center gap-1 shadow-lg", children: followLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-surface border-b border-outline-variant/20 px-3 py-2 flex gap-1.5 overflow-x-auto", style: { scrollbarWidth: "none" }, children: days.map((day, i) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onActiveDayChange(i),
+                className: `shrink-0 px-2.5 py-1 rounded-lg text-[8px] font-bold whitespace-nowrap transition-all ${activeDayIndex === i ? "bg-primary text-white shadow-sm" : "bg-surface-container text-on-surface-variant"}`,
+                children: [
+                  "D",
+                  i + 1
+                ]
+              },
+              day.id
+            )) }),
+            currentDay && /* @__PURE__ */ jsx("div", { className: "px-3 py-3 space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl overflow-hidden border border-outline-variant/20 shadow-sm bg-surface", children: [
+              /* @__PURE__ */ jsxs("div", { className: `relative h-14 bg-linear-to-r ${DAY_GRADIENTS[activeDayIndex % DAY_GRADIENTS.length]} p-3 flex flex-col justify-end`, children: [
+                currentDay.coverImageUrl && /* @__PURE__ */ jsx("img", { className: "absolute inset-0 w-full h-full object-cover opacity-30 mix-blend-overlay", src: currentDay.coverImageUrl, alt: "" }),
+                /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2 text-white", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-[7px] font-medium text-white/70", children: currentDay.date && formatDateTH(currentDay.date) }),
+                    /* @__PURE__ */ jsx("h4", { className: "text-[10px] font-extrabold leading-tight", children: currentDay.title || `Day ${activeDayIndex + 1}` })
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "ml-auto bg-white/20 backdrop-blur-sm rounded-full px-1.5 py-0.5 text-[7px] font-bold text-white", children: [
+                    currentDay.activities.length,
+                    " ",
+                    activitiesText
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "p-2.5 space-y-2", children: currentDay.activities.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-[9px] text-on-surface-variant py-4", children: emptyText }) : currentDay.activities.map((act, actIdx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-start", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center shrink-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-primary mt-1" }),
+                  actIdx < currentDay.activities.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-px flex-1 min-h-3 bg-outline-variant/30" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pb-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm leading-none", children: act.emoji || "\u{1F4CD}" }),
+                    act.time && /* @__PURE__ */ jsx("span", { className: "text-[7px] font-bold text-primary bg-primary-container px-1 py-0.5 rounded", children: act.time })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-on-surface leading-tight mt-0.5", children: act.name }),
+                  act.description && /* @__PURE__ */ jsx("p", { className: "text-[8px] text-on-surface-variant line-clamp-1", children: act.description })
+                ] })
+              ] }, act.id)) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "h-12 border-t border-outline-variant/20 bg-surface flex justify-around items-center px-6 shrink-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm text-primary", style: { fontVariationSettings: "'FILL' 1" }, children: "home" }),
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm text-on-surface-variant", children: "calendar_month" }),
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm text-on-surface-variant", children: "map" }),
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm text-on-surface-variant", children: "chat" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-5 bg-surface flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-24 h-1 bg-on-surface rounded-full opacity-20" }) })
+        ] }) })
+      }
+    )
+  ] });
+}
+export {
+  MobilePreview
+};

package/dist/modal.d.ts

@@ -0,0 +1,19 @@
+type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    size?: ModalSize;
+    title?: string;
+    subtitle?: React.ReactNode;
+    description?: string;
+    headerActions?: React.ReactNode;
+    blocking?: boolean;
+    hideCloseButton?: boolean;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    closeAriaLabel?: string;
+}
+declare function Modal({ open, onClose, size, title, subtitle, description, headerActions, blocking, hideCloseButton, children, footer, className, closeAriaLabel, }: ModalProps): React.ReactNode;
+
+export { Modal, type ModalSize };

package/dist/modal.js

@@ -0,0 +1,110 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { IconButton } from "./icon-button";
+const SIZE_CLASS = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-4xl",
+  full: "max-w-6xl"
+};
+function Modal({
+  open,
+  onClose,
+  size = "md",
+  title,
+  subtitle,
+  description,
+  headerActions,
+  blocking = false,
+  hideCloseButton = false,
+  children,
+  footer,
+  className = "",
+  closeAriaLabel = "\u0E1B\u0E34\u0E14"
+}) {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const dialog = dialogRef.current;
+    const focusables = dialog == null ? void 0 : dialog.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusables && focusables.length > 0) {
+      focusables[0].focus();
+    }
+    const onKey = (e) => {
+      if (e.key === "Escape" && !blocking) {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !dialog) return;
+      const els = Array.from(
+        dialog.querySelectorAll(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      );
+      if (els.length === 0) return;
+      const first = els[0], last = els[els.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, blocking, onClose]);
+  if (!open) return null;
+  const handleBackdrop = () => {
+    if (!blocking) onClose();
+  };
+  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 cursor-pointer", onClick: handleBackdrop }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? "modal-title" : void 0,
+        "aria-describedby": description ? "modal-description" : void 0,
+        className: `relative bg-surface rounded-2xl shadow-2xl w-full ${SIZE_CLASS[size]} flex flex-col max-h-[90vh] overflow-hidden ${className}`,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          (title || headerActions || !hideCloseButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-6 py-4 border-b border-outline-variant/40 shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+              title && /* @__PURE__ */ jsx("h3", { id: "modal-title", className: "text-lg font-bold text-on-surface truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-on-surface-variant mt-1 leading-relaxed", children: subtitle }),
+              description && /* @__PURE__ */ jsx("p", { id: "modal-description", className: "sr-only", children: description })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              headerActions,
+              !hideCloseButton && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  icon: "close",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onClose,
+                  disabled: blocking,
+                  "aria-label": closeAriaLabel
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto px-6 py-5", children }),
+          footer && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-t border-outline-variant/40 shrink-0", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Modal
+};

package/dist/multi-select.d.ts

@@ -0,0 +1,30 @@
+interface MultiSelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+}
+interface MultiSelectProps {
+    label?: string;
+    value: string[];
+    onChange: (value: string[]) => void;
+    options: MultiSelectOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    selectAllText?: string;
+    clearAllText?: string;
+    emptyText?: string;
+    moreLabel?: string;
+    required?: boolean;
+    error?: string;
+    searchable?: boolean;
+    maxDisplay?: number;
+    icon?: string;
+    disabled?: boolean;
+    name?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    removePillLabel?: (label: string) => string;
+}
+declare function MultiSelect({ label, value, onChange, options, placeholder, searchPlaceholder, selectAllText, clearAllText, emptyText, moreLabel, required, error, searchable, maxDisplay, icon, disabled, name, onOpen, onClose, removePillLabel, }: MultiSelectProps): React.ReactNode;
+
+export { MultiSelect, type MultiSelectOption };