@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/DateTime/DatePicker.js

@@ -0,0 +1,124 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { ptBR } from "date-fns/locale";
+import { DayPicker } from "react-day-picker";
+import { useTranslation } from "react-i18next";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "../UI/ControlledPopover.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { formatDate } from "../../helpers/dateHelpers.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import ControlledInput from "../Form/ControlledInput.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import "react-day-picker/style.css";
+const DATE_PICKER_TIMEZONE = "UTC";
+function formatDateToYYYYMMDD(date) {
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  const year = date.getUTCFullYear();
+  return `${year}-${month}-${day}`;
+}
+function parseDate(dateString) {
+  const dateParts = dateString.split("T")[0].split("-");
+  const year = parseInt(dateParts[0], 10);
+  const month = parseInt(dateParts[1], 10) - 1;
+  const day = parseInt(dateParts[2], 10);
+  const formattedDate = new Date(year, month, day);
+  return formattedDate;
+}
+const DatePicker = ({
+  id,
+  label,
+  placeholder,
+  disabled,
+  onUpdate,
+  minDate,
+  maxDate,
+  useIcon,
+  valueRender,
+  startValue,
+  onFocus,
+  inputClassName
+}) => {
+  const { t } = useTranslation("ui");
+  const [date, setDate] = useState(startValue || void 0);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const startTime = startValue ? startValue.getTime() : null;
+  const syncedStartTimeRef = useRef(startTime);
+  useEffect(() => {
+    if (syncedStartTimeRef.current === startTime) return;
+    syncedStartTimeRef.current = startTime;
+    setDate(startTime === null ? void 0 : new Date(startTime));
+  }, [startTime]);
+  const handleSelectedDate = (date2) => {
+    setDate(date2);
+    if (date2) {
+      const formattedDate = formatDateToYYYYMMDD(date2);
+      onUpdate(formattedDate);
+    } else {
+      onUpdate(void 0);
+    }
+    setPopoverOpen(false);
+  };
+  const togglePopover = () => {
+    setPopoverOpen(!popoverOpen);
+  };
+  const clear = () => {
+    handleSelectedDate(void 0);
+  };
+  const beforeMatcher = {
+    before: minDate ? parseDate(String(minDate)) : new Date(2024, 1, 1)
+  };
+  const afterMatcher = {
+    after: maxDate ? parseDate(String(maxDate)) : new Date(2030, 1, 1)
+  };
+  return /* @__PURE__ */ jsxs(ControlledPopoverRoot, { placement: "bottom", open: popoverOpen, handler: setPopoverOpen, children: [
+    /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: /* @__PURE__ */ jsxs("div", { className: "zIndexMax flex w-full flex-row items-center gap-x-1", onFocus, children: [
+      useIcon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: "calendar_month", size: 20 }),
+      valueRender ? valueRender() : /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx(
+          ControlledInput,
+          {
+            id,
+            readOnly: true,
+            "aria-label": label,
+            placeholder: placeholder ?? label,
+            className: mergeClasses("focus:border-border-strong", inputClassName),
+            disabled,
+            value: date ? formatDate(date) : "",
+            onClick: togglePopover
+          }
+        ),
+        date && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dates.clearSelection"), children: /* @__PURE__ */ jsx("div", { onClick: clear, className: "absolute inset-y-0 right-4 flex cursor-pointer items-center", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close_small", size: 20, color: "rgb(var(--color-foreground-subtle))" }) }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(ControlledPopoverContent, { className: "zIndexMax m-0 p-0", children: /* @__PURE__ */ jsx(
+      DayPicker,
+      {
+        ISOWeek: true,
+        showOutsideDays: true,
+        captionLayout: "label",
+        dir: "ltr",
+        firstWeekContainsDate: 1,
+        mode: "single",
+        numberOfMonths: 1,
+        timeZone: DATE_PICKER_TIMEZONE,
+        weekStartsOn: 1,
+        locale: ptBR,
+        selected: date,
+        defaultMonth: date,
+        disabled: [beforeMatcher, afterMatcher],
+        onSelect: handleSelectedDate,
+        className: "p-3",
+        classNames: {
+          today: `rounded-md bg-muted-active text-foreground`,
+          selected: `rounded-md bg-ink text-white hover:bg-ink hover:text-white focus:bg-ink focus:text-white`,
+          chevron: `fill-foreground`
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  DatePicker as default
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DateTime/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DateTime/DatePicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { ptBR } from 'date-fns/locale';\nimport { DateAfter, DateBefore, DayPicker } from 'react-day-picker';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  ControlledPopoverContent,\n  ControlledPopoverHandler,\n  ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatDate } from '@/helpers/dateHelpers';\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nimport ControlledInput from '../Form/ControlledInput';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport 'react-day-picker/style.css';\n\nconst DATE_PICKER_TIMEZONE = 'UTC';\n\nexport interface IDatePickerProps {\n  /** Reaches the field itself, so a `FieldLabel` can point at it. */\n  id?: string;\n  label?: string;\n  /** Text shown inside the empty input. Falls back to the label for the historical behavior. */\n  placeholder?: string;\n  onUpdate: (value: string | undefined) => void;\n  disabled?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  useIcon?: boolean;\n  valueRender?: () => React.ReactNode;\n  startValue?: Date;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  /** Extra classes for the inner input, which is a `ControlledInput` like any other field. */\n  inputClassName?: string;\n}\n\nfunction formatDateToYYYYMMDD(date: Date) {\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const year = date.getUTCFullYear();\n  return `${year}-${month}-${day}`;\n}\n\nfunction parseDate(dateString: string): Date {\n  const dateParts = dateString.split('T')[0].split('-');\n  const year = parseInt(dateParts[0], 10);\n  const month = parseInt(dateParts[1], 10) - 1;\n  const day = parseInt(dateParts[2], 10);\n\n  const formattedDate = new Date(year, month, day);\n  return formattedDate;\n}\n\nconst DatePicker: React.FC<IDatePickerProps> = ({\n  id,\n  label,\n  placeholder,\n  disabled,\n  onUpdate,\n  minDate,\n  maxDate,\n  useIcon,\n  valueRender,\n  startValue,\n  onFocus,\n  inputClassName,\n}) => {\n  const { t } = useTranslation('ui');\n  const [date, setDate] = useState<Date | undefined>(startValue || undefined);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  // Hosts pass a freshly parsed Date on every render, so the sync compares\n  // timestamps. Without this the picker ignored external changes (clearing\n  // filters, applying a preset) and callers had to force a remount via `key`.\n  const startTime = startValue ? startValue.getTime() : null;\n  const syncedStartTimeRef = useRef(startTime);\n\n  useEffect(() => {\n    if (syncedStartTimeRef.current === startTime) return;\n    syncedStartTimeRef.current = startTime;\n    setDate(startTime === null ? undefined : new Date(startTime));\n  }, [startTime]);\n\n  const handleSelectedDate = (date: Date | undefined) => {\n    setDate(date);\n    if (date) {\n      const formattedDate = formatDateToYYYYMMDD(date);\n      onUpdate(formattedDate);\n    } else {\n      onUpdate(undefined);\n    }\n    setPopoverOpen(false);\n  };\n\n  const togglePopover = () => {\n    setPopoverOpen(!popoverOpen);\n  };\n\n  const clear = () => {\n    handleSelectedDate(undefined);\n  };\n\n  const beforeMatcher: DateBefore = {\n    before: minDate ? parseDate(String(minDate)) : new Date(2024, 1, 1),\n  };\n  const afterMatcher: DateAfter = {\n    after: maxDate ? parseDate(String(maxDate)) : new Date(2030, 1, 1),\n  };\n\n  return (\n    <ControlledPopoverRoot placement=\"bottom\" open={popoverOpen} handler={setPopoverOpen}>\n      <ControlledPopoverHandler>\n        <div className=\"zIndexMax flex w-full flex-row items-center gap-x-1\" onFocus={onFocus}>\n          {useIcon && <MaterialSymbol icon=\"calendar_month\" size={20} />}\n          {valueRender ? (\n            valueRender()\n          ) : (\n            <div className=\"relative w-full\">\n              <ControlledInput\n                id={id}\n                readOnly\n                aria-label={label}\n                placeholder={placeholder ?? label}\n                className={mergeClasses('focus:border-border-strong', inputClassName)}\n                disabled={disabled}\n                value={date ? formatDate(date) : ''}\n                onClick={togglePopover}\n              />\n\n              {date && (\n                <ControlledTooltip content={t('dates.clearSelection')}>\n                  <div onClick={clear} className=\"absolute inset-y-0 right-4 flex cursor-pointer items-center\">\n                    <MaterialSymbol icon=\"close_small\" size={20} color=\"rgb(var(--color-foreground-subtle))\" />\n                  </div>\n                </ControlledTooltip>\n              )}\n            </div>\n          )}\n        </div>\n      </ControlledPopoverHandler>\n      <ControlledPopoverContent className=\"zIndexMax m-0 p-0\">\n        <DayPicker\n          ISOWeek\n          showOutsideDays\n          captionLayout=\"label\"\n          dir=\"ltr\"\n          firstWeekContainsDate={1}\n          mode=\"single\"\n          numberOfMonths={1}\n          timeZone={DATE_PICKER_TIMEZONE}\n          weekStartsOn={1}\n          locale={ptBR}\n          selected={date}\n          defaultMonth={date}\n          disabled={[beforeMatcher, afterMatcher]}\n          onSelect={handleSelectedDate}\n          className=\"p-3\"\n          classNames={{\n            today: `rounded-md bg-muted-active text-foreground`,\n            selected: `rounded-md bg-ink text-white hover:bg-ink hover:text-white focus:bg-ink focus:text-white`,\n            chevron: `fill-foreground`,\n          }}\n        />\n      </ControlledPopoverContent>\n    </ControlledPopoverRoot>\n  );\n};\n\nexport default DatePicker;\n"],"names":["date"],"mappings":"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"}

package/dist/components/DateTime/DateRangePicker.d.ts

@@ -0,0 +1,21 @@
+import { DateRange } from 'react-day-picker';
+import * as React from 'react';
+interface IDateRangePickerProps {
+    /** Reaches the field itself, so a `FieldLabel` can point at it. */
+    id?: string;
+    label?: string;
+    onUpdate: (value: {
+        from: string | undefined;
+        to: string | undefined;
+    }) => void;
+    disabled?: boolean;
+    minDate?: string;
+    maxDate?: string;
+    useIcon?: boolean;
+    valueRender?: () => React.ReactNode;
+    startValue?: DateRange;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+declare const DateRangePicker: React.FC<IDateRangePickerProps>;
+export default DateRangePicker;

package/dist/components/DateTime/DateRangePicker.js

@@ -0,0 +1,208 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+import { ptBR } from "date-fns/locale";
+import { getDefaultClassNames, DayPicker } from "react-day-picker";
+import { useTranslation } from "react-i18next";
+import { ControlledPopoverRoot, ControlledPopoverHandler, ControlledPopoverContent } from "../UI/ControlledPopover.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { formatDate } from "../../helpers/dateHelpers.js";
+import ControlledInput from "../Form/ControlledInput.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import "react-day-picker/style.css";
+const DATE_RANGE_PICKER_TIMEZONE = "UTC";
+const CALENDAR_THEME_VARIABLES = [
+  "![--rdp-accent-background-color:theme(colors.purple.50)]",
+  "![--rdp-accent-color:theme(colors.purple.500)]",
+  "![--rdp-day-height:2.5rem]",
+  "![--rdp-day-width:2.5rem]",
+  "![--rdp-day_button-height:2.25rem]",
+  "![--rdp-day_button-width:2.25rem]",
+  "![--rdp-range_middle-color:theme(colors.purple.700)]"
+].join(" ");
+const calendarClassNames = getDefaultClassNames();
+function formatDateToYYYYMMDD(date) {
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  const year = date.getUTCFullYear();
+  return `${year}-${month}-${day}`;
+}
+function parseDate(dateString) {
+  const dateParts = dateString.split("T")[0].split("-");
+  const year = parseInt(dateParts[0], 10);
+  const month = parseInt(dateParts[1], 10) - 1;
+  const day = parseInt(dateParts[2], 10);
+  const formattedDate = new Date(year, month, day);
+  return formattedDate;
+}
+const DateRangePicker = ({
+  id,
+  label,
+  disabled,
+  onUpdate,
+  minDate,
+  maxDate,
+  useIcon,
+  valueRender,
+  startValue,
+  onFocus
+}) => {
+  const { t } = useTranslation("ui");
+  const [range, setRange] = useState(startValue);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  useEffect(() => {
+    setRange(startValue);
+  }, [startValue]);
+  const handleSelectedRange = (newRange) => {
+    if (!newRange) {
+      setRange(void 0);
+      onUpdate({ from: void 0, to: void 0 });
+      return;
+    }
+    if (!range?.from) {
+      setRange({ from: newRange.from, to: void 0 });
+      if (newRange.from) {
+        onUpdate({
+          from: formatDateToYYYYMMDD(newRange.from),
+          to: void 0
+        });
+      }
+      return;
+    }
+    if (range.from && !range.to && newRange.to) {
+      const finalRange = {
+        from: range.from,
+        to: newRange.to
+      };
+      setRange(finalRange);
+      onUpdate({
+        from: formatDateToYYYYMMDD(finalRange.from),
+        to: formatDateToYYYYMMDD(finalRange.to)
+      });
+      setPopoverOpen(false);
+      return;
+    }
+    setRange({ from: newRange.from, to: void 0 });
+    if (newRange.from) {
+      onUpdate({
+        from: formatDateToYYYYMMDD(newRange.from),
+        to: void 0
+      });
+    }
+  };
+  const togglePopover = () => {
+    setPopoverOpen(!popoverOpen);
+  };
+  const clear = (e) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    const emptyRange = void 0;
+    setRange(emptyRange);
+    onUpdate({ from: void 0, to: void 0 });
+    setPopoverOpen(false);
+  };
+  const beforeMatcher = {
+    before: minDate ? parseDate(String(minDate)) : new Date(2024, 1, 1)
+  };
+  const afterMatcher = {
+    after: maxDate ? parseDate(String(maxDate)) : new Date(2030, 1, 1)
+  };
+  const displayValue = () => {
+    if (!range?.from) return "";
+    if (!range.to) return `${formatDate(range.from)} - ${t("dates.selectEndDate")}`;
+    return `${formatDate(range.from)} - ${formatDate(range.to)}`;
+  };
+  const getFooter = () => {
+    if (!range?.from) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-foreground-muted", children: [
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon: "info", size: 16, color: "rgb(var(--color-foreground-subtle))" }),
+        /* @__PURE__ */ jsx("span", { children: t("dates.selectStartDate") })
+      ] }) });
+    }
+    if (!range.to) {
+      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-brand-emphasis", children: [
+        /* @__PURE__ */ jsx(MaterialSymbol, { icon: "schedule", size: 16, color: "rgb(var(--color-primary))" }),
+        /* @__PURE__ */ jsx("span", { children: t("dateRangePicker.nowSelectEndDate") })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-success-emphasis", children: [
+      /* @__PURE__ */ jsx(MaterialSymbol, { icon: "check_circle", size: 16, color: "rgb(var(--color-success))" }),
+      /* @__PURE__ */ jsx("span", { children: t("dates.periodSelectedSuccess") })
+    ] }) });
+  };
+  return /* @__PURE__ */ jsxs(ControlledPopoverRoot, { placement: "bottom", open: popoverOpen, handler: setPopoverOpen, children: [
+    /* @__PURE__ */ jsx(ControlledPopoverHandler, { children: /* @__PURE__ */ jsxs("div", { className: "zIndexMax flex w-full flex-row items-center gap-x-2", onFocus, children: [
+      useIcon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: "calendar_month", size: 20 }),
+      valueRender ? valueRender() : /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsx(
+          ControlledInput,
+          {
+            id,
+            readOnly: true,
+            "aria-label": label,
+            error: Boolean(range?.from && !range.to),
+            placeholder: label || t("dateRangePicker.selectPeriod"),
+            className: classNames("w-full cursor-pointer truncate text-left", range?.from && "!pr-9"),
+            disabled,
+            value: displayValue(),
+            onClick: togglePopover
+          }
+        ),
+        range?.from && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("dates.clearPeriod"), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              clear(e);
+            },
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            className: "absolute inset-y-0 right-2 z-10 flex cursor-pointer items-center",
+            children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close_small", size: 20, color: "rgb(var(--color-foreground-subtle))" })
+          }
+        ) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(ControlledPopoverContent, { className: "zIndexMax overflow-hidden rounded-xl border-0 p-0 shadow-2xl", children: /* @__PURE__ */ jsx("div", { className: "bg-surface", children: /* @__PURE__ */ jsx(
+      DayPicker,
+      {
+        ISOWeek: true,
+        showOutsideDays: true,
+        captionLayout: "label",
+        dir: "ltr",
+        firstWeekContainsDate: 1,
+        mode: "range",
+        numberOfMonths: 2,
+        timeZone: DATE_RANGE_PICKER_TIMEZONE,
+        weekStartsOn: 1,
+        locale: ptBR,
+        selected: range,
+        defaultMonth: range?.from || /* @__PURE__ */ new Date(),
+        disabled: [beforeMatcher, afterMatcher],
+        onSelect: handleSelectedRange,
+        className: classNames("p-4", CALENDAR_THEME_VARIABLES),
+        classNames: {
+          month_caption: `${calendarClassNames.month_caption} items-center text-brand-emphasis`,
+          caption_label: `${calendarClassNames.caption_label} text-base font-semibold`,
+          weekday: `${calendarClassNames.weekday} text-foreground-subtle`,
+          day: `${calendarClassNames.day} text-sm text-foreground transition-colors hover:bg-brand-soft hover:text-brand-emphasis`,
+          day_button: `${calendarClassNames.day_button} focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border`,
+          selected: "text-sm font-semibold",
+          today: `${calendarClassNames.today} font-semibold`,
+          outside: `${calendarClassNames.outside} text-foreground-faint`,
+          disabled: `${calendarClassNames.disabled} text-foreground-faint`
+        },
+        footer: /* @__PURE__ */ jsx("div", { className: "rounded-b-xl border-t border-border-subtle bg-muted", children: getFooter() })
+      }
+    ) }) })
+  ] });
+};
+export {
+  DateRangePicker as default
+};
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/components/DateTime/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sources":["../../../src/components/DateTime/DateRangePicker.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { ptBR } from 'date-fns/locale';\nimport { DateAfter, DateBefore, DateRange, DayPicker, getDefaultClassNames } from 'react-day-picker';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  ControlledPopoverContent,\n  ControlledPopoverHandler,\n  ControlledPopoverRoot,\n} from '@/components/UI/ControlledPopover';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatDate } from '@/helpers/dateHelpers';\n\nimport ControlledInput from '../Form/ControlledInput';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport 'react-day-picker/style.css';\n\nconst DATE_RANGE_PICKER_TIMEZONE = 'UTC';\n\n/**\n * react-day-picker paints the selection through its own CSS variables, so the brand\n * color has to be injected there: a Tailwind background class on the day cell loses\n * to the library's compound selectors. The important modifier is required because the\n * library stylesheet ships in a lazily injected chunk, so it wins any specificity tie\n * against these utilities.\n */\nconst CALENDAR_THEME_VARIABLES = [\n  '![--rdp-accent-background-color:theme(colors.purple.50)]',\n  '![--rdp-accent-color:theme(colors.purple.500)]',\n  '![--rdp-day-height:2.5rem]',\n  '![--rdp-day-width:2.5rem]',\n  '![--rdp-day_button-height:2.25rem]',\n  '![--rdp-day_button-width:2.25rem]',\n  '![--rdp-range_middle-color:theme(colors.purple.700)]',\n].join(' ');\n\nconst calendarClassNames = getDefaultClassNames();\n\ninterface IDateRangePickerProps {\n  /** Reaches the field itself, so a `FieldLabel` can point at it. */\n  id?: string;\n  label?: string;\n  onUpdate: (value: { from: string | undefined; to: string | undefined }) => void;\n  disabled?: boolean;\n  minDate?: string;\n  maxDate?: string;\n  useIcon?: boolean;\n  valueRender?: () => React.ReactNode;\n  startValue?: DateRange;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nfunction formatDateToYYYYMMDD(date: Date) {\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const year = date.getUTCFullYear();\n  return `${year}-${month}-${day}`;\n}\n\nfunction parseDate(dateString: string): Date {\n  const dateParts = dateString.split('T')[0].split('-');\n  const year = parseInt(dateParts[0], 10);\n  const month = parseInt(dateParts[1], 10) - 1;\n  const day = parseInt(dateParts[2], 10);\n\n  const formattedDate = new Date(year, month, day);\n  return formattedDate;\n}\n\nconst DateRangePicker: React.FC<IDateRangePickerProps> = ({\n  id,\n  label,\n  disabled,\n  onUpdate,\n  minDate,\n  maxDate,\n  useIcon,\n  valueRender,\n  startValue,\n  onFocus,\n}) => {\n  const { t } = useTranslation('ui');\n  const [range, setRange] = useState<DateRange | undefined>(startValue);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  useEffect(() => {\n    setRange(startValue);\n  }, [startValue]);\n\n  const handleSelectedRange = (newRange: DateRange | undefined) => {\n    if (!newRange) {\n      setRange(undefined);\n      onUpdate({ from: undefined, to: undefined });\n      return;\n    }\n\n    if (!range?.from) {\n      setRange({ from: newRange.from, to: undefined });\n      if (newRange.from) {\n        onUpdate({\n          from: formatDateToYYYYMMDD(newRange.from),\n          to: undefined,\n        });\n      }\n      return;\n    }\n\n    if (range.from && !range.to && newRange.to) {\n      const finalRange = {\n        from: range.from,\n        to: newRange.to,\n      };\n      setRange(finalRange);\n      onUpdate({\n        from: formatDateToYYYYMMDD(finalRange.from),\n        to: formatDateToYYYYMMDD(finalRange.to),\n      });\n      setPopoverOpen(false);\n      return;\n    }\n\n    setRange({ from: newRange.from, to: undefined });\n    if (newRange.from) {\n      onUpdate({\n        from: formatDateToYYYYMMDD(newRange.from),\n        to: undefined,\n      });\n    }\n  };\n\n  const togglePopover = () => {\n    setPopoverOpen(!popoverOpen);\n  };\n\n  const clear = (e?: React.MouseEvent) => {\n    if (e) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n    const emptyRange = undefined;\n    setRange(emptyRange);\n    onUpdate({ from: undefined, to: undefined });\n    setPopoverOpen(false);\n  };\n\n  const beforeMatcher: DateBefore = {\n    before: minDate ? parseDate(String(minDate)) : new Date(2024, 1, 1),\n  };\n  const afterMatcher: DateAfter = {\n    after: maxDate ? parseDate(String(maxDate)) : new Date(2030, 1, 1),\n  };\n\n  const displayValue = () => {\n    if (!range?.from) return '';\n    if (!range.to) return `${formatDate(range.from)} - ${t('dates.selectEndDate')}`;\n    return `${formatDate(range.from)} - ${formatDate(range.to)}`;\n  };\n\n  const getFooter = () => {\n    if (!range?.from) {\n      return (\n        <div className=\"flex items-center justify-center py-2\">\n          <div className=\"flex items-center gap-2 text-sm text-foreground-muted\">\n            <MaterialSymbol icon=\"info\" size={16} color=\"rgb(var(--color-foreground-subtle))\" />\n            <span>{t('dates.selectStartDate')}</span>\n          </div>\n        </div>\n      );\n    }\n    if (!range.to) {\n      return (\n        <div className=\"flex items-center justify-center py-2\">\n          <div className=\"flex items-center gap-2 text-sm text-brand-emphasis\">\n            <MaterialSymbol icon=\"schedule\" size={16} color=\"rgb(var(--color-primary))\" />\n            <span>{t('dateRangePicker.nowSelectEndDate')}</span>\n          </div>\n        </div>\n      );\n    }\n    return (\n      <div className=\"flex items-center justify-center py-2\">\n        <div className=\"flex items-center gap-2 text-sm text-success-emphasis\">\n          <MaterialSymbol icon=\"check_circle\" size={16} color=\"rgb(var(--color-success))\" />\n          <span>{t('dates.periodSelectedSuccess')}</span>\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <ControlledPopoverRoot placement=\"bottom\" open={popoverOpen} handler={setPopoverOpen}>\n      <ControlledPopoverHandler>\n        <div className=\"zIndexMax flex w-full flex-row items-center gap-x-2\" onFocus={onFocus}>\n          {useIcon && <MaterialSymbol icon=\"calendar_month\" size={20} />}\n\n          {valueRender ? (\n            valueRender()\n          ) : (\n            <div className=\"relative w-full\">\n              <ControlledInput\n                id={id}\n                readOnly\n                aria-label={label}\n                error={Boolean(range?.from && !range.to)}\n                placeholder={label || t('dateRangePicker.selectPeriod')}\n                className={classNames('w-full cursor-pointer truncate text-left', range?.from && '!pr-9')}\n                disabled={disabled}\n                value={displayValue()}\n                onClick={togglePopover}\n              />\n\n              {range?.from && (\n                <ControlledTooltip content={t('dates.clearPeriod')}>\n                  <div\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      clear(e);\n                    }}\n                    onMouseDown={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }}\n                    className=\"absolute inset-y-0 right-2 z-10 flex cursor-pointer items-center\"\n                  >\n                    <MaterialSymbol icon=\"close_small\" size={20} color=\"rgb(var(--color-foreground-subtle))\" />\n                  </div>\n                </ControlledTooltip>\n              )}\n            </div>\n          )}\n        </div>\n      </ControlledPopoverHandler>\n      <ControlledPopoverContent className=\"zIndexMax overflow-hidden rounded-xl border-0 p-0 shadow-2xl\">\n        <div className=\"bg-surface\">\n          <DayPicker\n            ISOWeek\n            showOutsideDays\n            captionLayout=\"label\"\n            dir=\"ltr\"\n            firstWeekContainsDate={1}\n            mode=\"range\"\n            numberOfMonths={2}\n            timeZone={DATE_RANGE_PICKER_TIMEZONE}\n            weekStartsOn={1}\n            locale={ptBR}\n            selected={range}\n            defaultMonth={range?.from || new Date()}\n            disabled={[beforeMatcher, afterMatcher]}\n            onSelect={handleSelectedRange}\n            className={classNames('p-4', CALENDAR_THEME_VARIABLES)}\n            classNames={{\n              month_caption: `${calendarClassNames.month_caption} items-center text-brand-emphasis`,\n              caption_label: `${calendarClassNames.caption_label} text-base font-semibold`,\n              weekday: `${calendarClassNames.weekday} text-foreground-subtle`,\n              day: `${calendarClassNames.day} text-sm text-foreground transition-colors hover:bg-brand-soft hover:text-brand-emphasis`,\n              day_button: `${calendarClassNames.day_button} focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border`,\n              selected: 'text-sm font-semibold',\n              today: `${calendarClassNames.today} font-semibold`,\n              outside: `${calendarClassNames.outside} text-foreground-faint`,\n              disabled: `${calendarClassNames.disabled} text-foreground-faint`,\n            }}\n            footer={<div className=\"rounded-b-xl border-t border-border-subtle bg-muted\">{getFooter()}</div>}\n          />\n        </div>\n      </ControlledPopoverContent>\n    </ControlledPopoverRoot>\n  );\n};\n\nexport default DateRangePicker;\n"],"names":[],"mappings":"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"}

package/dist/components/Form/ControlledButton.d.ts

@@ -0,0 +1,25 @@
+export type TButtonVariant = 'filled' | 'outlined' | 'text';
+export type TButtonTone = 'brand' | 'neutral' | 'danger' | 'success' | 'info';
+export type TButtonSize = 'sm' | 'md' | 'lg';
+interface IControlledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Renders a bare <button> with no theme, for clickable surfaces that are not buttons. */
+    defaultHtmlButton?: boolean;
+    variant?: TButtonVariant;
+    tone?: TButtonTone;
+    size?: TButtonSize;
+    fullWidth?: boolean;
+}
+export interface IButtonClassOptions {
+    variant?: TButtonVariant;
+    tone?: TButtonTone;
+    size?: TButtonSize;
+    fullWidth?: boolean;
+    className?: string;
+}
+/**
+ * The themed button recipe, for surfaces that must look like a button without being one (a
+ * link: see `LinkButton`). `className` is merged last with `mergeClasses`, like on the button.
+ */
+export declare const getButtonClassName: ({ variant, tone, size, fullWidth, className, }?: IButtonClassOptions) => string;
+declare const ControlledButton: import('react').ForwardRefExoticComponent<IControlledButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default ControlledButton;

package/dist/components/Form/ControlledButton.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const BASE_CLASS = "inline-flex select-none items-center justify-center gap-x-2 rounded-xl font-bold capitalize align-middle transition-colors duration-fast focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+const SIZE_CLASS = {
+  sm: "px-4 py-2 text-xs",
+  md: "px-6 py-3 text-xs",
+  lg: "px-7 py-3.5 text-sm"
+};
+const TONE_CLASS = {
+  filled: {
+    brand: "bg-brand text-brand-fg shadow-sm hover:bg-brand-hover",
+    neutral: "bg-muted-active text-foreground shadow-sm hover:bg-muted-hover",
+    danger: "bg-danger text-danger-fg shadow-sm hover:bg-danger-hover",
+    success: "bg-success text-success-fg shadow-sm hover:bg-success-hover",
+    info: "bg-info text-info-fg shadow-sm hover:bg-info-hover"
+  },
+  outlined: {
+    brand: "border border-brand-border text-brand-emphasis hover:bg-brand-soft",
+    neutral: "border border-border text-foreground-muted hover:bg-muted",
+    danger: "border border-danger-border text-danger-emphasis hover:bg-danger-soft",
+    success: "border border-success-border text-success-emphasis hover:bg-success-soft",
+    info: "border border-info-border text-info-emphasis hover:bg-info-soft"
+  },
+  text: {
+    brand: "text-brand-emphasis hover:bg-brand-soft",
+    neutral: "text-foreground-muted hover:bg-muted",
+    danger: "text-danger-emphasis hover:bg-danger-soft",
+    success: "text-success-emphasis hover:bg-success-soft",
+    info: "text-info-emphasis hover:bg-info-soft"
+  }
+};
+const getButtonClassName = ({
+  variant = "filled",
+  tone = "brand",
+  size = "md",
+  fullWidth = false,
+  className
+} = {}) => mergeClasses(classNames(BASE_CLASS, SIZE_CLASS[size], TONE_CLASS[variant][tone], { "w-full": fullWidth }), className);
+const ControlledButton = forwardRef(
+  ({
+    defaultHtmlButton = false,
+    variant = "filled",
+    tone = "brand",
+    size = "md",
+    fullWidth = false,
+    type = "button",
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    if (defaultHtmlButton) {
+      return /* @__PURE__ */ jsx("button", { type, ...rest, ref, className, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        ...rest,
+        ref,
+        className: getButtonClassName({ variant, tone, size, fullWidth, className }),
+        children
+      }
+    );
+  }
+);
+ControlledButton.displayName = "ControlledButton";
+export {
+  ControlledButton as default,
+  getButtonClassName
+};
+//# sourceMappingURL=ControlledButton.js.map

package/dist/components/Form/ControlledButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledButton.js","sources":["../../../src/components/Form/ControlledButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TButtonVariant = 'filled' | 'outlined' | 'text';\nexport type TButtonTone = 'brand' | 'neutral' | 'danger' | 'success' | 'info';\nexport type TButtonSize = 'sm' | 'md' | 'lg';\n\ninterface IControlledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Renders a bare <button> with no theme, for clickable surfaces that are not buttons. */\n  defaultHtmlButton?: boolean;\n  variant?: TButtonVariant;\n  tone?: TButtonTone;\n  size?: TButtonSize;\n  fullWidth?: boolean;\n}\n\nconst BASE_CLASS =\n  'inline-flex select-none items-center justify-center gap-x-2 rounded-xl font-bold capitalize align-middle ' +\n  'transition-colors duration-fast focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +\n  'disabled:pointer-events-none disabled:opacity-50';\n\nconst SIZE_CLASS: Record<TButtonSize, string> = {\n  sm: 'px-4 py-2 text-xs',\n  md: 'px-6 py-3 text-xs',\n  lg: 'px-7 py-3.5 text-sm',\n};\n\nconst TONE_CLASS: Record<TButtonVariant, Record<TButtonTone, string>> = {\n  filled: {\n    brand: 'bg-brand text-brand-fg shadow-sm hover:bg-brand-hover',\n    neutral: 'bg-muted-active text-foreground shadow-sm hover:bg-muted-hover',\n    danger: 'bg-danger text-danger-fg shadow-sm hover:bg-danger-hover',\n    success: 'bg-success text-success-fg shadow-sm hover:bg-success-hover',\n    info: 'bg-info text-info-fg shadow-sm hover:bg-info-hover',\n  },\n  outlined: {\n    brand: 'border border-brand-border text-brand-emphasis hover:bg-brand-soft',\n    neutral: 'border border-border text-foreground-muted hover:bg-muted',\n    danger: 'border border-danger-border text-danger-emphasis hover:bg-danger-soft',\n    success: 'border border-success-border text-success-emphasis hover:bg-success-soft',\n    info: 'border border-info-border text-info-emphasis hover:bg-info-soft',\n  },\n  text: {\n    brand: 'text-brand-emphasis hover:bg-brand-soft',\n    neutral: 'text-foreground-muted hover:bg-muted',\n    danger: 'text-danger-emphasis hover:bg-danger-soft',\n    success: 'text-success-emphasis hover:bg-success-soft',\n    info: 'text-info-emphasis hover:bg-info-soft',\n  },\n};\n\nexport interface IButtonClassOptions {\n  variant?: TButtonVariant;\n  tone?: TButtonTone;\n  size?: TButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n}\n\n/**\n * The themed button recipe, for surfaces that must look like a button without being one (a\n * link: see `LinkButton`). `className` is merged last with `mergeClasses`, like on the button.\n */\nexport const getButtonClassName = ({\n  variant = 'filled',\n  tone = 'brand',\n  size = 'md',\n  fullWidth = false,\n  className,\n}: IButtonClassOptions = {}): string =>\n  mergeClasses(classNames(BASE_CLASS, SIZE_CLASS[size], TONE_CLASS[variant][tone], { 'w-full': fullWidth }), className);\n\nconst ControlledButton = forwardRef<HTMLButtonElement, IControlledButtonProps>(\n  (\n    {\n      defaultHtmlButton = false,\n      variant = 'filled',\n      tone = 'brand',\n      size = 'md',\n      fullWidth = false,\n      type = 'button',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    if (defaultHtmlButton) {\n      return (\n        <button type={type} {...rest} ref={ref} className={className}>\n          {children}\n        </button>\n      );\n    }\n\n    return (\n      <button\n        type={type}\n        {...rest}\n        ref={ref}\n        className={getButtonClassName({ variant, tone, size, fullWidth, className })}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n\nControlledButton.displayName = 'ControlledButton';\n\nexport default ControlledButton;\n"],"names":[],"mappings":";;;;AAkBA,MAAM,aACJ;AAIF,MAAM,aAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAkE;AAAA,EACtE,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAAA,EAER,UAAU;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAAA,EAER,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAEV;AAcO,MAAM,qBAAqB,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,IAAyB,CAAA,MACvB,aAAa,WAAW,YAAY,WAAW,IAAI,GAAG,WAAW,OAAO,EAAE,IAAI,GAAG,EAAE,UAAU,UAAA,CAAW,GAAG,SAAS;AAEtH,MAAM,mBAAmB;AAAA,EACvB,CACE;AAAA,IACE,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,mBAAmB;AACrB,iCACG,UAAA,EAAO,MAAa,GAAG,MAAM,KAAU,WACrC,UACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,WAAW,mBAAmB,EAAE,SAAS,MAAM,MAAM,WAAW,WAAW;AAAA,QAE1E;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;"}

package/dist/components/Form/ControlledCheckbox.d.ts

@@ -0,0 +1,16 @@
+interface IControlledCheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    color?: 'blue' | 'red' | 'green' | 'amber' | 'purple' | 'indigo' | 'pink' | 'teal';
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** The name when there is no visible `label`. */
+    'aria-label'?: string;
+    /** `-1` when the box only pictures the state of a surrounding control (a select option). */
+    tabIndex?: number;
+}
+declare const ControlledCheckbox: ({ checked, onChange, label, color, disabled, className, labelClassName, size, "aria-label": ariaLabel, tabIndex, }: IControlledCheckboxProps) => import("react").JSX.Element;
+export default ControlledCheckbox;

package/dist/components/Form/ControlledCheckbox.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+const ControlledCheckbox = ({
+  checked,
+  onChange,
+  label,
+  color = "purple",
+  disabled = false,
+  className = "",
+  labelClassName = "",
+  size = "md",
+  "aria-label": ariaLabel,
+  tabIndex
+}) => {
+  const [colorClasses, setColorClasses] = useState("");
+  const [borderClasses, setBorderClasses] = useState("");
+  const sizeConfig = {
+    sm: {
+      container: "w-4 h-4",
+      checkmark: "h-2 w-2"
+    },
+    md: {
+      container: "w-5 h-5",
+      checkmark: "h-3 w-3"
+    },
+    lg: {
+      container: "w-6 h-6",
+      checkmark: "h-4 w-4"
+    },
+    xl: {
+      container: "w-7 h-7",
+      checkmark: "h-5 w-5"
+    }
+  };
+  useEffect(() => {
+    const colorMap = {
+      blue: "bg-info",
+      red: "bg-danger",
+      green: "bg-success",
+      amber: "bg-warning",
+      purple: "bg-brand",
+      indigo: "bg-brand",
+      pink: "bg-accent",
+      teal: "bg-secondary"
+    };
+    const borderMap = {
+      blue: "border-info",
+      red: "border-danger",
+      green: "border-success",
+      amber: "border-warning",
+      purple: "border-border-strong",
+      indigo: "border-brand",
+      pink: "border-accent",
+      teal: "border-secondary"
+    };
+    setColorClasses(colorMap[color] || "bg-brand");
+    setBorderClasses(borderMap[color] || "border-brand");
+  }, [color]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: classNames(
+        "relative flex items-center gap-2 px-[6px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            onChange: () => onChange(!checked),
+            disabled,
+            "aria-label": ariaLabel,
+            tabIndex,
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              sizeConfig[size].container,
+              "flex shrink-0 items-center justify-center rounded-md border p-[2px] transition-colors duration-base",
+              // The input is visually hidden, so the box is where the keyboard sees its focus.
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+              checked ? [colorClasses, "border-0"] : ["bg-surface", borderClasses],
+              disabled && "opacity-50"
+            ),
+            children: checked && /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "text-white",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: classNames("text-sm font-medium text-foreground", labelClassName), children: label })
+      ]
+    }
+  );
+};
+export {
+  ControlledCheckbox as default
+};
+//# sourceMappingURL=ControlledCheckbox.js.map