@pichetch08/trip-ui 0.1.0

package/dist/pagination.js

@@ -0,0 +1,87 @@
+"use client";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const defaultLabels = {
+  showing: (from, to, total) => `\u0E41\u0E2A\u0E14\u0E07 ${from}\u2013${to} \u0E08\u0E32\u0E01 ${total} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`,
+  page: (current, total) => `\u0E2B\u0E19\u0E49\u0E32 ${current} \u0E08\u0E32\u0E01 ${total}`,
+  prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
+  nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
+  pageLabel: (page) => `\u0E2B\u0E19\u0E49\u0E32 ${page}`,
+  nav: "\u0E01\u0E32\u0E23\u0E41\u0E1A\u0E48\u0E07\u0E2B\u0E19\u0E49\u0E32"
+};
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  totalItems,
+  pageSize,
+  labels = {}
+}) {
+  const L = __spreadValues(__spreadValues({}, defaultLabels), labels);
+  const pages = [];
+  const maxVisible = 5;
+  let start = Math.max(1, currentPage - 2);
+  let end = Math.min(totalPages, start + maxVisible - 1);
+  if (end - start < maxVisible - 1) start = Math.max(1, end - maxVisible + 1);
+  if (start > 1) {
+    pages.push(1);
+    if (start > 2) pages.push(null);
+  }
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (end < totalPages) {
+    if (end < totalPages - 1) pages.push(null);
+    pages.push(totalPages);
+  }
+  const showCount = totalItems != null && pageSize != null;
+  const from = showCount ? (currentPage - 1) * pageSize + 1 : null;
+  const to = showCount ? Math.min(currentPage * pageSize, totalItems) : null;
+  return /* @__PURE__ */ jsxs("nav", { className: "flex items-center justify-between px-1", "aria-label": L.nav, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", "aria-live": "polite", "aria-atomic": "true", children: showCount ? L.showing(from, to, totalItems) : L.page(currentPage, totalPages) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: currentPage === 1,
+          "aria-label": L.prevPage,
+          className: "p-2 rounded-lg border border-outline-variant/20 hover:bg-surface-container-low disabled:opacity-50 disabled:cursor-not-allowed transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base leading-none", "aria-hidden": "true", children: "chevron_left" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", role: "list", children: pages.map((page, idx) => {
+        if (page === null) {
+          return /* @__PURE__ */ jsx("span", { className: "px-2 text-on-surface-variant text-sm", "aria-hidden": "true", children: "\u2026" }, `ellipsis-${idx}`);
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onPageChange(page),
+            "aria-label": L.pageLabel(page),
+            "aria-current": currentPage === page ? "page" : void 0,
+            className: `w-9 h-9 rounded-lg text-sm font-medium transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${currentPage === page ? "bg-primary text-on-primary" : "border border-outline-variant/20 text-on-surface hover:bg-surface-container-low"}`,
+            children: page
+          },
+          page
+        );
+      }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: currentPage === totalPages,
+          "aria-label": L.nextPage,
+          className: "p-2 rounded-lg border border-outline-variant/20 hover:bg-surface-container-low disabled:opacity-50 disabled:cursor-not-allowed transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base leading-none", "aria-hidden": "true", children: "chevron_right" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Pagination
+};

package/dist/popover.d.ts

@@ -0,0 +1,11 @@
+interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    className?: string;
+    width?: number | "auto";
+}
+declare function Popover({ trigger, children, placement, align, className, width, }: PopoverProps): React.ReactNode;
+
+export { Popover };

package/dist/popover.js

@@ -0,0 +1,70 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function getPositionClass(placement, align) {
+  if (placement === "bottom") {
+    const alignClass = align === "start" ? "left-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "right-0";
+    return `top-full mt-2 ${alignClass}`;
+  }
+  if (placement === "top") {
+    const alignClass = align === "start" ? "left-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "right-0";
+    return `bottom-full mb-2 ${alignClass}`;
+  }
+  if (placement === "left") {
+    return "right-full mr-2 top-0";
+  }
+  return "left-full ml-2 top-0";
+}
+function Popover({
+  trigger,
+  children,
+  placement = "bottom",
+  align = "start",
+  className = "",
+  width = "auto"
+}) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handleMouseDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  const positionClass = getPositionClass(placement, align);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setOpen((v) => !v),
+        style: { display: "contents" },
+        children: trigger
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute z-50 bg-surface rounded-2xl shadow-xl border border-outline-variant/20 p-4 animate-in fade-in zoom-in-95 duration-150 ${positionClass} ${className}`,
+        style: width !== "auto" ? { width } : void 0,
+        children
+      }
+    )
+  ] });
+}
+export {
+  Popover
+};

package/dist/preview-drawer.d.ts

@@ -0,0 +1,33 @@
+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 PreviewDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    startDate: string;
+    endDate: string;
+    totalDays: number;
+    travelersCount: number;
+    coverImageUrl: string | null;
+    airlineName: string | null;
+    accommodationsCount: number;
+    countdownDays: number;
+    days: DayLite[];
+    drawerTitle?: string;
+    closeAriaLabel?: string;
+    previewOnlyLabel?: string;
+}
+declare function PreviewDrawer({ open, onClose, drawerTitle, closeAriaLabel, previewOnlyLabel, ...previewProps }: PreviewDrawerProps): React.ReactNode;
+
+export { PreviewDrawer };

package/dist/preview-drawer.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { MobilePreview } from "./mobile-preview";
+import { IconButton } from "./icon-button";
+function PreviewDrawer(_a) {
+  var _b = _a, {
+    open,
+    onClose,
+    drawerTitle = "\u0E15\u0E31\u0E27\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E1A\u0E19\u0E21\u0E37\u0E2D\u0E16\u0E37\u0E2D",
+    closeAriaLabel = "\u0E1B\u0E34\u0E14",
+    previewOnlyLabel = "\u0E15\u0E31\u0E27\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E40\u0E17\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19"
+  } = _b, previewProps = __objRest(_b, [
+    "open",
+    "onClose",
+    "drawerTitle",
+    "closeAriaLabel",
+    "previewOnlyLabel"
+  ]);
+  const [activeDay, setActiveDay] = useState(0);
+  const touchStartX = useRef(0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `fixed inset-0 z-49 transition-opacity duration-300 ${open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
+        onClick: onClose,
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `fixed top-0 right-0 h-full w-90 z-50 bg-surface border-l border-outline-variant/40 shadow-2xl flex flex-col transition-transform duration-300 ease-in-out ${open ? "translate-x-0" : "translate-x-full"}`,
+        onTouchStart: (e) => {
+          touchStartX.current = e.touches[0].clientX;
+        },
+        onTouchEnd: (e) => {
+          if (e.changedTouches[0].clientX - touchStartX.current > 80) onClose();
+        },
+        "aria-labelledby": "preview-drawer-title",
+        role: "dialog",
+        "aria-modal": true,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-outline-variant/30 shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg text-primary", children: "phone_iphone" }),
+              /* @__PURE__ */ jsx("h2", { id: "preview-drawer-title", className: "text-sm font-bold text-on-surface", children: drawerTitle })
+            ] }),
+            /* @__PURE__ */ jsx(IconButton, { icon: "close", variant: "ghost", size: "sm", onClick: onClose, "aria-label": closeAriaLabel })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              MobilePreview,
+              __spreadProps(__spreadValues({}, previewProps), {
+                activeDayIndex: activeDay,
+                onActiveDayChange: setActiveDay
+              })
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-on-surface-variant uppercase tracking-wider font-semibold", children: previewOnlyLabel })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PreviewDrawer
+};

package/dist/progress-bar.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ProgressBarProps {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "emerald" | "amber" | "red";
+    animated?: boolean;
+    className?: string;
+}
+declare function ProgressBar({ value, max, label, showValue, size, color, animated, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+export { ProgressBar };

package/dist/progress-bar.js

@@ -0,0 +1,56 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SIZE_CLASSES = {
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4"
+};
+const COLOR_CLASSES = {
+  primary: "bg-primary",
+  emerald: "bg-emerald-500",
+  amber: "bg-amber-500",
+  red: "bg-red-500"
+};
+function ProgressBar({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  size = "md",
+  color = "primary",
+  animated = false,
+  className = ""
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const displayPercent = Math.round(percentage);
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-1.5", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant", children: label }),
+      showValue && /* @__PURE__ */ jsxs("span", { className: "text-xs text-on-surface-variant tabular-nums ml-auto", children: [
+        displayPercent,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full rounded-full bg-surface-container-high ${SIZE_CLASSES[size]}`,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${SIZE_CLASSES[size]} rounded-full transition-all duration-500 ${COLOR_CLASSES[color]} ${animated ? "animate-pulse" : ""}`,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ProgressBar
+};

package/dist/qr-code-display.d.ts

@@ -0,0 +1,10 @@
+interface QRCodeDisplayProps {
+    url: string;
+    size?: number;
+    icon?: string;
+    iconImageUrl?: string;
+    iconSize?: number;
+}
+declare function QRCodeDisplay({ url, size, icon, iconImageUrl, iconSize }: QRCodeDisplayProps): React.ReactNode;
+
+export { QRCodeDisplay };

package/dist/qr-code-display.js

@@ -0,0 +1,43 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+function QRCodeDisplay({ url, size = 200, icon, iconImageUrl, iconSize }) {
+  const [dataUrl, setDataUrl] = useState("");
+  const hasOverlay = !!(icon || iconImageUrl);
+  const resolvedIconSize = iconSize != null ? iconSize : Math.round(size * 0.22);
+  useEffect(() => {
+    QRCode.toDataURL(url, {
+      width: size,
+      margin: 2,
+      color: { dark: "#1e293b", light: "#ffffff" },
+      errorCorrectionLevel: hasOverlay ? "H" : "M"
+    }).then(setDataUrl).catch(() => {
+    });
+  }, [url, size, hasOverlay]);
+  if (!dataUrl) {
+    return /* @__PURE__ */ jsx("div", { className: "animate-pulse bg-surface-container rounded-xl", style: { width: size, height: size } });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx("img", { src: dataUrl, alt: "QR Code", width: size, height: size, className: "rounded-xl" }),
+    hasOverlay && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl flex items-center justify-center shadow-lg ring-1 ring-black/8 overflow-hidden",
+        style: { width: resolvedIconSize + 14, height: resolvedIconSize + 14 },
+        children: iconImageUrl ? /* @__PURE__ */ jsx("img", { src: iconImageUrl, alt: "logo", width: resolvedIconSize, height: resolvedIconSize, className: "object-contain" }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "material-symbols-outlined text-primary",
+            style: { fontSize: resolvedIconSize, fontVariationSettings: "'FILL' 1" },
+            children: icon
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  QRCodeDisplay
+};

package/dist/radio-group.d.ts

@@ -0,0 +1,19 @@
+interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+interface RadioGroupProps {
+    label?: string;
+    options: RadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+    error?: string;
+    required?: boolean;
+    orientation?: "vertical" | "horizontal";
+    disabled?: boolean;
+    name?: string;
+}
+declare function RadioGroup({ label, options, value, onChange, error, required, orientation, disabled, name, }: RadioGroupProps): React.ReactNode;
+
+export { RadioGroup };

package/dist/radio-group.js

@@ -0,0 +1,78 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  options,
+  value,
+  onChange,
+  error,
+  required,
+  orientation = "vertical",
+  disabled = false,
+  name
+}) {
+  var _a;
+  const resolvedName = (_a = name != null ? name : label) != null ? _a : "radio-group";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    label && /* @__PURE__ */ jsxs("span", { 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__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-required": required,
+        className: `flex ${orientation === "horizontal" ? "flex-row flex-wrap gap-4" : "flex-col gap-3"}`,
+        children: options.map((opt) => {
+          const isSelected = opt.value === value;
+          const isDisabled = disabled;
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: `flex items-start gap-3 ${isDisabled ? "cursor-not-allowed opacity-40" : "cursor-pointer"}`,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 mt-0.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "radio",
+                      name: resolvedName,
+                      value: opt.value,
+                      checked: isSelected,
+                      onChange: () => !isDisabled && onChange(opt.value),
+                      disabled: isDisabled,
+                      className: "sr-only peer"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `flex items-center justify-center w-5 h-5 rounded-full border-2 transition-all
+                    peer-focus-visible:ring-2 peer-focus-visible:ring-primary/20
+                    ${isSelected ? "border-primary" : "bg-surface border-outline-variant hover:border-primary/60"}`,
+                      children: isSelected && /* @__PURE__ */ jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-primary shrink-0" })
+                    }
+                  )
+                ] }),
+                (opt.label || opt.description) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+                  opt.label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-on-surface leading-snug", children: opt.label }),
+                  opt.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant leading-snug", children: opt.description })
+                ] })
+              ]
+            },
+            opt.value
+          );
+        })
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-500 flex items-center gap-1 px-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "error" }),
+      error
+    ] })
+  ] });
+}
+export {
+  RadioGroup
+};

package/dist/rating.d.ts

@@ -0,0 +1,12 @@
+interface RatingProps {
+    value: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    showValue?: boolean;
+    label?: string;
+    readOnly?: boolean;
+}
+declare function Rating({ value, onChange, max, size, showValue, label, readOnly, }: RatingProps): React.ReactNode;
+
+export { Rating, type RatingProps };

package/dist/rating.js

@@ -0,0 +1,123 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const SIZE_CLASSES = {
+  sm: "text-base",
+  md: "text-xl",
+  lg: "text-3xl"
+};
+function StarIcon({
+  fill,
+  sizeClass,
+  className = ""
+}) {
+  if (fill === "half") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `material-symbols-outlined leading-none ${sizeClass} ${className}`,
+        style: { fontVariationSettings: "'FILL' 0" },
+        "aria-hidden": "true",
+        children: "star_half"
+      }
+    );
+  }
+  if (fill === "full") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `material-symbols-outlined leading-none ${sizeClass} ${className}`,
+        style: { fontVariationSettings: "'FILL' 1" },
+        "aria-hidden": "true",
+        children: "star"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `material-symbols-outlined leading-none ${sizeClass} ${className}`,
+      style: { fontVariationSettings: "'FILL' 0" },
+      "aria-hidden": "true",
+      children: "star"
+    }
+  );
+}
+function getStarFill(index, value) {
+  const starValue = index + 1;
+  if (value >= starValue) return "full";
+  if (value >= starValue - 0.5) return "half";
+  return "empty";
+}
+function Rating({
+  value,
+  onChange,
+  max = 5,
+  size = "md",
+  showValue = false,
+  label,
+  readOnly = false
+}) {
+  const [hovered, setHovered] = useState(null);
+  const isInteractive = !readOnly && !!onChange;
+  const sizeClass = SIZE_CLASSES[size];
+  const displayValue = hovered !== null ? hovered : value;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    label && /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-on-surface-variant uppercase tracking-widest", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex items-center ${isInteractive ? "cursor-pointer" : ""}`,
+          role: isInteractive ? "radiogroup" : void 0,
+          "aria-label": label != null ? label : `Rating: ${value} out of ${max}`,
+          onMouseLeave: () => isInteractive && setHovered(null),
+          onKeyDown: isInteractive ? (e) => {
+            if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+              e.preventDefault();
+              onChange(Math.min(value + 1, max));
+            } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+              e.preventDefault();
+              onChange(Math.max(value - 1, 1));
+            }
+          } : void 0,
+          children: Array.from({ length: max }).map((_, i) => {
+            const starValue = i + 1;
+            const fill = isInteractive && hovered !== null ? hovered >= starValue ? "full" : "empty" : getStarFill(i, displayValue);
+            const colorClass = fill === "empty" ? "text-outline-variant" : "text-amber-400";
+            if (isInteractive) {
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "radio",
+                  "aria-checked": Math.round(value) === starValue,
+                  "aria-label": `${starValue} star${starValue !== 1 ? "s" : ""}`,
+                  className: `${colorClass} transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 rounded active:scale-[0.95]`,
+                  onMouseEnter: () => setHovered(starValue),
+                  onClick: () => onChange(starValue),
+                  children: /* @__PURE__ */ jsx(StarIcon, { fill, sizeClass })
+                },
+                i
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              StarIcon,
+              {
+                fill,
+                sizeClass,
+                className: colorClass
+              },
+              i
+            );
+          })
+        }
+      ),
+      showValue && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-sm font-medium text-on-surface-variant", children: value.toFixed(1) })
+    ] })
+  ] });
+}
+export {
+  Rating
+};

package/dist/rich-editor.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface RichEditorProps {
+    value: string;
+    onChange: (html: string) => void;
+    placeholder?: string;
+    minHeight?: number;
+    disabled?: boolean;
+    loadingAriaLabel?: string;
+}
+declare function RichEditor({ value, onChange, placeholder, minHeight, disabled, loadingAriaLabel }: RichEditorProps): react_jsx_runtime.JSX.Element;
+
+export { RichEditor };