@casinogate/ui 1.11.14 → 2.0.1

package/dist/{components → primitives}/app-shell/components/app-shell.nav-bar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellNavBarProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { appShellNavBarVariants } from '../styles.js';
+  import type { AppShellNavBarProps } from '../types.js';
   import { AppShellNavBarState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,15 @@
   }: AppShellNavBarProps = $props();
 
   const navBarState = AppShellNavBarState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
-
   const mergedProps = $derived(
-    mergeProps(restProps, navBarState.props, { class: cn(variants.current.navBar(), className) })
+    mergeProps(restProps, navBarState.props, { class: cn(appShellNavBarVariants(), className) })
   );
 </script>
 

package/dist/{components → primitives}/app-shell/components/app-shell.root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellRootProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext, appShellVariants } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { AppShellStylesContext, appShellRootVariants } from '../styles.js';
+  import type { AppShellRootProps } from '../types.js';
   import { AppShellRootState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -26,24 +26,24 @@
   }: AppShellRootProps = $props();
 
   const rootState = AppShellRootState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    collapsed: box.with(
+    collapsed: boxWith(
       () => collapsed,
       (v) => (collapsed = v)
     ),
-    id: box.with(() => id),
-    sidebar: box.with(() => sidebar),
-    header: box.with(() => header),
+    id: boxWith(() => id),
+    sidebar: boxWith(() => sidebar),
+    header: boxWith(() => header),
   });
 
-  const variants = $derived(appShellVariants({ layout, withBorder }));
+  const variants = $derived({ layout, withBorder });
 
-  AppShellStylesContext.set(box.with(() => variants));
+  AppShellStylesContext.set(boxWith(() => variants));
 
-  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(appShellRootVariants(), className) }));
 </script>
 
 <div {...mergedProps}>

package/dist/{components → primitives}/app-shell/components/app-shell.sidebar-footer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellSidebarFooterProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { appShellSidebarFooterVariants } from '../styles.js';
+  import type { AppShellSidebarFooterProps } from '../types.js';
   import { AppShellSidebarFooterState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,15 @@
   }: AppShellSidebarFooterProps = $props();
 
   const sidebarFooterState = AppShellSidebarFooterState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
-
   const mergedProps = $derived(
-    mergeProps(restProps, sidebarFooterState.props, { class: cn(variants.current.sidebarFooter(), className) })
+    mergeProps(restProps, sidebarFooterState.props, { class: cn(appShellSidebarFooterVariants(), className) })
   );
 </script>
 

package/dist/{components → primitives}/app-shell/components/app-shell.sidebar-head.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellSidebarHeadProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { appShellSidebarHeadVariants } from '../styles.js';
+  import type { AppShellSidebarHeadProps } from '../types.js';
   import { AppShellSidebarHeadState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,15 @@
   }: AppShellSidebarHeadProps = $props();
 
   const sidebarHeadState = AppShellSidebarHeadState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
-
   const mergedProps = $derived(
-    mergeProps(restProps, sidebarHeadState.props, { class: cn(variants.current.sidebarHead(), className) })
+    mergeProps(restProps, sidebarHeadState.props, { class: cn(appShellSidebarHeadVariants(), className) })
   );
 </script>
 

package/dist/{components → primitives}/app-shell/components/app-shell.sidebar-toggle.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { appShellSidebarToggleVariants } from '../styles.js';
   import type { AppShellSidebarToggleProps } from '../types.js';
-  import { AppShellStylesContext } from '../styles.js';
   import { AppShellSidebarToggleState } from './app-shell.svelte.js';
 
-  import { Icon } from '../../icons/index.js';
-  import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-
   const uid = $props.id();
 
   let {
@@ -19,17 +18,15 @@
   }: AppShellSidebarToggleProps = $props();
 
   const sidebarToggleState = AppShellSidebarToggleState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
-
   const mergedProps = $derived(
-    mergeProps(restProps, sidebarToggleState.props, { class: cn(variants.current.sidebarToggle(), className) })
+    mergeProps(restProps, sidebarToggleState.props, { class: cn(appShellSidebarToggleVariants(), className) })
   );
 </script>
 

package/dist/{components → primitives}/app-shell/components/app-shell.sidebar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellSidebarProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { AppShellStylesContext, appShellSidebarVariants } from '../styles.js';
+  import type { AppShellSidebarProps } from '../types.js';
   import { AppShellSidebarState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,22 @@
   }: AppShellSidebarProps = $props();
 
   const sidebarState = AppShellSidebarState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
+  const styles = AppShellStylesContext.get();
 
   const mergedProps = $derived(
-    mergeProps(restProps, sidebarState.props, { class: cn(variants.current.sidebar(), className) })
+    mergeProps(restProps, sidebarState.props, {
+      class: cn(
+        appShellSidebarVariants({ layout: styles.current.layout, withBorder: styles.current.withBorder }),
+        className
+      ),
+    })
   );
 </script>
 

package/dist/{components → primitives}/app-shell/components/app-shell.svelte.d.ts

@@ -42,8 +42,7 @@ export declare class AppShellHeaderState {
     static create(opts: AppShellHeaderStateOpts): AppShellHeaderState;
     readonly opts: AppShellHeaderStateOpts;
     readonly attachment: RefAttachment;
-    readonly root: AppShellRootState;
-    constructor(opts: AppShellHeaderStateOpts, root: AppShellRootState);
+    constructor(opts: AppShellHeaderStateOpts);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "header";
@@ -53,9 +52,8 @@ type AppShellViewportStateOpts = WithRefProps<{}>;
 export declare class AppShellViewportState {
     static create(opts: AppShellViewportStateOpts): AppShellViewportState;
     readonly opts: AppShellViewportStateOpts;
-    readonly root: AppShellRootState;
     readonly attachment: RefAttachment;
-    constructor(opts: AppShellViewportStateOpts, root: AppShellRootState);
+    constructor(opts: AppShellViewportStateOpts);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "viewport";
@@ -66,8 +64,7 @@ export declare class AppShellContentState {
     static create(opts: AppShellContentStateOpts): AppShellContentState;
     readonly opts: AppShellContentStateOpts;
     readonly attachment: RefAttachment;
-    readonly root: AppShellRootState;
-    constructor(opts: AppShellContentStateOpts, root: AppShellRootState);
+    constructor(opts: AppShellContentStateOpts);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "content";

package/dist/{components → primitives}/app-shell/components/app-shell.svelte.js

@@ -15,7 +15,6 @@ const SLOT_ATTR_VALUES = {
     sidebarHead: 'sidebar-head',
     sidebarFooter: 'sidebar-footer',
     navBar: 'nav-bar',
-    navItem: 'nav-item',
 };
 export class AppShellRootState {
     static create(opts) {
@@ -64,14 +63,12 @@ export class AppShellSidebarState {
 }
 export class AppShellHeaderState {
     static create(opts) {
-        return new AppShellHeaderState(opts, AppShellRootStateCtx.get());
+        return new AppShellHeaderState(opts);
     }
     opts;
     attachment;
-    root;
-    constructor(opts, root) {
+    constructor(opts) {
         this.opts = opts;
-        this.root = root;
         this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
@@ -82,14 +79,12 @@ export class AppShellHeaderState {
 }
 export class AppShellViewportState {
     static create(opts) {
-        return new AppShellViewportState(opts, AppShellRootStateCtx.get());
+        return new AppShellViewportState(opts);
     }
     opts;
-    root;
     attachment;
-    constructor(opts, root) {
+    constructor(opts) {
         this.opts = opts;
-        this.root = root;
         this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
@@ -100,14 +95,12 @@ export class AppShellViewportState {
 }
 export class AppShellContentState {
     static create(opts) {
-        return new AppShellContentState(opts, AppShellRootStateCtx.get());
+        return new AppShellContentState(opts);
     }
     opts;
     attachment;
-    root;
-    constructor(opts, root) {
+    constructor(opts) {
         this.opts = opts;
-        this.root = root;
         this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({

package/dist/{components → primitives}/app-shell/components/app-shell.viewport.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellViewportProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { appShellViewportVariants } from '../styles.js';
+  import type { AppShellViewportProps } from '../types.js';
   import { AppShellViewportState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,15 @@
   }: AppShellViewportProps = $props();
 
   const viewportState = AppShellViewportState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
-
   const mergedProps = $derived(
-    mergeProps(restProps, viewportState.props, { class: cn(variants.current.viewport(), className) })
+    mergeProps(restProps, viewportState.props, { class: cn(appShellViewportVariants(), className) })
   );
 </script>
 

package/dist/primitives/app-shell/components/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Content } from './app-shell.content.svelte';
+export { default as Header } from './app-shell.header.svelte';
+export { default as NavBar } from './app-shell.nav-bar.svelte';
+export { default as Root } from './app-shell.root.svelte';
+export { default as SidebarFooter } from './app-shell.sidebar-footer.svelte';
+export { default as SidebarHead } from './app-shell.sidebar-head.svelte';
+export { default as SidebarToggle } from './app-shell.sidebar-toggle.svelte';
+export { default as Sidebar } from './app-shell.sidebar.svelte';
+export { default as Viewport } from './app-shell.viewport.svelte';

package/dist/primitives/app-shell/components/index.js

@@ -0,0 +1,9 @@
+export { default as Content } from './app-shell.content.svelte';
+export { default as Header } from './app-shell.header.svelte';
+export { default as NavBar } from './app-shell.nav-bar.svelte';
+export { default as Root } from './app-shell.root.svelte';
+export { default as SidebarFooter } from './app-shell.sidebar-footer.svelte';
+export { default as SidebarHead } from './app-shell.sidebar-head.svelte';
+export { default as SidebarToggle } from './app-shell.sidebar-toggle.svelte';
+export { default as Sidebar } from './app-shell.sidebar.svelte';
+export { default as Viewport } from './app-shell.viewport.svelte';

package/dist/primitives/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+export * as AppShell from './components/index.js';
+export type * from './types.js';

package/dist/primitives/app-shell/index.js

@@ -0,0 +1 @@
+export * as AppShell from './components/index.js';

package/dist/primitives/app-shell/styles.d.ts

@@ -0,0 +1,67 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+export type AppShellLayout = 'adjacent' | 'stacked';
+export type AppShellVariants = {
+    layout: AppShellLayout;
+    withBorder: boolean;
+};
+export declare const appShellRootVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellHeaderVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        adjacent: string[];
+        stacked: string[];
+    };
+    withBorder: {
+        true: string[];
+    };
+}, undefined, string[], {
+    layout: {
+        adjacent: string[];
+        stacked: string[];
+    };
+    withBorder: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    layout: {
+        adjacent: string[];
+        stacked: string[];
+    };
+    withBorder: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellSidebarVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        stacked: string[];
+        adjacent: string[];
+    };
+    withBorder: {
+        true: string[];
+    };
+}, undefined, string[], {
+    layout: {
+        stacked: string[];
+        adjacent: string[];
+    };
+    withBorder: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    layout: {
+        stacked: string[];
+        adjacent: string[];
+    };
+    withBorder: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellContentVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellViewportVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellSidebarToggleVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellSidebarHeadVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellSidebarFooterVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const appShellNavBarVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type AppShellStylesContextValues = ReadableBox<AppShellVariants>;
+export declare const AppShellStylesContext: Context<AppShellStylesContextValues>;
+export {};

package/dist/primitives/app-shell/styles.js

@@ -0,0 +1,80 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const appShellRootVariants = tv({
+    base: ['cgui:group/appShell', 'cgui:relative', 'cgui:size-full', 'cgui:bg-bg-main'],
+});
+export const appShellHeaderVariants = tv({
+    base: [
+        'cgui:fixed cgui:top-0 cgui:right-0 cgui:h-(--app-shell-header-height) cgui:w-full',
+        'cgui:flex cgui:items-center',
+        'cgui:transition-(width) cgui:duration-250 cgui:ease-in-out',
+        'cgui:bg-surface-white',
+    ],
+    variants: {
+        layout: {
+            adjacent: [
+                'cgui:group-has-[[data-slot="sidebar"]]/appShell:w-[calc(100%-var(--app-shell-sidebar-width))]',
+                'cgui:group-data-[collapsed]/appShell:group-has-[[data-slot="sidebar"]]/appShell:w-[calc(100%-var(--app-shell-sidebar-collapsed-width))] ',
+            ],
+            stacked: [''],
+        },
+        withBorder: {
+            true: ['cgui:border-b cgui:border-stroke-divider'],
+        },
+    },
+});
+export const appShellSidebarVariants = tv({
+    base: [
+        'cgui:flex cgui:flex-col',
+        'cgui:h-full cgui:w-(--app-shell-sidebar-width) cgui:data-[collapsed]:w-(--app-shell-sidebar-collapsed-width)',
+        'cgui:bg-surface-darkest',
+        'cgui:transition-(width) cgui:duration-250 cgui:ease-in-out',
+        'cgui:fixed cgui:left-0 cgui:bottom-0',
+        'cgui:will-change-width',
+    ],
+    variants: {
+        layout: {
+            stacked: ['cgui:group-has-[[data-slot="header"]]/appShell:h-[calc(100%-var(--app-shell-header-height))]'],
+            adjacent: [''],
+        },
+        withBorder: {
+            true: ['cgui:border-r cgui:border-stroke-divider'],
+        },
+    },
+});
+export const appShellContentVariants = tv({
+    base: [
+        'cgui:overflow-y-auto',
+        'cgui:size-full cgui:flex cgui:flex-col cgui:grow',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+    ],
+});
+export const appShellViewportVariants = tv({
+    base: [
+        'cgui:size-full cgui:overflow-hidden cgui:flex cgui:flex-col cgui:grow',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:group-has-[[data-slot="sidebar"]]/appShell:pl-(--app-shell-sidebar-width) cgui:group-data-[collapsed]/appShell:group-has-[[data-slot="sidebar"]]/appShell:pl-(--app-shell-sidebar-collapsed-width)',
+        'cgui:group-has-[[data-slot="header"]]/appShell:pt-(--app-shell-header-height)',
+    ],
+});
+export const appShellSidebarToggleVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:justify-center',
+        'cgui:transparent cgui:cursor-pointer cgui:size-6 cgui:text-icon-default',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
+    ],
+});
+export const appShellSidebarHeadVariants = tv({
+    base: ['cgui:flex cgui:items-center cgui:shrink-0 cgui:p-4', 'cgui:border-b cgui:border-b-stroke-minimum/10'],
+});
+export const appShellSidebarFooterVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:shrink-0 cgui:px-4 cgui:pt-4 cgui:pb-3',
+        'cgui:border-t cgui:border-t-stroke-minimum/10',
+    ],
+});
+export const appShellNavBarVariants = tv({
+    base: ['cgui:flex cgui:flex-col cgui:flex-1 cgui:overflow-y-auto cgui:no-scrollbar'],
+});
+export const AppShellStylesContext = new Context(keyWithPrefix('app-shell-styles'));

package/dist/{components → primitives}/app-shell/types.d.ts

@@ -1,6 +1,6 @@
-import type { AppShellVariantsProps } from './styles.js';
 import type { PrimitiveButtonAttributes, PrimitiveDivAttributes, PrimitiveElementAttributes, PrimitiveHeaderAttributes } from '../../internal/types/html-attributes.js';
 import type { WithChild, WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { AppShellVariants } from './styles.js';
 export type AppShellSidebarConfiguration = {
     width?: number;
     collapsedWidth?: number;
@@ -12,7 +12,7 @@ type AppShellRootPropsWithoutHTML = WithElementRef<WithChildren<{
     collapsed?: boolean;
     sidebar?: AppShellSidebarConfiguration;
     header?: AppShellHeaderConfiguration;
-}>> & AppShellVariantsProps;
+} & Partial<AppShellVariants>>>;
 export type AppShellRootProps = AppShellRootPropsWithoutHTML & Without<PrimitiveDivAttributes, AppShellRootPropsWithoutHTML>;
 type AppShellContentPropsWithoutHTML = WithElementRef<WithChild<{}>>;
 export type AppShellContentProps = AppShellContentPropsWithoutHTML & Without<PrimitiveDivAttributes, AppShellContentPropsWithoutHTML>;

package/dist/primitives/app-shell/types.js

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

package/dist/primitives/badge/components/badge.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+
+  import { badgeVariants } from '../styles.js';
+  import type { BadgeProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    href,
+    children,
+    as = 'span',
+    variant = 'fill',
+    color = 'neutral',
+    rounded = 'full',
+    size = 'xs',
+    disabled = false,
+    ...restProps
+  }: BadgeProps = $props();
+</script>
+
+<svelte:element
+  this={href ? 'a' : as}
+  bind:this={ref}
+  class={cn(badgeVariants({ variant, color, rounded, size, disabled }), className)}
+  {href}
+  data-slot="badge"
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/primitives/badge/components/badge.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BadgeProps } from '../types.js';
+declare const Badge: import("svelte").Component<BadgeProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/primitives/badge/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Badge } from './badge.svelte';

package/dist/primitives/badge/components/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './badge.svelte';

package/dist/primitives/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export type * from './types.js';

package/dist/primitives/badge/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';