negodesign 0.0.55 → 0.0.57

package/dist/components/core/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/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/grid/data/types.d.ts

@@ -0,0 +1,16 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+export interface ItemGridProps {
+    id?: string | number;
+    title: string;
+    description?: string;
+    titleClass?: string;
+    descriptionClass?: string;
+    icon: string | IconSvgElement;
+    onClick?: (id: string | number) => void;
+}
+export interface GridProps {
+    items?: ItemGridProps[];
+    className?: string;
+    variant?: 1 | 2;
+    onClick?: (id: string | number) => void;
+}

package/dist/components/core/grid/ui/01/Grid01.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { ItemGridProps } from "../../data/types";
+    import DescriptionGrid from "../shared/DescriptionGrid.svelte";
+    import IconRenderGrid from "../shared/IconRenderGrid.svelte";
+    import TitleGrid from "../shared/TitleGrid.svelte";
+
+    let {
+        id,
+        icon,
+        title,
+        description,
+        titleClass,
+        descriptionClass,
+        onClick,
+    }: ItemGridProps = $props();
+</script>
+
+<button
+    onclick={() => {
+        if (id && onClick) onClick(id);
+    }}
+    class="flex flex-col justify-center items-center gap-2"
+>
+    <IconRenderGrid {icon} />
+    <TitleGrid {titleClass} {title} />
+    <DescriptionGrid {descriptionClass} {description} />
+</button>

package/dist/components/core/grid/ui/01/Grid01.svelte.d.ts

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

package/dist/components/core/grid/ui/02/Grid02.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { ItemGridProps } from "../../data/types";
+    import DescriptionGrid from "../shared/DescriptionGrid.svelte";
+    import IconRenderGrid from "../shared/IconRenderGrid.svelte";
+    import TitleGrid from "../shared/TitleGrid.svelte";
+
+    let {
+        id,
+        icon,
+        title,
+        description,
+        titleClass,
+        descriptionClass,
+        onClick,
+    }: ItemGridProps = $props();
+</script>
+
+<button
+    onclick={() => {
+        if (id && onClick) onClick(id);
+    }}
+    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer"
+>
+    <IconRenderGrid {icon} />
+    <TitleGrid {titleClass} {title} />
+    <DescriptionGrid {descriptionClass} {description} />
+</button>

package/dist/components/core/grid/ui/02/Grid02.svelte.d.ts

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

package/dist/components/core/grid/ui/PanelGrid.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { useDevice } from "../../../../hooks/responsive.svelte";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, className, onClick, items }: GridProps = $props();
+
+  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
+
+  const responsive = useDevice();
+</script>
+
+<div
+  class="gap-4 my-2 {responsive.isMobile
+    ? styleMobile
+    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} 
+    {className}"
+>
+  {#each items as item, i (i)}
+    {#if variant == 2}
+      <Grid02 {...item} {onClick} />
+    {:else}
+      <Grid01 {...item} {onClick} />
+    {/if}
+  {/each}
+</div>

package/dist/components/core/grid/ui/PanelGrid.svelte.d.ts

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

package/dist/components/core/grid/ui/SimpleGrid.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { useDevice } from "../../../../hooks/responsive.svelte";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, className, items }: GridProps = $props();
+
+  const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len <= 3) return "grid grid-cols-3";
+    if (len <= 4) return "grid grid-cols-4";
+    if (len <= 5) return "grid grid-cols-5";
+    if (len <= 6) return "grid grid-cols-6";
+    if (len <= 7) return "grid grid-cols-7";
+    if (len > 7) return styleMobile;
+    return "grid grid-cols-1";
+  };
+
+  const responsive = useDevice();
+</script>
+
+<div
+  class="{responsive.isMobile ? styleMobile : cols()} gap-4 my-2 {className}"
+>
+  {#each items as item, i (i)}
+    {#if variant == 2}
+      <Grid02 {...item} />
+    {:else}
+      <Grid01 {...item} />
+    {/if}
+  {/each}
+</div>

package/dist/components/core/grid/ui/SimpleGrid.svelte.d.ts

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