negodesign 0.0.1

package/dist/components/core/datatable/ui/DataTableContent.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { ColumnDef, Table as TanstackTable } from "@tanstack/table-core";
+declare function $$render<T>(): {
+    props: {
+        table: TanstackTable<T>;
+        columns: ColumnDef<T>[];
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableContent: $$IsomorphicComponent;
+type DataTableContent<T> = InstanceType<typeof DataTableContent<T>>;
+export default DataTableContent;

package/dist/components/core/datatable/ui/DataTableCore.svelte

@@ -0,0 +1,144 @@
+<script lang="ts" generics="T">
+    import {
+        type CellContext,
+        type ColumnDef,
+        type ColumnFiltersState,
+        type PaginationState,
+        type RowSelectionState,
+        type SortingState,
+        type VisibilityState,
+        getCoreRowModel,
+        getFilteredRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+    } from "@tanstack/table-core";
+    import type { DataTableItem } from "../data/data-table";
+    import { resolveHeader } from "../data/resolve-header.svelte";
+    import { resolveCellBadge } from "../data/resolve-cell-badge.svelte";
+    import {
+        createDragColumn,
+        createSelectColumn,
+    } from "../data/columns-create";
+    import {
+        createSvelteTable,
+        renderComponent,
+    } from "../../../ui/data-table";
+    import DataTableListFilter from "./DataTableListFilter.svelte";
+    import DataTableContent from "./DataTableContent.svelte";
+    import DataTableListPagination from "./DataTableListPagination.svelte";
+
+    let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
+
+    let columns: ColumnDef<T>[] = $derived([
+        createDragColumn<T>(),
+        createSelectColumn<T>(),
+        ...config.map((it) => ({
+            accessorKey: it.accessorKey,
+            header: resolveHeader(it.header),
+            cell: resolveCellBadge(it.cell, it.badge),
+            enableSorting: it.enableSorting,
+            enableHiding: it.enableHiding,
+        })),
+        ...(actions
+            ? [{
+                  id: "actions",
+                  cell: (ctx: CellContext<T, unknown>) => renderComponent(actions, ctx as any),
+                  enableSorting: false,
+                  enableHiding: false,
+              } satisfies ColumnDef<T>]
+            : []),
+    ]);
+
+    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
+    let columnFilters = $state<ColumnFiltersState>([]);
+    let columnVisibility = $state<VisibilityState>({});
+    let rowSelection = $state<RowSelectionState>({});
+    let sorting = $state<SortingState>([]);
+
+    let table = $derived(
+        createSvelteTable({
+            data: items,
+            columns,
+            state: {
+                get pagination() {
+                    return pagination;
+                },
+                get sorting() {
+                    return sorting;
+                },
+                get columnVisibility() {
+                    return columnVisibility;
+                },
+                get rowSelection() {
+                    return rowSelection;
+                },
+                get columnFilters() {
+                    return columnFilters;
+                },
+            },
+            getCoreRowModel: getCoreRowModel(),
+            getPaginationRowModel: getPaginationRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            onPaginationChange: (
+                updater:
+                    | PaginationState
+                    | ((arg0: PaginationState) => PaginationState),
+            ) => {
+                if (typeof updater === "function") {
+                    pagination = updater(pagination);
+                } else {
+                    pagination = updater;
+                }
+            },
+            onSortingChange: (
+                updater: SortingState | ((arg0: SortingState) => SortingState),
+            ) => {
+                if (typeof updater === "function") {
+                    sorting = updater(sorting);
+                } else {
+                    sorting = updater;
+                }
+            },
+            onColumnFiltersChange: (
+                updater:
+                    | ColumnFiltersState
+                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
+            ) => {
+                if (typeof updater === "function") {
+                    columnFilters = updater(columnFilters);
+                } else {
+                    columnFilters = updater;
+                }
+            },
+            onColumnVisibilityChange: (
+                updater:
+                    | VisibilityState
+                    | ((arg0: VisibilityState) => VisibilityState),
+            ) => {
+                if (typeof updater === "function") {
+                    columnVisibility = updater(columnVisibility);
+                } else {
+                    columnVisibility = updater;
+                }
+            },
+            onRowSelectionChange: (
+                updater:
+                    | RowSelectionState
+                    | ((arg0: RowSelectionState) => RowSelectionState),
+            ) => {
+                if (typeof updater === "function") {
+                    rowSelection = updater(rowSelection);
+                } else {
+                    rowSelection = updater;
+                }
+            },
+        }),
+    );
+</script>
+
+<div class="-mb-8 w-full">
+    <DataTableListFilter {table} column={columnFilter} />
+    <DataTableContent {table} {columns} />
+    <DataTableListPagination {table} />
+</div>

package/dist/components/core/datatable/ui/DataTableCore.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DataTableItem } from "../data/data-table";
+declare function $$render<T>(): {
+    props: DataTableItem<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableCore: $$IsomorphicComponent;
+type DataTableCore<T> = InstanceType<typeof DataTableCore<T>>;
+export default DataTableCore;

package/dist/components/core/datatable/ui/DataTableDragHandle.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { GripVerticalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+</script>
+
+<button class="cursor-grab opacity-60 hover:opacity-100 w-min">
+    <HugeiconsIcon icon={GripVerticalIcon} class="size-4" />
+</button>

package/dist/components/core/datatable/ui/DataTableDragHandle.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataTableDragHandle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataTableDragHandle = InstanceType<typeof DataTableDragHandle>;
+export default DataTableDragHandle;

package/dist/components/core/datatable/ui/DataTableListFilter.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" generics="T">
+    import Button from "../../../button.svelte";
+    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+    import { Input } from "../../../ui/input/index.js";
+    import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { Table } from "@tanstack/table-core";
+
+    type Props = {
+        table: Table<T>;
+        column?: keyof T & string;
+    };
+
+    let { table, column }: Props = $props();
+</script>
+
+<div class="flex items-center py-4">
+    <Input
+        placeholder="Filter emails..."
+        value={(column
+            ? (table.getColumn(column)?.getFilterValue() as string)
+            : "") ?? ""}
+        oninput={(e) =>
+            column &&
+            table.getColumn(column)?.setFilterValue(e.currentTarget.value)}
+        onchange={(e) => {
+            column &&
+                table.getColumn(column)?.setFilterValue(e.currentTarget.value);
+        }}
+        class="max-w-sm"
+    />
+    <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+                <Button {...props} variant="outline" class="ms-auto">
+                    Columns <HugeiconsIcon
+                        icon={ArrowDown01Icon}
+                        class="ms-2 size-4"
+                    />
+                </Button>
+            {/snippet}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+            {#each table
+                .getAllColumns()
+                .filter((col) => col.getCanHide()) as col (col.id)}
+                <DropdownMenu.CheckboxItem
+                    class="capitalize"
+                    bind:checked={
+                        () => col.getIsVisible(),
+                        (v) => col.toggleVisibility(!!v)
+                    }
+                >
+                    {col.id}
+                </DropdownMenu.CheckboxItem>
+            {/each}
+        </DropdownMenu.Content>
+    </DropdownMenu.Root>
+</div>

package/dist/components/core/datatable/ui/DataTableListFilter.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Table } from "@tanstack/table-core";
+declare function $$render<T>(): {
+    props: {
+        table: Table<T>;
+        column?: keyof T & string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableListFilter: $$IsomorphicComponent;
+type DataTableListFilter<T> = InstanceType<typeof DataTableListFilter<T>>;
+export default DataTableListFilter;

package/dist/components/core/datatable/ui/DataTableListPagination.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T">
+    import Button from "../../../button.svelte";
+    import type { Table } from "@tanstack/table-core";
+
+    type Props = {
+        table: Table<T>;
+    };
+
+    let { table }: Props = $props();
+</script>
+
+<div class="flex items-center justify-end space-x-2 pt-4">
+    <div class="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+    </div>
+    <div class="space-x-2">
+        <Button
+            variant="outline"
+            size="sm"
+            onclick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+        >
+            Previous
+        </Button>
+        <Button
+            variant="outline"
+            size="sm"
+            onclick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+        >
+            Next
+        </Button>
+    </div>
+</div>

package/dist/components/core/datatable/ui/DataTableListPagination.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Table } from "@tanstack/table-core";
+declare function $$render<T>(): {
+    props: {
+        table: Table<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableListPagination: $$IsomorphicComponent;
+type DataTableListPagination<T> = InstanceType<typeof DataTableListPagination<T>>;
+export default DataTableListPagination;

package/dist/components/core/datatable/ui/columns-create.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnDef } from "@tanstack/table-core";
+export declare function createDragColumn<T>(): ColumnDef<T>;
+export declare function createSelectColumn<T>(): ColumnDef<T>;

package/dist/components/core/datatable/ui/columns-create.svelte.js

@@ -0,0 +1,33 @@
+import { renderComponent } from "../../../ui/data-table";
+import DataTableDragHandle from "./DataTableDragHandle.svelte";
+import DataTableCheckbox from "./DataTableCheckbox.svelte";
+export function createDragColumn() {
+    return {
+        id: "drag",
+        header: () => null,
+        cell: () => renderComponent(DataTableDragHandle, {}),
+        enableSorting: false,
+        enableHiding: false,
+    };
+}
+export function createSelectColumn() {
+    return {
+        id: "select",
+        header: ({ table }) => renderComponent(DataTableCheckbox, {
+            class: "w-[15px]",
+            checked: table.getIsAllPageRowsSelected(),
+            indeterminate: table.getIsSomePageRowsSelected() &&
+                !table.getIsAllPageRowsSelected(),
+            onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+            "aria-label": "Select all",
+        }),
+        cell: ({ row }) => renderComponent(DataTableCheckbox, {
+            class: "w-[15px]",
+            checked: row.getIsSelected(),
+            onCheckedChange: (value) => row.toggleSelected(!!value),
+            "aria-label": "Select row",
+        }),
+        enableSorting: false,
+        enableHiding: false,
+    };
+}

package/dist/components/core/form/data/InputIconDefault.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLInputTypeAttribute } from "svelte/elements";
+import type { IconSvgElement } from "@hugeicons/svelte";
+export declare const inputIconMap: Partial<Record<HTMLInputTypeAttribute, IconSvgElement>>;

package/dist/components/core/form/data/InputIconDefault.svelte.js

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

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

@@ -0,0 +1,8 @@
+import type { HTMLInputTypeAttribute } from "svelte/elements";
+export interface InputLabelProps {
+    type?: HTMLInputTypeAttribute;
+    isLabel?: boolean;
+    isIcon?: boolean;
+    label?: string;
+    [key: string]: any;
+}

package/dist/components/core/form/data/InputLabel.svelte.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +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
+  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-email.svelte.d.ts

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

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

@@ -0,0 +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
+  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-confirm.svelte.d.ts

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

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

@@ -0,0 +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
+  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-password.svelte.d.ts

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

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

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

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

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