negodesign 0.0.80 → 0.0.82

package/dist/components/ui/empty/empty.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="empty"
-	class={cn("flex flex-col items-center justify-center text-center", className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn("flex flex-col items-center justify-center text-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/footer/ui/Footer.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-  import Footer01 from "./01/Footer01.svelte";
-  import Footer02 from "./02/Footer02.svelte";
-  import type { FooterProps } from "../types";
-
-  let {
-    variant = 1,
-    ...restProps
-  }: FooterProps & {
-    variant?: 1 | 2;
-  } = $props();
-</script>
-
-{#if variant === 2}
-  <Footer02 {...restProps} />
-{:else}
-  <Footer01 {...restProps} />
-{/if}
+<script lang="ts">
+  import Footer01 from "./01/Footer01.svelte";
+  import Footer02 from "./02/Footer02.svelte";
+  import type { FooterProps } from "../types";
+
+  let {
+    variant = 1,
+    ...restProps
+  }: FooterProps & {
+    variant?: 1 | 2;
+  } = $props();
+</script>
+
+{#if variant === 2}
+  <Footer02 {...restProps} />
+{:else}
+  <Footer01 {...restProps} />
+{/if}

package/dist/components/ui/form/ui/calendar/Calendar.svelte

@@ -1,194 +1,194 @@
-<script lang="ts">
-  import { locale } from "../../../../../i18n";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ChevronLeftIcon, ChevronRightIcon } from "@hugeicons/core-free-icons";
-  import { cn } from "../../../../../utils.js";
-  import MonthSelect from "./MonthSelect.svelte";
-  import YearSelect from "./YearSelect.svelte";
-  import DaysGrid from "./DaysGrid.svelte";
-  import {
-    currentToday,
-    getMonthNames,
-    getWeekdays,
-    filterYears,
-    buildWeeks,
-    parseCommittedYear,
-  } from "./utils.js";
-
-  type Props = {
-    value?: Date;
-    rangeStart?: Date;
-    rangeEnd?: Date;
-    min?: Date;
-    max?: Date;
-    month?: number;
-    year?: number;
-    locale?: string;
-    onselect?: (date: Date) => void;
-    class?: string;
-  };
-
-  let {
-    value,
-    rangeStart,
-    rangeEnd,
-    min,
-    max,
-    month: monthProp,
-    year: yearProp,
-    locale: propLocale,
-    onselect,
-    class: className,
-  }: Props = $props();
-
-  const localeValue = $derived(
-    propLocale ?? ($locale === "pt" ? "pt-PT" : "en-US"),
-  );
-
-  const today = currentToday();
-
-  // svelte-ignore state_referenced_locally
-  let currentYear = $state(yearProp ?? today.year);
-  // svelte-ignore state_referenced_locally
-  let currentMonth = $state(monthProp ?? today.month);
-
-  $effect(() => {
-    if (monthProp !== undefined) currentMonth = monthProp;
-  });
-
-  $effect(() => {
-    if (yearProp !== undefined) currentYear = yearProp;
-  });
-
-  let showMonthPicker = $state(false);
-  let showYearPicker = $state(false);
-  let yearQuery = $state(String(today.year));
-
-  const monthNames = $derived(getMonthNames(localeValue));
-  const weekdays = $derived(getWeekdays(localeValue));
-  const weeks = $derived(buildWeeks(currentYear, currentMonth));
-  const filteredYears = $derived(
-    filterYears(yearQuery, currentYear, today.year),
-  );
-
-  function prevMonth() {
-    if (currentMonth === 0) {
-      currentYear -= 1;
-      currentMonth = 11;
-    } else {
-      currentMonth -= 1;
-    }
-  }
-
-  function nextMonth() {
-    if (currentMonth === 11) {
-      currentYear += 1;
-      currentMonth = 0;
-    } else {
-      currentMonth += 1;
-    }
-  }
-
-  function selectMonth(m: number) {
-    currentMonth = m;
-    showMonthPicker = false;
-  }
-
-  function selectYear(y: number) {
-    currentYear = y;
-    showYearPicker = false;
-    yearQuery = String(y);
-  }
-
-  function toggleMonthPicker() {
-    showYearPicker = false;
-    showMonthPicker = !showMonthPicker;
-  }
-
-  function toggleYearPicker() {
-    showMonthPicker = false;
-    const next = !showYearPicker;
-    showYearPicker = next;
-    if (next) {
-      yearQuery = String(currentYear);
-    }
-  }
-
-  function handleYearInput() {
-    showMonthPicker = false;
-    showYearPicker = true;
-  }
-
-  function commitYear() {
-    const parsed = parseCommittedYear(yearQuery, today.year);
-    if (parsed !== null) {
-      selectYear(parsed);
-    }
-  }
-
-  function cancelYear() {
-    showYearPicker = false;
-    yearQuery = String(currentYear);
-  }
-</script>
-
-<div class={cn("flex w-72 flex-col gap-1 p-2 select-none", className)}>
-  <div class="mb-1 flex items-center gap-1">
-    <button
-      type="button"
-      aria-label="previous-month"
-      class="rounded p-1.5 transition-colors hover:bg-muted"
-      onclick={prevMonth}
-    >
-      <HugeiconsIcon icon={ChevronLeftIcon} size={16} strokeWidth={1.5} />
-    </button>
-
-    <div class="relative flex-1">
-      <MonthSelect
-        months={monthNames}
-        month={currentMonth}
-        open={showMonthPicker}
-        onToggle={toggleMonthPicker}
-        onSelect={selectMonth}
-      />
-    </div>
-
-    <div class="relative flex-1">
-      <YearSelect
-        years={filteredYears}
-        year={currentYear}
-        query={yearQuery}
-        open={showYearPicker}
-        onQueryChange={(q) => (yearQuery = q)}
-        onFocus={handleYearInput}
-        onToggle={toggleYearPicker}
-        onCommit={commitYear}
-        onCancel={cancelYear}
-        onSelect={selectYear}
-      />
-    </div>
-
-    <button
-      type="button"
-      aria-label="next-month"
-      class="rounded p-1.5 transition-colors hover:bg-muted"
-      onclick={nextMonth}
-    >
-      <HugeiconsIcon icon={ChevronRightIcon} size={16} strokeWidth={1.5} />
-    </button>
-  </div>
-
-  <DaysGrid
-    year={currentYear}
-    month={currentMonth}
-    weeks={weeks}
-    weekdays={weekdays}
-    today={today}
-    {value}
-    {rangeStart}
-    {rangeEnd}
-    {min}
-    {max}
-    {onselect}
-  />
+<script lang="ts">
+  import { locale } from "../../../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ChevronLeftIcon, ChevronRightIcon } from "@hugeicons/core-free-icons";
+  import { cn } from "../../../../../utils.js";
+  import MonthSelect from "./MonthSelect.svelte";
+  import YearSelect from "./YearSelect.svelte";
+  import DaysGrid from "./DaysGrid.svelte";
+  import {
+    currentToday,
+    getMonthNames,
+    getWeekdays,
+    filterYears,
+    buildWeeks,
+    parseCommittedYear,
+  } from "./utils.js";
+
+  type Props = {
+    value?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    min?: Date;
+    max?: Date;
+    month?: number;
+    year?: number;
+    locale?: string;
+    onselect?: (date: Date) => void;
+    class?: string;
+  };
+
+  let {
+    value,
+    rangeStart,
+    rangeEnd,
+    min,
+    max,
+    month: monthProp,
+    year: yearProp,
+    locale: propLocale,
+    onselect,
+    class: className,
+  }: Props = $props();
+
+  const localeValue = $derived(
+    propLocale ?? ($locale === "pt" ? "pt-PT" : "en-US"),
+  );
+
+  const today = currentToday();
+
+  // svelte-ignore state_referenced_locally
+  let currentYear = $state(yearProp ?? today.year);
+  // svelte-ignore state_referenced_locally
+  let currentMonth = $state(monthProp ?? today.month);
+
+  $effect(() => {
+    if (monthProp !== undefined) currentMonth = monthProp;
+  });
+
+  $effect(() => {
+    if (yearProp !== undefined) currentYear = yearProp;
+  });
+
+  let showMonthPicker = $state(false);
+  let showYearPicker = $state(false);
+  let yearQuery = $state(String(today.year));
+
+  const monthNames = $derived(getMonthNames(localeValue));
+  const weekdays = $derived(getWeekdays(localeValue));
+  const weeks = $derived(buildWeeks(currentYear, currentMonth));
+  const filteredYears = $derived(
+    filterYears(yearQuery, currentYear, today.year),
+  );
+
+  function prevMonth() {
+    if (currentMonth === 0) {
+      currentYear -= 1;
+      currentMonth = 11;
+    } else {
+      currentMonth -= 1;
+    }
+  }
+
+  function nextMonth() {
+    if (currentMonth === 11) {
+      currentYear += 1;
+      currentMonth = 0;
+    } else {
+      currentMonth += 1;
+    }
+  }
+
+  function selectMonth(m: number) {
+    currentMonth = m;
+    showMonthPicker = false;
+  }
+
+  function selectYear(y: number) {
+    currentYear = y;
+    showYearPicker = false;
+    yearQuery = String(y);
+  }
+
+  function toggleMonthPicker() {
+    showYearPicker = false;
+    showMonthPicker = !showMonthPicker;
+  }
+
+  function toggleYearPicker() {
+    showMonthPicker = false;
+    const next = !showYearPicker;
+    showYearPicker = next;
+    if (next) {
+      yearQuery = String(currentYear);
+    }
+  }
+
+  function handleYearInput() {
+    showMonthPicker = false;
+    showYearPicker = true;
+  }
+
+  function commitYear() {
+    const parsed = parseCommittedYear(yearQuery, today.year);
+    if (parsed !== null) {
+      selectYear(parsed);
+    }
+  }
+
+  function cancelYear() {
+    showYearPicker = false;
+    yearQuery = String(currentYear);
+  }
+</script>
+
+<div class={cn("flex w-72 flex-col gap-1 p-2 select-none", className)}>
+  <div class="mb-1 flex items-center gap-1">
+    <button
+      type="button"
+      aria-label="previous-month"
+      class="rounded p-1.5 transition-colors hover:bg-muted"
+      onclick={prevMonth}
+    >
+      <HugeiconsIcon icon={ChevronLeftIcon} size={16} strokeWidth={1.5} />
+    </button>
+
+    <div class="relative flex-1">
+      <MonthSelect
+        months={monthNames}
+        month={currentMonth}
+        open={showMonthPicker}
+        onToggle={toggleMonthPicker}
+        onSelect={selectMonth}
+      />
+    </div>
+
+    <div class="relative flex-1">
+      <YearSelect
+        years={filteredYears}
+        year={currentYear}
+        query={yearQuery}
+        open={showYearPicker}
+        onQueryChange={(q) => (yearQuery = q)}
+        onFocus={handleYearInput}
+        onToggle={toggleYearPicker}
+        onCommit={commitYear}
+        onCancel={cancelYear}
+        onSelect={selectYear}
+      />
+    </div>
+
+    <button
+      type="button"
+      aria-label="next-month"
+      class="rounded p-1.5 transition-colors hover:bg-muted"
+      onclick={nextMonth}
+    >
+      <HugeiconsIcon icon={ChevronRightIcon} size={16} strokeWidth={1.5} />
+    </button>
+  </div>
+
+  <DaysGrid
+    year={currentYear}
+    month={currentMonth}
+    weeks={weeks}
+    weekdays={weekdays}
+    today={today}
+    {value}
+    {rangeStart}
+    {rangeEnd}
+    {min}
+    {max}
+    {onselect}
+  />
 </div>

package/dist/components/ui/form/ui/calendar/CalendarCard.svelte

@@ -1,90 +1,90 @@
-<script lang="ts">
-  import type { IconSvgElement } from "@hugeicons/svelte";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Calendar01Icon } from "@hugeicons/core-free-icons";
-  import type { Snippet } from "svelte";
-  import { Popover, PopoverTrigger, PopoverContent } from "../../../popover";
-  import Calendar from "./Calendar.svelte";
-  import { cn } from "../../../../../utils.js";
-
-  type Props = {
-    open?: boolean;
-    value?: Date;
-    rangeStart?: Date;
-    rangeEnd?: Date;
-    min?: Date;
-    max?: Date;
-    disabled?: boolean;
-    isIcon?: boolean;
-    icon?: IconSvgElement;
-    inputClass?: string;
-    onselect?: (date: Date) => void;
-    children?: Snippet;
-    content?: Snippet;
-  };
-
-  let {
-    open = $bindable(false),
-    value,
-    rangeStart,
-    rangeEnd,
-    min,
-    max,
-    disabled = false,
-    isIcon = true,
-    icon = Calendar01Icon,
-    inputClass,
-    onselect,
-    children,
-    content,
-  }: Props = $props();
-
-  const triggerClass = $derived(
-    cn(
-      "h-9 w-full min-w-0 rounded-md border bg-transparent py-1 text-base shadow-xs",
-      "transition-colors outline-none md:text-sm cursor-pointer",
-      "border-input dark:bg-input/30 text-foreground",
-      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3",
-      "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-      "flex items-center text-left",
-      isIcon ? "pl-9" : "pl-2.5",
-      "pr-9",
-      inputClass,
-    ),
-  );
-</script>
-
-<Popover bind:open>
-  {#if isIcon}
-    <span
-      class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400"
-    >
-      <HugeiconsIcon icon={icon} size={16} strokeWidth={1.5} />
-    </span>
-  {/if}
-
-  <PopoverTrigger class={triggerClass} {disabled}>
-    {@render children?.()}
-  </PopoverTrigger>
-
-  <span
-    class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400"
-  >
-    <HugeiconsIcon icon={Calendar01Icon} size={16} strokeWidth={1.5} />
-  </span>
-
-  <PopoverContent align="start" side="bottom" class="w-auto p-0">
-    {#if content}
-      {@render content()}
-    {:else}
-      <Calendar
-        {value}
-        {rangeStart}
-        {rangeEnd}
-        {min}
-        {max}
-        {onselect}
-      />
-    {/if}
-  </PopoverContent>
+<script lang="ts">
+  import type { IconSvgElement } from "@hugeicons/svelte";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Calendar01Icon } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+  import { Popover, PopoverTrigger, PopoverContent } from "../../../popover";
+  import Calendar from "./Calendar.svelte";
+  import { cn } from "../../../../../utils.js";
+
+  type Props = {
+    open?: boolean;
+    value?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    min?: Date;
+    max?: Date;
+    disabled?: boolean;
+    isIcon?: boolean;
+    icon?: IconSvgElement;
+    inputClass?: string;
+    onselect?: (date: Date) => void;
+    children?: Snippet;
+    content?: Snippet;
+  };
+
+  let {
+    open = $bindable(false),
+    value,
+    rangeStart,
+    rangeEnd,
+    min,
+    max,
+    disabled = false,
+    isIcon = true,
+    icon = Calendar01Icon,
+    inputClass,
+    onselect,
+    children,
+    content,
+  }: Props = $props();
+
+  const triggerClass = $derived(
+    cn(
+      "h-9 w-full min-w-0 rounded-md border bg-transparent py-1 text-base shadow-xs",
+      "transition-colors outline-none md:text-sm cursor-pointer",
+      "border-input dark:bg-input/30 text-foreground",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3",
+      "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+      "flex items-center text-left",
+      isIcon ? "pl-9" : "pl-2.5",
+      "pr-9",
+      inputClass,
+    ),
+  );
+</script>
+
+<Popover bind:open>
+  {#if isIcon}
+    <span
+      class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400"
+    >
+      <HugeiconsIcon icon={icon} size={16} strokeWidth={1.5} />
+    </span>
+  {/if}
+
+  <PopoverTrigger class={triggerClass} {disabled}>
+    {@render children?.()}
+  </PopoverTrigger>
+
+  <span
+    class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400"
+  >
+    <HugeiconsIcon icon={Calendar01Icon} size={16} strokeWidth={1.5} />
+  </span>
+
+  <PopoverContent align="start" side="bottom" class="w-auto p-0">
+    {#if content}
+      {@render content()}
+    {:else}
+      <Calendar
+        {value}
+        {rangeStart}
+        {rangeEnd}
+        {min}
+        {max}
+        {onselect}
+      />
+    {/if}
+  </PopoverContent>
 </Popover>