@rojaostudio/ds 1.0.0

package/dist/components/summary-bar.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SummaryBarTone = 'default' | 'positive' | 'negative' | 'warning' | 'muted';
+interface SummaryBarItem {
+    /** Short label, e.g. "Valor em estoque" */
+    label: string;
+    /** Pre-formatted value (currency, count, etc.) — formatting is the consumer's job */
+    value: string;
+    /** Tints the value. Counters use warning/negative; money uses default/positive. */
+    tone?: SummaryBarTone;
+    /** Optional leading icon shown before the value */
+    icon?: ReactNode;
+}
+interface SummaryBarProps {
+    items: SummaryBarItem[];
+    className?: string;
+}
+/**
+ * Strip of aggregated metrics shown above a list (stock summary, finance totals,
+ * report KPIs). Mobile: grid 2-colunas (não estoura nem esconde scroll). sm+: linha
+ * flex com scroll horizontal se precisar. Contagem ímpar → último item ocupa a linha
+ * inteira no mobile (sem célula vazia). Valores são pré-formatados pelo consumidor.
+ *
+ * Truque do divisor: no mobile, o fundo do CONTAINER é a cor do divisor e o gap-px
+ * revela essa cor entre as células (cada célula tem o fundo normal) → linhas de grade
+ * limpas. No sm+, o fundo volta ao normal e os divisores são border-left por item.
+ */
+declare function SummaryBar({ items, className }: SummaryBarProps): react.JSX.Element;
+
+export { SummaryBar, type SummaryBarItem, type SummaryBarProps, type SummaryBarTone };

package/dist/components/summary-bar.js

@@ -0,0 +1,54 @@
+import "../chunk-ORMEWXMH.js";
+const TONE_CLASS = {
+  default: "[color:var(--summary-bar-value)]",
+  positive: "[color:var(--summary-bar-value-positive)]",
+  negative: "[color:var(--summary-bar-value-negative)]",
+  warning: "[color:var(--summary-bar-value-warning)]",
+  muted: "[color:var(--summary-bar-value-muted)]"
+};
+function SummaryBar({ items, className }) {
+  const odd = items.length % 2 === 1;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "grid grid-cols-2 gap-px overflow-hidden rounded-(--radius-card) border",
+        "sm:flex sm:gap-0 sm:overflow-x-auto sm:[scrollbar-width:none]",
+        "[background:var(--summary-bar-divider)] sm:[background:var(--summary-bar-bg)]",
+        "[border-color:var(--summary-bar-border)]",
+        className != null ? className : ""
+      ].join(" ")
+    },
+    items.map((item, i) => {
+      var _a;
+      const spanFull = odd && i === items.length - 1;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          className: [
+            "flex flex-1 flex-col gap-1.5 px-4 py-3 [background:var(--summary-bar-bg)]",
+            "min-w-0 sm:min-w-[7.5rem] sm:whitespace-nowrap",
+            spanFull ? "col-span-2 sm:col-span-1" : "",
+            i > 0 ? "sm:[border-left:1px_solid_var(--summary-bar-divider)]" : ""
+          ].join(" ")
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-medium uppercase tracking-wide [color:var(--summary-bar-label)]" }, item.label),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: [
+              "flex items-center gap-1.5 text-heading-sm font-semibold leading-none tabular-nums",
+              TONE_CLASS[(_a = item.tone) != null ? _a : "default"]
+            ].join(" ")
+          },
+          item.icon,
+          item.value
+        )
+      );
+    })
+  );
+}
+export {
+  SummaryBar
+};

package/dist/components/table.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+
+type Align = 'left' | 'right' | 'center';
+declare function Table({ className, children, ...props }: React.HTMLAttributes<HTMLTableElement>): react.JSX.Element;
+declare function TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    header?: boolean;
+    noHover?: boolean;
+}
+declare function TableRow({ header, noHover, className, children, onClick, ...props }: TableRowProps): react.JSX.Element;
+interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    align?: Align;
+}
+declare function Th({ align, className, children, ...props }: ThProps): react.JSX.Element;
+interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: Align;
+    muted?: boolean;
+    bold?: boolean;
+}
+declare function Td({ align, muted, bold, className, children, ...props }: TdProps): react.JSX.Element;
+
+export { Table, TableBody, TableHead, TableRow, type TableRowProps, Td, type TdProps, Th, type ThProps };

package/dist/components/table.js

@@ -0,0 +1,80 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+const ALIGN = { left: "text-left", right: "text-right", center: "text-center" };
+function Table(_a) {
+  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement("table", __spreadValues({ className: ["w-full text-label", className].join(" ") }, props), children);
+}
+function TableHead(_c) {
+  var _d = _c, { className = "", children } = _d, props = __objRest(_d, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement("thead", __spreadValues({ className: className || void 0 }, props), children);
+}
+function TableBody(_e) {
+  var _f = _e, { className = "", children } = _f, props = __objRest(_f, ["className", "children"]);
+  return /* @__PURE__ */ React.createElement("tbody", __spreadValues({ className: ["divide-y divide-stroke-default", className].join(" ") }, props), children);
+}
+function TableRow(_g) {
+  var _h = _g, { header, noHover, className = "", children, onClick } = _h, props = __objRest(_h, ["header", "noHover", "className", "children", "onClick"]);
+  const base = header ? "border-b border-stroke-default" : [
+    !noHover && "hover:bg-surface-raised transition-colors",
+    onClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-stroke-focus"
+  ].filter(Boolean).join(" ");
+  const interactiveProps = !header && onClick ? {
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick(e);
+      }
+    }
+  } : {};
+  return /* @__PURE__ */ React.createElement(
+    "tr",
+    __spreadValues(__spreadValues({
+      className: [base, className].filter(Boolean).join(" "),
+      onClick
+    }, interactiveProps), props),
+    children
+  );
+}
+function Th(_i) {
+  var _j = _i, { align = "left", className = "", children } = _j, props = __objRest(_j, ["align", "className", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    "th",
+    __spreadValues({
+      className: [
+        "px-5 py-3 text-caption font-semibold text-fg-muted uppercase tracking-wide whitespace-nowrap",
+        ALIGN[align],
+        className
+      ].filter(Boolean).join(" ")
+    }, props),
+    children
+  );
+}
+function Td(_k) {
+  var _l = _k, { align = "left", muted, bold, className = "", children } = _l, props = __objRest(_l, ["align", "muted", "bold", "className", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    "td",
+    __spreadValues({
+      className: [
+        "px-5 py-3",
+        ALIGN[align],
+        muted ? "text-fg-muted" : "text-fg-primary",
+        bold ? "font-medium" : "",
+        className
+      ].filter(Boolean).join(" ")
+    }, props),
+    children
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableHead,
+  TableRow,
+  Td,
+  Th
+};

package/dist/components/textarea.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    helper?: string;
+    error?: string;
+    required?: boolean;
+    optional?: boolean;
+    /** Auto-cresce conforme conteúdo (sem scroll bar interna). default = false. */
+    autoResize?: boolean;
+    /** Conta caracteres (mostra "X/Y" se maxLength definido). */
+    showCount?: boolean;
+    /** Min rows quando autoResize. default = 3. */
+    minRows?: number;
+    /** Max rows quando autoResize (cap pra evitar crescer infinito). default = 10. */
+    maxRows?: number;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -0,0 +1,95 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useId, useEffect, useRef } from "react";
+const Textarea = forwardRef(function Textarea2(_a, ref) {
+  var _b = _a, {
+    label,
+    helper,
+    error,
+    required,
+    optional,
+    autoResize = false,
+    showCount,
+    minRows = 3,
+    maxRows = 10,
+    className = "",
+    id,
+    rows,
+    value,
+    defaultValue,
+    maxLength,
+    onChange
+  } = _b, props = __objRest(_b, [
+    "label",
+    "helper",
+    "error",
+    "required",
+    "optional",
+    "autoResize",
+    "showCount",
+    "minRows",
+    "maxRows",
+    "className",
+    "id",
+    "rows",
+    "value",
+    "defaultValue",
+    "maxLength",
+    "onChange"
+  ]);
+  const generatedId = useId();
+  const textareaId = id != null ? id : generatedId;
+  const internalRef = useRef(null);
+  function setRef(el) {
+    internalRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  }
+  function adjust() {
+    const el = internalRef.current;
+    if (!el || !autoResize) return;
+    el.style.height = "auto";
+    const lineHeight = parseFloat(getComputedStyle(el).lineHeight || "20");
+    const maxH = lineHeight * maxRows + 24;
+    el.style.height = `${Math.min(el.scrollHeight, maxH)}px`;
+    el.style.overflowY = el.scrollHeight > maxH ? "auto" : "hidden";
+  }
+  useEffect(() => {
+    adjust();
+  }, [value, autoResize]);
+  function handleChange(e) {
+    onChange == null ? void 0 : onChange(e);
+    if (autoResize) adjust();
+  }
+  const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: textareaId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement(
+    "textarea",
+    __spreadValues({
+      ref: setRef,
+      id: textareaId,
+      rows: rows != null ? rows : minRows,
+      value,
+      defaultValue,
+      maxLength,
+      required,
+      onChange: handleChange,
+      className: [
+        "w-full px-3 py-2 rounded-(--radius-control) text-label",
+        "bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
+        "border transition-colors outline-none",
+        autoResize ? "resize-none overflow-hidden" : "resize-y",
+        error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:resize-none",
+        className
+      ].filter(Boolean).join(" "),
+      "aria-invalid": error ? true : void 0,
+      "aria-describedby": error ? `${textareaId}-error` : helper ? `${textareaId}-helper` : void 0
+    }, props)
+  ), (error || helper || showCount && maxLength) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, error ? /* @__PURE__ */ React.createElement("p", { id: `${textareaId}-error`, className: "text-caption text-danger-text flex-1" }, error) : helper ? /* @__PURE__ */ React.createElement("p", { id: `${textareaId}-helper`, className: "text-caption text-fg-muted flex-1" }, helper) : /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), showCount && maxLength && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted tabular-nums shrink-0" }, currentLength, "/", maxLength)));
+});
+export {
+  Textarea
+};

package/dist/components/themed.d.ts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * className for a brand theme: `theme-<name>` (+ ` dark`). The DS theme CSS is
+ * class-scoped, so apply this wherever you want the theme to take effect — on
+ * `<html>`/`<body>` for the whole app, or via <Themed> for a subtree.
+ *
+ *   <html className={themeClass('padaria', isDark)}>
+ */
+declare const themeClass: (theme: string, dark?: boolean) => string;
+interface ThemedProps extends HTMLAttributes<HTMLDivElement> {
+    /** Brand theme name → `.theme-<name>` (the served sheet's selector). */
+    theme: string;
+    /** Apply dark mode (`.dark`). */
+    dark?: boolean;
+    /** Merge the theme class onto the single child element instead of wrapping a
+     *  `<div>` (no extra DOM node — apply the theme to a `<main>`, `<section>`…). */
+    asChild?: boolean;
+    children: ReactNode;
+}
+/**
+ * Scopes a brand theme to its subtree via the `.theme-<name>` class. Because the
+ * theme CSS is class-scoped (not :root), this can NEST — different subtrees can
+ * render different themes on the same page. For the whole app, prefer putting
+ * `themeClass()` on `<html>` instead of wrapping everything in a div.
+ *
+ *   <Themed theme="padaria">…</Themed>
+ *   <Themed theme="pet" dark>…</Themed>
+ *   <Themed theme="cafe" asChild><main>…</main></Themed>
+ *
+ * Pair with the brand sheet (ds.rojao.ai/themes/<slug>.css) + base.css.
+ */
+declare function Themed({ theme, dark, asChild, className, children, ...rest }: ThemedProps): react.JSX.Element;
+
+export { Themed, type ThemedProps, themeClass };

package/dist/components/themed.js

@@ -0,0 +1,22 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { cloneElement, isValidElement } from "react";
+const themeClass = (theme, dark = false) => `theme-${theme}${dark ? " dark" : ""}`;
+function Themed(_a) {
+  var _b = _a, { theme, dark = false, asChild = false, className, children } = _b, rest = __objRest(_b, ["theme", "dark", "asChild", "className", "children"]);
+  const cls = themeClass(theme, dark);
+  if (asChild && isValidElement(children)) {
+    const child = children;
+    return cloneElement(child, __spreadProps(__spreadValues({}, rest), {
+      className: [cls, child.props.className, className].filter(Boolean).join(" ")
+    }));
+  }
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: [cls, className].filter(Boolean).join(" ") }, rest), children);
+}
+export {
+  Themed,
+  themeClass
+};

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

@@ -0,0 +1,34 @@
+import * as react from 'react';
+
+/**
+ * TimePicker — input de hora (HH:mm) com popover de seletor.
+ *
+ * Uso:
+ *   <TimePicker value="09:30" onChange={setTime} />
+ *   <TimePicker value={null} onChange={setTime} step={15} />     // múltiplos de 15min
+ *   <TimePicker value="14:00" onChange={setTime} format="12h" />
+ *
+ * Valor é string "HH:mm" (24h) ou null. Lib calling code converte se precisar Date.
+ * Confirma via botão "OK". ESC e clique fora descartam o rascunho.
+ */
+interface TimePickerProps {
+    value: string | null;
+    onChange: (time: string | null) => void;
+    /** Step de minutos. default = 1. Use 5/15/30 pra agendamentos. */
+    step?: number;
+    /** Formato exibido. default = '24h'. */
+    format?: '24h' | '12h';
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    width?: 'full' | 'hug';
+    disabled?: boolean;
+    /** Hora mínima permitida ("HH:mm"). */
+    min?: string;
+    /** Hora máxima permitida ("HH:mm"). */
+    max?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { TimePicker, type TimePickerProps };

package/dist/components/time-picker.js

@@ -0,0 +1,213 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useState, useRef, useEffect, useImperativeHandle } from "react";
+import { Clock, ChevronUp, ChevronDown, X } from "lucide-react";
+import { Popover } from "./popover.js";
+const SIZE_CLASS = {
+  sm: "h-8 text-caption px-2.5",
+  md: "h-10 text-label px-3"
+};
+function parseTime(t) {
+  if (!t) return null;
+  const match = t.match(/^(\d{1,2}):(\d{2})$/);
+  if (!match) return null;
+  const h = parseInt(match[1], 10);
+  const m = parseInt(match[2], 10);
+  if (h < 0 || h > 23 || m < 0 || m > 59) return null;
+  return { h, m };
+}
+function formatTime(h, m, format) {
+  const mm = String(m).padStart(2, "0");
+  if (format === "24h") return `${String(h).padStart(2, "0")}:${mm}`;
+  const period = h >= 12 ? "PM" : "AM";
+  const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  return `${String(h12).padStart(2, "0")}:${mm} ${period}`;
+}
+function clampMinute(m, step) {
+  return Math.round(m / step) * step % 60;
+}
+function compareTime(a, b) {
+  const pa = parseTime(a);
+  const pb = parseTime(b);
+  return pa.h * 60 + pa.m - (pb.h * 60 + pb.m);
+}
+const TimePicker = forwardRef(function TimePicker2({
+  value,
+  onChange,
+  step = 1,
+  format = "24h",
+  placeholder = "HH:mm",
+  size = "md",
+  width = "full",
+  disabled = false,
+  min,
+  max,
+  className = "",
+  "aria-label": ariaLabel
+}, ref) {
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(() => {
+    const p = parseTime(value);
+    return p != null ? p : { h: 9, m: 0 };
+  });
+  const triggerRef = useRef(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  useImperativeHandle(ref, () => triggerRef.current);
+  useEffect(() => {
+    if (open) {
+      const p = parseTime(value);
+      if (p) setDraft(p);
+    }
+  }, [open, value]);
+  function commit() {
+    const d = draftRef.current;
+    const t = `${String(d.h).padStart(2, "0")}:${String(d.m).padStart(2, "0")}`;
+    if (min && compareTime(t, min) < 0) return;
+    if (max && compareTime(t, max) > 0) return;
+    onChange(t);
+  }
+  function adjust(field, delta) {
+    setDraft((d) => {
+      if (field === "h") {
+        let h = d.h + delta;
+        if (h < 0) h = 23;
+        if (h > 23) h = 0;
+        return __spreadProps(__spreadValues({}, d), { h });
+      }
+      let m = d.m + delta * step;
+      if (m < 0) m = 60 - step;
+      if (m >= 60) m = 0;
+      return __spreadProps(__spreadValues({}, d), { m: clampMinute(m, step) });
+    });
+  }
+  function handleClear(e) {
+    var _a;
+    e.stopPropagation();
+    onChange(null);
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  }
+  const display = (() => {
+    const p = parseTime(value);
+    if (!p) return "";
+    return formatTime(p.h, p.m, format);
+  })();
+  const dialog = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "Seletor de hora",
+      className: "rounded-(--radius-control) border border-stroke-default bg-surface-default shadow-lg p-3"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+      Spinner,
+      {
+        label: "Hora",
+        value: String(draft.h).padStart(2, "0"),
+        onUp: () => adjust("h", 1),
+        onDown: () => adjust("h", -1)
+      }
+    ), /* @__PURE__ */ React.createElement("span", { className: "text-heading-sm font-semibold text-fg-muted" }, ":"), /* @__PURE__ */ React.createElement(
+      Spinner,
+      {
+        label: "Minuto",
+        value: String(draft.m).padStart(2, "0"),
+        onUp: () => adjust("m", 1),
+        onDown: () => adjust("m", -1)
+      }
+    ), format === "12h" && /* @__PURE__ */ React.createElement("span", { className: "text-caption font-medium text-fg-secondary ml-1" }, draft.h >= 12 ? "PM" : "AM")),
+    /* @__PURE__ */ React.createElement("div", { className: "flex justify-end gap-2 mt-3" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(false),
+        className: "text-caption text-fg-muted hover:text-fg-primary transition-colors px-2 py-1"
+      },
+      "Cancelar"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          commit();
+          setOpen(false);
+        },
+        className: "text-caption font-medium bg-brand-primary text-brand-on-primary px-3 py-1 rounded transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus"
+      },
+      "OK"
+    ))
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: ["relative", width === "full" ? "block w-full" : "inline-block", className].join(" ") }, /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            if (!disabled) setOpen((o) => !o);
+          },
+          disabled,
+          "aria-label": ariaLabel != null ? ariaLabel : "Selecionar hora",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          className: [
+            "w-full flex items-center gap-2 rounded-(--radius-control) border border-stroke-default 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(Clock, { size: 16, className: "text-fg-muted shrink-0" }),
+        /* @__PURE__ */ React.createElement("span", { className: ["flex-1 text-left truncate", display ? "text-fg-primary" : "text-fg-placeholder"].join(" ") }, display || placeholder)
+      ),
+      triggerClassName: width === "full" ? "block w-full" : "inline-block",
+      placement: "bottom-start",
+      offset: 4,
+      open,
+      onOpenChange: (v) => {
+        if (!disabled) setOpen(v);
+      }
+    },
+    () => dialog
+  ), value && !disabled && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleClear,
+      "aria-label": "Limpar hora",
+      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 })
+  ));
+});
+function Spinner({ label, value, onUp, onDown }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center", role: "group", "aria-label": label }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onUp,
+      "aria-label": `Aumentar ${label.toLowerCase()}`,
+      className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus"
+    },
+    /* @__PURE__ */ React.createElement(ChevronUp, { size: 16 })
+  ), /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1 text-heading-lg font-mono font-semibold text-fg-primary tabular-nums select-none min-w-[3ch] text-center" }, value), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onDown,
+      "aria-label": `Diminuir ${label.toLowerCase()}`,
+      className: "p-0.5 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-stroke-focus"
+    },
+    /* @__PURE__ */ React.createElement(ChevronDown, { size: 16 })
+  ));
+}
+export {
+  TimePicker
+};