@pichetch08/trip-ui 0.1.0

package/dist/breadcrumb.js

@@ -0,0 +1,37 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({ items, className = "", navAriaLabel = "Breadcrumb", homeAriaLabel = "Home" }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": navAriaLabel, className, children: /* @__PURE__ */ jsx("ol", { className: `flex flex-wrap gap-1 items-center`, children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const isFirst = index === 0;
+    const showHomeIcon = isFirst && !item.label;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+      index > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "material-symbols-outlined text-sm text-on-surface-variant opacity-40",
+          "aria-hidden": "true",
+          children: "chevron_right"
+        }
+      ),
+      isLast || !item.href ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-sm font-semibold text-on-surface",
+          "aria-current": isLast ? "page" : void 0,
+          children: showHomeIcon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", "aria-label": homeAriaLabel, children: "home" }) : item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-sm text-on-surface-variant hover:text-on-surface transition-colors",
+          children: showHomeIcon ? /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", "aria-label": homeAriaLabel, children: "home" }) : item.label
+        }
+      )
+    ] }, index);
+  }) }) });
+}
+export {
+  Breadcrumb
+};

package/dist/button.d.ts

@@ -0,0 +1,15 @@
+import * as React$1 from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    icon?: string;
+    iconPosition?: "left" | "right";
+    fullWidth?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonSize, type ButtonVariant };

package/dist/button.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Spinner } from "./spinner";
+const VARIANT = {
+  primary: "bg-primary text-on-primary hover:[filter:brightness(0.88)] shadow-sm hover:shadow-md active:scale-[0.98]",
+  secondary: "bg-surface-container text-on-surface hover:bg-surface-container-high active:scale-[0.98]",
+  outline: "bg-transparent border border-outline-variant text-on-surface hover:bg-surface-container-low hover:border-outline active:scale-[0.98]",
+  ghost: "bg-transparent text-on-surface-variant hover:bg-surface-container hover:text-on-surface active:scale-[0.98]",
+  danger: "bg-red-500 text-white hover:[filter:brightness(0.88)] shadow-sm hover:shadow-md active:scale-[0.98]"
+};
+const SIZE = {
+  sm: "px-3 py-1.5 text-xs rounded-lg gap-1.5",
+  md: "px-5 py-2.5 text-sm rounded-xl gap-2",
+  lg: "px-6 py-3.5 text-base rounded-xl gap-2.5"
+};
+const ICON_SIZE = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+const Button = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "primary",
+      size = "md",
+      loading = false,
+      icon,
+      iconPosition = "left",
+      fullWidth = false,
+      disabled,
+      children,
+      className = ""
+    } = _b, props = __objRest(_b, [
+      "variant",
+      "size",
+      "loading",
+      "icon",
+      "iconPosition",
+      "fullWidth",
+      "disabled",
+      "children",
+      "className"
+    ]);
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        disabled: isDisabled,
+        className: [
+          "inline-flex items-center justify-center font-semibold",
+          "transition-all duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2",
+          "disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none",
+          VARIANT[variant],
+          SIZE[size],
+          fullWidth ? "w-full" : "",
+          className
+        ].filter(Boolean).join(" ")
+      }, props), {
+        children: [
+          loading && /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "sm" : "xs", color: variant === "primary" || variant === "danger" ? "white" : "primary" }),
+          !loading && icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined leading-none ${ICON_SIZE[size]}`, "aria-hidden": "true", children: icon }),
+          children,
+          !loading && icon && iconPosition === "right" && /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined leading-none ${ICON_SIZE[size]}`, "aria-hidden": "true", children: icon })
+        ]
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/card.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface CardProps {
+    children: React__default.ReactNode;
+    className?: string;
+    padding?: "none" | "sm" | "md" | "lg";
+    shadow?: "none" | "sm" | "md";
+    border?: boolean;
+    hover?: boolean;
+    onClick?: () => void;
+}
+declare function Card({ children, className, padding, shadow, border, hover, onClick, }: CardProps): react_jsx_runtime.JSX.Element;
+interface CardHeaderProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardHeader({ children, className }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+interface CardBodyProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardBody({ children, className }: CardBodyProps): react_jsx_runtime.JSX.Element;
+interface CardFooterProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardFooter({ children, className }: CardFooterProps): react_jsx_runtime.JSX.Element;
+
+export { Card, CardBody, CardFooter, CardHeader };

package/dist/card.js

@@ -0,0 +1,66 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+const paddingMap = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+const shadowMap = {
+  none: "",
+  sm: "shadow-sm",
+  md: "shadow-md"
+};
+function Card({
+  children,
+  className = "",
+  padding = "md",
+  shadow = "sm",
+  border = true,
+  hover = false,
+  onClick
+}) {
+  const base = [
+    "bg-surface rounded-2xl",
+    paddingMap[padding],
+    shadowMap[shadow],
+    border ? "border border-outline-variant/10" : "",
+    hover ? "hover:shadow-md transition-shadow cursor-pointer" : "",
+    onClick ? "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30" : "",
+    className
+  ].filter(Boolean).join(" ");
+  if (onClick) {
+    return /* @__PURE__ */ jsx("div", { role: "button", tabIndex: 0, onClick, onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") onClick();
+    }, className: base, children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: base, children });
+}
+function CardHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `px-6 py-4 border-b border-outline-variant/10 flex items-center justify-between ${className}`,
+      children
+    }
+  );
+}
+function CardBody({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `p-6 ${className}`, children });
+}
+function CardFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `px-6 py-4 border-t border-outline-variant/10 flex items-center gap-3 ${className}`,
+      children
+    }
+  );
+}
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader
+};

package/dist/change-summary-modal.d.ts

@@ -0,0 +1,35 @@
+type ChangeEntry = {
+    type: "add" | "update" | "delete";
+    entity: "day" | "activity" | "trip_info";
+    dayNumber?: number;
+    field?: string;
+    oldValue?: string;
+    newValue?: string;
+    description: string;
+};
+interface ChangeSummaryLabels {
+    title?: string;
+    sentTitle?: string;
+    sentDescription?: (count: number) => string;
+    addLabel?: string;
+    updateLabel?: string;
+    deleteLabel?: string;
+    saveOnlyLabel?: string;
+    sendLabel?: string;
+    sendingLabel?: string;
+    doneLabel?: string;
+    closeAriaLabel?: string;
+    followerNoticeText?: (count: number) => React.ReactNode;
+    limitNoticeText?: React.ReactNode;
+}
+interface ChangeSummaryModalProps {
+    open: boolean;
+    onClose: () => void;
+    tripTitle: string;
+    followerCount: number;
+    changes: ChangeEntry[];
+    labels?: ChangeSummaryLabels;
+}
+declare function ChangeSummaryModal({ open, onClose, tripTitle, followerCount, changes, labels, }: ChangeSummaryModalProps): React.ReactNode;
+
+export { type ChangeEntry, ChangeSummaryModal };

package/dist/change-summary-modal.js

@@ -0,0 +1,128 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+const CHANGE_TYPE_STYLE = {
+  add: { icon: "add_circle", color: "text-green-600" },
+  update: { icon: "edit", color: "text-blue-600" },
+  delete: { icon: "remove_circle", color: "text-red-500" }
+};
+function ChangeSummaryModal({
+  open,
+  onClose,
+  tripTitle,
+  followerCount,
+  changes,
+  labels
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const resolvedLabels = {
+    title: (_a = labels == null ? void 0 : labels.title) != null ? _a : "\u0E2A\u0E23\u0E38\u0E1B\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07",
+    sentTitle: (_b = labels == null ? void 0 : labels.sentTitle) != null ? _b : "\u0E2A\u0E48\u0E07\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E41\u0E25\u0E49\u0E27!",
+    sentDescription: (_c = labels == null ? void 0 : labels.sentDescription) != null ? _c : ((n) => `\u0E2A\u0E48\u0E07\u0E44\u0E1B\u0E22\u0E31\u0E07 ${n} \u0E04\u0E19\u0E17\u0E35\u0E48\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E17\u0E23\u0E34\u0E1B\u0E19\u0E35\u0E49`),
+    addLabel: (_d = labels == null ? void 0 : labels.addLabel) != null ? _d : "\u0E40\u0E1E\u0E34\u0E48\u0E21",
+    updateLabel: (_e = labels == null ? void 0 : labels.updateLabel) != null ? _e : "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    deleteLabel: (_f = labels == null ? void 0 : labels.deleteLabel) != null ? _f : "\u0E25\u0E1A",
+    saveOnlyLabel: (_g = labels == null ? void 0 : labels.saveOnlyLabel) != null ? _g : "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E2D\u0E22\u0E48\u0E32\u0E07\u0E40\u0E14\u0E35\u0E22\u0E27",
+    sendLabel: (_h = labels == null ? void 0 : labels.sendLabel) != null ? _h : "\u0E2A\u0E48\u0E07\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
+    sendingLabel: (_i = labels == null ? void 0 : labels.sendingLabel) != null ? _i : "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2A\u0E48\u0E07...",
+    doneLabel: (_j = labels == null ? void 0 : labels.doneLabel) != null ? _j : "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19",
+    closeAriaLabel: (_k = labels == null ? void 0 : labels.closeAriaLabel) != null ? _k : "\u0E1B\u0E34\u0E14",
+    followerNoticeText: (_l = labels == null ? void 0 : labels.followerNoticeText) != null ? _l : ((n) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      "\u0E08\u0E30\u0E2A\u0E48\u0E07\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19\u0E44\u0E1B\u0E22\u0E31\u0E07 ",
+      /* @__PURE__ */ jsxs("strong", { children: [
+        n,
+        " \u0E04\u0E19"
+      ] }),
+      " \u0E17\u0E35\u0E48\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E17\u0E23\u0E34\u0E1B\u0E19\u0E35\u0E49"
+    ] })),
+    limitNoticeText: (_m = labels == null ? void 0 : labels.limitNoticeText) != null ? _m : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "\u0E01\u0E32\u0E23\u0E41\u0E01\u0E49\u0E44\u0E02\u0E04\u0E23\u0E31\u0E49\u0E07\u0E17\u0E35\u0E48 ",
+      /* @__PURE__ */ jsx("strong", { children: "1/2" }),
+      " (Free Plan)"
+    ] })
+  };
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const sendTimeoutRef = useRef(null);
+  if (!open) return null;
+  function handleSendNotification() {
+    setSending(true);
+    sendTimeoutRef.current = setTimeout(() => {
+      setSending(false);
+      setSent(true);
+    }, 1500);
+  }
+  function handleClose() {
+    if (sendTimeoutRef.current) {
+      clearTimeout(sendTimeoutRef.current);
+      sendTimeoutRef.current = null;
+    }
+    setSent(false);
+    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 backdrop-blur-sm cursor-pointer", onClick: handleClose }),
+    /* @__PURE__ */ jsx("div", { className: "relative bg-surface rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden", children: sent ? /* @__PURE__ */ jsxs("div", { className: "p-8 text-center space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-green-600 text-4xl", style: { fontVariationSettings: "'FILL' 1" }, children: "check_circle" }) }),
+      /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-on-surface", children: resolvedLabels.sentTitle }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface-variant", children: resolvedLabels.sentDescription(followerCount) }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleClose, className: "mt-4", children: resolvedLabels.doneLabel })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "p-6 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-amber-600", children: "edit_notifications" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-bold text-on-surface", children: resolvedLabels.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant", children: tripTitle })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(IconButton, { icon: "close", variant: "ghost", size: "sm", onClick: handleClose, "aria-label": resolvedLabels.closeAriaLabel })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "p-6 space-y-3 max-h-64 overflow-y-auto", children: changes.map((change, i) => {
+        const ct = CHANGE_TYPE_STYLE[change.type];
+        const typeLabel = change.type === "add" ? resolvedLabels.addLabel : change.type === "update" ? resolvedLabels.updateLabel : resolvedLabels.deleteLabel;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined ${ct.color} text-lg mt-0.5`, style: { fontVariationSettings: "'FILL' 1" }, "aria-label": typeLabel, children: ct.icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface", children: change.description }),
+            change.dayNumber && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-on-surface-variant mt-0.5", children: [
+              "Day ",
+              change.dayNumber
+            ] })
+          ] })
+        ] }, i);
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "p-6 pt-0 space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-blue-50 rounded-xl p-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-blue-600 text-lg", children: "group" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700", children: resolvedLabels.followerNoticeText(followerCount) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-amber-50 rounded-xl p-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-amber-600 text-lg", children: "warning" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-amber-700", children: resolvedLabels.limitNoticeText })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 pt-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", className: "flex-1", onClick: handleClose, children: resolvedLabels.saveOnlyLabel }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              className: "flex-1",
+              onClick: handleSendNotification,
+              disabled: sending,
+              loading: sending,
+              icon: "send",
+              children: sending ? resolvedLabels.sendingLabel : resolvedLabels.sendLabel
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  ChangeSummaryModal
+};

package/dist/channel-badge.d.ts

@@ -0,0 +1,8 @@
+type FollowChannel = "line" | "web_push";
+interface ChannelBadgeProps {
+    channel: FollowChannel;
+    className?: string;
+}
+declare function ChannelBadge({ channel, className }: ChannelBadgeProps): React.ReactNode;
+
+export { ChannelBadge, type FollowChannel };

package/dist/channel-badge.js

@@ -0,0 +1,17 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const channelConfig = {
+  line: { label: "LINE", icon: "chat", cls: "bg-green-100 text-green-700" },
+  web_push: { label: "Push", icon: "notifications_active", cls: "bg-blue-100 text-blue-700" }
+};
+function ChannelBadge({ channel, className = "" }) {
+  const c = channelConfig[channel];
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold ${c.cls} ${className}`, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "material-symbols-outlined text-xs", children: c.icon }),
+    c.label
+  ] });
+}
+export {
+  ChannelBadge
+};

package/dist/checkbox.d.ts

@@ -0,0 +1,28 @@
+interface CheckboxProps {
+    label?: string;
+    description?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    error?: string;
+    indeterminate?: boolean;
+    name?: string;
+}
+declare function Checkbox({ label, description, checked, onChange, disabled, error, indeterminate, name, }: CheckboxProps): React.ReactNode;
+interface CheckboxGroupOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+interface CheckboxGroupProps {
+    label?: string;
+    options: CheckboxGroupOption[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    error?: string;
+    required?: boolean;
+    name?: string;
+}
+declare function CheckboxGroup({ label, options, value, onChange, error, required, name, }: CheckboxGroupProps): React.ReactNode;
+
+export { Checkbox, CheckboxGroup };

package/dist/checkbox.js

@@ -0,0 +1,108 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+function Checkbox({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled = false,
+  error,
+  indeterminate = false,
+  name
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate && !checked;
+    }
+  }, [indeterminate, checked]);
+  const isActive = checked || indeterminate;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `flex items-start gap-3 ${disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer"}`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative shrink-0 mt-0.5", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "checkbox",
+                name,
+                checked,
+                onChange: (e) => !disabled && onChange(e.target.checked),
+                disabled,
+                className: "sr-only peer"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: `flex items-center justify-center w-5 h-5 rounded-md border-2 transition-all
+              peer-focus-visible:ring-2 peer-focus-visible:ring-primary/20
+              ${isActive ? "bg-primary border-primary" : "bg-white border-outline-variant hover:border-primary/60"}`,
+                children: [
+                  checked && !indeterminate && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-white text-sm leading-none", style: { fontSize: "14px" }, children: "check" }),
+                  indeterminate && !checked && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-white text-sm leading-none", style: { fontSize: "14px" }, children: "remove" })
+                ]
+              }
+            )
+          ] }),
+          (label || description) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-on-surface leading-snug", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant leading-snug", children: description })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-500 flex items-center gap-1 pl-8", children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "error" }),
+      error
+    ] })
+  ] });
+}
+function CheckboxGroup({
+  label,
+  options,
+  value,
+  onChange,
+  error,
+  required,
+  name
+}) {
+  function toggle(optValue) {
+    if (value.includes(optValue)) {
+      onChange(value.filter((v) => v !== optValue));
+    } else {
+      onChange([...value, optValue]);
+    }
+  }
+  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", { className: "flex flex-col gap-3", children: options.map((opt) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        name,
+        label: opt.label,
+        description: opt.description,
+        checked: value.includes(opt.value),
+        onChange: () => toggle(opt.value)
+      },
+      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 {
+  Checkbox,
+  CheckboxGroup
+};

package/dist/chunk-ORMEWXMH.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/color-picker.d.ts

@@ -0,0 +1,15 @@
+interface ColorPickerProps {
+    label?: string;
+    value: string;
+    onChange: (hex: string) => void;
+    presets?: string[];
+    showHexInput?: boolean;
+    showPalette?: boolean;
+    error?: string;
+    required?: boolean;
+    hexErrorText?: string;
+    paletteLabel?: string;
+}
+declare function ColorPicker({ label, value, onChange, presets, showHexInput, showPalette, error, required, hexErrorText, paletteLabel, }: ColorPickerProps): React.ReactNode;
+
+export { ColorPicker };