@casinogate/ui 1.3.1 → 1.3.3

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

@@ -1,20 +1,15 @@
-<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 type { AppShellContentProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellContentState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

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

@@ -1,7 +1,4 @@
-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';
+import type { AppShellContentProps } from '../types.js';
 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

@@ -1,20 +1,15 @@
-<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 type { AppShellHeaderProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellHeaderState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

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

@@ -1,7 +1,4 @@
-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';
+import type { AppShellHeaderProps } from '../types.js';
 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

@@ -1,20 +1,15 @@
-<script lang="ts" module>
-  type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-
-  export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML &
-    Without<PrimitiveElementAttributes, AppShellNavBarPropsWithoutHTML>;
-</script>
-
 <script lang="ts">
-  import type { PrimitiveElementAttributes } from '../../../internal/types/html-attributes.js';
+  import type { AppShellNavBarProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellNavBarState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

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

@@ -1,7 +1,4 @@
-type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML & Without<PrimitiveElementAttributes, AppShellNavBarPropsWithoutHTML>;
-import type { PrimitiveElementAttributes } from '../../../internal/types/html-attributes.js';
-import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+import type { AppShellNavBarProps } from '../types.js';
 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

@@ -1,31 +1,16 @@
-<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 type { AppShellRootProps } from '../types.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 { box, mergeProps } from 'svelte-toolbelt';
+  import { AppShellStylesContext, appShellVariants } from '../styles.js';
   import { AppShellRootState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     children,
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     collapsed = $bindable(false),
     class: className,
     layout = 'adjacent',

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

@@ -1,13 +1,4 @@
-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">;
+import type { AppShellRootProps } from '../types.js';
+declare const AppShell: import("svelte").Component<AppShellRootProps, {}, "collapsed" | "ref">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/app-shell/components/app-shell.sidebar-footer.svelte

@@ -1,20 +1,15 @@
-<script lang="ts" module>
-  type AppShellSidebarFooterPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-
-  export type AppShellSidebarFooterProps = AppShellSidebarFooterPropsWithoutHTML &
-    Without<PrimitiveHeaderAttributes, AppShellSidebarFooterPropsWithoutHTML>;
-</script>
-
 <script lang="ts">
-  import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+  import type { AppShellSidebarFooterProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellSidebarFooterState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

package/dist/components/app-shell/components/app-shell.sidebar-footer.svelte.d.ts

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

package/dist/components/app-shell/components/app-shell.sidebar-head.svelte

@@ -1,20 +1,15 @@
-<script lang="ts" module>
-  type AppShellSidebarHeadPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-
-  export type AppShellSidebarHeadProps = AppShellSidebarHeadPropsWithoutHTML &
-    Without<PrimitiveHeaderAttributes, AppShellSidebarHeadPropsWithoutHTML>;
-</script>
-
 <script lang="ts">
-  import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+  import type { AppShellSidebarHeadProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellSidebarHeadState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

package/dist/components/app-shell/components/app-shell.sidebar-head.svelte.d.ts

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

package/dist/components/app-shell/components/app-shell.sidebar-toggle.svelte

@@ -1,22 +1,17 @@
-<script lang="ts" module>
-  type AppShellSidebarTogglePropsWithoutHTML = WithElementRef<WithChild<{}>>;
-
-  export type AppShellSidebarToggleProps = AppShellSidebarTogglePropsWithoutHTML &
-    Without<PrimitiveButtonAttributes, AppShellSidebarTogglePropsWithoutHTML>;
-</script>
-
 <script lang="ts">
+  import type { AppShellSidebarToggleProps } from '../types.js';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellSidebarToggleState } from './app-shell.svelte.js';
 
-  import { SidebarToggleIcon } from '../../icons/index.js';
-  import type { PrimitiveButtonAttributes } from '../../../internal/types/html-attributes.js';
+  import { Icon } from '../../icons/index.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
+
+  const uid = $props.id();
 
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,
@@ -45,7 +40,7 @@
     {#if children}
       {@render children?.()}
     {:else}
-      <SidebarToggleIcon
+      <Icon.SidebarToggle
         class={cn('cgui:transition-transform cgui:duration-250 cgui:ease-in-out', {
           'cgui:-scale-x-[1]': sidebarToggleState.root.opts.collapsed.current,
         })}

package/dist/components/app-shell/components/app-shell.sidebar-toggle.svelte.d.ts

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

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

@@ -1,20 +1,15 @@
-<script lang="ts" module>
-  type AppShellSidebarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-
-  export type AppShellSidebarProps = AppShellSidebarPropsWithoutHTML &
-    Without<PrimitiveElementAttributes, AppShellSidebarPropsWithoutHTML>;
-</script>
-
 <script lang="ts">
-  import type { PrimitiveElementAttributes } from '../../../internal/types/html-attributes.js';
+  import type { AppShellSidebarProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellSidebarState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

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

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

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

@@ -1,20 +1,15 @@
-<script lang="ts" module>
-  type AppShellViewportPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-
-  export type AppShellViewportProps = AppShellViewportPropsWithoutHTML &
-    Without<PrimitiveElementAttributes, AppShellViewportPropsWithoutHTML>;
-</script>
-
 <script lang="ts">
-  import type { PrimitiveElementAttributes } from '../../../internal/types/html-attributes.js';
+  import type { AppShellViewportProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { box, mergeProps } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';
   import { AppShellViewportState } from './app-shell.svelte.js';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     children,
     child,
     class: className,

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

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

package/dist/components/app-shell/exports-primitive.d.ts

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

package/dist/components/app-shell/exports-primitive.js

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

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

@@ -1,20 +1,2 @@
-import { type AppShellContentProps } from './components/app-shell.content.svelte';
-import { type AppShellHeaderProps } from './components/app-shell.header.svelte';
-import { type AppShellRootProps } from './components/app-shell.root.svelte';
-import { type AppShellSidebarFooterProps } from './components/app-shell.sidebar-footer.svelte';
-import { type AppShellSidebarHeadProps } from './components/app-shell.sidebar-head.svelte';
-import { type AppShellSidebarToggleProps } from './components/app-shell.sidebar-toggle.svelte';
-import { type AppShellSidebarProps } from './components/app-shell.sidebar.svelte';
-import { type AppShellViewportProps } from './components/app-shell.viewport.svelte';
-export declare const AppShellPrimitive: {
-    Root: import("svelte").Component<AppShellRootProps, {}, "ref" | "collapsed">;
-    Sidebar: import("svelte").Component<AppShellSidebarProps, {}, "ref">;
-    Header: import("svelte").Component<AppShellHeaderProps, {}, "ref">;
-    Content: import("svelte").Component<AppShellContentProps, {}, "ref">;
-    Viewport: import("svelte").Component<AppShellViewportProps, {}, "ref">;
-    SidebarToggle: import("svelte").Component<AppShellSidebarToggleProps, {}, "ref">;
-    SidebarHead: import("svelte").Component<AppShellSidebarHeadProps, {}, "ref">;
-    SidebarFooter: import("svelte").Component<AppShellSidebarFooterProps, {}, "ref">;
-    NavBar: import("svelte").Component<import("./components/app-shell.nav-bar.svelte").AppShellNavBarProps, {}, "ref">;
-};
-export type { AppShellContentProps, AppShellHeaderProps, AppShellRootProps, AppShellSidebarFooterProps, AppShellSidebarHeadProps, AppShellSidebarProps, AppShellSidebarToggleProps, AppShellViewportProps, };
+export * as AppShellPrimitive from './exports-primitive.js';
+export type { AppShellContentProps, AppShellHeaderConfiguration, AppShellHeaderProps, AppShellNavBarProps, AppShellRootProps, AppShellSidebarConfiguration, AppShellSidebarFooterProps, AppShellSidebarHeadProps, AppShellSidebarProps, AppShellSidebarToggleProps, AppShellViewportProps, } from './types.js';

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

@@ -1,20 +1 @@
-import Content, {} from './components/app-shell.content.svelte';
-import Header, {} from './components/app-shell.header.svelte';
-import NavBar from './components/app-shell.nav-bar.svelte';
-import Root, {} from './components/app-shell.root.svelte';
-import SidebarFooter, {} from './components/app-shell.sidebar-footer.svelte';
-import SidebarHead, {} from './components/app-shell.sidebar-head.svelte';
-import SidebarToggle, {} from './components/app-shell.sidebar-toggle.svelte';
-import Sidebar, {} from './components/app-shell.sidebar.svelte';
-import Viewport, {} from './components/app-shell.viewport.svelte';
-export const AppShellPrimitive = {
-    Root,
-    Sidebar,
-    Header,
-    Content,
-    Viewport,
-    SidebarToggle,
-    SidebarHead,
-    SidebarFooter,
-    NavBar,
-};
+export * as AppShellPrimitive from './exports-primitive.js';

package/dist/components/app-shell/types.d.ts

@@ -1,3 +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';
 export type AppShellSidebarConfiguration = {
     width?: number;
     collapsedWidth?: number;
@@ -5,3 +8,26 @@ export type AppShellSidebarConfiguration = {
 export type AppShellHeaderConfiguration = {
     height?: number;
 };
+type AppShellRootPropsWithoutHTML = WithElementRef<WithChildren<{
+    collapsed?: boolean;
+    sidebar?: AppShellSidebarConfiguration;
+    header?: AppShellHeaderConfiguration;
+}>> & AppShellVariantsProps;
+export type AppShellRootProps = AppShellRootPropsWithoutHTML & Without<PrimitiveDivAttributes, AppShellRootPropsWithoutHTML>;
+type AppShellContentPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellContentProps = AppShellContentPropsWithoutHTML & Without<PrimitiveDivAttributes, AppShellContentPropsWithoutHTML>;
+type AppShellHeaderPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellHeaderProps = AppShellHeaderPropsWithoutHTML & Without<PrimitiveHeaderAttributes, AppShellHeaderPropsWithoutHTML>;
+type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML & Without<PrimitiveElementAttributes, AppShellNavBarPropsWithoutHTML>;
+type AppShellSidebarFooterPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellSidebarFooterProps = AppShellSidebarFooterPropsWithoutHTML & Without<PrimitiveHeaderAttributes, AppShellSidebarFooterPropsWithoutHTML>;
+type AppShellSidebarHeadPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellSidebarHeadProps = AppShellSidebarHeadPropsWithoutHTML & Without<PrimitiveHeaderAttributes, AppShellSidebarHeadPropsWithoutHTML>;
+type AppShellSidebarTogglePropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellSidebarToggleProps = AppShellSidebarTogglePropsWithoutHTML & Without<PrimitiveButtonAttributes, AppShellSidebarTogglePropsWithoutHTML>;
+type AppShellSidebarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellSidebarProps = AppShellSidebarPropsWithoutHTML & Without<PrimitiveElementAttributes, AppShellSidebarPropsWithoutHTML>;
+type AppShellViewportPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type AppShellViewportProps = AppShellViewportPropsWithoutHTML & Without<PrimitiveElementAttributes, AppShellViewportPropsWithoutHTML>;
+export {};

package/dist/components/button/button.component.svelte

@@ -1,136 +1,12 @@
-<script lang="ts" module>
-  import type { WithVariants } from '../../internal/types/composition.js';
-  import { cn } from '../../internal/utils/common.js';
-  import { tv } from '../../internal/utils/tailwindcss.js';
-
-  export const buttonStyles = tv({
-    slots: {
-      root: [
-        'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1.5 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-        'cgui:select-none cgui:font-medium',
-        'cgui:disabled:cursor-not-allowed cgui:disabled:opacity-50',
-      ],
-
-      chevron: ['cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0'],
-    },
-
-    variants: {
-      variant: {
-        primary: {
-          root: ['cgui:bg-primary-80  cgui:text-fg-white', 'cgui:hover:bg-primary-60 ', ' cgui:active:bg-primary-100'],
-        },
-        outline: {
-          root: [
-            'cgui:bg-transparent cgui:text-primary-80 cgui:border cgui:border-stroke-primary',
-            'cgui:hover:text-primary-60 cgui:hover:border-stroke-primary-60',
-            'cgui:active:text-primary-100 cgui:active:border-stroke-primary-100',
-          ],
-        },
-        ghost: {
-          root: [
-            'cgui:bg-transparent cgui:text-primary-80',
-            'cgui:hover:text-primary-60',
-            'cgui:active:text-primary-100',
-          ],
-        },
-        link: {
-          root: [
-            'cgui:bg-transparent cgui:text-primary-80',
-            'cgui:hover:text-primary-60',
-            'cgui:active:text-primary-100',
-            'cgui:underline',
-          ],
-        },
-      },
-
-      loading: {
-        true: {
-          root: 'cgui:pointer-events-none cgui:opacity-50',
-        },
-      },
-
-      shadow: {
-        true: {
-          root: 'cgui:shadow-btn',
-        },
-      },
-
-      size: {
-        xs: {
-          root: 'cgui:h-7.5',
-        },
-        sm: {
-          root: 'cgui:h-8',
-        },
-        md: {
-          root: 'cgui:h-8.5',
-        },
-        lg: {
-          root: 'cgui:h-14',
-        },
-      },
-
-      w: {
-        full: {
-          root: 'cgui:w-full',
-        },
-        auto: {
-          root: 'cgui:w-auto',
-        },
-        fit: {
-          root: 'cgui:w-fit',
-        },
-        clean: {
-          root: '',
-        },
-      },
-
-      rounded: {
-        sm: {
-          root: 'cgui:rounded-sm',
-        },
-        md: {
-          root: 'cgui:rounded-md',
-        },
-        lg: {
-          root: 'cgui:rounded-lg',
-        },
-        xl: {
-          root: 'cgui:rounded-xl',
-        },
-        full: {
-          root: 'cgui:rounded-full',
-        },
-        clean: {
-          root: '',
-        },
-      },
-    },
-
-    defaultVariants: {
-      variant: 'primary',
-      size: 'md',
-      shadow: true,
-      rounded: 'md',
-    },
-  });
-
-  export type ButtonProps = WithVariants<
-    ButtonRootProps & {
-      startChevron?: Snippet;
-
-      endChevron?: Snippet;
-    },
-    typeof buttonStyles
-  >;
-</script>
-
 <script lang="ts">
-  import { Button, type ButtonRootProps } from 'bits-ui';
-  import type { Snippet } from 'svelte';
+  import { buttonVariants } from './styles.js';
+  import type { ButtonProps } from './types.js';
+  import { cn } from '../../internal/utils/common.js';
+  import { Button, useId } from 'bits-ui';
   import { fly } from 'svelte/transition';
 
+  const uid = $props.id();
+
   let {
     startChevron,
     endChevron,
@@ -143,16 +19,17 @@
     shadow = true,
     w = 'full',
     loading = false,
+    id = useId(uid),
     class: className,
     ...props
   }: ButtonProps = $props();
 
-  const styles = $derived(buttonStyles({ variant, size, rounded, shadow, w, loading }));
+  const variants = $derived(buttonVariants({ variant, size, rounded, shadow, w, loading }));
 </script>
 
-<Button.Root data-slot="button" bind:ref class={cn(styles.root(), className)} {disabled} {...props}>
+<Button.Root data-slot="button" bind:ref {id} class={cn(variants.root(), className)} {disabled} {...props}>
   {#if startChevron}
-    <span data-slot="start-chevron" class={styles.chevron}>
+    <span data-slot="start-chevron" class={variants.chevron}>
       {@render startChevron()}
     </span>
   {/if}
@@ -160,13 +37,13 @@
   {@render children?.()}
 
   {#if loading}
-    <span in:fly={{ duration: 200, x: 20 }} data-slot="loading" class={styles.chevron()}>
+    <span in:fly={{ duration: 200, x: 20 }} data-slot="loading" class={variants.chevron()}>
       <!-- <AnimatedLoaderIcon width={18} height={18} /> -->
     </span>
   {/if}
 
   {#if endChevron && !loading}
-    <span data-slot="end-chevron" class={styles.chevron}>
+    <span data-slot="end-chevron" class={variants.chevron}>
       {@render endChevron()}
     </span>
   {/if}