@rojaostudio/ds 1.0.0

package/dist/components/data-table-header.js

@@ -0,0 +1,205 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState } from "react";
+import { ChevronDown, ListFilter, SlidersHorizontal, X } from "lucide-react";
+import { FilterChip } from "./filter-chip.js";
+import { Search } from "./search.js";
+import { Divider } from "./divider.js";
+import { IconButton } from "./icon-button.js";
+import { Popover } from "./popover.js";
+import { BottomSheet } from "./bottom-sheet.js";
+const optCls = (selected) => `w-full text-left text-label px-3 py-1.5 rounded-(--radius-card) transition-colors flex items-center justify-between gap-2 ${selected ? "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:bg-surface-raised"}`;
+function triggerCls(isActive) {
+  const base = "h-control-md flex items-center gap-1 px-3 text-label font-medium rounded-(--radius-control) border transition-colors";
+  if (isActive) return `${base} border-brand-primary bg-brand-primary text-brand-on-primary`;
+  return `${base} border-stroke-default bg-surface-default text-fg-muted hover:bg-surface-raised hover:border-stroke-strong`;
+}
+function getOptionLabel(filter) {
+  var _a;
+  if (filter.value === "") return filter.label;
+  const opt = filter.options.find((o) => o.value === filter.value);
+  return (_a = opt == null ? void 0 : opt.label) != null ? _a : filter.label;
+}
+function FilterDropdown({ f, placement = "bottom-start" }) {
+  return /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      placement,
+      trigger: /* @__PURE__ */ React.createElement("button", { type: "button", className: triggerCls(f.value !== "") }, getOptionLabel(f), /* @__PURE__ */ React.createElement(ChevronDown, { size: 12 }))
+    },
+    ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "w-36 rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-xl p-1 overflow-hidden" }, f.options.map((opt) => /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: opt.value,
+        type: "button",
+        onClick: () => {
+          f.onChange(opt.value);
+          close();
+        },
+        className: optCls(f.value === opt.value)
+      },
+      /* @__PURE__ */ React.createElement("span", null, opt.label),
+      opt.count != null && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums" }, opt.count)
+    )))
+  );
+}
+function MobileSingleFilter({ f }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", { type: "button", className: triggerCls(f.value !== ""), onClick: () => setOpen(true) }, getOptionLabel(f), /* @__PURE__ */ React.createElement(ChevronDown, { size: 12 })), /* @__PURE__ */ React.createElement(BottomSheet, { open, onClose: () => setOpen(false), title: f.label }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, f.options.map((opt) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: opt.value,
+      type: "button",
+      onClick: () => {
+        f.onChange(opt.value);
+        setOpen(false);
+      },
+      className: optCls(f.value === opt.value)
+    },
+    /* @__PURE__ */ React.createElement("span", null, opt.label),
+    opt.count != null && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums" }, opt.count)
+  )))));
+}
+function FiltersButton({ count, onClick }) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "data-filter-toggle": true,
+      onClick,
+      className: `h-control-md flex items-center gap-1.5 px-3 text-label border rounded-(--radius-control) transition-colors ${count > 0 ? "bg-brand-primary text-brand-on-primary border-brand-primary" : "bg-surface-default text-fg-muted border-stroke-default hover:bg-surface-raised"}`
+    },
+    /* @__PURE__ */ React.createElement(SlidersHorizontal, { size: 14 }),
+    "Filtros",
+    count > 0 && /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-surface-default text-fg-primary text-[10px] font-bold" }, count)
+  );
+}
+function FilterGroups({
+  filters,
+  onPick,
+  onClear,
+  showClear
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, filters.map((f) => /* @__PURE__ */ React.createElement("div", { key: f.key }, /* @__PURE__ */ React.createElement("p", { className: "text-[11px] font-semibold text-fg-disabled uppercase tracking-wide mb-2" }, f.label), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, f.options.map((opt) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: opt.value,
+      type: "button",
+      onClick: () => onPick(f, opt.value),
+      className: optCls(f.value === opt.value)
+    },
+    /* @__PURE__ */ React.createElement("span", null, opt.label),
+    opt.count != null && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums" }, opt.count)
+  ))))), onClear && showClear && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onClear,
+      className: "w-full text-center text-caption text-fg-disabled hover:text-fg-secondary underline underline-offset-2 pt-1"
+    },
+    "Limpar filtros"
+  ));
+}
+function DataTableHeader({
+  search,
+  filters = [],
+  pillFilters = [],
+  onClear,
+  actions,
+  className = "",
+  mobileCollapse = false
+}) {
+  var _a;
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const activeFilterCount = filters.filter((f) => f.value !== "").length + pillFilters.filter((p) => p.active).length;
+  const collapseDesktop = filters.length >= 2;
+  const activeFilters = filters.filter((f) => f.value !== "");
+  const singleFilter = filters.length === 1 ? filters[0] : null;
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex items-center gap-2 mb-3", className].filter(Boolean).join(" ") }, search && /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
+    Search,
+    {
+      size: "md",
+      value: search.value,
+      onChange: (e) => search.onChange(e.target.value),
+      onClear: () => search.onChange(""),
+      placeholder: (_a = search.placeholder) != null ? _a : "Buscar..."
+    }
+  )), pillFilters.length > 0 && /* @__PURE__ */ React.createElement("div", { "data-pill-filter": true, className: "flex items-center [gap:var(--filter-chip-group-gap)] flex-wrap" }, pillFilters.map((p) => /* @__PURE__ */ React.createElement(
+    FilterChip,
+    {
+      key: p.key,
+      label: p.label,
+      active: p.active,
+      count: p.count,
+      onClick: p.onClick
+    }
+  ))), filters.length > 0 && !collapseDesktop && /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex items-center gap-1.5" }, (search || pillFilters.length > 0) && /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: "mx-0.5" }), /* @__PURE__ */ React.createElement(ListFilter, { size: 14, className: "text-fg-disabled shrink-0" }), filters.map((f) => /* @__PURE__ */ React.createElement(FilterDropdown, { key: f.key, f }))), collapseDesktop && /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex items-center gap-1.5" }, (search || pillFilters.length > 0) && /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: "mx-0.5" }), activeFilters.map((f) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: f.key,
+      type: "button",
+      onClick: () => f.onChange(""),
+      title: f.label,
+      className: triggerCls(true)
+    },
+    getOptionLabel(f),
+    /* @__PURE__ */ React.createElement(X, { size: 12 })
+  )), /* @__PURE__ */ React.createElement(Popover, { placement: "bottom-end", trigger: /* @__PURE__ */ React.createElement(FiltersButton, { count: activeFilterCount }) }, ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "bg-surface-default border border-stroke-default rounded-(--radius-card) shadow-lg p-4 w-56 max-h-[70vh] overflow-y-auto" }, /* @__PURE__ */ React.createElement(
+    FilterGroups,
+    {
+      filters,
+      onPick: (f, v) => {
+        f.onChange(v);
+        close();
+      },
+      onClear: onClear ? () => {
+        onClear();
+        close();
+      } : void 0,
+      showClear: activeFilterCount > 0
+    }
+  )))), onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: /* @__PURE__ */ React.createElement(X, { size: 13 }),
+      "aria-label": "Limpar filtros",
+      size: "sm",
+      variant: "ghost",
+      color: "neutral",
+      className: "hidden md:inline-flex",
+      onClick: onClear
+    }
+  ), singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement(MobileSingleFilter, { f: singleFilter })), !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement(Popover, { placement: "bottom-end", trigger: /* @__PURE__ */ React.createElement(FiltersButton, { count: activeFilterCount }) }, ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "bg-surface-default border border-stroke-default rounded-(--radius-card) shadow-lg p-4 w-52" }, /* @__PURE__ */ React.createElement(
+    FilterGroups,
+    {
+      filters,
+      onPick: (f, v) => {
+        f.onChange(v);
+        close();
+      },
+      onClear: onClear ? () => {
+        onClear();
+        close();
+      } : void 0,
+      showClear: activeFilterCount > 0
+    }
+  )))), mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement(FiltersButton, { count: activeFilterCount, onClick: () => setSheetOpen(true) }), /* @__PURE__ */ React.createElement(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: "Filtros" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement(
+    FilterGroups,
+    {
+      filters,
+      onPick: (f, v) => {
+        f.onChange(v);
+        setSheetOpen(false);
+      },
+      onClear: onClear ? () => {
+        onClear();
+        setSheetOpen(false);
+      } : void 0,
+      showClear: activeFilterCount > 0
+    }
+  ), actions && /* @__PURE__ */ React.createElement("div", { className: "pt-2 border-t border-stroke-default" }, actions)))), mobileCollapse ? /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex items-center" }, actions) : actions);
+}
+export {
+  DataTableHeader,
+  FilterDropdown
+};

package/dist/components/date-picker.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * DatePicker — input de data com calendar popover.
+ *
+ * Uso:
+ *   <DatePicker value={date} onChange={setDate} />
+ *   <DatePicker value={date} onChange={setDate} min={new Date()} />
+ *   <DatePicker value={date} onChange={setDate} placeholder="Selecione" />
+ *
+ * Sem dependências externas — calendar próprio (mês/ano nav, semana ISO).
+ * Locale pt-BR por default (segunda como primeiro dia).
+ *
+ * Limitações conscientes (MVP):
+ *   - Single date só (sem range)
+ */
+interface DatePickerProps {
+    /** Label renderada acima do controle (mesmo padrão do Input do DS). */
+    label?: ReactNode;
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    min?: Date;
+    max?: Date;
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    width?: 'full' | 'hug';
+    /** locale pra formato. default = 'pt-BR'. */
+    locale?: string;
+    /** Primeiro dia da semana. default = 1 (segunda). */
+    weekStartsOn?: 0 | 1;
+    disabled?: boolean;
+    /** Texto label dos dias da semana (S T Q ...). default = pt-BR. */
+    weekdayLabels?: string[];
+    className?: string;
+    'aria-label'?: string;
+}
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/components/date-picker.js

@@ -0,0 +1,252 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { forwardRef, useState, useRef, useEffect, useId, useImperativeHandle } from "react";
+import { Calendar, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { Popover } from "./popover.js";
+const PT_WEEKDAYS_MON_FIRST = ["S", "T", "Q", "Q", "S", "S", "D"];
+const PT_MONTHS = [
+  "Janeiro",
+  "Fevereiro",
+  "Mar\xE7o",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+const SIZE_CLASS = {
+  sm: "h-8 text-caption px-2.5",
+  md: "h-10 text-label px-3"
+};
+function startOfDay(d) {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(d, n) {
+  const r = new Date(d);
+  r.setDate(r.getDate() + n);
+  return r;
+}
+function buildMonthGrid(year, month, weekStartsOn) {
+  const first = new Date(year, month, 1);
+  const firstWeekday = first.getDay();
+  const offset = (firstWeekday - weekStartsOn + 7) % 7;
+  const start = new Date(year, month, 1 - offset);
+  const days = [];
+  for (let i = 0; i < 42; i++) {
+    days.push(new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
+  }
+  return days;
+}
+const DatePicker = forwardRef(function DatePicker2({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  placeholder = "Selecione\u2026",
+  size = "md",
+  width = "full",
+  locale = "pt-BR",
+  weekStartsOn = 1,
+  disabled = false,
+  weekdayLabels,
+  className = "",
+  "aria-label": ariaLabel
+}, ref) {
+  const triggerId = useId();
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState(() => {
+    const r = value != null ? value : /* @__PURE__ */ new Date();
+    return { year: r.getFullYear(), month: r.getMonth() };
+  });
+  const [focusedDate, setFocusedDate] = useState(null);
+  const triggerRef = useRef(null);
+  const activeDayRef = useRef(null);
+  useImperativeHandle(ref, () => triggerRef.current);
+  useEffect(() => {
+    if (open && value) {
+      setView({ year: value.getFullYear(), month: value.getMonth() });
+    }
+  }, [open, value]);
+  useEffect(() => {
+    if (!open) setFocusedDate(null);
+  }, [open]);
+  useEffect(() => {
+    var _a;
+    if (focusedDate) (_a = activeDayRef.current) == null ? void 0 : _a.focus();
+  }, [focusedDate]);
+  function isDisabled(date) {
+    if (min && startOfDay(date) < startOfDay(min)) return true;
+    if (max && startOfDay(date) > startOfDay(max)) return true;
+    return false;
+  }
+  function handleSelect(date) {
+    if (isDisabled(date)) return;
+    onChange(date);
+    setOpen(false);
+  }
+  function handleClear(e) {
+    var _a;
+    e.stopPropagation();
+    onChange(null);
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  }
+  function handleGridKeyDown(e) {
+    var _a;
+    const base = (_a = focusedDate != null ? focusedDate : value) != null ? _a : new Date(view.year, view.month, 1);
+    let next = null;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      next = addDays(base, 1);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      next = addDays(base, -1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      next = addDays(base, 7);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      next = addDays(base, -7);
+    } else if (e.key === "Enter" && focusedDate && !isDisabled(focusedDate)) {
+      e.preventDefault();
+      handleSelect(focusedDate);
+      return;
+    }
+    if (next) {
+      setFocusedDate(next);
+      if (next.getMonth() !== view.month || next.getFullYear() !== view.year) {
+        setView({ year: next.getFullYear(), month: next.getMonth() });
+      }
+    }
+  }
+  function nav(delta) {
+    setView(({ year, month }) => {
+      const m = month + delta;
+      if (m < 0) return { year: year - 1, month: 11 };
+      if (m > 11) return { year: year + 1, month: 0 };
+      return { year, month: m };
+    });
+  }
+  const tabFocusDate = focusedDate != null ? focusedDate : value;
+  const days = buildMonthGrid(view.year, view.month, weekStartsOn);
+  const weekdays = weekdayLabels != null ? weekdayLabels : weekStartsOn === 1 ? PT_WEEKDAYS_MON_FIRST : ["D", ...PT_WEEKDAYS_MON_FIRST.slice(0, 6)];
+  const today = startOfDay(/* @__PURE__ */ new Date());
+  const formatted = value ? value.toLocaleDateString(locale, { day: "2-digit", month: "2-digit", year: "numeric" }) : "";
+  const calendar = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "Calend\xE1rio",
+      className: "rounded-(--radius-control) border border-stroke-control bg-surface-default shadow-lg p-3 w-[280px]"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-3" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => nav(-1),
+        "aria-label": "M\xEAs anterior",
+        className: "p-1 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
+      },
+      /* @__PURE__ */ React.createElement(ChevronLeft, { size: 16 })
+    ), /* @__PURE__ */ React.createElement("span", { className: "text-label font-semibold text-fg-primary" }, PT_MONTHS[view.month], " ", view.year), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => nav(1),
+        "aria-label": "Pr\xF3ximo m\xEAs",
+        className: "p-1 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
+      },
+      /* @__PURE__ */ React.createElement(ChevronRight, { size: 16 })
+    )),
+    /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-7 gap-1 mb-1" }, weekdays.map((w, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "text-center text-[10px] font-semibold text-fg-muted uppercase" }, w))),
+    /* @__PURE__ */ React.createElement("div", { role: "grid", className: "grid grid-cols-7 gap-1", onKeyDown: handleGridKeyDown }, days.map((d, i) => {
+      const inMonth = d.getMonth() === view.month;
+      const isToday = isSameDay(d, today);
+      const isSelected = !!value && isSameDay(d, value);
+      const isFocused = !!tabFocusDate && isSameDay(d, tabFocusDate);
+      const dis = isDisabled(d);
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: i,
+          ref: isFocused ? activeDayRef : void 0,
+          type: "button",
+          role: "gridcell",
+          onClick: () => handleSelect(d),
+          disabled: dis,
+          "aria-selected": isSelected,
+          "aria-label": d.toLocaleDateString(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
+          tabIndex: isFocused ? 0 : -1,
+          className: [
+            "h-8 rounded text-caption font-medium transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
+            "disabled:cursor-not-allowed disabled:opacity-30",
+            isSelected ? "bg-brand-primary text-brand-on-primary" : isToday ? "border border-stroke-focus text-fg-primary hover:bg-surface-raised" : inMonth ? "text-fg-primary hover:bg-surface-raised" : "text-fg-disabled hover:bg-surface-raised"
+          ].join(" ")
+        },
+        d.getDate()
+      );
+    }))
+  );
+  const control = /* @__PURE__ */ React.createElement("div", { className: ["relative", width === "full" ? "block w-full" : "inline-block", label ? "" : className].join(" ") }, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          ref: triggerRef,
+          id: triggerId,
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            if (!disabled) setOpen((o) => !o);
+          },
+          disabled,
+          "aria-label": ariaLabel != null ? ariaLabel : "Selecionar data",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          className: [
+            "w-full flex items-center gap-2 rounded-(--radius-control) border border-stroke-control bg-surface-default",
+            "transition-colors focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            value ? "pr-7" : "",
+            SIZE_CLASS[size]
+          ].join(" ")
+        },
+        /* @__PURE__ */ React.createElement(Calendar, { size: 16, className: "text-fg-muted shrink-0" }),
+        /* @__PURE__ */ React.createElement("span", { className: ["flex-1 text-left truncate", value ? "text-fg-primary" : "text-fg-placeholder"].join(" ") }, formatted || placeholder)
+      ),
+      triggerClassName: width === "full" ? "block w-full" : "inline-block",
+      placement: "bottom-start",
+      offset: 4,
+      open,
+      onOpenChange: (v) => {
+        if (!disabled) setOpen(v);
+      }
+    },
+    () => calendar
+  ), value && !disabled && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleClear,
+      "aria-label": "Limpar data",
+      className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
+    },
+    /* @__PURE__ */ React.createElement(X, { size: 14 })
+  ));
+  if (!label) return control;
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-1.5", width === "full" ? "w-full" : "inline-flex", className].join(" ") }, /* @__PURE__ */ React.createElement("label", { htmlFor: triggerId, className: "text-label font-medium text-fg-primary" }, label), control);
+});
+export {
+  DatePicker
+};

package/dist/components/divider.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+
+/**
+ * Divider — separador visual horizontal ou vertical.
+ *
+ * Uso:
+ *   <Divider />                              // horizontal subtle
+ *   <Divider orientation="vertical" />       // vertical
+ *   <Divider variant="strong" />             // mais visível
+ *   <Divider><span>OU</span></Divider>       // com label centralizado
+ */
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'subtle' | 'default' | 'strong';
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function Divider({ orientation, variant, className, children, }: DividerProps): react.JSX.Element;
+
+export { Divider, type DividerProps };

package/dist/components/divider.js

@@ -0,0 +1,47 @@
+import "../chunk-ORMEWXMH.js";
+const COLOR_BY_VARIANT = {
+  subtle: "bg-stroke-subtle",
+  default: "bg-stroke-default",
+  strong: "bg-stroke-strong"
+};
+function Divider({
+  orientation = "horizontal",
+  variant = "default",
+  className = "",
+  children
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: ["shrink-0 self-stretch w-px", COLOR_BY_VARIANT[variant], className].join(" ")
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        className: ["flex items-center gap-3 my-2", className].join(" ")
+      },
+      /* @__PURE__ */ React.createElement("span", { className: ["flex-1 h-px", COLOR_BY_VARIANT[variant]].join(" ") }),
+      /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted shrink-0" }, children),
+      /* @__PURE__ */ React.createElement("span", { className: ["flex-1 h-px", COLOR_BY_VARIANT[variant]].join(" ") })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "hr",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: ["border-0 h-px my-2", COLOR_BY_VARIANT[variant], className].join(" ")
+    }
+  );
+}
+export {
+  Divider
+};

package/dist/components/drawer.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    /** Subtítulo opcional abaixo do title. */
+    subtitle?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    side?: 'left' | 'right';
+    /** Tamanho preset. Sobrescreve `width` se ambos passados. */
+    size?: DrawerSize;
+    /** Largura custom (Tailwind class, ex: "w-96"). Use só se size não atende. */
+    width?: string;
+    closeOnBackdrop?: boolean;
+    hideClose?: boolean;
+    className?: string;
+    /** Alvo do portal. default = document.body. Passe um elemento de um subtree TEMATIZADO (ex.: a
+     *  raiz do tema da loja) pra o drawer herdar tokens/mode/fonte daquele contexto em vez do global. */
+    container?: Element | null;
+}
+declare function Drawer({ open, onClose, title, subtitle, children, footer, side, size, width, closeOnBackdrop, hideClose, className, container, }: DrawerProps): react.ReactPortal | null;
+
+export { Drawer, type DrawerProps, type DrawerSize };

package/dist/components/drawer.js

@@ -0,0 +1,82 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useEffect, useId } from "react";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+import { useFocusTrap } from "./use-focus-trap.js";
+const SIZE_WIDTH = {
+  sm: "w-80",
+  // 320px
+  md: "w-96",
+  // 384px
+  lg: "w-[480px]",
+  xl: "w-[640px]"
+};
+function Drawer({
+  open,
+  onClose,
+  title,
+  subtitle,
+  children,
+  footer,
+  side = "right",
+  size,
+  width,
+  closeOnBackdrop = true,
+  hideClose = false,
+  className = "",
+  container
+}) {
+  const widthClass = width != null ? width : SIZE_WIDTH[size != null ? size : "md"];
+  const titleId = useId();
+  const panelRef = useFocusTrap(open);
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = prev;
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-50 flex" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 [background:var(--overlay-scrim)]", onClick: closeOnBackdrop ? onClose : void 0, "aria-hidden": "true" }), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        tabIndex: -1,
+        className: [
+          "relative z-10 flex flex-col bg-surface-default shadow-xl h-full max-w-full",
+          "focus:outline-none",
+          widthClass,
+          side === "right" ? "ml-auto" : "mr-auto",
+          className
+        ].join(" ")
+      },
+      (title || !hideClose) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4 px-6 py-4 border-b border-stroke-default shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("h2", { id: titleId, className: "text-body font-semibold text-fg-primary" }, title), subtitle && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted mt-0.5" }, subtitle)), !hideClose && /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "shrink-0 text-fg-muted hover:text-fg-primary transition-colors rounded focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:outline-none p-0.5",
+          "aria-label": "Fechar"
+        },
+        /* @__PURE__ */ React.createElement(X, { size: 20 })
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto px-6 py-4" }, children),
+      footer && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-stroke-default shrink-0" }, footer)
+    )),
+    container != null ? container : document.body
+  );
+}
+export {
+  Drawer
+};