@rehagro/ui 1.0.57 → 1.0.58

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import React9, { forwardRef, createContext, useState, useMemo, useRef, useEffect, useCallback, useContext } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // src/provider/RehagroProvider.tsx
@@ -463,7 +463,7 @@ var Toast = forwardRef(function Toast2({
         /* @__PURE__ */ jsxs("div", { className: "rh-flex-1 rh-min-w-0", children: [
           /* @__PURE__ */ jsx("p", { className: "rh-text-sm rh-font-semibold rh-leading-tight", children: title }),
           description && /* @__PURE__ */ jsx(
-            "p",
+            "div",
             {
               className: ["rh-mt-1 rh-text-sm rh-leading-normal", descriptionStyles[styleKey]].filter(Boolean).join(" "),
               children: description
@@ -2750,6 +2750,551 @@ var DateSelect = forwardRef(
     );
   }
 );
+var HOURS = Array.from({ length: 24 }, (_, i) => i);
+var MINUTES = Array.from({ length: 60 }, (_, i) => i);
+var ITEM_HEIGHT = 36;
+var CLOCK_HOURS_OUTER = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+var CLOCK_HOURS_INNER = [0, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
+var CLOCK_MINUTES = Array.from({ length: 12 }, (_, index) => index * 5);
+var pad = (n) => String(n).padStart(2, "0");
+var clampClockPart = (value, max) => Math.min(max, Math.max(0, value));
+var statusClasses4 = {
+  default: "rh-border-border focus-within:rh-border-primary focus-within:rh-ring-2 focus-within:rh-ring-gray-200",
+  error: "rh-border-danger focus-within:rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-red-100"
+};
+var sizeClasses7 = {
+  sm: "rh-min-h-[32px] rh-text-sm rh-px-input-x-sm",
+  md: "rh-min-h-[40px] rh-text-sm rh-px-input-x-md",
+  lg: "rh-min-h-[48px] rh-text-base rh-px-input-x-lg"
+};
+var radiusClasses6 = {
+  none: "rh-rounded-none",
+  xxs: "rh-rounded-xxs",
+  xs: "rh-rounded-xs",
+  sm: "rh-rounded-sm",
+  md: "rh-rounded-md",
+  lg: "rh-rounded-lg",
+  xl: "rh-rounded-xl",
+  full: "rh-rounded-full"
+};
+var helperStatusClasses4 = {
+  default: "rh-text-text-muted",
+  error: "rh-text-danger"
+};
+var getSubtitleClassName4 = (subtitle) => subtitle.trim() === "*" ? "rh-text-danger" : "rh-text-text-muted";
+var ClockIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+    ]
+  }
+);
+var EraserIcon2 = () => /* @__PURE__ */ jsx("svg", { width: "15", height: "14", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M15.3134 13.7509H9.45406L16.2384 6.96656C16.4416 6.76343 16.6027 6.52227 16.7127 6.25686C16.8226 5.99145 16.8792 5.70697 16.8792 5.41969C16.8792 5.1324 16.8226 4.84793 16.7127 4.58252C16.6027 4.3171 16.4416 4.07594 16.2384 3.87281L13.0033 0.640783C12.8002 0.437631 12.559 0.276481 12.2936 0.166535C12.0282 0.0565888 11.7437 0 11.4564 0C11.1691 0 10.8846 0.0565888 10.6192 0.166535C10.3538 0.276481 10.1127 0.437631 9.90953 0.640783L0.640783 9.90875C0.437631 10.1119 0.276481 10.353 0.166535 10.6185C0.0565888 10.8839 0 11.1683 0 11.4556C0 11.7429 0.0565888 12.0274 0.166535 12.2928C0.276481 12.5582 0.437631 12.7994 0.640783 13.0025L2.98922 15.3517C3.07635 15.4388 3.17977 15.5078 3.29358 15.5548C3.40739 15.6019 3.52935 15.626 3.6525 15.6259H15.3134C15.5621 15.6259 15.8005 15.5272 15.9763 15.3514C16.1522 15.1755 16.2509 14.9371 16.2509 14.6884C16.2509 14.4398 16.1522 14.2013 15.9763 14.0255C15.8005 13.8497 15.5621 13.7509 15.3134 13.7509Z",
+    fill: "currentColor"
+  }
+) });
+var PencilIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M4 20h4L19 9a2.828 2.828 0 1 0-4-4L4 16v4Z" }),
+      /* @__PURE__ */ jsx("path", { d: "m13.5 6.5 4 4" })
+    ]
+  }
+);
+function scrollToSelected(ref, index) {
+  const el = ref.current;
+  if (!el) return;
+  const target = index * ITEM_HEIGHT - el.clientHeight / 2 + ITEM_HEIGHT / 2;
+  el.scrollTop = Math.max(0, target);
+}
+function getClockPosition(index, radius) {
+  const angle = index / 12 * Math.PI * 2 - Math.PI / 2;
+  return {
+    left: `calc(50% + ${Math.cos(angle) * radius}px)`,
+    top: `calc(50% + ${Math.sin(angle) * radius}px)`
+  };
+}
+var TimePicker = forwardRef(
+  function TimePicker2(props, ref) {
+    const {
+      label,
+      subtitle,
+      placeholder = "Selecione",
+      status = "default",
+      size = "md",
+      radius = "xs",
+      helperText,
+      disabled = false,
+      className = "",
+      wrapperClassName = "",
+      backgroundColor,
+      presentation = "dropdown"
+    } = props;
+    const triggerId = React9.useId();
+    const helperId = React9.useId();
+    const isControlled = props.value !== void 0;
+    const [internalValue, setInternalValue] = useState(
+      props.defaultValue ?? null
+    );
+    const committedValue = isControlled ? props.value ?? null : internalValue;
+    const [isOpen, setIsOpen] = useState(false);
+    const [isHelperDismissed, setIsHelperDismissed] = useState(false);
+    const [dropdownAlign, setDropdownAlign] = useState("left");
+    const [clockStep, setClockStep] = useState("hour");
+    const [isManualClockInput, setIsManualClockInput] = useState(false);
+    const [hasPendingValue, setHasPendingValue] = useState(committedValue != null);
+    const [pendingHour, setPendingHour] = useState(committedValue?.hour ?? 0);
+    const [pendingMinute, setPendingMinute] = useState(committedValue?.minute ?? 0);
+    const wrapperRef = useRef(null);
+    const innerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const hourColRef = useRef(null);
+    const minuteColRef = useRef(null);
+    React9.useImperativeHandle(ref, () => innerRef.current);
+    const visualStatus = helperText && isHelperDismissed ? "default" : status;
+    useEffect(() => {
+      if (!isOpen) return;
+      const h = committedValue?.hour ?? 0;
+      const m = committedValue?.minute ?? 0;
+      setPendingHour(h);
+      setPendingMinute(m);
+      setClockStep("hour");
+      setIsManualClockInput(false);
+      setHasPendingValue(committedValue != null);
+      if (presentation === "dropdown") {
+        requestAnimationFrame(() => {
+          scrollToSelected(hourColRef, h);
+          scrollToSelected(minuteColRef, m);
+        });
+      }
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen || presentation !== "dropdown" || !innerRef.current) return;
+      const rect = innerRef.current.getBoundingClientRect();
+      const dropdownW = 240;
+      setDropdownAlign(window.innerWidth - rect.right >= dropdownW ? "left" : "right");
+    }, [isOpen, presentation]);
+    useEffect(() => {
+      if (!isOpen || presentation !== "dropdown") return;
+      const handler = (e) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [isOpen, presentation]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const handler = (e) => {
+        if (e.key === "Escape") {
+          setIsOpen(false);
+          innerRef.current?.focus();
+        }
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [isOpen]);
+    const commit = useCallback(
+      (hour, minute) => {
+        const newValue = { hour, minute };
+        if (helperText) setIsHelperDismissed(true);
+        if (!isControlled) setInternalValue(newValue);
+        props.onChange?.(newValue);
+        setIsOpen(false);
+      },
+      [helperText, isControlled, props]
+    );
+    const handleClear = useCallback(() => {
+      setPendingHour(0);
+      setPendingMinute(0);
+      if (!isControlled) setInternalValue(null);
+      props.onChange?.(void 0);
+      setIsOpen(false);
+    }, [isControlled, props]);
+    const displayText = committedValue != null ? `${pad(committedValue.hour)}:${pad(committedValue.minute)}` : null;
+    const clockDisplayText = hasPendingValue ? `${pad(pendingHour)}:${pad(pendingMinute)}` : "--:--";
+    const closeClockDialog = () => {
+      setIsOpen(false);
+      innerRef.current?.focus();
+    };
+    const handleClockHourChange = (hour) => {
+      setPendingHour(hour);
+      setHasPendingValue(true);
+      setClockStep("minute");
+    };
+    const handleClockMinuteChange = (minute) => {
+      setPendingMinute(minute);
+      setHasPendingValue(true);
+    };
+    const handleManualClockChange = (part, value) => {
+      const numericValue = Number(value.replace(/\D/g, ""));
+      if (Number.isNaN(numericValue)) return;
+      if (part === "hour") {
+        setPendingHour(clampClockPart(numericValue, 23));
+      } else {
+        setPendingMinute(clampClockPart(numericValue, 59));
+      }
+      setHasPendingValue(true);
+    };
+    const clockHourButton = (hour, index, radius2) => {
+      const selected = hasPendingValue && pendingHour === hour;
+      const position = getClockPosition(index, radius2);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${pad(hour)} horas`,
+          onClick: () => handleClockHourChange(hour),
+          className: [
+            "rh-absolute rh-flex rh-h-8 rh-w-8 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-items-center rh-justify-center rh-rounded-full rh-text-sm rh-transition-colors rh-duration-150",
+            selected ? "rh-bg-primary rh-font-semibold rh-text-surface" : "rh-text-text hover:rh-bg-border/40"
+          ].join(" "),
+          style: position,
+          children: pad(hour)
+        },
+        hour
+      );
+    };
+    const clockMinuteButton = (minute, index) => {
+      const selected = hasPendingValue && pendingMinute === minute;
+      const position = getClockPosition(index, 102);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${pad(minute)} minutos`,
+          onClick: () => handleClockMinuteChange(minute),
+          className: [
+            "rh-absolute rh-flex rh-h-8 rh-w-8 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-items-center rh-justify-center rh-rounded-full rh-text-sm rh-transition-colors rh-duration-150",
+            selected ? "rh-bg-primary rh-font-semibold rh-text-surface" : "rh-text-text hover:rh-bg-border/40"
+          ].join(" "),
+          style: position,
+          children: pad(minute)
+        },
+        minute
+      );
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: wrapperRef,
+        className: ["rh-relative rh-flex rh-flex-col rh-gap-1 rh-font-body", wrapperClassName].filter(Boolean).join(" "),
+        children: [
+          label && /* @__PURE__ */ jsxs("label", { id: `${triggerId}-label`, className: "rh-flex rh-items-baseline rh-gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-medium rh-text-text", children: label }),
+            subtitle && /* @__PURE__ */ jsx("span", { className: `rh-text-sm ${getSubtitleClassName4(subtitle)}`, children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: innerRef,
+              id: triggerId,
+              type: "button",
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "dialog",
+              "aria-labelledby": label ? `${triggerId}-label` : void 0,
+              "aria-describedby": helperText ? helperId : void 0,
+              "aria-invalid": visualStatus === "error" || void 0,
+              "aria-disabled": disabled || void 0,
+              disabled,
+              onClick: () => !disabled && setIsOpen((o) => !o),
+              style: backgroundColor ? { backgroundColor } : void 0,
+              className: [
+                "rh-group rh-flex rh-items-center rh-justify-between rh-gap-2",
+                "rh-border rh-font-body",
+                !backgroundColor && "rh-bg-surface",
+                "rh-transition-colors rh-duration-150",
+                "rh-text-left rh-w-full",
+                statusClasses4[visualStatus],
+                radiusClasses6[radius],
+                sizeClasses7[size],
+                disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
+                className
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: [
+                      "rh-flex-1 rh-truncate",
+                      displayText ? "rh-text-text" : "rh-text-text-muted group-hover:rh-text-text"
+                    ].join(" "),
+                    children: displayText ?? placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx(ClockIcon, {})
+              ]
+            }
+          ),
+          isOpen && presentation === "dropdown" && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: dropdownRef,
+              role: "dialog",
+              "aria-label": "Seletor de hora",
+              className: [
+                "rh-absolute rh-z-50 rh-mt-1",
+                "rh-bg-surface rh-rounded-xs rh-border rh-border-border",
+                "rh-w-[240px]",
+                dropdownAlign === "left" ? "rh-left-0" : "rh-right-0"
+              ].filter(Boolean).join(" "),
+              style: {
+                top: "100%",
+                boxShadow: "0 0 9.6px 0 rgba(8, 11, 18, 0.08)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-border-b rh-border-border", children: [
+                  /* @__PURE__ */ jsx("div", { className: "rh-flex-1 rh-py-2 rh-text-center rh-text-xs rh-font-semibold rh-text-text-muted rh-uppercase rh-tracking-wide", children: "Hora" }),
+                  /* @__PURE__ */ jsx("div", { className: "rh-w-px rh-bg-border" }),
+                  /* @__PURE__ */ jsx("div", { className: "rh-flex-1 rh-py-2 rh-text-center rh-text-xs rh-font-semibold rh-text-text-muted rh-uppercase rh-tracking-wide", children: "Minuto" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "rh-flex", style: { height: 216 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: hourColRef,
+                      className: "rh-flex-1 rh-overflow-y-auto rh-py-1 rh-scrollbar-thin",
+                      style: { scrollbarWidth: "none" },
+                      children: HOURS.map((h) => {
+                        const selected = h === pendingHour;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setPendingHour(h),
+                            style: { height: ITEM_HEIGHT },
+                            className: [
+                              "rh-w-full rh-flex rh-items-center rh-justify-center rh-text-sm rh-transition-colors rh-duration-100",
+                              selected ? "rh-bg-primary rh-text-surface rh-font-semibold" : "rh-text-text hover:rh-bg-background"
+                            ].join(" "),
+                            children: pad(h)
+                          },
+                          h
+                        );
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "rh-w-px rh-bg-border rh-self-stretch" }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: minuteColRef,
+                      className: "rh-flex-1 rh-overflow-y-auto rh-py-1",
+                      style: { scrollbarWidth: "none" },
+                      children: MINUTES.map((m) => {
+                        const selected = m === pendingMinute;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setPendingMinute(m),
+                            style: { height: ITEM_HEIGHT },
+                            className: [
+                              "rh-w-full rh-flex rh-items-center rh-justify-center rh-text-sm rh-transition-colors rh-duration-100",
+                              selected ? "rh-bg-primary rh-text-surface rh-font-semibold" : "rh-text-text hover:rh-bg-background"
+                            ].join(" "),
+                            children: pad(m)
+                          },
+                          m
+                        );
+                      })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-justify-between rh-px-3 rh-py-2 rh-border-t rh-border-border", children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleClear,
+                      className: "rh-flex rh-items-center rh-gap-1.5 rh-text-sm rh-text-text rh-font-medium rh-px-2 rh-py-1.5 rh-rounded-sm hover:rh-bg-background rh-transition-colors rh-duration-150",
+                      children: [
+                        /* @__PURE__ */ jsx(EraserIcon2, {}),
+                        "Limpar"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => commit(pendingHour, pendingMinute),
+                      className: "rh-text-sm rh-font-medium rh-px-4 rh-py-1.5 rh-rounded-lg rh-bg-primary rh-text-surface hover:rh-opacity-90 rh-transition-opacity rh-duration-150",
+                      children: "Aplicar"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          isOpen && presentation === "clock" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "presentation",
+              className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
+              onMouseDown: (event) => {
+                if (event.target === event.currentTarget) closeClockDialog();
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: dropdownRef,
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-label": "Seletor de hora",
+                  className: "rh-flex rh-w-full rh-max-w-[360px] rh-flex-col rh-rounded-sm rh-bg-surface rh-p-6 rh-text-text",
+                  style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
+                    /* @__PURE__ */ jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
+                      isManualClockInput ? /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            "aria-label": "Hora",
+                            inputMode: "numeric",
+                            maxLength: 2,
+                            value: pad(pendingHour),
+                            onChange: (event) => handleManualClockChange("hour", event.target.value),
+                            className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "rh-text-3xl rh-font-semibold rh-text-text-muted", children: ":" }),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            "aria-label": "Minuto",
+                            inputMode: "numeric",
+                            maxLength: 2,
+                            value: pad(pendingMinute),
+                            onChange: (event) => handleManualClockChange("minute", event.target.value),
+                            className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-3xl rh-font-semibold", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setClockStep("hour"),
+                            className: [
+                              "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
+                              clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
+                            ].join(" "),
+                            children: clockDisplayText.slice(0, 2)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "rh-text-text-muted", children: ":" }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setClockStep("minute"),
+                            className: [
+                              "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
+                              clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
+                            ].join(" "),
+                            children: clockDisplayText.slice(3, 5)
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
+                          onClick: () => setIsManualClockInput((current) => !current),
+                          className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
+                          children: /* @__PURE__ */ jsx(PencilIcon, {})
+                        }
+                      )
+                    ] }),
+                    !isManualClockInput && /* @__PURE__ */ jsx("div", { className: "rh-mx-auto rh-mt-8 rh-flex rh-h-[256px] rh-w-[256px] rh-items-center rh-justify-center rh-rounded-full rh-bg-background", children: /* @__PURE__ */ jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
+                      clockStep === "hour" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        CLOCK_HOURS_OUTER.map(
+                          (hour, index) => clockHourButton(hour, index, 102)
+                        ),
+                        CLOCK_HOURS_INNER.map(
+                          (hour, index) => clockHourButton(hour, index, 68)
+                        )
+                      ] }) : CLOCK_MINUTES.map(
+                        (minute, index) => clockMinuteButton(minute, index)
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "rh-absolute rh-left-1/2 rh-top-1/2 rh-h-2 rh-w-2 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-rounded-full rh-bg-primary" })
+                    ] }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: closeClockDialog,
+                          className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
+                          children: "Cancelar"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            if (hasPendingValue) commit(pendingHour, pendingMinute);
+                            else closeClockDialog();
+                          },
+                          className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
+                          children: "OK"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            }
+          ),
+          helperText && !isHelperDismissed && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              id: helperId,
+              className: [
+                "rh-flex rh-items-center rh-gap-1 rh-text-xs",
+                helperStatusClasses4[visualStatus]
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsx(WarningCircleIcon, {}),
+                helperText
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 var variantClasses = {
   light: "rh-bg-surface rh-text-text rh-border rh-border-border rh-shadow-md",
   default: "rh-bg-primary/10 rh-text-text rh-border rh-border-primary/20 rh-shadow-md",
@@ -2760,7 +3305,7 @@ var arrowVariantClasses = {
   default: "rh-border-primary/20 rh-bg-primary/10",
   dark: "rh-bg-primary"
 };
-var sizeClasses7 = {
+var sizeClasses8 = {
   sm: "rh-px-3 rh-py-1.5 rh-text-xs",
   md: "rh-px-4 rh-py-3 rh-text-sm"
 };
@@ -2891,7 +3436,7 @@ var Tooltip = forwardRef(
                 "rh-absolute rh-z-50 rh-w-max rh-max-w-xs rh-rounded-xs",
                 tooltipPlacementClasses[placement],
                 variantClasses[variant],
-                sizeClasses7[size],
+                sizeClasses8[size],
                 className
               ].filter(Boolean).join(" "),
               children: [
@@ -2992,7 +3537,7 @@ function getAvatarColors(name) {
   const index = hash % AVATAR_COLORS.length;
   return AVATAR_COLORS[index];
 }
-var sizeClasses8 = {
+var sizeClasses9 = {
   sm: "rh-w-8 rh-h-8 rh-text-xs",
   md: "rh-w-10 rh-h-10 rh-text-sm",
   lg: "rh-w-12 rh-h-12 rh-text-base",
@@ -3027,7 +3572,7 @@ var Avatar = forwardRef(function Avatar2({ src, alt = "", initials, size = "md",
         "rh-inline-flex rh-items-center rh-justify-center rh-shrink-0 rh-overflow-hidden",
         avatarColors ? "" : "rh-bg-primary rh-text-surface",
         "rh-font-display rh-font-medium rh-select-none",
-        sizeClasses8[size],
+        sizeClasses9[size],
         variantClasses2[variant],
         className
       ].filter(Boolean).join(" "),
@@ -3094,7 +3639,7 @@ var hoverInactivePresetClasses = {
   info: "hover:rh-bg-info/20 hover:rh-border-info/50",
   neutral: "hover:rh-bg-neutral/20 hover:rh-border-neutral/50"
 };
-var sizeClasses9 = {
+var sizeClasses10 = {
   sm: "rh-text-xs rh-px-2 rh-py-0.5 rh-gap-1",
   md: "rh-text-sm rh-px-2.5 rh-py-1 rh-gap-1.5",
   lg: "rh-text-sm rh-px-3 rh-py-1.5 rh-gap-1.5"
@@ -3141,7 +3686,7 @@ var Tag = forwardRef(function Tag2({
         "rh-transition-colors rh-duration-150",
         "rh-cursor-pointer",
         clickable ? "rh-cursor-pointer" : "",
-        sizeClasses9[size],
+        sizeClasses10[size],
         colorClasses3,
         hoverClasses,
         disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -3158,16 +3703,16 @@ var Tag = forwardRef(function Tag2({
     }
   );
 });
-var statusClasses4 = {
+var statusClasses5 = {
   default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring focus-within:rh-ring-offset-2",
   error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger focus-within:rh-ring-offset-2"
 };
-var sizeClasses10 = {
+var sizeClasses11 = {
   sm: "rh-min-h-[36px] rh-text-sm rh-px-2 rh-py-1",
   md: "rh-h-[44px] rh-text-sm rh-px-2 rh-py-[6px]",
   lg: "rh-min-h-[52px] rh-text-base rh-px-3 rh-py-2"
 };
-var radiusClasses6 = {
+var radiusClasses7 = {
   none: "rh-rounded-none",
   xxs: "rh-rounded-xxs",
   xs: "rh-rounded-xs",
@@ -3177,7 +3722,7 @@ var radiusClasses6 = {
   xl: "rh-rounded-xl",
   full: "rh-rounded-full"
 };
-var helperStatusClasses4 = {
+var helperStatusClasses5 = {
   default: "rh-text-text-muted",
   error: "rh-text-danger"
 };
@@ -3196,7 +3741,7 @@ var addButtonSizeClasses = {
   md: "rh-w-5 rh-h-5",
   lg: "rh-w-5 rh-h-5"
 };
-var getSubtitleClassName4 = (subtitle) => subtitle.trim() === "*" ? "rh-text-danger" : "rh-text-text-muted";
+var getSubtitleClassName5 = (subtitle) => subtitle.trim() === "*" ? "rh-text-danger" : "rh-text-text-muted";
 var TagInput = forwardRef(function TagInput2({
   label,
   subtitle,
@@ -3253,7 +3798,7 @@ var TagInput = forwardRef(function TagInput2({
       children: [
         label && /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
           /* @__PURE__ */ jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: `rh-text-sm ${getSubtitleClassName4(subtitle)}`, children: subtitle })
+          subtitle && /* @__PURE__ */ jsx("span", { className: `rh-text-sm ${getSubtitleClassName5(subtitle)}`, children: subtitle })
         ] }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -3263,9 +3808,9 @@ var TagInput = forwardRef(function TagInput2({
               "rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
               "rh-border rh-bg-surface rh-font-body",
               "rh-transition-colors rh-duration-150",
-              statusClasses4[status],
-              radiusClasses6[radius],
-              sizeClasses10[size],
+              statusClasses5[status],
+              radiusClasses7[radius],
+              sizeClasses11[size],
               disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "rh-cursor-pointer",
               className
             ].filter(Boolean).join(" "),
@@ -3428,7 +3973,7 @@ var TagInput = forwardRef(function TagInput2({
             id: `${inputId}-helper`,
             className: [
               "rh-flex rh-items-center rh-gap-1 rh-text-xs",
-              helperStatusClasses4[status]
+              helperStatusClasses5[status]
             ].join(" "),
             children: helperText
           }
@@ -3535,12 +4080,12 @@ var PRESET_COLORS5 = /* @__PURE__ */ new Set([
   "info"
 ]);
 var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
-var sizeClasses11 = {
+var sizeClasses12 = {
   sm: { container: "rh-h-8", button: "rh-px-2 rh-text-xs" },
   md: { container: "rh-h-9", button: "rh-px-3 rh-text-sm" },
   lg: { container: "rh-h-10", button: "rh-px-4 rh-text-sm" }
 };
-var radiusClasses7 = {
+var radiusClasses8 = {
   none: "rh-rounded-none",
   xs: "rh-rounded-xs",
   sm: "rh-rounded-sm",
@@ -3573,8 +4118,8 @@ function ToggleGroupInner({
       className: [
         "rh-inline-flex rh-items-center rh-bg-muted rh-overflow-hidden",
         "rh-p-1 rh-gap-0.5",
-        radiusClasses7[radius],
-        sizeClasses11[size].container,
+        radiusClasses8[radius],
+        sizeClasses12[size].container,
         disabled ? "rh-opacity-50 rh-cursor-not-allowed" : "",
         className
       ].filter(Boolean).join(" "),
@@ -3596,8 +4141,8 @@ function ToggleGroupInner({
               "rh-border-0 rh-font-display rh-font-medium",
               "rh-transition-all rh-duration-150",
               "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
-              radiusClasses7[radius],
-              sizeClasses11[size].button,
+              radiusClasses8[radius],
+              sizeClasses12[size].button,
               isActive ? "rh-bg-surface rh-text-text rh-shadow-sm" : "rh-bg-transparent rh-text-text-muted",
               !isActive && !isDisabled ? "hover:rh-bg-surface/50" : "",
               isDisabled ? "rh-cursor-not-allowed rh-pointer-events-none" : "rh-cursor-pointer"
@@ -3620,7 +4165,7 @@ var variantClasses3 = {
   outlined: "rh-bg-surface rh-border rh-border-border rh-shadow-none",
   filled: "rh-bg-background rh-border-0 rh-shadow-none"
 };
-var radiusClasses8 = {
+var radiusClasses9 = {
   none: "rh-rounded-none",
   xs: "rh-rounded-xs",
   sm: "rh-rounded-sm",
@@ -3655,7 +4200,7 @@ var CardRoot = forwardRef(function Card({
       className: [
         "rh-font-body rh-transition-all rh-duration-150",
         variantClasses3[variant],
-        radiusClasses8[radius],
+        radiusClasses9[radius],
         paddingClasses[padding],
         isInteractive ? "rh-cursor-pointer hover:rh-shadow-lg hover:rh-scale-[1.01] active:rh-scale-[0.99]" : "",
         disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
@@ -3708,7 +4253,7 @@ var PRESET_COLORS6 = /* @__PURE__ */ new Set([
   "info"
 ]);
 var isPresetColor6 = (color) => PRESET_COLORS6.has(color);
-var sizeClasses12 = {
+var sizeClasses13 = {
   xs: "rh-w-3 rh-h-3",
   sm: "rh-w-4 rh-h-4",
   md: "rh-w-6 rh-h-6",
@@ -3736,7 +4281,7 @@ var Spinner = forwardRef(function Spinner2({ size = "md", color = "primary", lab
       "aria-label": label,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center",
-        sizeClasses12[size],
+        sizeClasses13[size],
         colorClass,
         className
       ].filter(Boolean).join(" "),
@@ -4189,7 +4734,7 @@ var CustomSelect = ({
     )
   ] });
 };
-var sizeClasses13 = {
+var sizeClasses14 = {
   sm: { cell: "rh-px-2 rh-py-2 rh-text-xs", header: "rh-px-2 rh-py-2 rh-text-xs" },
   md: { cell: "rh-px-3 rh-py-3 rh-text-sm", header: "rh-px-3 rh-py-3 rh-text-xs" },
   lg: { cell: "rh-px-4 rh-py-4 rh-text-sm", header: "rh-px-4 rh-py-3 rh-text-sm" }
@@ -4344,7 +4889,7 @@ function TableInner({
                   ...rowPaddingStyle
                 },
                 className: [
-                  rowPadding ? "" : sizeClasses13[size].header,
+                  rowPadding ? "" : sizeClasses14[size].header,
                   alignClasses[column.align || "left"],
                   `rh-font-semibold rh-whitespace-nowrap ${headerTextClassName || "rh-text-text-muted"}`,
                   stickyHeader ? "rh-sticky rh-top-0 rh-bg-surface rh-z-10" : "",
@@ -4425,7 +4970,7 @@ function TableInner({
                 {
                   style: { width: column.width, maxWidth: column.maxWidth, ...rowPaddingStyle },
                   className: [
-                    rowPadding ? "" : sizeClasses13[size].cell,
+                    rowPadding ? "" : sizeClasses14[size].cell,
                     alignClasses[column.align || "left"],
                     "rh-text-text"
                   ].filter(Boolean).join(" "),
@@ -4919,6 +5464,6 @@ var GridItem = forwardRef(
   }
 );
 
-export { Avatar, Button, Card2 as Card, CardContent, CardFooter, CardHeader, CaretLeftIcon, CaretRightIcon, Checkbox, CloseIcon, Container, DateSelect, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, Pagination, PlusIcon, ProgressBar, Radio, RadioGroup, RadioOption, RehagroProvider, SearchIcon, Select, Spinner, SuccessIcon, Table, Tag, TagInput, TextInput, Toast, ToastContainer, ToastProvider, ToggleGroup, Tooltip, Typography, WarningIcon, useToast };
+export { Avatar, Button, Card2 as Card, CardContent, CardFooter, CardHeader, CaretLeftIcon, CaretRightIcon, Checkbox, CloseIcon, Container, DateSelect, DeleteIcon, EditIcon, ErrorIcon, GridContainer, GridItem, IconButton, InfoIcon, NeutralIcon, Pagination, PlusIcon, ProgressBar, Radio, RadioGroup, RadioOption, RehagroProvider, SearchIcon, Select, Spinner, SuccessIcon, Table, Tag, TagInput, TextInput, TimePicker, Toast, ToastContainer, ToastProvider, ToggleGroup, Tooltip, Typography, WarningIcon, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map