@pichetch08/trip-ui 0.1.0

package/dist/slider.js

@@ -0,0 +1,151 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  formatValue,
+  disabled = false,
+  minRangeLabel = "Minimum value",
+  maxRangeLabel = "Maximum value",
+  valueLabel
+}) {
+  var _a;
+  const isRange = Array.isArray(value);
+  const fmt = formatValue != null ? formatValue : ((v) => String(v));
+  const rangeContainerRef = useRef(null);
+  if (isRange) {
+    const [low, high] = value;
+    const lowPct = (low - min) / (max - min) * 100;
+    const highPct = (high - min) / (max - min) * 100;
+    const handleLowChange = (e) => {
+      const next = Math.min(Number(e.target.value), high - step);
+      onChange([next, high]);
+    };
+    const handleHighChange = (e) => {
+      const next = Math.max(Number(e.target.value), low + step);
+      onChange([low, next]);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-on-surface", children: label }),
+        showValue && /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-primary", children: [
+          fmt(low),
+          " \u2013 ",
+          fmt(high)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative h-2 my-3", ref: rangeContainerRef, children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-surface-container-high" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 h-2 rounded-full bg-primary",
+            style: { left: `${lowPct}%`, right: `${100 - highPct}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value: low,
+            disabled,
+            onChange: handleLowChange,
+            "aria-label": minRangeLabel,
+            className: "peer/low absolute w-full h-2 opacity-0 cursor-pointer disabled:cursor-not-allowed",
+            style: { zIndex: low > max - (max - min) / 2 ? 5 : 3 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value: high,
+            disabled,
+            onChange: handleHighChange,
+            "aria-label": maxRangeLabel,
+            className: "peer/high absolute w-full h-2 opacity-0 cursor-pointer disabled:cursor-not-allowed",
+            style: { zIndex: 4 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white border-2 border-primary shadow pointer-events-none peer-focus-visible/low:ring-2 peer-focus-visible/low:ring-primary/30",
+            style: { left: `calc(${lowPct}% - 8px)` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white border-2 border-primary shadow pointer-events-none peer-focus-visible/high:ring-2 peer-focus-visible/high:ring-primary/30",
+            style: { left: `calc(${highPct}% - 8px)` }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant", children: fmt(min) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant", children: fmt(max) })
+      ] })
+    ] });
+  }
+  const single = value;
+  const pct = (single - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-on-surface", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary", children: fmt(single) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-2 my-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-surface-container-high" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-0 left-0 h-2 rounded-full bg-primary",
+          style: { width: `${pct}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value: single,
+          disabled,
+          onChange: (e) => onChange(Number(e.target.value)),
+          "aria-label": (_a = valueLabel != null ? valueLabel : label) != null ? _a : "Value",
+          className: "peer absolute w-full h-2 opacity-0 cursor-pointer disabled:cursor-not-allowed",
+          style: { zIndex: 3 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-white border-2 border-primary shadow pointer-events-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary/30",
+          style: { left: `calc(${pct}% - 8px)` }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant", children: fmt(min) }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant", children: fmt(max) })
+    ] })
+  ] });
+}
+export {
+  Slider
+};

package/dist/spinner.d.ts

@@ -0,0 +1,13 @@
+interface SpinnerProps {
+    size?: "xs" | "sm" | "md" | "lg";
+    color?: "primary" | "white" | "current";
+    className?: string;
+    loadingAriaLabel?: string;
+}
+declare function Spinner({ size, color, className, loadingAriaLabel, }: SpinnerProps): React.ReactNode;
+interface FullPageSpinnerProps {
+    message?: string;
+}
+declare function FullPageSpinner({ message }: FullPageSpinnerProps): React.ReactNode;
+
+export { FullPageSpinner, Spinner };

package/dist/spinner.js

@@ -0,0 +1,38 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const SIZE_CLASSES = {
+  xs: "w-3 h-3 border-2",
+  sm: "w-4 h-4 border-2",
+  md: "w-6 h-6 border-2",
+  lg: "w-8 h-8 border-[3px]"
+};
+const COLOR_CLASSES = {
+  primary: "border-primary/20 border-t-primary",
+  white: "border-white/20 border-t-white",
+  current: "border-current/20 border-t-current"
+};
+function Spinner({
+  size = "md",
+  color = "primary",
+  className = "",
+  loadingAriaLabel = "Loading"
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": loadingAriaLabel,
+      className: `inline-block rounded-full animate-spin ${SIZE_CLASSES[size]} ${COLOR_CLASSES[color]} ${className}`
+    }
+  );
+}
+function FullPageSpinner({ message }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 flex flex-col items-center justify-center gap-3 bg-white/80 backdrop-blur-sm z-50", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "lg", color: "primary" }),
+    message && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-on-surface-variant", children: message })
+  ] });
+}
+export {
+  FullPageSpinner,
+  Spinner
+};

package/dist/stat-card.d.ts

@@ -0,0 +1,20 @@
+import { AppColor } from './icon-wrapper.js';
+
+/** @deprecated use AppColor */
+type StatCardTone = AppColor;
+interface StatCardProps {
+    icon: string;
+    iconColor?: AppColor;
+    iconGradient?: string;
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    limit?: number;
+    suffix?: string;
+    variant?: "default" | "pastel" | "hero" | "compact";
+    tone?: AppColor;
+    children?: React.ReactNode;
+}
+declare function StatCard({ icon, iconColor, iconGradient, title, value, subtitle, limit, suffix, variant, tone, children, }: StatCardProps): React.ReactNode;
+
+export { StatCard, type StatCardTone };

package/dist/stat-card.js

@@ -0,0 +1,87 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconWrapper, appColorFg } from "./icon-wrapper";
+const TONE_BG = {
+  primary: "bg-primary-container",
+  emerald: "bg-emerald-50",
+  amber: "bg-amber-50",
+  rose: "bg-rose-50",
+  red: "bg-red-50",
+  violet: "bg-violet-50",
+  blue: "bg-blue-50",
+  slate: "bg-slate-100",
+  cyan: "bg-cyan-50"
+};
+function StatCard({
+  icon,
+  iconColor = "primary",
+  iconGradient = "from-blue-100 to-blue-50",
+  title,
+  value,
+  subtitle,
+  limit,
+  suffix,
+  variant = "default",
+  tone = "primary",
+  children
+}) {
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg border border-outline-variant/50 px-4 py-3 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `material-symbols-outlined text-lg ${appColorFg[tone]} opacity-50`, style: { fontVariationSettings: "'FILL' 1" }, children: icon }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-lg font-black text-on-surface leading-none tabular-nums", children: value }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-on-surface-variant mt-0.5", children: title })
+      ] })
+    ] });
+  }
+  if (variant === "hero") {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white p-6 rounded-2xl border border-surface-container-high shadow-sm flex flex-col justify-center text-center space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: `w-14 h-14 mx-auto flex items-center justify-center rounded-2xl ${TONE_BG[tone]}`, children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `material-symbols-outlined text-2xl ${appColorFg[tone]}`, style: { fontVariationSettings: "'FILL' 1" }, children: icon }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-widest font-bold text-outline", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl md:text-3xl font-black text-on-surface mt-2", children: value }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-on-surface-variant mt-1", children: subtitle })
+      ] }),
+      children
+    ] });
+  }
+  if (variant === "pastel") {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-3xl border border-outline-variant/50 p-5 md:p-6 flex items-center gap-4 hover:shadow-md transition-shadow", children: [
+      /* @__PURE__ */ jsx("div", { className: `w-11 h-11 rounded-2xl bg-linear-to-br ${iconGradient} flex items-center justify-center shrink-0`, children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `material-symbols-outlined ${appColorFg[iconColor]}`, style: { fontVariationSettings: "'FILL' 1" }, children: icon }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-widest font-bold text-on-surface-variant", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl md:text-3xl font-black text-on-surface mt-0.5", children: value }),
+        children
+      ] })
+    ] });
+  }
+  const pct = limit ? Math.round(Number(value) / limit * 100) : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm hover:shadow-md transition-shadow", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+      /* @__PURE__ */ jsx(IconWrapper, { icon, color: iconColor, size: "md" }),
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-on-surface", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold text-on-surface", children: [
+      value,
+      limit != null && /* @__PURE__ */ jsxs("span", { className: "text-sm font-normal text-on-surface-variant", children: [
+        " / ",
+        limit
+      ] }),
+      suffix && /* @__PURE__ */ jsxs("span", { className: "text-sm font-normal text-on-surface-variant", children: [
+        " ",
+        suffix
+      ] })
+    ] }),
+    limit != null && /* @__PURE__ */ jsx("div", { className: "h-2 rounded-full bg-slate-100 mt-3", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full rounded-full bg-primary transition-[width] duration-500",
+        style: { width: `${Math.min(pct, 100)}%` }
+      }
+    ) }),
+    children
+  ] });
+}
+export {
+  StatCard
+};

package/dist/stats-summary.d.ts

@@ -0,0 +1,13 @@
+interface StatItem {
+    value: string | number;
+    label: string;
+    icon?: string;
+}
+interface StatsSummaryProps {
+    stats: StatItem[];
+    columns?: 2 | 3 | 4;
+    className?: string;
+}
+declare function StatsSummary({ stats, columns, className, }: StatsSummaryProps): React.ReactNode;
+
+export { StatsSummary };

package/dist/stats-summary.js

@@ -0,0 +1,28 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const COLS = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+function StatsSummary({
+  stats,
+  columns = 3,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `grid ${COLS[columns]} ${className}`, children: stats.map((stat, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `text-center px-4 py-2 ${i > 0 ? "border-l border-outline-variant/30" : ""}`,
+      children: [
+        stat.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base text-on-surface-variant mb-0.5 block", "aria-hidden": "true", children: stat.icon }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl font-black text-on-surface tabular-nums leading-tight", children: stat.value }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-on-surface-variant font-semibold uppercase tracking-wide mt-0.5", children: stat.label })
+      ]
+    },
+    stat.label
+  )) });
+}
+export {
+  StatsSummary
+};

package/dist/status-badge.d.ts

@@ -0,0 +1,19 @@
+import { AppColor } from './icon-wrapper.js';
+
+/** @deprecated use AppColor */
+type StatusTone = AppColor;
+interface StatusConfig {
+    label: string;
+    tone?: AppColor;
+    /** Raw class override — use only when named tones don't cover the case */
+    cls?: string;
+}
+interface StatusBadgeProps {
+    status: string;
+    config?: Record<string, StatusConfig>;
+    variant?: "pill" | "dot";
+    className?: string;
+}
+declare function StatusBadge({ status, config, variant, className }: StatusBadgeProps): React.ReactNode;
+
+export { StatusBadge, type StatusConfig, type StatusTone };

package/dist/status-badge.js

@@ -0,0 +1,41 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { appColorFg } from "./icon-wrapper";
+const PILL_BG = {
+  primary: "bg-primary-container",
+  emerald: "bg-emerald-100",
+  amber: "bg-amber-100",
+  rose: "bg-rose-100",
+  red: "bg-red-100",
+  violet: "bg-violet-100",
+  blue: "bg-blue-100",
+  slate: "bg-surface-container",
+  cyan: "bg-cyan-100"
+};
+const DOT_COLOR = {
+  primary: "bg-primary",
+  emerald: "bg-emerald-500",
+  amber: "bg-amber-500",
+  rose: "bg-rose-500",
+  red: "bg-red-500",
+  violet: "bg-violet-500",
+  blue: "bg-blue-500",
+  slate: "bg-outline",
+  cyan: "bg-cyan-500"
+};
+function StatusBadge({ status, config = {}, variant = "pill", className = "" }) {
+  var _a, _b, _c;
+  const c = (_a = config[status]) != null ? _a : { label: status, tone: "slate" };
+  const tone = (_b = c.tone) != null ? _b : "slate";
+  if (variant === "dot") {
+    return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 text-xs font-semibold ${appColorFg[tone]} ${className}`, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `w-1.5 h-1.5 rounded-full ${DOT_COLOR[tone]}` }),
+      c.label
+    ] });
+  }
+  const pillClass = (_c = c.cls) != null ? _c : `${PILL_BG[tone]} ${appColorFg[tone]}`;
+  return /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest ${pillClass} ${className}`, children: c.label });
+}
+export {
+  StatusBadge
+};

package/dist/stepper.d.ts

@@ -0,0 +1,12 @@
+interface StepItem {
+    label: string;
+    description?: string;
+}
+interface StepperProps {
+    steps: StepItem[];
+    currentStep: number;
+    orientation?: "horizontal" | "vertical";
+}
+declare function Stepper({ steps, currentStep, orientation, }: StepperProps): React.ReactNode;
+
+export { type StepItem, Stepper };

package/dist/stepper.js

@@ -0,0 +1,89 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Stepper({
+  steps,
+  currentStep,
+  orientation = "horizontal"
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx("ol", { className: "flex flex-col", "aria-label": "Steps", children: steps.map((step, index) => {
+      const isCompleted = index < currentStep;
+      const isCurrent = index === currentStep;
+      return /* @__PURE__ */ jsxs("li", { className: "flex gap-3", "aria-current": isCurrent ? "step" : void 0, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 ${isCompleted ? "bg-emerald-500 text-white" : isCurrent ? "bg-primary text-on-primary shadow-lg" : "bg-surface-container-high text-on-surface-variant"}`,
+              children: isCompleted ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "material-symbols-outlined text-base",
+                  style: { fontVariationSettings: "'FILL' 1", fontSize: "16px" },
+                  children: "check"
+                }
+              ) : /* @__PURE__ */ jsx("span", { children: index + 1 })
+            }
+          ),
+          index < steps.length - 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-0.5 h-8 ml-0 mt-1 ${isCompleted ? "bg-emerald-500" : "bg-outline-variant/30"}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `pb-6 ${index === steps.length - 1 ? "pb-0" : ""}`, children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-xs font-semibold leading-8 ${isCurrent ? "text-primary" : isCompleted ? "text-emerald-600" : "text-on-surface-variant"}`,
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-on-surface-variant -mt-1", children: step.description })
+        ] })
+      ] }, index);
+    }) });
+  }
+  return /* @__PURE__ */ jsx("ol", { className: "flex items-center w-full", "aria-label": "Steps", children: steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isCurrent = index === currentStep;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center flex-1 last:flex-none", "aria-current": isCurrent ? "step" : void 0, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 ${isCompleted ? "bg-emerald-500 text-white" : isCurrent ? "bg-primary text-on-primary shadow-lg" : "bg-surface-container-high text-on-surface-variant"}`,
+            children: isCompleted ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "material-symbols-outlined text-base",
+                style: { fontVariationSettings: "'FILL' 1", fontSize: "16px" },
+                children: "check"
+              }
+            ) : /* @__PURE__ */ jsx("span", { children: index + 1 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-xs font-semibold ${isCurrent ? "text-primary" : isCompleted ? "text-emerald-600" : "text-on-surface-variant"}`,
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-on-surface-variant", children: step.description })
+        ] })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-0.5 flex-1 mx-2 mb-6 ${isCompleted ? "bg-emerald-500" : "bg-outline-variant/30"}`
+        }
+      )
+    ] }, index);
+  }) });
+}
+export {
+  Stepper
+};

package/dist/tabs.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TabItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+interface TabsProps {
+    items: TabItem[];
+    value: string;
+    onChange: (id: string) => void;
+    variant?: "line" | "pill";
+}
+declare function Tabs({ items, value, onChange, variant, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+export { type TabItem, Tabs };

package/dist/tabs.js

@@ -0,0 +1,70 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tabs({
+  items,
+  value,
+  onChange,
+  variant = "line"
+}) {
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tablist",
+        className: "flex gap-2 p-1 bg-surface-container rounded-xl",
+        children: items.map((item) => {
+          const isActive = value === item.id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              role: "tab",
+              type: "button",
+              "aria-selected": isActive,
+              disabled: item.disabled,
+              onClick: () => !item.disabled && onChange(item.id),
+              className: `flex items-center gap-1.5 px-4 py-2 text-sm font-semibold transition-colors duration-200 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${item.disabled ? "opacity-40 cursor-not-allowed" : "active:scale-[0.98]"} ${isActive ? "bg-surface shadow-sm text-on-surface" : "text-on-surface-variant hover:text-on-surface"}`,
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base", "aria-hidden": "true", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label }),
+                item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-0.5 bg-surface-container-high text-on-surface-variant text-xs font-medium px-1.5 py-0.5 rounded-full", children: item.badge })
+              ]
+            },
+            item.id
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: "flex border-b border-outline-variant/30 overflow-x-auto",
+      children: items.map((item) => {
+        const isActive = value === item.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            role: "tab",
+            type: "button",
+            "aria-selected": isActive,
+            disabled: item.disabled,
+            onClick: () => !item.disabled && onChange(item.id),
+            className: `flex items-center gap-1.5 px-4 py-3 text-sm font-semibold transition-colors duration-200 relative whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${item.disabled ? "opacity-40 cursor-not-allowed" : ""} ${isActive ? "text-primary" : "text-on-surface-variant hover:text-on-surface"}`,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base", "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-0.5 bg-surface-container text-on-surface-variant text-xs font-medium px-1.5 py-0.5 rounded-full", children: item.badge }),
+              isActive && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-full" })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+export {
+  Tabs
+};

package/dist/tag.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type AppColor = "primary" | "emerald" | "amber" | "rose" | "red" | "violet" | "blue" | "slate" | "cyan";
+interface TagProps {
+    label: string;
+    onRemove?: () => void;
+    color?: AppColor;
+    size?: "sm" | "md";
+    icon?: string;
+    selected?: boolean;
+    onClick?: () => void;
+}
+declare function Tag({ label, onRemove, color, size, icon, selected, onClick, }: TagProps): react_jsx_runtime.JSX.Element;
+interface TagGroupProps {
+    value: string[];
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    maxTags?: number;
+}
+declare function TagGroup({ value, onChange, placeholder, label, maxTags, }: TagGroupProps): react_jsx_runtime.JSX.Element;
+
+export { type AppColor, Tag, TagGroup };