negodesign 0.0.26 → 0.0.28

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

@@ -1,81 +1,81 @@
-<script lang="ts">
-  import Input from "../../../ui/input/input.svelte";
-  import { Label } from "../../../ui/label";
-  import { EyeIcon, EyeOffIcon } from "@hugeicons/core-free-icons";
-  import { inputIconMap } from "../data/InputIconDefault.svelte";
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  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 "../../../ui/input/input.svelte";
+  import { Label } from "../../../ui/label";
+  import { EyeIcon, EyeOffIcon } from "@hugeicons/core-free-icons";
+  import { inputIconMap } from "../data/InputIconDefault.svelte";
+  import type { InputLabelProps } from "../data/InputLabel.svelte";
+  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}

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

@@ -1,23 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  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";
+  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/core/form/ui/input-email.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  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";
+  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}
+/>

package/dist/components/core/form/ui/input-password-confirm.svelte

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

package/dist/components/core/form/ui/input-password.svelte

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

package/dist/components/core/form/ui/input-phone.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-  import { PhoneInput } from "../../../ui/phone-input";
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import { Label } from "../../../ui/label";
-  import { t } from "../../../../i18n";
-
-  /** Phone input field with icon and label. */
-  let {
-    label,
-    isLabel,
-    placeholder,
-    value = $bindable(""),
-  }: InputLabelProps = $props();
-</script>
-
-{#if isLabel}
-  <div class="flex flex-col gap-3 w-full">
-    {#if label}
-      <Label>{label}</Label>
-    {:else}
-      <Label>{$t("input.email-or-phone.label")}</Label>
-    {/if}
-    <PhoneInput
-      placeholder={placeholder || $t("input.email-or-phone.placeholder")}
-      bind:value
-    />
-  </div>
-{:else}
-  <PhoneInput
-    placeholder={placeholder || $t("input.email-or-phone.placeholder")}
-    bind:value
-  />
-{/if}
+<script lang="ts">
+  import { PhoneInput } from "../../../ui/phone-input";
+  import type { InputLabelProps } from "../data/InputLabel.svelte";
+  import { Label } from "../../../ui/label";
+  import { t } from "../../../../i18n";
+
+  /** Phone input field with icon and label. */
+  let {
+    label,
+    isLabel,
+    placeholder,
+    value = $bindable(""),
+  }: InputLabelProps = $props();
+</script>
+
+{#if isLabel}
+  <div class="flex flex-col gap-3 w-full">
+    {#if label}
+      <Label>{label}</Label>
+    {:else}
+      <Label>{$t("input.email-or-phone.label")}</Label>
+    {/if}
+    <PhoneInput
+      placeholder={placeholder || $t("input.email-or-phone.placeholder")}
+      bind:value
+    />
+  </div>
+{:else}
+  <PhoneInput
+    placeholder={placeholder || $t("input.email-or-phone.placeholder")}
+    bind:value
+  />
+{/if}

package/dist/components/core/form/ui/input-username.svelte

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

package/dist/components/core/hero/SimpleHero.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-  import { Button } from "../../ui/button/index.js";
-  import type { HeroSimpleProps } from "./types";
-  let {
-    title,
-    subTitle,
-    description,
-    image,
-    buttons,
-    titleClass,
-    subTitleClass,
-    descriptionClass,
-    imageClass,
-  }: HeroSimpleProps = $props();
-</script>
-
-<section class="relative flex p-2">
-  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
-    <div class="flex justify-center items-center">
-      <div class="space-y-1">
-        {#if title}
-          <h1
-            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
-          >
-            {title}
-          </h1>
-        {/if}
-        {#if subTitle}
-          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
-            {subTitle}
-          </p>
-        {/if}
-        {#if description}
-          <p
-            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
-          >
-            {description}
-          </p>
-        {/if}
-        {#if buttons}
-          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
-            {#each buttons as button, i (i)}
-              <Button
-                href={button.href}
-                class={button.className}
-                onclick={button.onClick}
-              >
-                {button.label}
-              </Button>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    </div>
-    <div class="flex justify-center items-center">
-      {#if image}
-        <img
-          src={image}
-          alt={image}
-          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
-        />
-      {/if}
-    </div>
-  </div>
-</section>
+<script lang="ts">
+  import { Button } from "../../ui/button/index.js";
+  import type { HeroSimpleProps } from "./types";
+  let {
+    title,
+    subTitle,
+    description,
+    image,
+    buttons,
+    titleClass,
+    subTitleClass,
+    descriptionClass,
+    imageClass,
+  }: HeroSimpleProps = $props();
+</script>
+
+<section class="relative flex p-2">
+  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
+    <div class="flex justify-center items-center">
+      <div class="space-y-1">
+        {#if title}
+          <h1
+            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
+          >
+            {title}
+          </h1>
+        {/if}
+        {#if subTitle}
+          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
+            {subTitle}
+          </p>
+        {/if}
+        {#if description}
+          <p
+            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
+          >
+            {description}
+          </p>
+        {/if}
+        {#if buttons}
+          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
+            {#each buttons as button, i (i)}
+              <Button
+                href={button.href}
+                class={button.className}
+                onclick={button.onClick}
+              >
+                {button.label}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-center items-center">
+      {#if image}
+        <img
+          src={image}
+          alt={image}
+          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
+        />
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/components/core/label/LabelOr.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import Separator from "../../ui/separator/separator.svelte";
-  import { t } from "../../../i18n";
-
-  type Props = {
-    variant?: "SEPARATOR";
-  };
-
-  let { variant }: Props = $props();
-</script>
-
-{#if variant === "SEPARATOR"}
-  <div class="relative my-1 text-center">
-    <div class="absolute inset-0 flex items-center">
-      <Separator />
-    </div>
-    <span
-      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
-    >
-      {$t("label.or")}
-    </span>
-  </div>
-{:else}
-  {$t("label.or")}
-{/if}
+<script lang="ts">
+  import Separator from "../../ui/separator/separator.svelte";
+  import { t } from "../../../i18n";
+
+  type Props = {
+    variant?: "SEPARATOR";
+  };
+
+  let { variant }: Props = $props();
+</script>
+
+{#if variant === "SEPARATOR"}
+  <div class="relative my-1 text-center">
+    <div class="absolute inset-0 flex items-center">
+      <Separator />
+    </div>
+    <span
+      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
+    >
+      {$t("label.or")}
+    </span>
+  </div>
+{:else}
+  {$t("label.or")}
+{/if}