negodesign 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
  2. package/dist/components/core/button/ButtonBack.svelte +18 -18
  3. package/dist/components/core/button/ButtonLogin.svelte +15 -15
  4. package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
  5. package/dist/components/core/carousel/data/CarouselModel.d.ts +2 -1
  6. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  7. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  8. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  9. package/dist/components/core/datatable/ui/DataTableCore.svelte +144 -144
  10. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  11. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  12. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  13. package/dist/components/core/form/ui/input-base.svelte +81 -81
  14. package/dist/components/core/form/ui/input-email.svelte +22 -22
  15. package/dist/components/core/form/ui/input-password-confirm.svelte +22 -22
  16. package/dist/components/core/form/ui/input-password.svelte +22 -22
  17. package/dist/components/core/form/ui/input-phone.svelte +22 -0
  18. package/dist/components/core/form/ui/input-phone.svelte.d.ts +4 -0
  19. package/dist/components/core/form/ui/input-username.svelte +21 -21
  20. package/dist/components/core/label/LabelOr.svelte +25 -25
  21. package/dist/components/core/link/link-forget-password.svelte +12 -12
  22. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  23. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  24. package/dist/components/core/nav/ui/nav-menu-bar.svelte +97 -97
  25. package/dist/components/core/nav/ui/nav-menu-bottom-bar.svelte +33 -33
  26. package/dist/components/core/nav/ui/nav-menu-top-bar.svelte +103 -103
  27. package/dist/components/core/sidebar/menu-bar-sidebar.svelte +62 -62
  28. package/dist/components/core/tabs/ui/tab-underline.svelte +41 -41
  29. package/dist/components/pages/admin/ui/admin-content.svelte +13 -13
  30. package/dist/components/pages/admin/ui/admin-panel.svelte +40 -40
  31. package/dist/components/pages/login/admin/01/data/page-props.d.ts +10 -0
  32. package/dist/components/pages/login/admin/01/data/page-props.js +1 -0
  33. package/dist/components/pages/login/admin/01/ui/AuthCard.svelte +84 -58
  34. package/dist/components/pages/login/admin/01/ui/AuthCard.svelte.d.ts +11 -17
  35. package/dist/components/pages/login/admin/01/ui/FormLogin.svelte +25 -5
  36. package/dist/components/pages/login/admin/01/ui/FormLogin.svelte.d.ts +6 -1
  37. package/dist/components/pages/login/admin/01/ui/FormLoginEmailPassword.svelte +12 -0
  38. package/dist/components/pages/login/admin/01/ui/FormLoginEmailPassword.svelte.d.ts +7 -0
  39. package/dist/components/pages/login/admin/01/ui/FormLoginPhonePassword.svelte +12 -0
  40. package/dist/components/pages/login/admin/01/ui/FormLoginPhonePassword.svelte.d.ts +7 -0
  41. package/dist/components/pages/login/admin/01/ui/FormLoginUsernamePassword.svelte +12 -0
  42. package/dist/components/pages/login/admin/01/ui/FormLoginUsernamePassword.svelte.d.ts +7 -0
  43. package/dist/components/pages/login/admin/01/ui/FormRegister.svelte +28 -28
  44. package/dist/components/pages/login/admin/01/ui/LeftHero.svelte +105 -105
  45. package/dist/components/pages/login/admin/01/ui/PageLogin.svelte +47 -49
  46. package/dist/components/pages/login/admin/01/ui/PageLogin.svelte.d.ts +14 -17
  47. package/dist/components/ui/badge/badge.svelte +49 -49
  48. package/dist/components/ui/chart/chart-container.svelte +80 -80
  49. package/dist/components/ui/chart/chart-style.svelte +37 -37
  50. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  51. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  52. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  53. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  54. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  55. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  56. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  57. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  58. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  59. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  60. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  61. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  62. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  63. package/dist/components/ui/drawer/drawer.svelte +12 -12
  64. package/dist/components/ui/select/select-content.svelte +45 -45
  65. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  66. package/dist/components/ui/select/select-group.svelte +17 -17
  67. package/dist/components/ui/select/select-item.svelte +41 -41
  68. package/dist/components/ui/select/select-label.svelte +20 -20
  69. package/dist/components/ui/select/select-portal.svelte +7 -7
  70. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  71. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  72. package/dist/components/ui/select/select-separator.svelte +18 -18
  73. package/dist/components/ui/select/select-trigger.svelte +30 -30
  74. package/dist/components/ui/select/select.svelte +11 -11
  75. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  76. package/dist/components/ui/table/table-body.svelte +15 -15
  77. package/dist/components/ui/table/table-caption.svelte +20 -20
  78. package/dist/components/ui/table/table-cell.svelte +15 -15
  79. package/dist/components/ui/table/table-footer.svelte +20 -20
  80. package/dist/components/ui/table/table-head.svelte +15 -15
  81. package/dist/components/ui/table/table-header.svelte +20 -20
  82. package/dist/components/ui/table/table-row.svelte +15 -15
  83. package/dist/components/ui/table/table.svelte +17 -17
  84. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  85. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  86. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  87. package/dist/components/ui/tabs/tabs.svelte +19 -19
  88. package/dist/index.js +0 -1
  89. package/package.json +94 -88
@@ -1,22 +1,22 @@
1
- <script lang="ts">
2
- import type { InputLabelProps } from "../data/InputLabel.svelte";
3
- import InputBase from "./input-base.svelte";
4
- import { t } from "../../../../i18n";
5
-
6
- let {
7
- label,
8
- placeholder,
9
- value = $bindable(""),
10
- ...restProps
11
- }: InputLabelProps = $props();
12
- </script>
13
-
14
- <InputBase
15
- type="email"
16
- label={label || $t("input.email.label")}
17
- placeholder={placeholder || $t("input.email.placeholder")}
18
- isLabel
19
- isIcon
20
- bind:value
21
- {...restProps}
22
- />
1
+ <script lang="ts">
2
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
3
+ import InputBase from "./input-base.svelte";
4
+ import { t } from "../../../../i18n";
5
+
6
+ let {
7
+ label,
8
+ placeholder,
9
+ value = $bindable(""),
10
+ ...restProps
11
+ }: InputLabelProps = $props();
12
+ </script>
13
+
14
+ <InputBase
15
+ type="email"
16
+ label={label || $t("input.email.label")}
17
+ placeholder={placeholder || $t("input.email.placeholder")}
18
+ isLabel
19
+ isIcon
20
+ bind:value
21
+ {...restProps}
22
+ />
@@ -1,22 +1,22 @@
1
- <script lang="ts">
2
- import type { InputLabelProps } from "../data/InputLabel.svelte";
3
- import InputBase from "./input-base.svelte";
4
- import { t } from "../../../../i18n";
5
-
6
- let {
7
- label,
8
- placeholder,
9
- value = $bindable(""),
10
- ...restProps
11
- }: InputLabelProps = $props();
12
- </script>
13
-
14
- <InputBase
15
- type="password"
16
- label={label || $t("input.password-confirm.label")}
17
- placeholder={placeholder || $t("input.password-confirm.placeholder")}
18
- isLabel
19
- isIcon
20
- bind:value
21
- {...restProps}
22
- />
1
+ <script lang="ts">
2
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
3
+ import InputBase from "./input-base.svelte";
4
+ import { t } from "../../../../i18n";
5
+
6
+ let {
7
+ label,
8
+ placeholder,
9
+ value = $bindable(""),
10
+ ...restProps
11
+ }: InputLabelProps = $props();
12
+ </script>
13
+
14
+ <InputBase
15
+ type="password"
16
+ label={label || $t("input.password-confirm.label")}
17
+ placeholder={placeholder || $t("input.password-confirm.placeholder")}
18
+ isLabel
19
+ isIcon
20
+ bind:value
21
+ {...restProps}
22
+ />
@@ -1,22 +1,22 @@
1
- <script lang="ts">
2
- import type { InputLabelProps } from "../data/InputLabel.svelte";
3
- import InputBase from "./input-base.svelte";
4
- import { t } from "../../../../i18n";
5
-
6
- let {
7
- label,
8
- placeholder,
9
- value = $bindable(""),
10
- ...restProps
11
- }: InputLabelProps = $props();
12
- </script>
13
-
14
- <InputBase
15
- type="password"
16
- label={label || $t("input.password.label")}
17
- placeholder={placeholder || $t("input.password.placeholder")}
18
- isLabel
19
- isIcon
20
- bind:value
21
- {...restProps}
22
- />
1
+ <script lang="ts">
2
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
3
+ import InputBase from "./input-base.svelte";
4
+ import { t } from "../../../../i18n";
5
+
6
+ let {
7
+ label,
8
+ placeholder,
9
+ value = $bindable(""),
10
+ ...restProps
11
+ }: InputLabelProps = $props();
12
+ </script>
13
+
14
+ <InputBase
15
+ type="password"
16
+ label={label || $t("input.password.label")}
17
+ placeholder={placeholder || $t("input.password.placeholder")}
18
+ isLabel
19
+ isIcon
20
+ bind:value
21
+ {...restProps}
22
+ />
@@ -0,0 +1,22 @@
1
+ <script lang="ts">
2
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
3
+ import InputBase from "./input-base.svelte";
4
+ import { t } from "../../../../i18n";
5
+
6
+ let {
7
+ label,
8
+ placeholder,
9
+ value = $bindable(""),
10
+ ...restProps
11
+ }: InputLabelProps = $props();
12
+ </script>
13
+
14
+ <InputBase
15
+ type="text"
16
+ label={label || $t("input.phone.label")}
17
+ placeholder={placeholder || $t("input.phone.placeholder")}
18
+ isLabel
19
+ isIcon
20
+ bind:value
21
+ {...restProps}
22
+ />
@@ -0,0 +1,4 @@
1
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
2
+ declare const InputPhone: import("svelte").Component<InputLabelProps, {}, "value">;
3
+ type InputPhone = ReturnType<typeof InputPhone>;
4
+ export default InputPhone;
@@ -1,21 +1,21 @@
1
- <script lang="ts">
2
- import type { InputLabelProps } from "../data/InputLabel.svelte";
3
- import InputBase from "./input-base.svelte";
4
- import { t } from "../../../../i18n";
5
-
6
- let {
7
- label,
8
- placeholder,
9
- value = $bindable(""),
10
- ...restProps
11
- }: InputLabelProps = $props();
12
- </script>
13
-
14
- <InputBase
15
- label={label || $t("input.usename.label")}
16
- placeholder={placeholder || $t("input.username.placeholder")}
17
- isLabel
18
- isIcon
19
- bind:value
20
- {...restProps}
21
- />
1
+ <script lang="ts">
2
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
3
+ import InputBase from "./input-base.svelte";
4
+ import { t } from "../../../../i18n";
5
+
6
+ let {
7
+ label,
8
+ placeholder,
9
+ value = $bindable(""),
10
+ ...restProps
11
+ }: InputLabelProps = $props();
12
+ </script>
13
+
14
+ <InputBase
15
+ label={label || $t("input.usename.label")}
16
+ placeholder={placeholder || $t("input.username.placeholder")}
17
+ isLabel
18
+ isIcon
19
+ bind:value
20
+ {...restProps}
21
+ />
@@ -1,25 +1,25 @@
1
- <script lang="ts">
2
- import Separator from "../../ui/separator/separator.svelte";
3
- import { t } from "../../../i18n";
4
-
5
- type Props = {
6
- variant?: "SEPARATOR";
7
- };
8
-
9
- let { variant }: Props = $props();
10
- </script>
11
-
12
- {#if variant === "SEPARATOR"}
13
- <div class="relative my-1 text-center">
14
- <div class="absolute inset-0 flex items-center">
15
- <Separator />
16
- </div>
17
- <span
18
- class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
19
- >
20
- {$t("label.or")}
21
- </span>
22
- </div>
23
- {:else}
24
- {$t("label.or")}
25
- {/if}
1
+ <script lang="ts">
2
+ import Separator from "../../ui/separator/separator.svelte";
3
+ import { t } from "../../../i18n";
4
+
5
+ type Props = {
6
+ variant?: "SEPARATOR";
7
+ };
8
+
9
+ let { variant }: Props = $props();
10
+ </script>
11
+
12
+ {#if variant === "SEPARATOR"}
13
+ <div class="relative my-1 text-center">
14
+ <div class="absolute inset-0 flex items-center">
15
+ <Separator />
16
+ </div>
17
+ <span
18
+ class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
19
+ >
20
+ {$t("label.or")}
21
+ </span>
22
+ </div>
23
+ {:else}
24
+ {$t("label.or")}
25
+ {/if}
@@ -1,12 +1,12 @@
1
- <script lang="ts">
2
- import { t } from "../../../i18n";
3
- import type { HTMLAnchorAttributes } from "svelte/elements";
4
-
5
- type Props = HTMLAnchorAttributes;
6
-
7
- let { ...restProps }: Props = $props();
8
- </script>
9
-
10
- <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
- {$t("link.forget.password")}!
12
- </a>
1
+ <script lang="ts">
2
+ import { t } from "../../../i18n";
3
+ import type { HTMLAnchorAttributes } from "svelte/elements";
4
+
5
+ type Props = HTMLAnchorAttributes;
6
+
7
+ let { ...restProps }: Props = $props();
8
+ </script>
9
+
10
+ <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
+ {$t("link.forget.password")}!
12
+ </a>
@@ -1,12 +1,12 @@
1
- <script lang="ts">
2
- import { t } from "../../../i18n";
3
- import type { HTMLAnchorAttributes } from "svelte/elements";
4
-
5
- type Props = HTMLAnchorAttributes;
6
-
7
- let { ...restProps }: Props = $props();
8
- </script>
9
-
10
- <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
- {$t("link.privacy-policy.label")}
12
- </a>
1
+ <script lang="ts">
2
+ import { t } from "../../../i18n";
3
+ import type { HTMLAnchorAttributes } from "svelte/elements";
4
+
5
+ type Props = HTMLAnchorAttributes;
6
+
7
+ let { ...restProps }: Props = $props();
8
+ </script>
9
+
10
+ <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
+ {$t("link.privacy-policy.label")}
12
+ </a>
@@ -1,12 +1,12 @@
1
- <script lang="ts">
2
- import { t } from "../../../i18n";
3
- import type { HTMLAnchorAttributes } from "svelte/elements";
4
-
5
- type Props = HTMLAnchorAttributes;
6
-
7
- let { ...restProps }: Props = $props();
8
- </script>
9
-
10
- <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
- {$t("link.terms-of-service.label")}
12
- </a>
1
+ <script lang="ts">
2
+ import { t } from "../../../i18n";
3
+ import type { HTMLAnchorAttributes } from "svelte/elements";
4
+
5
+ type Props = HTMLAnchorAttributes;
6
+
7
+ let { ...restProps }: Props = $props();
8
+ </script>
9
+
10
+ <a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
11
+ {$t("link.terms-of-service.label")}
12
+ </a>
@@ -1,97 +1,97 @@
1
- <script lang="ts">
2
- /* eslint-disable @typescript-eslint/no-explicit-any */
3
- import * as Collapsible from "../../../ui/collapsible/index.js";
4
- import * as Sidebar from "../../../ui/sidebar/index.js";
5
- import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
6
- import { HugeiconsIcon } from "@hugeicons/svelte";
7
- import type {
8
- NavMenuAndSubmenuSidebar,
9
- NavMenuItem,
10
- NavMenuSidebar,
11
- } from "../data/nav-menu-sidebar";
12
-
13
- let {
14
- items,
15
- }: {
16
- items: NavMenuItem[];
17
- } = $props();
18
-
19
- // Chave interna para itens sem group; nunca colide com um nome real
20
- // porque não é uma string acessível a quem define os itens.
21
- const UNGROUPED = Symbol("ungrouped");
22
-
23
- function hasSubmenus(
24
- item: NavMenuSidebar | NavMenuAndSubmenuSidebar,
25
- ): item is NavMenuAndSubmenuSidebar {
26
- return "submenus" in item && Array.isArray(item.submenus);
27
- }
28
-
29
- let groupedItems = $derived(
30
- Map.groupBy(items, (item) => item.group?.name ?? UNGROUPED),
31
- );
32
- </script>
33
-
34
- {#snippet menuItem(item: NavMenuItem)}
35
- {#if hasSubmenus(item)}
36
- <Collapsible.Root open={item.isActive} class="group/collapsible">
37
- {#snippet child({ props })}
38
- <Sidebar.MenuItem {...props}>
39
- <Collapsible.Trigger>
40
- {#snippet child({ props })}
41
- <Sidebar.MenuButton {...props} tooltipContent={item.title}>
42
- {#if item.icon}
43
- <HugeiconsIcon icon={item.icon} />
44
- {/if}
45
- <span>{item.title}</span>
46
- <ChevronRightIcon
47
- class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
48
- />
49
- </Sidebar.MenuButton>
50
- {/snippet}
51
- </Collapsible.Trigger>
52
- <Collapsible.Content>
53
- <Sidebar.MenuSub>
54
- {#each item.submenus ?? [] as subItem (subItem.title)}
55
- <Sidebar.MenuSubItem>
56
- <Sidebar.MenuSubButton>
57
- {#snippet child({ props })}
58
- <a href={subItem.url} {...props}>
59
- <span>{subItem.title}</span>
60
- </a>
61
- {/snippet}
62
- </Sidebar.MenuSubButton>
63
- </Sidebar.MenuSubItem>
64
- {/each}
65
- </Sidebar.MenuSub>
66
- </Collapsible.Content>
67
- </Sidebar.MenuItem>
68
- {/snippet}
69
- </Collapsible.Root>
70
- {:else}
71
- <Sidebar.MenuItem>
72
- <Sidebar.MenuButton>
73
- {#snippet child({ props })}
74
- <a href={item.url} {...props}>
75
- {#if item.icon}
76
- <HugeiconsIcon icon={item.icon} />
77
- {/if}
78
- <span>{item.title}</span>
79
- </a>
80
- {/snippet}
81
- </Sidebar.MenuButton>
82
- </Sidebar.MenuItem>
83
- {/if}
84
- {/snippet}
85
-
86
- {#each groupedItems as [groupLabel, groupItems] (typeof groupLabel === "string" ? groupLabel : "ungrouped")}
87
- <Sidebar.Group>
88
- {#if typeof groupLabel === "string"}
89
- <Sidebar.GroupLabel>{groupLabel}</Sidebar.GroupLabel>
90
- {/if}
91
- <Sidebar.Menu>
92
- {#each groupItems as item (item.title)}
93
- {@render menuItem(item)}
94
- {/each}
95
- </Sidebar.Menu>
96
- </Sidebar.Group>
97
- {/each}
1
+ <script lang="ts">
2
+ /* eslint-disable @typescript-eslint/no-explicit-any */
3
+ import * as Collapsible from "../../../ui/collapsible/index.js";
4
+ import * as Sidebar from "../../../ui/sidebar/index.js";
5
+ import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
6
+ import { HugeiconsIcon } from "@hugeicons/svelte";
7
+ import type {
8
+ NavMenuAndSubmenuSidebar,
9
+ NavMenuItem,
10
+ NavMenuSidebar,
11
+ } from "../data/nav-menu-sidebar";
12
+
13
+ let {
14
+ items,
15
+ }: {
16
+ items: NavMenuItem[];
17
+ } = $props();
18
+
19
+ // Chave interna para itens sem group; nunca colide com um nome real
20
+ // porque não é uma string acessível a quem define os itens.
21
+ const UNGROUPED = Symbol("ungrouped");
22
+
23
+ function hasSubmenus(
24
+ item: NavMenuSidebar | NavMenuAndSubmenuSidebar,
25
+ ): item is NavMenuAndSubmenuSidebar {
26
+ return "submenus" in item && Array.isArray(item.submenus);
27
+ }
28
+
29
+ let groupedItems = $derived(
30
+ Map.groupBy(items, (item) => item.group?.name ?? UNGROUPED),
31
+ );
32
+ </script>
33
+
34
+ {#snippet menuItem(item: NavMenuItem)}
35
+ {#if hasSubmenus(item)}
36
+ <Collapsible.Root open={item.isActive} class="group/collapsible">
37
+ {#snippet child({ props })}
38
+ <Sidebar.MenuItem {...props}>
39
+ <Collapsible.Trigger>
40
+ {#snippet child({ props })}
41
+ <Sidebar.MenuButton {...props} tooltipContent={item.title}>
42
+ {#if item.icon}
43
+ <HugeiconsIcon icon={item.icon} />
44
+ {/if}
45
+ <span>{item.title}</span>
46
+ <ChevronRightIcon
47
+ class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
48
+ />
49
+ </Sidebar.MenuButton>
50
+ {/snippet}
51
+ </Collapsible.Trigger>
52
+ <Collapsible.Content>
53
+ <Sidebar.MenuSub>
54
+ {#each item.submenus ?? [] as subItem (subItem.title)}
55
+ <Sidebar.MenuSubItem>
56
+ <Sidebar.MenuSubButton>
57
+ {#snippet child({ props })}
58
+ <a href={subItem.url} {...props}>
59
+ <span>{subItem.title}</span>
60
+ </a>
61
+ {/snippet}
62
+ </Sidebar.MenuSubButton>
63
+ </Sidebar.MenuSubItem>
64
+ {/each}
65
+ </Sidebar.MenuSub>
66
+ </Collapsible.Content>
67
+ </Sidebar.MenuItem>
68
+ {/snippet}
69
+ </Collapsible.Root>
70
+ {:else}
71
+ <Sidebar.MenuItem>
72
+ <Sidebar.MenuButton>
73
+ {#snippet child({ props })}
74
+ <a href={item.url} {...props}>
75
+ {#if item.icon}
76
+ <HugeiconsIcon icon={item.icon} />
77
+ {/if}
78
+ <span>{item.title}</span>
79
+ </a>
80
+ {/snippet}
81
+ </Sidebar.MenuButton>
82
+ </Sidebar.MenuItem>
83
+ {/if}
84
+ {/snippet}
85
+
86
+ {#each groupedItems as [groupLabel, groupItems] (typeof groupLabel === "string" ? groupLabel : "ungrouped")}
87
+ <Sidebar.Group>
88
+ {#if typeof groupLabel === "string"}
89
+ <Sidebar.GroupLabel>{groupLabel}</Sidebar.GroupLabel>
90
+ {/if}
91
+ <Sidebar.Menu>
92
+ {#each groupItems as item (item.title)}
93
+ {@render menuItem(item)}
94
+ {/each}
95
+ </Sidebar.Menu>
96
+ </Sidebar.Group>
97
+ {/each}
@@ -1,33 +1,33 @@
1
- <script lang="ts">
2
- import * as Sidebar from "../../../ui/sidebar/index.js";
3
- import type { WithoutChildren } from "../../../../utils.js";
4
- import type { ComponentProps } from "svelte";
5
- import type { NavMenuSidebar } from "../data/nav-menu-sidebar";
6
- import { HugeiconsIcon } from "@hugeicons/svelte";
7
-
8
- let {
9
- items,
10
- ...restProps
11
- }: { items?: NavMenuSidebar[] } & WithoutChildren<
12
- ComponentProps<typeof Sidebar.Group>
13
- > = $props();
14
- </script>
15
-
16
- <Sidebar.Group {...restProps}>
17
- <Sidebar.GroupContent>
18
- <Sidebar.Menu>
19
- {#each items as item (item.title)}
20
- <Sidebar.MenuItem>
21
- <Sidebar.MenuButton>
22
- {#snippet child({ props })}
23
- <a href={item.url} {...props}>
24
- <HugeiconsIcon icon={item.icon} size={16} />
25
- <span>{item.title}</span>
26
- </a>
27
- {/snippet}
28
- </Sidebar.MenuButton>
29
- </Sidebar.MenuItem>
30
- {/each}
31
- </Sidebar.Menu>
32
- </Sidebar.GroupContent>
33
- </Sidebar.Group>
1
+ <script lang="ts">
2
+ import * as Sidebar from "../../../ui/sidebar/index.js";
3
+ import type { WithoutChildren } from "../../../../utils.js";
4
+ import type { ComponentProps } from "svelte";
5
+ import type { NavMenuSidebar } from "../data/nav-menu-sidebar";
6
+ import { HugeiconsIcon } from "@hugeicons/svelte";
7
+
8
+ let {
9
+ items,
10
+ ...restProps
11
+ }: { items?: NavMenuSidebar[] } & WithoutChildren<
12
+ ComponentProps<typeof Sidebar.Group>
13
+ > = $props();
14
+ </script>
15
+
16
+ <Sidebar.Group {...restProps}>
17
+ <Sidebar.GroupContent>
18
+ <Sidebar.Menu>
19
+ {#each items as item (item.title)}
20
+ <Sidebar.MenuItem>
21
+ <Sidebar.MenuButton>
22
+ {#snippet child({ props })}
23
+ <a href={item.url} {...props}>
24
+ <HugeiconsIcon icon={item.icon} size={16} />
25
+ <span>{item.title}</span>
26
+ </a>
27
+ {/snippet}
28
+ </Sidebar.MenuButton>
29
+ </Sidebar.MenuItem>
30
+ {/each}
31
+ </Sidebar.Menu>
32
+ </Sidebar.GroupContent>
33
+ </Sidebar.Group>