@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/containers/timeline/timeline.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const markerClasses = {
+  neutral: "bg-surface-2 text-ink-2",
+  accent: "bg-accent-soft text-accent-ink",
+  success: "bg-success-soft text-success",
+  warning: "bg-warning-soft text-warning",
+  danger: "bg-danger-soft text-danger"
+};
+function Timeline({ items, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/timeline min-w-0", className), children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-col p-0", ...props, children: items.map((item, index) => {
+    const previous = items[index - 1];
+    const last = index === items.length - 1;
+    const tone = item.tone ?? "neutral";
+    return /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 flex-col", children: [
+      item.group && item.group !== previous?.group ? /* @__PURE__ */ jsx("h4", { className: "pb-density-sm text-ink-3 text-overline uppercase", children: item.group }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-density", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "flex size-7 shrink-0 items-center justify-center rounded-badge [&_svg]:size-3.5",
+                markerClasses[tone]
+              ),
+              children: item.icon ?? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current" })
+            }
+          ),
+          last ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-px flex-1 bg-divider" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col gap-1",
+              last ? "pb-0" : "pb-density-lg"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-density-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-row-title text-ink", children: item.title }),
+                item.time ? /* @__PURE__ */ jsx("time", { dateTime: item.dateTime, className: "shrink-0 text-ink-3 text-meta", children: item.time }) : null
+              ] }),
+              item.actor ? /* @__PURE__ */ jsx("span", { className: "text-ink-3 text-meta", children: item.actor }) : null,
+              item.description ? /* @__PURE__ */ jsx("p", { className: "m-0 break-words text-body text-ink-2", children: item.description }) : null,
+              item.children
+            ]
+          }
+        )
+      ] })
+    ] }, item.id);
+  }) }) });
+}
+export {
+  Timeline
+};

package/dist/containers/toolbar/index.d.ts

@@ -0,0 +1 @@
+export * from "./toolbar.js";

package/dist/containers/toolbar/index.js

@@ -0,0 +1 @@
+export * from "./toolbar.js";

package/dist/containers/toolbar/toolbar.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type ToolbarProps = ComponentPropsWithoutRef<"div">;
+/** Row of filters/controls above a table or grid. */
+export declare function Toolbar({ className, ...props }: ToolbarProps): import("react").JSX.Element;
+export type ToolbarRightProps = ComponentPropsWithoutRef<"div">;
+/** Group pushed to the right edge of the toolbar. */
+export declare function ToolbarRight({ className, ...props }: ToolbarRightProps): import("react").JSX.Element;

package/dist/containers/toolbar/toolbar.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function Toolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-wrap items-center gap-2", className), ...props });
+}
+function ToolbarRight({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ml-auto flex min-w-0 flex-wrap items-center gap-2", className),
+      ...props
+    }
+  );
+}
+export {
+  Toolbar,
+  ToolbarRight
+};

package/dist/dashboards/data.d.ts

@@ -0,0 +1,29 @@
+/** Deterministic pseudo-random generator so every render shows the same sample data. */
+export declare function seeded(seed: number): () => number;
+export declare const BARBEROS: string[];
+export declare const SERVICIOS: readonly [{
+    readonly id: "corte";
+    readonly name: "Corte clásico";
+    readonly price: 35;
+}, {
+    readonly id: "fade";
+    readonly name: "Fade degradado";
+    readonly price: 40;
+}, {
+    readonly id: "combo";
+    readonly name: "Corte + barba";
+    readonly price: 55;
+}, {
+    readonly id: "barba";
+    readonly name: "Perfilado de barba";
+    readonly price: 25;
+}, {
+    readonly id: "navaja";
+    readonly name: "Afeitado con navaja";
+    readonly price: 30;
+}, {
+    readonly id: "tinte";
+    readonly name: "Tinte de barba";
+    readonly price: 45;
+}];
+export declare const CLIENTES: string[];

package/dist/dashboards/data.js

@@ -0,0 +1,42 @@
+function seeded(seed) {
+  let state = seed;
+  return () => {
+    state = (state * 1664525 + 1013904223) % 4294967296;
+    return state / 4294967296;
+  };
+}
+const BARBEROS = [
+  "Diego Quispe",
+  "Ana Torres",
+  "Marco Rojas",
+  "Rosa Salazar",
+  "Julio Paredes"
+];
+const SERVICIOS = [
+  { id: "corte", name: "Corte cl\xE1sico", price: 35 },
+  { id: "fade", name: "Fade degradado", price: 40 },
+  { id: "combo", name: "Corte + barba", price: 55 },
+  { id: "barba", name: "Perfilado de barba", price: 25 },
+  { id: "navaja", name: "Afeitado con navaja", price: 30 },
+  { id: "tinte", name: "Tinte de barba", price: 45 }
+];
+const CLIENTES = [
+  "\xC1lvaro Quispe",
+  "Bruno Mendoza",
+  "C\xE9sar Huam\xE1n",
+  "Eduardo Flores",
+  "Fernando Torres",
+  "Gonzalo Vargas",
+  "H\xE9ctor Ch\xE1vez",
+  "Iv\xE1n Castillo",
+  "Jorge Ram\xEDrez",
+  "Luis Paredes",
+  "Mart\xEDn Guti\xE9rrez",
+  "\xD3scar Delgado"
+];
+export {
+  BARBEROS,
+  CLIENTES,
+  SERVICIOS,
+  seeded
+};

package/dist/dashboards/inicio-dashboard.d.ts

@@ -0,0 +1 @@
+export declare function InicioDashboard(): import("react").JSX.Element;

package/dist/dashboards/inicio-dashboard.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../atoms/button/index.js";
+import { Chip } from "../atoms/chip/index.js";
+import { AreaChart } from "../charts/area-chart/index.js";
+import { BarChart } from "../charts/bar-chart/index.js";
+import { DonutChart } from "../charts/donut-chart/index.js";
+import { HeatmapChart } from "../charts/heatmap-chart/index.js";
+import { Cols } from "../containers/cols/index.js";
+import { DataGrid } from "../containers/data-grid/index.js";
+import { Kpi } from "../containers/kpi/index.js";
+import {
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderEyebrow,
+  PageHeaderLede,
+  PageHeaderTitle
+} from "../containers/page-header/index.js";
+import { BARBEROS, CLIENTES, SERVICIOS, seeded } from "./data.js";
+import { CardGrid, ChartCard, DashboardPage, KpiRow, TableCard } from "./layout.js";
+const random = seeded(11);
+const ingresos30 = Array.from({ length: 30 }, (_, index) => {
+  const fecha = new Date(2026, 8, 9 + index);
+  const finDeSemana = fecha.getDay() === 5 || fecha.getDay() === 6;
+  const base = finDeSemana ? 1450 : 980;
+  return { fecha, ingresos: Math.round(base + random() * 380) };
+});
+const ingresosPorServicio = [
+  { id: "corte", name: "Corte cl\xE1sico", value: 9800 },
+  { id: "combo", name: "Corte + barba", value: 8450 },
+  { id: "fade", name: "Fade degradado", value: 6200 },
+  { id: "barba", name: "Perfilado de barba", value: 3100 },
+  { id: "navaja", name: "Afeitado con navaja", value: 2400 },
+  { id: "tinte", name: "Tinte de barba", value: 1650 }
+];
+const DIAS = ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"];
+const HORAS = Array.from({ length: 12 }, (_, index) => `${9 + index}h`);
+const ocupacion = DIAS.map(
+  (_, dia) => HORAS.map((__, hora) => {
+    const pico = dia >= 4 ? 1.15 : 0.85;
+    const tarde = hora >= 7 && hora <= 10 ? 1.2 : hora === 3 ? 0.55 : 1;
+    return Math.min(1, Math.round((45 + random() * 40) * pico * tarde) / 100);
+  })
+);
+const ventasPorBarbero = [
+  { name: BARBEROS[0], total: 5820 },
+  { name: BARBEROS[1], total: 5310 },
+  { name: BARBEROS[2], total: 4680 },
+  { name: BARBEROS[3], total: 3990 },
+  { name: BARBEROS[4], total: 3230 }
+].sort((a, b) => b.total - a.total);
+const ESTADOS = ["Confirmada", "Pendiente", "En sill\xF3n"];
+const citas = Array.from({ length: 14 }, (_, index) => {
+  const servicio = SERVICIOS[index % SERVICIOS.length] ?? SERVICIOS[0];
+  const minutos = 10 * 60 + index * 35;
+  return {
+    id: `C-${2040 + index}`,
+    hora: `${String(Math.floor(minutos / 60)).padStart(2, "0")}:${String(minutos % 60).padStart(2, "0")}`,
+    cliente: CLIENTES[index % CLIENTES.length] ?? "",
+    servicio: servicio.name,
+    barbero: BARBEROS[index % BARBEROS.length] ?? "",
+    estado: ESTADOS[index % 3] ?? "Pendiente",
+    total: servicio.price
+  };
+});
+const citaColumns = [
+  { id: "hora", header: "Hora", accessor: "hora", width: 84 },
+  { id: "cliente", header: "Cliente", accessor: "cliente", width: 180 },
+  { id: "servicio", header: "Servicio", accessor: "servicio", width: 170, filter: "select" },
+  { id: "barbero", header: "Barbero", accessor: "barbero", width: 150, filter: "select" },
+  {
+    id: "estado",
+    header: "Estado",
+    accessor: "estado",
+    type: "status",
+    width: 130,
+    statusTones: { Confirmada: "success", Pendiente: "warning", "En sill\xF3n": "accent" }
+  },
+  {
+    id: "total",
+    header: "Total",
+    accessor: "total",
+    type: "currency",
+    aggregate: "sum",
+    width: 100
+  }
+];
+function InicioDashboard() {
+  return /* @__PURE__ */ jsxs(DashboardPage, { children: [
+    /* @__PURE__ */ jsxs(PageHeader, { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(PageHeaderEyebrow, { children: "Barber\xEDa Don Lucho \xB7 Miraflores" }),
+        /* @__PURE__ */ jsxs(PageHeaderTitle, { children: [
+          "Buen d\xEDa, ",
+          /* @__PURE__ */ jsx("span", { className: "text-accent-word", children: "Lucho" })
+        ] }),
+        /* @__PURE__ */ jsx(PageHeaderLede, { children: "As\xED va tu barber\xEDa hoy, jueves 8 de octubre." })
+      ] }),
+      /* @__PURE__ */ jsxs(PageHeaderActions, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", children: "Exportar" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", children: "Nueva cita" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(KpiRow, { children: [
+      /* @__PURE__ */ jsx(Kpi, { label: "Ventas del d\xEDa", value: "S/ 1 280", description: "+12% vs. ayer" }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Citas", value: "18", suffix: "/ 24", description: "4 pendientes" }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Ticket promedio", value: "S/ 47", description: "Meta S/ 45" }),
+      /* @__PURE__ */ jsx(Kpi, { label: "Ocupaci\xF3n", value: "78%", description: "Pico a las 17h" })
+    ] }),
+    /* @__PURE__ */ jsxs(Cols, { children: [
+      /* @__PURE__ */ jsx(
+        ChartCard,
+        {
+          title: "Ingresos de los \xFAltimos 30 d\xEDas",
+          subtitle: "Soles por d\xEDa, con la meta diaria",
+          aside: /* @__PURE__ */ jsx(Chip, { tone: "success", children: "+8% mensual" }),
+          height: 320,
+          children: /* @__PURE__ */ jsx(
+            AreaChart,
+            {
+              height: "fill",
+              title: "Ingresos diarios de los \xFAltimos 30 d\xEDas",
+              categories: ingresos30.map((item) => item.fecha),
+              series: [
+                { id: "ingresos", name: "Ingresos", data: ingresos30.map((item) => item.ingresos) }
+              ],
+              valueFormat: "currency",
+              legend: false,
+              annotations: [
+                { type: "line", axis: "y", value: 1100, label: "Meta diaria", tone: "success" }
+              ],
+              labels: { empty: "Sin datos", category: "D\xEDa", value: "Ingresos" }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(ChartCard, { title: "Ingresos por servicio", subtitle: "Octubre, acumulado", height: 320, children: /* @__PURE__ */ jsx(
+        DonutChart,
+        {
+          height: "fill",
+          title: "Ingresos por servicio",
+          data: ingresosPorServicio,
+          valueFormat: "currency",
+          centerLabel: "Total del mes",
+          labels: { total: "Total" }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(CardGrid, { children: [
+      /* @__PURE__ */ jsx(
+        ChartCard,
+        {
+          title: "Ocupaci\xF3n por hora y d\xEDa",
+          subtitle: "Porcentaje de sillones ocupados",
+          height: 300,
+          children: /* @__PURE__ */ jsx(
+            HeatmapChart,
+            {
+              height: "fill",
+              title: "Ocupaci\xF3n por hora y d\xEDa de la semana",
+              rows: DIAS,
+              columns: HORAS,
+              values: ocupacion,
+              domain: [0, 1],
+              valueFormat: "percent",
+              labels: { category: "D\xEDa", value: "Ocupaci\xF3n", noData: "Sin datos" }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(ChartCard, { title: "Ventas por barbero", subtitle: "Octubre, en soles", height: 300, children: /* @__PURE__ */ jsx(
+        BarChart,
+        {
+          height: "fill",
+          orientation: "horizontal",
+          title: "Ventas por barbero",
+          categories: ventasPorBarbero.map((item) => item.name ?? ""),
+          series: [{ id: "ventas", name: "Ventas", data: ventasPorBarbero.map((i) => i.total) }],
+          valueFormat: "currency",
+          dataLabels: true,
+          legend: false
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(TableCard, { title: "Pr\xF3ximas citas", subtitle: "Hoy, desde las 10:00", children: /* @__PURE__ */ jsx(
+      DataGrid,
+      {
+        "aria-label": "Pr\xF3ximas citas de hoy",
+        data: citas,
+        columns: citaColumns,
+        getRowId: (cita) => cita.id,
+        height: 360,
+        defaultPinned: { left: ["hora"] },
+        exportFilename: "proximas-citas"
+      }
+    ) })
+  ] });
+}
+export {
+  InicioDashboard
+};

package/dist/dashboards/layout.d.ts

@@ -0,0 +1,33 @@
+import type { Decorator } from "@storybook/react-vite";
+import type { ReactNode } from "react";
+/** Vertical rhythm of a dashboard page. */
+export declare function DashboardPage({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Joined KPI tiles: two per row when narrow, four from 720 px of page width. */
+export declare function KpiRow({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Equal cards that stack under 720 px of page width. */
+export declare function CardGrid({ columns, children }: {
+    columns?: 2 | 3;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChartCardProps {
+    title: string;
+    subtitle?: string;
+    /** Slot at the end of the header (a chip, a button). */
+    aside?: ReactNode;
+    /** Fixed height of the body in px; the chart inside uses `height="fill"`. */
+    height?: number;
+    children: ReactNode;
+}
+/** Card with a fixed-height body so `height="fill"` charts take exactly the space left. */
+export declare function ChartCard({ title, subtitle, aside, height, children }: ChartCardProps): import("react").JSX.Element;
+/** Card whose body is a table or grid that scrolls inside its own wrapper. */
+export declare function TableCard({ title, subtitle, aside, children }: Omit<ChartCardProps, "height">): import("react").JSX.Element;
+/** Container-width frames for the `Narrow` (320) and `Tablet` (768) variants. */
+export declare const narrowFrame: Decorator;
+export declare const tabletFrame: Decorator;
+export declare const NARROW_NOTE = "Container of 320 px: Cols collapse to one column, KPIs go two per row and every chart adapts to its card.";
+export declare const TABLET_NOTE = "Container of 768 px: cards pair up and Cols stay in one column (they split from 940 px of container).";

package/dist/dashboards/layout.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader } from "../containers/card/index.js";
+import { cn } from "../utils/cn.js";
+function DashboardPage({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children });
+}
+function KpiRow({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-px overflow-hidden rounded-card bg-line border-card shadow-card @min-[720px]/page:grid-cols-4", children });
+}
+const gridClasses = {
+  2: "grid-cols-1 @min-[720px]/page:grid-cols-2",
+  3: "grid-cols-1 @min-[720px]/page:grid-cols-2 @min-[1180px]/page:grid-cols-3"
+};
+function CardGrid({ columns = 2, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid items-start gap-4", gridClasses[columns]), children });
+}
+function CardTitle({ title, subtitle }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsx("h2", { className: "m-0 break-words font-semibold text-[14px] text-ink", children: title }),
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "m-0 break-words text-[12px] text-ink-3", children: subtitle }) : null
+  ] });
+}
+function ChartCard({ title, subtitle, aside, height = 300, children }) {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { title, subtitle }),
+      aside
+    ] }),
+    /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx("div", { className: "min-w-0", style: { height }, children }) })
+  ] });
+}
+function TableCard({ title, subtitle, aside, children }) {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { title, subtitle }),
+      aside
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
+  ] });
+}
+const narrowFrame = (Story) => /* @__PURE__ */ jsx("div", { className: "@container/page w-[320px] max-w-full", children: /* @__PURE__ */ jsx(Story, {}) });
+const tabletFrame = (Story) => /* @__PURE__ */ jsx("div", { className: "@container/page w-[768px] max-w-full", children: /* @__PURE__ */ jsx(Story, {}) });
+const NARROW_NOTE = "Container of 320 px: Cols collapse to one column, KPIs go two per row and every chart adapts to its card.";
+const TABLET_NOTE = "Container of 768 px: cards pair up and Cols stay in one column (they split from 940 px of container).";
+export {
+  CardGrid,
+  ChartCard,
+  DashboardPage,
+  KpiRow,
+  NARROW_NOTE,
+  TABLET_NOTE,
+  TableCard,
+  narrowFrame,
+  tabletFrame
+};

package/dist/forms/accent-picker/accent-picker.d.ts

@@ -0,0 +1,20 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type ComponentPropsWithoutRef } from "react";
+export interface AccentOption {
+    value: string;
+    label: string;
+    /** Any CSS color value, typically a variable such as `var(--accent)`. */
+    swatch: string;
+}
+export interface AccentPickerProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, "value" | "defaultValue" | "onValueChange"> {
+    options: AccentOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Exclusive swatch picker. Controlled or uncontrolled; the root exposes
+ * `data-accent` with the active option so consumers can read it. Applying the
+ * value to the document is the consumer's responsibility.
+ */
+export declare function AccentPicker({ options, value, defaultValue, onValueChange, className, ...props }: AccentPickerProps): import("react").JSX.Element;

package/dist/forms/accent-picker/accent-picker.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+function AccentPicker({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  ...props
+}) {
+  const [internal, setInternal] = useState(() => defaultValue ?? options[0]?.value);
+  const current = value ?? internal;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "data-accent": current,
+      value: current,
+      onValueChange: (next) => {
+        setInternal(next);
+        onValueChange?.(next);
+      },
+      className: cn("flex flex-wrap gap-2", className),
+      ...props,
+      children: options.map((option) => /* @__PURE__ */ jsxs(
+        RadioGroupPrimitive.Item,
+        {
+          value: option.value,
+          className: "flex items-center gap-2 rounded-control border-divider px-2.5 py-1.75 font-semibold text-chip-text text-ink data-[state=checked]:border-accent-ink data-[state=checked]:shadow-selected",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "size-3.5 shrink-0 rounded-xs",
+                style: { background: option.swatch }
+              }
+            ),
+            option.label
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
+export {
+  AccentPicker
+};

package/dist/forms/accent-picker/index.d.ts

@@ -0,0 +1 @@
+export { type AccentOption, AccentPicker, type AccentPickerProps, } from "./accent-picker.js";

package/dist/forms/accent-picker/index.js

@@ -0,0 +1,6 @@
+import {
+  AccentPicker
+} from "./accent-picker.js";
+export {
+  AccentPicker
+};

package/dist/forms/checkbox-button-group/checkbox-button-group.d.ts

@@ -0,0 +1,16 @@
+import { type ButtonOption } from "../internal/button-option.js";
+export type CheckboxButtonOption = ButtonOption;
+export interface CheckboxButtonGroupProps {
+    options: CheckboxButtonOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Form field name shared by the checkboxes. */
+    name?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+}
+/** Multi-select where each option is a button-like card; native checkboxes underneath. */
+export declare function CheckboxButtonGroup({ options, value: valueProp, defaultValue, onValueChange, name, disabled, className, ...aria }: CheckboxButtonGroupProps): import("react").JSX.Element;

package/dist/forms/checkbox-button-group/checkbox-button-group.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { OptionShell, optionGridClass } from "../internal/button-option.js";
+function CheckboxButtonGroup({
+  options,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  name,
+  disabled,
+  className,
+  ...aria
+}) {
+  const [inner, setInner] = useState(defaultValue);
+  const value = valueProp ?? inner;
+  const toggle = (optionValue, checked) => {
+    const next = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+    if (valueProp === void 0) setInner(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      className: cn("@container/options m-0 min-w-0 border-0 p-0", optionGridClass, className),
+      ...aria,
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        OptionShell,
+        {
+          option,
+          input: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              name,
+              value: option.value,
+              checked: value.includes(option.value),
+              disabled: disabled || option.disabled,
+              onChange: (event) => toggle(option.value, event.target.checked),
+              className: "sr-only"
+            }
+          )
+        },
+        option.value
+      ))
+    }
+  );
+}
+export {
+  CheckboxButtonGroup
+};

package/dist/forms/checkbox-button-group/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxButtonGroup, type CheckboxButtonGroupProps, type CheckboxButtonOption, } from "./checkbox-button-group.js";

package/dist/forms/checkbox-button-group/index.js

@@ -0,0 +1,6 @@
+import {
+  CheckboxButtonGroup
+} from "./checkbox-button-group.js";
+export {
+  CheckboxButtonGroup
+};

package/dist/forms/dropzone/dropzone.d.ts

@@ -0,0 +1,19 @@
+export type DropzoneRejectionReason = "type" | "size";
+export interface DropzoneRejection {
+    file: File;
+    reason: DropzoneRejectionReason;
+}
+export interface DropzoneProps {
+    onFiles: (files: File[]) => void;
+    /** Called with the rejected files; the caller composes the user-facing message. */
+    onReject?: (rejections: DropzoneRejection[]) => void;
+    /** Accepted MIME types; supports wildcards such as `image/*`. */
+    acceptedTypes?: string[];
+    maxSizeBytes?: number;
+    multiple?: boolean;
+    title: string;
+    hint?: string;
+    browseLabel: string;
+    className?: string;
+}
+export declare function Dropzone({ onFiles, onReject, acceptedTypes, maxSizeBytes, multiple, title, hint, browseLabel, className, }: DropzoneProps): import("react").JSX.Element;