negodesign 0.0.1

package/dist/components/core/sidebar/menu-bar-sidebar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import * as Sidebar from "../../ui/sidebar/index.js";
+  import type { ComponentProps } from "svelte";
+
+  import type { NavUserSidebarItem } from "../nav/data/nav-user-sidebar";
+  import type {
+    NavMenuItem,
+    NavMenuSidebar,
+  } from "../nav/data/nav-menu-sidebar";
+  import type { Snippet } from "svelte";
+  import NavUserSidebar from "../nav/ui/nav-user-sidebar.svelte";
+  import NavMenuBar from "../nav/ui/nav-menu-bar.svelte";
+  import NavMenuBottomBar from "../nav/ui/nav-menu-bottom-bar.svelte";
+  import NavMenuTopBar from "../nav/ui/nav-menu-top-bar.svelte";
+  import { t } from "../../../i18n";
+
+  type Props = {
+    menusButtons?: NavMenuSidebar[];
+    menus: NavMenuItem[];
+    user: NavUserSidebarItem;
+    footer?: Snippet;
+    header?: Snippet;
+  };
+
+  let {
+    ref = $bindable(null),
+    collapsible = "icon",
+    menusButtons,
+    menus,
+    user,
+    footer,
+    header,
+    ...restProps
+  }: ComponentProps<typeof Sidebar.Root> & Props = $props();
+</script>
+
+<Sidebar.Root bind:ref {collapsible} {...restProps}>
+  <Sidebar.Header>
+    {#if header}
+      {@render header?.()}
+    {:else}
+      <NavMenuTopBar
+        content={{
+          title: $t("label.panel"),
+          subtitle: $t("label.administrative"),
+        }}
+      />
+    {/if}
+  </Sidebar.Header>
+  <Sidebar.Content>
+    <NavMenuBar items={menus} />
+  </Sidebar.Content>
+  <Sidebar.Footer>
+    {#if footer}
+      {@render footer?.()}
+    {:else if menusButtons && menusButtons.length > 0}
+      <NavMenuBottomBar items={menusButtons} class="mt-auto" />
+    {/if}
+    <NavUserSidebar {user} />
+  </Sidebar.Footer>
+  <Sidebar.Rail />
+</Sidebar.Root>

package/dist/components/core/sidebar/menu-bar-sidebar.svelte.d.ts

@@ -0,0 +1,16 @@
+import * as Sidebar from "../../ui/sidebar/index.js";
+import type { ComponentProps } from "svelte";
+import type { NavUserSidebarItem } from "../nav/data/nav-user-sidebar";
+import type { NavMenuItem, NavMenuSidebar } from "../nav/data/nav-menu-sidebar";
+import type { Snippet } from "svelte";
+type Props = {
+    menusButtons?: NavMenuSidebar[];
+    menus: NavMenuItem[];
+    user: NavUserSidebarItem;
+    footer?: Snippet;
+    header?: Snippet;
+};
+type $$ComponentProps = ComponentProps<typeof Sidebar.Root> & Props;
+declare const MenuBarSidebar: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MenuBarSidebar = ReturnType<typeof MenuBarSidebar>;
+export default MenuBarSidebar;

package/dist/components/core/tabs/data/TabModel.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+export interface TabItem {
+    label: string;
+    value: string;
+}
+export interface TabProps {
+    item: TabItem;
+    children: Snippet;
+}

package/dist/components/core/tabs/data/TabModel.js

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

package/dist/components/core/tabs/ui/tab-underline.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import * as UnderlineTabs from "../../../ui/underline-tabs";
+  import type { TabProps } from "../data/TabModel";
+
+  type Props = {
+    items?: TabProps[];
+    className?: string;
+  };
+
+  let { items = [], className }: Props = $props();
+
+  let activeValue = $state<string>("");
+
+  let currentActiveValue = $derived(
+    activeValue || (items.length > 0 ? items[0].item.value : ""),
+  );
+
+  let selected = $derived(
+    items.find((it) => it.item.value === currentActiveValue) || items[0],
+  );
+</script>
+
+{#if items && items.length > 0 && selected}
+  <UnderlineTabs.Root
+    value={currentActiveValue}
+    onValueChange={(val) => (activeValue = val)}
+    class="mb-5 {className}"
+  >
+    <UnderlineTabs.List>
+      {#each items as it (it.item.value)}
+        <UnderlineTabs.Trigger
+          value={it.item.value}
+          class="text-lg md:text-base"
+        >
+          {it.item.label}
+        </UnderlineTabs.Trigger>
+      {/each}
+    </UnderlineTabs.List>
+  </UnderlineTabs.Root>
+  {@render selected.children()}
+{/if}

package/dist/components/core/tabs/ui/tab-underline.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TabProps } from "../data/TabModel";
+type Props = {
+    items?: TabProps[];
+    className?: string;
+};
+declare const TabUnderline: import("svelte").Component<Props, {}, "">;
+type TabUnderline = ReturnType<typeof TabUnderline>;
+export default TabUnderline;

package/dist/components/pages/admin/ui/admin-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children?: Snippet;
+  };
+
+  let { children }: Props = $props();
+</script>
+
+<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+  {@render children?.()}
+</div>

package/dist/components/pages/admin/ui/admin-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet;
+};
+declare const AdminContent: import("svelte").Component<Props, {}, "">;
+type AdminContent = ReturnType<typeof AdminContent>;
+export default AdminContent;

package/dist/components/pages/admin/ui/admin-panel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
+  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
+  import { Separator } from "../../../ui/separator/index.js";
+  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    appsidebar?: Snippet;
+    content?: Snippet;
+    breadcrumb?: Snippet;
+  };
+
+  let { appsidebar, content, breadcrumb }: Props = $props();
+</script>
+
+<Sidebar.Provider>
+  {@render appsidebar?.()}
+  <Sidebar.Inset>
+    <header
+      class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+    >
+      <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ms-1" />
+        <Separator
+          orientation="vertical"
+          class="me-2 data-[orientation=vertical]:h-4"
+        />
+        {@render breadcrumb?.()}
+      </div>
+      <div class="pr-5">
+        <div class="flex gap-3">
+          <LanguageSwitcher />
+          <LightSwitch />
+        </div>
+      </div>
+    </header>
+    {@render content?.()}
+  </Sidebar.Inset>
+</Sidebar.Provider>

package/dist/components/pages/admin/ui/admin-panel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type Props = {
+    appsidebar?: Snippet;
+    content?: Snippet;
+    breadcrumb?: Snippet;
+};
+declare const AdminPanel: import("svelte").Component<Props, {}, "">;
+type AdminPanel = ReturnType<typeof AdminPanel>;
+export default AdminPanel;

package/dist/components/pages/login/admin/01/ui/AuthCard.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
+  import LinkTermsOfService from "../../../../../core/link/link-terms-of-service.svelte";
+  import LinkPrivacyPolity from "../../../../../core/link/link-privacy-polity.svelte";
+  import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
+  import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
+  import LabelOr from "../../../../../core/label/LabelOr.svelte";
+  //import FormRegister from "./FormRegister.svelte";
+  import FormLogin from "./FormLogin.svelte";
+  import { LightSwitch } from "../../../../../ui/light-switch";
+  import { t } from "../../../../../../i18n";
+</script>
+
+<div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
+  <nav class="flex justify-between p-5 md:bg-transparent">
+    <div>
+      <ButtonBack />
+    </div>
+    <div class="flex gap-2">
+      <LightSwitch />
+      <LanguageSwitcher />
+    </div>
+  </nav>
+
+  <div
+    class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
+  >
+    <TabUnderline
+      items={[
+        {
+          item: { label: $t("label.login"), value: "login" },
+          children: loginSnippet,
+        },
+        // {
+        //   item: { label: $t("label.register"), value: "register" },
+        //   children: registerSnippet,
+        // },
+      ]}
+    />
+
+    {#snippet loginSnippet()}
+      <FormLogin />
+    {/snippet}
+
+    <!-- {#snippet registerSnippet()}
+      <FormRegister />
+    {/snippet} -->
+  </div>
+
+  <!-- Footer Terms -->
+  <div
+    class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
+  >
+    <LinkPrivacyPolity />
+    <LabelOr />
+    <LinkTermsOfService />
+  </div>
+</div>

package/dist/components/pages/login/admin/01/ui/AuthCard.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 AuthCard: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AuthCard = InstanceType<typeof AuthCard>;
+export default AuthCard;

package/dist/components/pages/login/admin/01/ui/FormLogin.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import InputEmail from "../../../../../core/form/ui/input-email.svelte";
+  import InputPassword from "../../../../../core/form/ui/input-password.svelte";
+  import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
+  import LinkForgetPassword from "../../../../../core/link/link-forget-password.svelte";
+  import LabelOr from "../../../../../core/label/LabelOr.svelte";
+  import ButtonLoginWith from "../../../../../core/button/ButtonLoginWith.svelte";
+  import { t } from "../../../../../../i18n";
+
+  let email = $state("");
+  let password = $state("");
+</script>
+
+<form class="w-full space-y-4" onsubmit={(e) => e.preventDefault()}>
+  <p class="text-[13px] py-3">{$t("text.login")}</p>
+
+  <div class="space-y-1">
+    <InputEmail value={email} />
+  </div>
+
+  <div class="space-y-1 relative">
+    <InputPassword value={password} />
+    <LinkForgetPassword />
+  </div>
+
+  <div class="flex flex-col gap-1">
+    <ButtonLogin />
+    <LabelOr variant="SEPARATOR" />
+    <ButtonLoginWith icon="GOOGLE" />
+  </div>
+</form>

package/dist/components/pages/login/admin/01/ui/FormLogin.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FormLogin: import("svelte").Component<Record<string, never>, {}, "">;
+type FormLogin = ReturnType<typeof FormLogin>;
+export default FormLogin;

package/dist/components/pages/login/admin/01/ui/FormRegister.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import InputPasswordConfirm from "../../../../../core/form/ui/input-password-confirm.svelte";
+  import InputPassword from "../../../../../core/form/ui/input-password.svelte";
+  import InputEmail from "../../../../../core/form/ui/input-email.svelte";
+  import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
+  import { t } from "../../../../../../i18n";
+
+  let email = $state("");
+  let password = $state("");
+</script>
+
+<form class="space-y-4" onsubmit={(e) => e.preventDefault()}>
+  <p class="text-[13px] py-3">{$t("text.register")}</p>
+
+  <div class="space-y-1">
+    <InputEmail value={email} />
+  </div>
+
+  <div class="space-y-1">
+    <InputPassword value={password} />
+  </div>
+
+  <div class="space-y-1">
+    <InputPasswordConfirm value={password} />
+  </div>
+
+  <ButtonLogin />
+</form>

package/dist/components/pages/login/admin/01/ui/FormRegister.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FormRegister: import("svelte").Component<Record<string, never>, {}, "">;
+type FormRegister = ReturnType<typeof FormRegister>;
+export default FormRegister;

package/dist/components/pages/login/admin/01/ui/LeftHero.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+  import type { CarouselProps } from "../../../../../core/carousel/data/CarouselModel";
+  import type { Snippet } from "svelte";
+  import Button from "../../../../../ui/button/button.svelte";
+
+  type Props = {
+    title?: string | Snippet;
+    variant?: "NUMBER" | "DOT";
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    variant = "DOT",
+    autoPlayInterval = 5000,
+  }: Props & CarouselProps = $props();
+
+  let currentIndex = $state(0);
+  let currentItem = $derived(items[currentIndex] ?? items[0]);
+
+  function goTo(index: number) {
+    currentIndex = index;
+  }
+
+  function next() {
+    if (items.length === 0) return;
+    currentIndex = (currentIndex + 1) % items.length;
+  }
+
+  $effect(() => {
+    if (items.length <= 1) return;
+    const timer = setInterval(next, autoPlayInterval);
+    return () => clearInterval(timer);
+  });
+</script>
+
+<div
+  class="relative flex flex-col justify-between overflow-hidden h-screen p-8 bg-gradient-left text-white"
+>
+  <div class="flex items-center gap-2">
+    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
+      {#if typeof title === "function"}
+        {@render title()}
+      {:else}
+        {title || ""}
+      {/if}
+    </div>
+  </div>
+
+  <section class="flex flex-col gap-5">
+    <div class="my-auto max-w-sm md:max-w-md">
+      {#if currentItem}
+        {#key currentIndex}
+          <div
+            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p
+            class=" text-sm mb-6 leading-relaxed animate-in fade-in duration-300"
+          >
+            {currentItem.description}
+          </p>
+        {/key}
+        <Button
+          variant="outline"
+          class="inline-flex items-center gap-2 text-sm font-semibold bg-primary"
+        >
+          {currentItem.buttonText}
+          <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
+        </Button>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-2 mb-2">
+      {#each items as it, i (it.title)}
+        <button
+          type="button"
+          onclick={() => goTo(i)}
+          aria-label={`Ir para o item ${i + 1}`}
+          aria-current={currentIndex === i}
+          class="transition-all duration-300 focus:outline-none flex items-center justify-center {currentIndex ===
+          i
+            ? 'opacity-100 scale-110'
+            : 'opacity-50 hover:opacity-75'}"
+        >
+          {#if variant === "NUMBER"}
+            <span
+              class="w-6 h-6 text-xs font-semibold rounded-full text-primary flex items-center justify-center"
+            >
+              {i + 1}
+            </span>
+          {:else}
+            <span class="w-2 h-2 rounded-full bg-white"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </section>
+</div>
+
+<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>

package/dist/components/pages/login/admin/01/ui/LeftHero.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { CarouselProps } from "../../../../../core/carousel/data/CarouselModel";
+import type { Snippet } from "svelte";
+type Props = {
+    title?: string | Snippet;
+    variant?: "NUMBER" | "DOT";
+    autoPlayInterval?: number;
+};
+type $$ComponentProps = Props & CarouselProps;
+declare const LeftHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type LeftHero = ReturnType<typeof LeftHero>;
+export default LeftHero;

package/dist/components/pages/login/admin/01/ui/PageLogin.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { t } from "../../../../../../i18n";
+  import AuthCard from "./AuthCard.svelte";
+  import LeftHero from "./LeftHero.svelte";
+</script>
+
+<main class="h-screen w-screen flex items-center">
+  <div class="hidden md:block md:w-8/12">
+    <LeftHero
+      title="Negodesign"
+      varient="POINTER"
+      items={[
+        {
+          buttonText: $t("label.next"),
+          title: "ALorem Ipsum is simply dummy text of the printing and",
+          description:
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled",
+        },
+        {
+          buttonText: $t("label.next"),
+          title: "BLorem Ipsum is simply dummy text of the printing and",
+          description:
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled",
+        },
+        {
+          buttonText: $t("label.next"),
+          title: "CLorem Ipsum is simply dummy text of the printing and",
+          description:
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled",
+        },
+      ]}
+    />
+  </div>
+  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
+    <AuthCard />
+  </div>
+</main>
+
+<style>
+  :global(.grid-pattern) {
+    background-size: 40px 40px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+  }
+</style>

package/dist/components/pages/login/admin/01/ui/PageLogin.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 PageLogin: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PageLogin = InstanceType<typeof PageLogin>;
+export default PageLogin;

package/dist/components/pages/login/admin/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/pages/login/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/ui/avatar/avatar-badge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="avatar-badge"
+	class={cn(
+		"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+		"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+		"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+		"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/ui/avatar/avatar-badge.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+declare const AvatarBadge: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type AvatarBadge = ReturnType<typeof AvatarBadge>;
+export default AvatarBadge;

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn(
+		"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const AvatarFallback: import("svelte").Component<AvatarPrimitive.FallbackProps, {}, "ref">;
+type AvatarFallback = ReturnType<typeof AvatarFallback>;
+export default AvatarFallback;

package/dist/components/ui/avatar/avatar-group-count.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar-group-count"
+	class={cn(
+		"bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/avatar/avatar-group-count.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+declare const AvatarGroupCount: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AvatarGroupCount = ReturnType<typeof AvatarGroupCount>;
+export default AvatarGroupCount;