negodesign 0.0.80 → 0.0.82

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

@@ -1,179 +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>
+<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.svelte

@@ -1,110 +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>
+<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-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}
+/>

package/dist/components/ui/form/ui/input-email.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 input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  type="email"
-  label={label || $t("input.email.label")}
-  placeholder={placeholder || $t("input.email.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 input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="email"
+  label={label || $t("input.email.label")}
+  placeholder={placeholder || $t("input.email.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>