@casinogate/ui 1.1.3 → 1.2.0

package/dist/assets/css/root.css

@@ -176,6 +176,9 @@
   .cgui\:absolute {
     position: absolute;
   }
+  .cgui\:fixed {
+    position: fixed;
+  }
   .cgui\:relative {
     position: relative;
   }
@@ -203,6 +206,9 @@
   .cgui\:bottom-0 {
     bottom: calc(var(--cgui-spacing) * 0);
   }
+  .cgui\:left-0 {
+    left: calc(var(--cgui-spacing) * 0);
+  }
   .cgui\:left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -291,6 +297,9 @@
     width: 100%;
     height: 100%;
   }
+  .cgui\:h-\(--app-shell-header-height\) {
+    height: var(--app-shell-header-height);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -333,6 +342,9 @@
   .cgui\:h-14 {
     height: calc(var(--cgui-spacing) * 14);
   }
+  .cgui\:h-20 {
+    height: calc(var(--cgui-spacing) * 20);
+  }
   .cgui\:h-34 {
     height: calc(var(--cgui-spacing) * 34);
   }
@@ -354,6 +366,9 @@
   .cgui\:min-h-11 {
     min-height: calc(var(--cgui-spacing) * 11);
   }
+  .cgui\:w-\(--app-shell-sidebar-width\) {
+    width: var(--app-shell-sidebar-width);
+  }
   .cgui\:w-1\.5 {
     width: calc(var(--cgui-spacing) * 1.5);
   }
@@ -414,6 +429,9 @@
   .cgui\:shrink-0 {
     flex-shrink: 0;
   }
+  .cgui\:grow {
+    flex-grow: 1;
+  }
   .cgui\:-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -422,6 +440,10 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .cgui\:-scale-x-\[1\] {
+    --tw-scale-x: calc(1 * -1);
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .cgui\:animate-pulse {
     animation: var(--cgui-animate-pulse);
   }
@@ -455,6 +477,9 @@
   .cgui\:justify-center {
     justify-content: center;
   }
+  .cgui\:justify-end {
+    justify-content: flex-end;
+  }
   .cgui\:justify-start {
     justify-content: flex-start;
   }
@@ -496,6 +521,9 @@
   .cgui\:overflow-hidden {
     overflow: hidden;
   }
+  .cgui\:overflow-y-auto {
+    overflow-y: auto;
+  }
   .cgui\:rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -530,6 +558,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .cgui\:border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .cgui\:border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .cgui\:border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -553,9 +589,24 @@
   .cgui\:border-transparent {
     border-color: transparent;
   }
+  .cgui\:border-t-stroke-minimum\/10 {
+    border-top-color: var(--cg-ui-palette-neutral-10);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-top-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 10%, transparent);
+    }
+  }
   .cgui\:border-b-stroke-default {
     border-bottom-color: var(--cg-ui-palette-neutral-40);
   }
+  .cgui\:border-b-stroke-minimum\/10 {
+    border-bottom-color: var(--cg-ui-palette-neutral-10);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-bottom-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 10%, transparent);
+    }
+  }
+  .cgui\:bg-bg-main {
+    background-color: var(--cg-ui-palette-neutral-20);
+  }
   .cgui\:bg-neutral-20 {
     background-color: var(--cg-ui-palette-neutral-20);
   }
@@ -574,6 +625,9 @@
   .cgui\:bg-stroke-divider {
     background-color: var(--cg-ui-palette-neutral-20);
   }
+  .cgui\:bg-surface-darkest {
+    background-color: var(--cg-ui-palette-neutral-100);
+  }
   .cgui\:bg-surface-light {
     background-color: var(--cg-ui-palette-neutral-20);
   }
@@ -634,6 +688,9 @@
   .cgui\:p-3 {
     padding: calc(var(--cgui-spacing) * 3);
   }
+  .cgui\:p-4 {
+    padding: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:px-2 {
     padding-inline: calc(var(--cgui-spacing) * 2);
   }
@@ -658,6 +715,9 @@
   .cgui\:py-2\.5 {
     padding-block: calc(var(--cgui-spacing) * 2.5);
   }
+  .cgui\:pt-4 {
+    padding-top: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:pr-1\.5 {
     padding-right: calc(var(--cgui-spacing) * 1.5);
   }
@@ -670,6 +730,9 @@
   .cgui\:pb-1\.5 {
     padding-bottom: calc(var(--cgui-spacing) * 1.5);
   }
+  .cgui\:pb-3 {
+    padding-bottom: calc(var(--cgui-spacing) * 3);
+  }
   .cgui\:pl-2\.5 {
     padding-left: calc(var(--cgui-spacing) * 2.5);
   }
@@ -797,6 +860,11 @@
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:duration-250 {
     --tw-duration: 250ms;
     transition-duration: 250ms;
@@ -829,6 +897,40 @@
   .cgui\:scrollbar-track-surface-lightest {
     --scrollbar-track: var(--cg-ui-palette-neutral-10);
   }
+  .cgui\:group-has-\[\[data-slot\=\"header\"\]\]\/appShell\:h-\[calc\(100\%-var\(--app-shell-header-height\)\)\] {
+    &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="header"])) *) {
+      height: calc(100% - var(--app-shell-header-height));
+    }
+  }
+  .cgui\:group-has-\[\[data-slot\=\"header\"\]\]\/appShell\:pt-\(--app-shell-header-height\) {
+    &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="header"])) *) {
+      padding-top: var(--app-shell-header-height);
+    }
+  }
+  .cgui\:group-has-\[\[data-slot\=\"sidebar\"\]\]\/appShell\:w-\[calc\(100\%-var\(--app-shell-sidebar-width\)\)\] {
+    &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="sidebar"])) *) {
+      width: calc(100% - var(--app-shell-sidebar-width));
+    }
+  }
+  .cgui\:group-has-\[\[data-slot\=\"sidebar\"\]\]\/appShell\:pl-\(--app-shell-sidebar-width\) {
+    &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="sidebar"])) *) {
+      padding-left: 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\)\)\] {
+    &:is(:where(.cgui\:group\/appShell)[data-collapsed] *) {
+      &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="sidebar"])) *) {
+        width: calc(100% - var(--app-shell-sidebar-collapsed-width));
+      }
+    }
+  }
+  .cgui\:group-data-\[collapsed\]\/appShell\:group-has-\[\[data-slot\=\"sidebar\"\]\]\/appShell\:pl-\(--app-shell-sidebar-collapsed-width\) {
+    &:is(:where(.cgui\:group\/appShell)[data-collapsed] *) {
+      &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="sidebar"])) *) {
+        padding-left: var(--app-shell-sidebar-collapsed-width);
+      }
+    }
+  }
   .cgui\:placeholder\:text-fg-regular {
     &::placeholder {
       color: var(--cg-ui-palette-neutral-50);
@@ -1007,6 +1109,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .cgui\:data-\[collapsed\]\:w-\(--app-shell-sidebar-collapsed-width\) {
+    &[data-collapsed] {
+      width: var(--app-shell-sidebar-collapsed-width);
+    }
+  }
   .cgui\:data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -1363,8 +1470,8 @@
   --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 40%, 1);
   --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 58%, 1);
   --cg-ui-palette-neutral-40: hsla(230, 20%, 78%, 1);
-  --cg-ui-palette-neutral-20: hsla(230, 20%, 95%, 1);
-  --cg-ui-palette-neutral-10: hsla(230, 20%, 98%, 1);
+  --cg-ui-palette-neutral-20: hsla(230, 20%, 85%, 1);
+  --cg-ui-palette-neutral-10: hsla(230, 20%, 95%, 1);
   --cg-ui-palette-neutral-0: hsla(0, 0%, 100%, 1);
   --cg-ui-palette-neutral-01: hsla(0, 0%, 100%, 0.1);
   --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
@@ -1599,6 +1706,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1742,21 +1864,6 @@
   initial-value: "";
   inherits: false;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1773,6 +1880,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
@@ -1804,9 +1914,6 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
     }
   }
 }

package/dist/assets/css/theme.css

@@ -162,8 +162,8 @@
 
   /* Fixed colors */
   --cg-ui-palette-neutral-40: hsla(230, 20%, 78%, 1);
-  --cg-ui-palette-neutral-20: hsla(230, 20%, 95%, 1);
-  --cg-ui-palette-neutral-10: hsla(230, 20%, 98%, 1);
+  --cg-ui-palette-neutral-20: hsla(230, 20%, 85%, 1);
+  --cg-ui-palette-neutral-10: hsla(230, 20%, 95%, 1);
   --cg-ui-palette-neutral-0: hsla(0, 0%, 100%, 1);
   --cg-ui-palette-neutral-01: hsla(0, 0%, 100%, 0.1);
 

package/dist/components/app-shell/app-shell.stories.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" module>
+  import { Skeleton } from '../skeleton/index.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import Root from './components/app-shell.root.svelte';
+  import { AppShellPrimitive } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['collapsed', 'layout', 'sidebar', 'header', 'withBorder'],
+    },
+
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 700,
+      },
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/AppShell',
+    component: Root,
+    tags: ['autodocs'],
+    parameters,
+
+    argTypes: {
+      collapsed: {
+        table: {
+          defaultValue: { summary: 'false' },
+        },
+      },
+    },
+  });
+
+  type Args = ComponentProps<typeof Root>;
+
+  const args: Args = {
+    collapsed: false,
+    layout: 'adjacent',
+    withBorder: true,
+    sidebar: {
+      width: 256,
+      collapsedWidth: 80,
+    },
+    header: {
+      height: 48,
+    },
+  };
+
+  const items = Array.from({ length: 10 }).map((_, idx) => idx);
+
+  function formatDate(date: Date): string {
+    const formatter = new Intl.DateTimeFormat('en-GB', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      timeZoneName: 'shortOffset',
+      hour12: false,
+    });
+
+    const parts = formatter.formatToParts(date);
+    const day = parts.find((p) => p.type === 'day')?.value;
+    const month = parts.find((p) => p.type === 'month')?.value;
+    const year = parts.find((p) => p.type === 'year')?.value;
+    const hour = parts.find((p) => p.type === 'hour')?.value;
+    const minute = parts.find((p) => p.type === 'minute')?.value;
+    const timeZone = parts.find((p) => p.type === 'timeZoneName')?.value;
+
+    return `${day}.${month}.${year} ${hour}:${minute} ${timeZone}`;
+  }
+</script>
+
+<Story name="Basic" {parameters} {args}>
+  {#snippet template(args: Args)}
+    <div class="cgui:fixed cgui:inset-0">
+      <AppShellPrimitive.Root {...args}>
+        <AppShellPrimitive.Header class="cgui:p-4">
+          <p class="cgui:text-caption cgui:text-fg-regular">
+            {formatDate(new Date())}
+          </p>
+        </AppShellPrimitive.Header>
+        <AppShellPrimitive.Sidebar>
+          <AppShellPrimitive.SidebarHead></AppShellPrimitive.SidebarHead>
+          <AppShellPrimitive.NavBar></AppShellPrimitive.NavBar>
+          <AppShellPrimitive.SidebarFooter class="cgui:justify-end">
+            <AppShellPrimitive.SidebarToggle />
+          </AppShellPrimitive.SidebarFooter>
+        </AppShellPrimitive.Sidebar>
+        <AppShellPrimitive.Viewport>
+          <AppShellPrimitive.Content class="cgui:p-4">
+            <div class="cgui:grow cgui:flex cgui:flex-col cgui:gap-4">
+              {#each items as item (item)}
+                <div class="cgui:flex cgui:items-center cgui:gap-4">
+                  <Skeleton count={2} class="cgui:h-20 cgui:flex-1" color="surface" />
+                </div>
+              {/each}
+            </div>
+          </AppShellPrimitive.Content>
+        </AppShellPrimitive.Viewport>
+      </AppShellPrimitive.Root>
+    </div>
+  {/snippet}
+</Story>

package/dist/components/app-shell/app-shell.stories.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 AppShell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AppShell = InstanceType<typeof AppShell>;
+export default AppShell;

package/dist/components/app-shell/components/app-shell.content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  type AppShellContentPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+
+  export type AppShellContentProps = AppShellContentPropsWithoutHTML &
+    Without<PrimitiveDivAttributes, AppShellContentPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { AppShellStylesContext } from '../styles.js';
+  import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { AppShellContentState } from './app-shell.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    children,
+    child,
+    class: className,
+    ...restProps
+  }: AppShellContentProps = $props();
+
+  const contentState = AppShellContentState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const variants = AppShellStylesContext.get();
+
+  const mergedProps = $derived(
+    mergeProps(restProps, contentState.props, { class: cn(variants.current.content(), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/app-shell/components/app-shell.content.svelte.d.ts

@@ -0,0 +1,7 @@
+type AppShellContentPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellContentProps = AppShellContentPropsWithoutHTML & Without<PrimitiveDivAttributes, AppShellContentPropsWithoutHTML>;
+import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const AppShell: import("svelte").Component<AppShellContentProps, {}, "ref">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/app-shell/components/app-shell.header.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  type AppShellHeaderPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+
+  export type AppShellHeaderProps = AppShellHeaderPropsWithoutHTML &
+    Without<PrimitiveHeaderAttributes, AppShellHeaderPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { AppShellStylesContext } from '../styles.js';
+  import { AppShellHeaderState } from './app-shell.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    children,
+    child,
+    class: className,
+    ...restProps
+  }: AppShellHeaderProps = $props();
+
+  const headerState = AppShellHeaderState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const variants = AppShellStylesContext.get();
+
+  const mergedProps = $derived(
+    mergeProps(restProps, headerState.props, { class: cn(variants.current.header(), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <header {...mergedProps}>
+    {@render children?.()}
+  </header>
+{/if}

package/dist/components/app-shell/components/app-shell.header.svelte.d.ts

@@ -0,0 +1,7 @@
+type AppShellHeaderPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellHeaderProps = AppShellHeaderPropsWithoutHTML & Without<PrimitiveHeaderAttributes, AppShellHeaderPropsWithoutHTML>;
+import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const AppShell: import("svelte").Component<AppShellHeaderProps, {}, "ref">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/app-shell/components/app-shell.nav-bar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+
+  export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML &
+    Without<PrimitiveHeaderAttributes, AppShellNavBarPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { AppShellStylesContext } from '../styles.js';
+  import { AppShellNavBarState } from './app-shell.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    children,
+    child,
+    class: className,
+    ...restProps
+  }: AppShellNavBarProps = $props();
+
+  const navBarState = AppShellNavBarState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const variants = AppShellStylesContext.get();
+
+  const mergedProps = $derived(
+    mergeProps(restProps, navBarState.props, { class: cn(variants.current.navBar(), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <nav {...mergedProps}>
+    {@render children?.()}
+  </nav>
+{/if}

package/dist/components/app-shell/components/app-shell.nav-bar.svelte.d.ts

@@ -0,0 +1,7 @@
+type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML & Without<PrimitiveHeaderAttributes, AppShellNavBarPropsWithoutHTML>;
+import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const AppShell: import("svelte").Component<AppShellNavBarProps, {}, "ref">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;

package/dist/components/app-shell/components/app-shell.root.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  type AppShellRootPropsWithoutHTML = WithElementRef<
+    WithChildren<{
+      collapsed?: boolean;
+
+      sidebar?: AppShellSidebarConfiguration;
+
+      header?: AppShellHeaderConfiguration;
+    }>
+  > &
+    AppShellVariantsProps;
+
+  export type AppShellRootProps = AppShellRootPropsWithoutHTML &
+    Without<PrimitiveDivAttributes, AppShellRootPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { AppShellStylesContext, appShellVariants, type AppShellVariantsProps } from '../styles.js';
+  import type { AppShellHeaderConfiguration, AppShellSidebarConfiguration } from '../types.js';
+  import { AppShellRootState } from './app-shell.svelte.js';
+
+  let {
+    children,
+    ref = $bindable(null),
+    id = useId(),
+    collapsed = $bindable(false),
+    class: className,
+    layout = 'adjacent',
+    withBorder = true,
+    sidebar = {
+      collapsedWidth: 80,
+      width: 256,
+    },
+    header = {
+      height: 48,
+    },
+    ...restProps
+  }: AppShellRootProps = $props();
+
+  const rootState = AppShellRootState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    collapsed: box.with(
+      () => collapsed,
+      (v) => (collapsed = v)
+    ),
+    id: box.with(() => id),
+    sidebar: box.with(() => sidebar),
+    header: box.with(() => header),
+  });
+
+  $inspect(collapsed);
+
+  const variants = $derived(appShellVariants({ layout, withBorder }));
+
+  $inspect(variants);
+
+  AppShellStylesContext.set(box.with(() => variants));
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/components/app-shell/components/app-shell.root.svelte.d.ts

@@ -0,0 +1,13 @@
+type AppShellRootPropsWithoutHTML = WithElementRef<WithChildren<{
+    collapsed?: boolean;
+    sidebar?: AppShellSidebarConfiguration;
+    header?: AppShellHeaderConfiguration;
+}>> & AppShellVariantsProps;
+export type AppShellRootProps = AppShellRootPropsWithoutHTML & Without<PrimitiveDivAttributes, AppShellRootPropsWithoutHTML>;
+import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
+import { type AppShellVariantsProps } from '../styles.js';
+import type { AppShellHeaderConfiguration, AppShellSidebarConfiguration } from '../types.js';
+declare const AppShell: import("svelte").Component<AppShellRootProps, {}, "ref" | "collapsed">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;