negodesign 0.0.77 → 0.0.79

package/dist/components/ui/form/ui/calendar/YearSelect.svelte.d.ts

@@ -0,0 +1,15 @@
+type Props = {
+    years: number[];
+    year: number;
+    query: string;
+    open: boolean;
+    onQueryChange: (query: string) => void;
+    onFocus: () => void;
+    onToggle: () => void;
+    onCommit: () => void;
+    onCancel: () => void;
+    onSelect: (year: number) => void;
+};
+declare const YearSelect: import("svelte").Component<Props, {}, "">;
+type YearSelect = ReturnType<typeof YearSelect>;
+export default YearSelect;

package/dist/components/ui/form/ui/calendar/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Calendar } from "./Calendar.svelte";
+export { default as CalendarCard } from "./CalendarCard.svelte";
+export { default as MonthSelect } from "./MonthSelect.svelte";
+export { default as YearSelect } from "./YearSelect.svelte";
+export { default as DaysGrid } from "./DaysGrid.svelte";

package/dist/components/ui/form/ui/calendar/index.js

@@ -0,0 +1,5 @@
+export { default as Calendar } from "./Calendar.svelte";
+export { default as CalendarCard } from "./CalendarCard.svelte";
+export { default as MonthSelect } from "./MonthSelect.svelte";
+export { default as YearSelect } from "./YearSelect.svelte";
+export { default as DaysGrid } from "./DaysGrid.svelte";

package/dist/components/ui/form/ui/calendar/utils.d.ts

@@ -0,0 +1,26 @@
+export declare const YEARS_RANGE = 100;
+export interface CalendarToday {
+    year: number;
+    month: number;
+    day: number;
+}
+export declare function currentToday(): CalendarToday;
+export declare function getMonthNames(locale: string): string[];
+export declare function getWeekdays(locale: string): string[];
+export declare function allYears(todayYear: number): number[];
+export declare function filterYears(query: string, currentYear: number, todayYear: number): number[];
+export declare function parseCommittedYear(query: string, todayYear: number): number | null;
+export declare function startOfMonth(year: number, month: number): Date;
+export declare function addDays(date: Date, n: number): Date;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function isBeforeDay(a: Date, b: Date): boolean;
+export declare function buildWeeks(year: number, month: number): Date[][];
+export declare function isToday(d: Date, today: CalendarToday): boolean;
+export declare function isOutsideMonth(d: Date, year: number, month: number): boolean;
+export declare function isSelected(d: Date, opts: {
+    value?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+}): boolean;
+export declare function isInRange(d: Date, rangeStart?: Date, rangeEnd?: Date): boolean;
+export declare function isDisabled(d: Date, min?: Date, max?: Date): boolean;

package/dist/components/ui/form/ui/calendar/utils.js

@@ -0,0 +1,89 @@
+export const YEARS_RANGE = 100;
+export function currentToday() {
+    const now = new Date();
+    return { year: now.getFullYear(), month: now.getMonth(), day: now.getDate() };
+}
+export function getMonthNames(locale) {
+    return Array.from({ length: 12 }, (_, i) => new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2025, i, 1)));
+}
+export function getWeekdays(locale) {
+    return Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(2025, 0, 5 + i);
+        return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d);
+    });
+}
+export function allYears(todayYear) {
+    return Array.from({ length: YEARS_RANGE + 1 }, (_, i) => todayYear - i);
+}
+export function filterYears(query, currentYear, todayYear) {
+    const q = query.trim();
+    if (!q || q === String(currentYear))
+        return allYears(todayYear);
+    return allYears(todayYear).filter((y) => String(y).startsWith(q));
+}
+export function parseCommittedYear(query, todayYear) {
+    const parsed = Number.parseInt(query.trim(), 10);
+    if (Number.isNaN(parsed))
+        return null;
+    return Math.min(todayYear, Math.max(todayYear - YEARS_RANGE, parsed));
+}
+export function startOfMonth(year, month) {
+    return new Date(year, month, 1);
+}
+export function addDays(date, n) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n);
+}
+export function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+export function isBeforeDay(a, b) {
+    return (a.getFullYear() < b.getFullYear() ||
+        (a.getFullYear() === b.getFullYear() && a.getMonth() < b.getMonth()) ||
+        (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() < b.getDate()));
+}
+export function buildWeeks(year, month) {
+    const first = startOfMonth(year, month);
+    const firstDay = first.getDay();
+    const result = [];
+    let current = addDays(first, -firstDay);
+    for (let w = 0; w < 6; w++) {
+        const week = [];
+        for (let d = 0; d < 7; d++) {
+            week.push(current);
+            current = addDays(current, 1);
+        }
+        result.push(week);
+    }
+    return result;
+}
+export function isToday(d, today) {
+    return (d.getFullYear() === today.year &&
+        d.getMonth() === today.month &&
+        d.getDate() === today.day);
+}
+export function isOutsideMonth(d, year, month) {
+    return d.getMonth() !== month || d.getFullYear() !== year;
+}
+export function isSelected(d, opts) {
+    if (opts.rangeStart && isSameDay(d, opts.rangeStart))
+        return true;
+    if (opts.rangeEnd && isSameDay(d, opts.rangeEnd))
+        return true;
+    return opts.value ? isSameDay(d, opts.value) : false;
+}
+export function isInRange(d, rangeStart, rangeEnd) {
+    if (!rangeStart || !rangeEnd)
+        return false;
+    return !isBeforeDay(d, rangeStart) && !isBeforeDay(rangeEnd, d);
+}
+export function isDisabled(d, min, max) {
+    if (min && isBeforeDay(d, min))
+        return true;
+    if (max && isBeforeDay(max, d))
+        return true;
+    return false;
+}

package/dist/components/ui/form/ui/input-base.svelte

@@ -1,81 +1,83 @@
-<script lang="ts">
-  import Input from "../../input/input.svelte";
-  import { Label } from "../../label";
-  import { EyeIcon, EyeOffIcon } from "@hugeicons/core-free-icons";
-  import { inputIconMap } from "../data/InputIconDefault.svelte.js";
-  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let {
-    label,
-    isIcon,
-    isLabel,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-
-  let showPassword = $state(false);
-
-  const isPassword = $derived(restProps.type == "password");
-
-  const inputType = $derived(
-    isPassword && showPassword ? "text" : restProps.type,
-  );
-
-  const currentIcon = $derived(
-    restProps.type ? inputIconMap[restProps.type] : undefined,
-  );
-
-  function togglePasswordVisibility() {
-    showPassword = !showPassword;
-  }
-</script>
-
-{#snippet renderInput()}
-  <div class="flex items-center relative w-full">
-    {#if isIcon && currentIcon}
-      <span class="absolute left-3 flex items-center pointer-events-none">
-        <HugeiconsIcon
-          icon={currentIcon}
-          size={16}
-          color="#94a3b8"
-          strokeWidth={1.5}
-        />
-      </span>
-    {/if}
-
-    <Input
-      class="{isIcon && currentIcon ? 'pl-9' : ''} {isPassword ? 'pr-9' : ''}"
-      bind:value
-      {...restProps}
-      type={inputType}
-    />
-
-    {#if isPassword}
-      <button
-        type="button"
-        onclick={togglePasswordVisibility}
-        class="absolute right-3 flex items-center cursor-pointer z-10 text-slate-400 hover:text-slate-600 focus:outline-none"
-        aria-label={showPassword ? "Ocultar senha" : "Ver senha"}
-      >
-        <HugeiconsIcon
-          icon={showPassword ? EyeOffIcon : EyeIcon}
-          size={16}
-          color="#94a3b8"
-          strokeWidth={1.5}
-        />
-      </button>
-    {/if}
-  </div>
-{/snippet}
-
-{#if isLabel}
-  <div class="flex flex-col gap-3 w-full">
-    {#if label}
-      <Label>{label}</Label>
-    {/if}
-    {@render renderInput()}
-  </div>
-{:else}
-  {@render renderInput()}
-{/if}
+<script lang="ts">
+  import Input from "../../input/input.svelte";
+  import { Label } from "../../label";
+  import { EyeIcon, EyeOffIcon } from "@hugeicons/core-free-icons";
+  import { inputIconMap } from "../data/InputIconDefault.svelte.js";
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    label,
+    labelClass,
+    inputClass,
+    isIcon,
+    isLabel,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+
+  let showPassword = $state(false);
+
+  const isPassword = $derived(restProps.type == "password");
+
+  const inputType = $derived(
+    isPassword && showPassword ? "text" : restProps.type,
+  );
+
+  const currentIcon = $derived(
+    restProps.type ? inputIconMap[restProps.type] : undefined,
+  );
+
+  function togglePasswordVisibility() {
+    showPassword = !showPassword;
+  }
+</script>
+
+{#snippet renderInput()}
+  <div class="flex items-center relative w-full">
+    {#if isIcon && currentIcon}
+      <span class="absolute left-3 flex items-center pointer-events-none">
+        <HugeiconsIcon
+          icon={currentIcon}
+          size={16}
+          color="#94a3b8"
+          strokeWidth={1.5}
+        />
+      </span>
+    {/if}
+
+    <Input
+      class="{isIcon && currentIcon ? 'pl-9' : ''} {isPassword ? 'pr-9' : ''} {inputClass ?? ''}"
+      bind:value
+      {...restProps}
+      type={inputType}
+    />
+
+    {#if isPassword}
+      <button
+        type="button"
+        onclick={togglePasswordVisibility}
+        class="absolute right-3 flex items-center cursor-pointer z-10 text-slate-400 hover:text-slate-600 focus:outline-none"
+        aria-label={showPassword ? "Ocultar senha" : "Ver senha"}
+      >
+        <HugeiconsIcon
+          icon={showPassword ? EyeOffIcon : EyeIcon}
+          size={16}
+          color="#94a3b8"
+          strokeWidth={1.5}
+        />
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+{#if isLabel}
+  <div class="flex flex-col gap-3 w-full">
+    {#if label}
+      <Label class={labelClass}>{label}</Label>
+    {/if}
+    {@render renderInput()}
+  </div>
+{:else}
+  {@render renderInput()}
+{/if}

package/dist/components/ui/form/ui/input-calendar-interval.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { Calendar, CalendarCard } from "./calendar";
+  import { t, locale } from "../../../../i18n";
+  import { cn } from "../../../../utils.js";
+
+  type Props = {
+    label?: string;
+    isLabel?: boolean;
+    isIcon?: boolean;
+    labelClass?: string;
+    inputClass?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    startValue?: string;
+    endValue?: string;
+  };
+
+  let {
+    label,
+    isLabel = true,
+    isIcon = true,
+    labelClass,
+    inputClass,
+    disabled = false,
+    placeholder,
+    startValue = $bindable(""),
+    endValue = $bindable(""),
+  }: Props = $props();
+
+  let open = $state(false);
+
+  const i18nLocale = $derived($locale === "pt" ? "pt-PT" : "en-US");
+
+  function parseISO(dateStr: string): Date | undefined {
+    const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match) return undefined;
+    return new Date(+match[1], +match[2] - 1, +match[3]);
+  }
+
+  function formatDateISO(date: Date): string {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+
+  function isBeforeDay(a: Date, b: Date): boolean {
+    return (
+      a.getFullYear() < b.getFullYear() ||
+      (a.getFullYear() === b.getFullYear() && a.getMonth() < b.getMonth()) ||
+      (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() < b.getDate())
+    );
+  }
+
+  let startDate = $derived(startValue ? parseISO(startValue) : undefined);
+  let endDate = $derived(endValue ? parseISO(endValue) : undefined);
+
+  const today = new Date();
+
+  function selectStart(date: Date) {
+    if (endDate && isBeforeDay(endDate, date)) {
+      endValue = "";
+    }
+    startValue = formatDateISO(date);
+  }
+
+  function selectEnd(date: Date) {
+    if (!startDate || isBeforeDay(date, startDate)) {
+      startValue = formatDateISO(date);
+    } else {
+      endValue = formatDateISO(date);
+      open = false;
+    }
+  }
+
+  $effect(() => {
+    if (startDate && endDate && isBeforeDay(endDate, startDate)) {
+      startValue = formatDateISO(endDate);
+      endValue = formatDateISO(startDate);
+    }
+  });
+
+  const displayStart = $derived(
+    startDate
+      ? new Intl.DateTimeFormat(i18nLocale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric",
+        }).format(startDate)
+      : "",
+  );
+
+  const displayEnd = $derived(
+    endDate
+      ? new Intl.DateTimeFormat(i18nLocale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric",
+        }).format(endDate)
+      : "",
+  );
+
+  const startYear = $derived(startDate?.getFullYear());
+  const startMonth = $derived(startDate?.getMonth());
+  const endYear = $derived(endDate?.getFullYear() ?? startYear ?? today.getFullYear());
+  const endMonth = $derived(endDate?.getMonth() ?? startMonth ?? today.getMonth());
+
+  const placeholderClasses = $derived(
+    cn("truncate", !startDate && !endDate && "text-muted-foreground"),
+  );
+
+  const calendarLabelClass = $derived(
+    cn("px-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground"),
+  );
+</script>
+
+<div class="flex w-full flex-col gap-3">
+  {#if isLabel}
+    {#if label}
+      <Label class={labelClass}>{label}</Label>
+    {:else}
+      <Label class={labelClass}>{$t("input.date.interval.label")}</Label>
+    {/if}
+  {/if}
+
+  <CalendarCard
+    bind:open
+    rangeStart={startDate}
+    rangeEnd={endDate}
+    {isIcon}
+    {inputClass}
+    {disabled}
+  >
+    {#snippet content()}
+      <div
+        class="grid max-h-[26rem] gap-2 overflow-y-auto p-2 md:max-h-none md:grid-cols-2 md:overflow-visible"
+      >
+        <div class="flex flex-col gap-1">
+          <span class={calendarLabelClass}>
+            {$t("input.date.start.label")}
+          </span>
+          <Calendar
+            value={startDate}
+            rangeStart={startDate}
+            rangeEnd={endDate}
+            month={startMonth}
+            year={startYear}
+            onselect={selectStart}
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class={calendarLabelClass}>
+            {$t("input.date.end.label")}
+          </span>
+          <Calendar
+            value={endDate}
+            rangeStart={startDate}
+            rangeEnd={endDate}
+            month={endMonth}
+            year={endYear}
+            onselect={selectEnd}
+          />
+        </div>
+      </div>
+    {/snippet}
+    <span class={placeholderClasses}>
+      {#if displayStart}
+        {displayStart}
+        {#if displayEnd}– {displayEnd}{/if}
+      {:else}
+        {placeholder || $t("input.date.interval.label")}
+      {/if}
+    </span>
+  </CalendarCard>
+</div>

package/dist/components/ui/form/ui/input-calendar-interval.svelte.d.ts

@@ -0,0 +1,14 @@
+type Props = {
+    label?: string;
+    isLabel?: boolean;
+    isIcon?: boolean;
+    labelClass?: string;
+    inputClass?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    startValue?: string;
+    endValue?: string;
+};
+declare const InputCalendarInterval: import("svelte").Component<Props, {}, "startValue" | "endValue">;
+type InputCalendarInterval = ReturnType<typeof InputCalendarInterval>;
+export default InputCalendarInterval;

package/dist/components/ui/form/ui/input-calendar.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import { Label } from "../../label";
+  import { CalendarCard } from "./calendar";
+  import { t, locale } from "../../../../i18n";
+  import { cn } from "../../../../utils.js";
+
+  type Props = InputLabelProps & {
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+  };
+
+  let {
+    label,
+    labelClass,
+    inputClass,
+    isLabel = true,
+    isIcon = true,
+    value = $bindable(""),
+    min,
+    max,
+    disabled = false,
+    placeholder,
+    placeholderClass,
+  }: Props = $props();
+
+  let open = $state(false);
+
+  const i18nLocale = $derived($locale === "pt" ? "pt-PT" : "en-US");
+
+  function parseISO(dateStr: string): Date | undefined {
+    const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match) return undefined;
+    return new Date(+match[1], +match[2] - 1, +match[3]);
+  }
+
+  function formatDateISO(date: Date): string {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+
+  const selectedDate = $derived(value ? parseISO(value) : undefined);
+
+  const displayValue = $derived(
+    selectedDate
+      ? new Intl.DateTimeFormat(i18nLocale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric",
+        }).format(selectedDate)
+      : "",
+  );
+
+  const minDate = $derived(min ? parseISO(min) : undefined);
+  const maxDate = $derived(max ? parseISO(max) : undefined);
+
+  function handleSelect(date: Date) {
+    value = formatDateISO(date);
+    open = false;
+  }
+
+  const placeholderClasses = $derived(
+    cn(
+      "truncate",
+      !displayValue && "text-muted-foreground",
+      `${placeholderClass}`,
+    ),
+  );
+</script>
+
+{#if isLabel}
+  <div class="flex flex-col gap-3 w-full">
+    {#if label}
+      <Label class={labelClass}>{label}</Label>
+    {/if}
+
+    <CalendarCard
+      bind:open
+      value={selectedDate}
+      min={minDate}
+      max={maxDate}
+      {isIcon}
+      {inputClass}
+      {disabled}
+      onselect={handleSelect}
+    >
+      <span class={placeholderClasses}>
+        {displayValue || placeholder || $t("input.date.placeholder")}
+      </span>
+    </CalendarCard>
+  </div>
+{:else}
+  <CalendarCard
+    bind:open
+    value={selectedDate}
+    min={minDate}
+    max={maxDate}
+    {isIcon}
+    {inputClass}
+    {disabled}
+    onselect={handleSelect}
+  >
+    <span class={placeholderClasses}>
+      {displayValue || placeholder || $t("input.date.placeholder")}
+    </span>
+  </CalendarCard>
+{/if}

package/dist/components/ui/form/ui/input-calendar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { InputLabelProps } from "../data/InputLabel.svelte.ts";
+type Props = InputLabelProps & {
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+};
+declare const InputCalendar: import("svelte").Component<Props, {}, "value">;
+type InputCalendar = ReturnType<typeof InputCalendar>;
+export default InputCalendar;

package/dist/components/ui/form/ui/input-email-or-phone.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  /** Email or phone input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  type="text"
-  label={label || $t("input.email-or-phone.label")}
-  placeholder={placeholder || $t("input.email-or-phone.placeholder")}
-  isLabel
-  isIcon
-  bind:value
-  {...restProps}
-/>
+<script lang="ts">
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import InputBase from "./input-base.svelte";
+  import { t } from "../../../../i18n";
+
+  /** Email or phone input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="text"
+  label={label || $t("input.email-or-phone.label")}
+  placeholder={placeholder || $t("input.email-or-phone.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>