negodesign 0.0.1 → 0.0.3

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.svelte

@@ -1,22 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  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";
+
+  /** Campo de input para email com ícone e 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,22 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  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";
+
+  /** Campo de input para confirmação de senha com ícone e 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,22 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  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";
+
+  /** Campo de input para senha com ícone e 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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { InputLabelProps } from "../data/InputLabel.svelte";
+  import InputBase from "./input-base.svelte";
+  import { t } from "../../../../i18n";
+
+  /** Campo de input para telefone com ícone e label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="text"
+  label={label || $t("input.phone.label")}
+  placeholder={placeholder || $t("input.phone.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import type { InputLabelProps } from "../data/InputLabel.svelte";
+declare const InputPhone: import("svelte").Component<InputLabelProps, {}, "value">;
+type InputPhone = ReturnType<typeof InputPhone>;
+export default InputPhone;

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

@@ -1,21 +1,22 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  label={label || $t("input.usename.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";
+
+  /** Campo de input para nome de usuário com ícone e label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  label={label || $t("input.usename.label")}
+  placeholder={placeholder || $t("input.username.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

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}

package/dist/components/core/link/link-forget-password.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.forget.password")}!
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.forget.password")}!
+</a>

package/dist/components/core/link/link-privacy-polity.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.privacy-policy.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.privacy-policy.label")}
+</a>

package/dist/components/core/link/link-terms-of-service.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.terms-of-service.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.terms-of-service.label")}
+</a>