negodesign 0.0.80 → 0.0.82

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

@@ -1,76 +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}
+<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/MonthSelect.svelte

@@ -1,50 +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>
+<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/YearSelect.svelte

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

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

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