negodesign 0.0.77 → 0.0.79

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/data/InputIconDefault.svelte.js

@@ -1,4 +1,4 @@
-import { Mail01Icon, LockPasswordIcon, Search01Icon, SmartPhone01Icon, File01Icon, Url, } from "@hugeicons/core-free-icons";
+import { Mail01Icon, LockPasswordIcon, Search01Icon, SmartPhone01Icon, File01Icon, Calendar01Icon, Url, } from "@hugeicons/core-free-icons";
 export const inputIconMap = {
     email: Mail01Icon,
     password: LockPasswordIcon,
@@ -6,4 +6,5 @@ export const inputIconMap = {
     tel: SmartPhone01Icon,
     url: Url,
     file: File01Icon,
+    date: Calendar01Icon,
 };

package/dist/components/ui/form/data/InputLabel.svelte.d.ts

@@ -4,5 +4,8 @@ export interface InputLabelProps {
     isLabel?: boolean;
     isIcon?: boolean;
     label?: string;
+    labelClass?: string;
+    inputClass?: string;
+    placeholderClass?: string;
     [key: string]: any;
 }

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

@@ -0,0 +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}
+  />
+</div>

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

@@ -0,0 +1,15 @@
+type Props = {
+    value?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    min?: Date;
+    max?: Date;
+    month?: number;
+    year?: number;
+    locale?: string;
+    onselect?: (date: Date) => void;
+    class?: string;
+};
+declare const Calendar: import("svelte").Component<Props, {}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

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

@@ -0,0 +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>
+</Popover>

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

@@ -0,0 +1,20 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+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;
+};
+declare const CalendarCard: import("svelte").Component<Props, {}, "open">;
+type CalendarCard = ReturnType<typeof CalendarCard>;
+export default CalendarCard;

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { cn } from "../../../../../utils.js";
+  import {
+    isToday,
+    isSelected,
+    isInRange,
+    isOutsideMonth,
+    isDisabled,
+    type CalendarToday,
+  } from "./utils.js";
+
+  type Props = {
+    year: number;
+    month: number;
+    weeks: Date[][];
+    weekdays: string[];
+    today: CalendarToday;
+    value?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    min?: Date;
+    max?: Date;
+    onselect?: (date: Date) => void;
+  };
+
+  let {
+    year,
+    month,
+    weeks,
+    weekdays,
+    today,
+    value,
+    rangeStart,
+    rangeEnd,
+    min,
+    max,
+    onselect,
+  }: Props = $props();
+</script>
+
+<div class="grid grid-cols-7">
+  {#each weekdays as day, i (i)}
+    <div class="py-1 text-center text-xs font-medium text-muted-foreground">
+      {day}
+    </div>
+  {/each}
+</div>
+
+<div class="grid grid-cols-7 gap-y-0.5">
+  {#each weeks as week, wi (wi)}
+    {#each week as day, di (`${wi}-${di}`)}
+      {@const outside = isOutsideMonth(day, year, month)}
+      {@const disabled = isDisabled(day, min, max)}
+      {@const today_ = isToday(day, today)}
+      {@const selected = isSelected(day, { value, rangeStart, rangeEnd })}
+      {@const inRange = isInRange(day, rangeStart, rangeEnd)}
+      <button
+        type="button"
+        {disabled}
+        class={cn(
+          "flex h-8 w-full items-center justify-center rounded-md text-sm transition-colors",
+          "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          outside && "text-muted-foreground/40",
+          !outside && !disabled && !selected && !inRange && "text-foreground",
+          disabled && "cursor-not-allowed opacity-30",
+          today_ && !selected && "ring-1 ring-ring",
+          inRange && !selected && "bg-primary/20 text-primary font-medium",
+          selected && "bg-primary text-primary-foreground",
+        )}
+        onclick={() => onselect?.(day)}
+      >
+        {day.getDate()}
+      </button>
+    {/each}
+  {/each}
+</div>

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

@@ -0,0 +1,17 @@
+import { type CalendarToday } from "./utils.ts";
+type Props = {
+    year: number;
+    month: number;
+    weeks: Date[][];
+    weekdays: string[];
+    today: CalendarToday;
+    value?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    min?: Date;
+    max?: Date;
+    onselect?: (date: Date) => void;
+};
+declare const DaysGrid: import("svelte").Component<Props, {}, "">;
+type DaysGrid = ReturnType<typeof DaysGrid>;
+export default DaysGrid;

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ChevronDownIcon } from "@hugeicons/core-free-icons";
+  import { cn } from "../../../../../utils.js";
+
+  type Props = {
+    months: string[];
+    month: number;
+    open: boolean;
+    onToggle: () => void;
+    onSelect: (month: number) => void;
+  };
+
+  let { months, month, open, onToggle, onSelect }: Props = $props();
+</script>
+
+<button
+  type="button"
+  data-month-picker
+  class="flex h-8 w-full items-center justify-between gap-1 rounded px-2 text-sm font-medium capitalize transition-colors hover:bg-muted"
+  onclick={onToggle}
+>
+  <span>{months[month]}</span>
+  <HugeiconsIcon icon={ChevronDownIcon} size={14} strokeWidth={1.5} />
+</button>
+
+{#if open}
+  <div
+    role="listbox"
+    aria-label="select-month"
+    tabindex="-1"
+    class="absolute left-0 right-0 top-full z-10 mt-1 grid max-h-48 grid-cols-1 gap-0.5 overflow-y-auto rounded-md border bg-popover p-1 shadow-md"
+    onmousedown={(e) => e.preventDefault()}
+  >
+    {#each months as name, i (i)}
+      <button
+        type="button"
+        class={cn(
+          "rounded px-1 py-1 text-xs capitalize transition-colors hover:bg-muted",
+          i === month
+            ? "bg-primary font-medium text-primary-foreground"
+            : "text-foreground",
+        )}
+        onclick={() => onSelect(i)}
+      >
+        {name}
+      </button>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+type Props = {
+    months: string[];
+    month: number;
+    open: boolean;
+    onToggle: () => void;
+    onSelect: (month: number) => void;
+};
+declare const MonthSelect: import("svelte").Component<Props, {}, "">;
+type MonthSelect = ReturnType<typeof MonthSelect>;
+export default MonthSelect;

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

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ChevronDownIcon } from "@hugeicons/core-free-icons";
+  import { cn } from "../../../../../utils.js";
+
+  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;
+  };
+
+  let {
+    years,
+    year,
+    query,
+    open,
+    onQueryChange,
+    onFocus,
+    onToggle,
+    onCommit,
+    onCancel,
+    onSelect,
+  }: Props = $props();
+
+  let yearListRef = $state<HTMLDivElement | null>(null);
+  let yearInputRef = $state<HTMLInputElement | null>(null);
+
+  function commitYear() {
+    onCommit();
+    yearInputRef?.blur();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitYear();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+    }
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const el = yearListRef;
+    const selected = el?.querySelector<HTMLElement>(
+      `[data-year="${year}"]`,
+    );
+    selected?.scrollIntoView({ block: "nearest" });
+  });
+</script>
+
+<div class="flex h-8 items-center rounded px-1">
+  <input
+    bind:this={yearInputRef}
+    type="text"
+    inputmode="numeric"
+    pattern="[0-9]*"
+    bind:value={query}
+    onfocus={onFocus}
+    oninput={onFocus}
+    onkeydown={handleKeydown}
+    onblur={() => {
+      if (!open) {
+        onCancel();
+      }
+    }}
+    class="w-full min-w-0 rounded-md border border-transparent bg-transparent px-1 py-1 text-center text-sm font-medium outline-none transition-colors focus:border-ring focus:ring-2 focus:ring-ring/50"
+  />
+  <button
+    type="button"
+    class="rounded p-0.5 transition-colors hover:bg-muted"
+    onclick={onToggle}
+  >
+    <HugeiconsIcon icon={ChevronDownIcon} size={14} strokeWidth={1.5} />
+  </button>
+</div>
+
+{#if open}
+  <div
+    bind:this={yearListRef}
+    role="listbox"
+    aria-label="select-year"
+    tabindex="-1"
+    class="absolute left-0 right-0 top-full z-10 mt-1 max-h-56 overflow-y-auto rounded-md border bg-popover p-1 shadow-md"
+    onmousedown={(e) => e.preventDefault()}
+  >
+    {#if years.length === 0}
+      <div class="px-2 py-1 text-center text-xs text-muted-foreground">
+        {query}
+      </div>
+    {:else}
+      {#each years as yearItem, i (yearItem)}
+        <button
+          type="button"
+          data-year={yearItem}
+          class={cn(
+            "block w-full rounded px-2 py-1 text-left text-sm transition-colors hover:bg-muted",
+            yearItem === year
+              ? "bg-primary font-medium text-primary-foreground hover:bg-primary"
+              : "text-foreground",
+          )}
+          onclick={() => onSelect(yearItem)}
+        >
+          {yearItem}
+        </button>
+      {/each}
+    {/if}
+  </div>
+{/if}