@casinogate/ui 1.1.3 → 1.2.0

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

@@ -0,0 +1,83 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const appShellVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        stacked: {
+            sidebar: string[];
+        };
+        adjacent: {
+            header: string[];
+        };
+    };
+    withBorder: {
+        true: {
+            header: string[];
+            sidebar: string[];
+        };
+    };
+}, {
+    root: string[];
+    header: string[];
+    sidebar: string[];
+    content: string[];
+    viewport: string[];
+    sidebarToggle: string[];
+    sidebarHead: string[];
+    sidebarFooter: string[];
+    navBar: string[];
+}, undefined, {
+    layout: {
+        stacked: {
+            sidebar: string[];
+        };
+        adjacent: {
+            header: string[];
+        };
+    };
+    withBorder: {
+        true: {
+            header: string[];
+            sidebar: string[];
+        };
+    };
+}, {
+    root: string[];
+    header: string[];
+    sidebar: string[];
+    content: string[];
+    viewport: string[];
+    sidebarToggle: string[];
+    sidebarHead: string[];
+    sidebarFooter: string[];
+    navBar: string[];
+}, import("tailwind-variants").TVReturnType<{
+    layout: {
+        stacked: {
+            sidebar: string[];
+        };
+        adjacent: {
+            header: string[];
+        };
+    };
+    withBorder: {
+        true: {
+            header: string[];
+            sidebar: string[];
+        };
+    };
+}, {
+    root: string[];
+    header: string[];
+    sidebar: string[];
+    content: string[];
+    viewport: string[];
+    sidebarToggle: string[];
+    sidebarHead: string[];
+    sidebarFooter: string[];
+    navBar: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type AppShellVariantsProps = VariantProps<typeof appShellVariants>;
+type AppShellStylesContextValues = ReadableBox<ReturnType<typeof appShellVariants>>;
+export declare const AppShellStylesContext: Context<AppShellStylesContextValues>;
+export {};

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

@@ -0,0 +1,67 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const appShellVariants = tv({
+    slots: {
+        root: ['cgui:group/appShell', 'cgui:relative', 'cgui:size-full', 'cgui:bg-bg-main'],
+        header: [
+            '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',
+        ],
+        sidebar: [
+            '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',
+        ],
+        content: [
+            'cgui:overflow-y-auto',
+            'cgui:size-full cgui:flex cgui:flex-col cgui:grow',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        ],
+        viewport: [
+            '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)',
+        ],
+        sidebarToggle: [
+            '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',
+        ],
+        sidebarHead: [
+            'cgui:flex cgui:items-center cgui:shrink-0 cgui:p-4',
+            'cgui:border-b cgui:border-b-stroke-minimum/10',
+        ],
+        sidebarFooter: [
+            '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',
+        ],
+        navBar: ['cgui:flex cgui:flex-col cgui:grow'],
+    },
+    variants: {
+        layout: {
+            stacked: {
+                sidebar: ['cgui:group-has-[[data-slot="header"]]/appShell:h-[calc(100%-var(--app-shell-header-height))]'],
+            },
+            adjacent: {
+                header: [
+                    '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))] ',
+                ],
+            },
+        },
+        withBorder: {
+            true: {
+                header: ['cgui:border-b cgui:border-stroke-divider'],
+                sidebar: ['cgui:border-r cgui:border-stroke-divider'],
+            },
+        },
+    },
+});
+export const AppShellStylesContext = new Context(keyWithPrefix('app-shell-styles'));

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

@@ -0,0 +1,7 @@
+export type AppShellSidebarConfiguration = {
+    width?: number;
+    collapsedWidth?: number;
+};
+export type AppShellHeaderConfiguration = {
+    height?: number;
+};

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

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

package/dist/components/button-group/components/button-group.root.svelte

@@ -8,8 +8,7 @@
 <script lang="ts">
   import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
   import type { ButtonGroupVariantsProps } from '../styles.js';
   import { ButtonGroupStylesContext, buttonGroupStyles } from '../styles.js';

package/dist/components/checkbox/components/checkbox.root.svelte

@@ -5,7 +5,8 @@
 <script lang="ts">
   import { checkboxVariants, type CheckboxVariantsProps } from '../styles.js';
   import { CheckIcon } from '../../icons/index.js';
-  import { Checkbox, useId, type CheckboxRootProps as CheckboxRootPropsPrimitive } from 'bits-ui';
+  import { useId } from '../../../internal/utils/common.js';
+  import { Checkbox, type CheckboxRootProps as CheckboxRootPropsPrimitive } from 'bits-ui';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
 

package/dist/components/collapsible/components/collapsaible.content.svelte

@@ -5,11 +5,10 @@
 <script lang="ts">
   import { CollapsibleStylesContext } from '../styles.js';
 
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
 
   import {
     Collapsible as CollapsiblePrimitive,
-    useId,
     type CollapsibleContentProps as CollapsibleContentPropsPrimitive,
   } from 'bits-ui';
   import { fade } from 'svelte/transition';

package/dist/components/collapsible/components/collapsaible.root.svelte

@@ -4,10 +4,9 @@
 
 <script lang="ts">
   import { CollapsibleStylesContext, collapsibleVariants } from '../styles.js';
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import {
     Collapsible as CollapsiblePrimitive,
-    useId,
     type CollapsibleRootProps as CollapsibleRootPropsPrimitive,
   } from 'bits-ui';
   import { box, mergeProps } from 'svelte-toolbelt';

package/dist/components/collapsible/components/collapsaible.trigger.svelte

@@ -7,11 +7,10 @@
 <script lang="ts">
   import { CollapsibleStylesContext } from '../styles.js';
   import { ChevronSmallRightIcon } from '../../icons/index.js';
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
 
   import {
     Collapsible as CollapsiblePrimitive,
-    useId,
     type CollapsibleTriggerProps as CollapsibleTriggerPropsPrimitive,
   } from 'bits-ui';
   import type { Snippet } from 'svelte';

package/dist/components/data-table/components/data-table.body.svelte

@@ -7,8 +7,8 @@
 
 <script lang="ts">
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId, type WithChildren } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { type WithChildren } from 'bits-ui';
   import { box, mergeProps, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { DataTableStylesContext } from '../styles.js';
   import { DataTableBodyState } from './data-table.svelte.js';

package/dist/components/data-table/components/data-table.cell.svelte

@@ -15,9 +15,8 @@
   import { DataTableCellState } from './data-table.svelte.js';
 
   import type { PrimitiveTdAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import type { Cell } from '@tanstack/table-core';
-  import { useId } from 'bits-ui';
   import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
 
   let {

package/dist/components/data-table/components/data-table.head.svelte

@@ -15,9 +15,8 @@
   import { DataTableHeadState } from './data-table.svelte.js';
 
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import type { Header } from '@tanstack/table-core';
-  import { useId } from 'bits-ui';
   import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
 
   let {

package/dist/components/data-table/components/data-table.header.svelte

@@ -11,8 +11,7 @@
   import { DataTableStylesContext } from '../styles.js';
 
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
 
   let {

package/dist/components/data-table/components/data-table.resize-handler.svelte

@@ -7,8 +7,7 @@
 
 <script lang="ts">
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { DataTableStylesContext } from '../styles.js';
   import { DataTableResizeHandlerState } from './data-table.svelte.js';

package/dist/components/data-table/components/data-table.root.svelte

@@ -13,10 +13,9 @@
 <script lang="ts" generics="TData extends RowData">
   import type { CreateTableReturn } from '../models/create-table.svelte.js';
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import type { RowData } from '@tanstack/table-core';
-  import { useId, type Without } from 'bits-ui';
-  import { box, mergeProps, type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+  import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { DataTableStylesContext, dataTableVariants, type DataTableVariantsProps } from '../styles.js';
   import { DataTableRootState } from './data-table.svelte.js';
 

package/dist/components/data-table/components/data-table.root.svelte.d.ts

@@ -5,8 +5,7 @@ export type DataTableRootProps<TData extends RowData> = DataTableRootPropsWithou
 import type { CreateTableReturn } from '../models/create-table.svelte.js';
 import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
 import type { RowData } from '@tanstack/table-core';
-import { type Without } from 'bits-ui';
-import { type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+import { type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
 import { type DataTableVariantsProps } from '../styles.js';
 declare function $$render<TData extends RowData>(): {
     props: DataTableRootProps<TData>;

package/dist/components/data-table/components/data-table.row.svelte

@@ -11,8 +11,7 @@
   import { DataTableRowState } from './data-table.svelte.js';
 
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
 
   let { ref = $bindable(null), id = useId(), children, class: className, ...restProps }: DataTableRowProps = $props();

package/dist/components/data-table/components/data-table.sort-button.svelte

@@ -8,8 +8,7 @@
 <script lang="ts">
   import { SortIcon } from '../../icons/index.js';
   import type { PrimitiveButtonAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { DataTableStylesContext } from '../styles.js';
   import { DataTableSortButtonState } from './data-table.svelte.js';

package/dist/components/data-table/components/data-table.table.svelte

@@ -7,9 +7,8 @@
 
 <script lang="ts">
   import type { PrimitiveTableAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId, type Without } from 'bits-ui';
-  import { box, mergeProps, type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { DataTableStylesContext } from '../styles.js';
   import { DataTableTableState } from './data-table.svelte.js';
 

package/dist/components/data-table/components/data-table.table.svelte.d.ts

@@ -1,8 +1,7 @@
 type DataTableTablePropsWithoutHTML = WithElementRef<WithChildren<{}>>;
 export type DataTableTableProps = DataTableTablePropsWithoutHTML & Without<PrimitiveTableAttributes, DataTableTablePropsWithoutHTML>;
 import type { PrimitiveTableAttributes } from '../../../internal/types/html-attributes.js';
-import { type Without } from 'bits-ui';
-import { type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+import { type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
 declare const DataTable: import("svelte").Component<DataTableTableProps, {}, "ref">;
 type DataTable = ReturnType<typeof DataTable>;
 export default DataTable;

package/dist/components/field/components/field.control.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import { useId } from 'bits-ui';
+  import { useId } from '../../../internal/utils/common.js';
   import type { Snippet } from 'svelte';
   import { box, mergeProps } from 'svelte-toolbelt';
   import { FieldControlState } from './field.svelte.js';

package/dist/components/field/components/field.description.svelte

@@ -7,8 +7,7 @@
 
 <script lang="ts">
   import type { PrimitiveSpanAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
 
   import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { FieldStylesContext } from '../styles.js';

package/dist/components/field/components/field.error.svelte

@@ -7,8 +7,7 @@
 
 <script lang="ts">
   import type { PrimitiveSpanAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { FieldStylesContext } from '../styles.js';
   import { FieldErrorState } from './field.svelte.js';
 

package/dist/components/field/components/field.label.svelte

@@ -11,8 +11,7 @@
   import { FieldStylesContext } from '../styles.js';
 
   import type { PrimitiveLabelAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
 
   import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
 

package/dist/components/field/components/field.root.svelte

@@ -16,8 +16,7 @@
 
 <script lang="ts">
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { fieldStyles, FieldStylesContext } from '../styles.js';
   import { FieldRootState } from './field.svelte.js';

package/dist/components/icons/index.d.ts

@@ -15,6 +15,7 @@ export { default as EyeCrossedIcon } from './eye-crossed.svelte';
 export { default as EyeIcon } from './eye.svelte';
 export { default as InfoIcon } from './info.svelte';
 export { default as MinusIcon } from './minus.svelte';
+export { default as SidebarToggleIcon } from './sidebar-toggle.svelte';
 export { default as SortIcon } from './sort.svelte';
 export { default as SpinnerIcon } from './spinner.svelte';
 export { default as SuccessIcon } from './success.svelte';

package/dist/components/icons/index.js

@@ -15,6 +15,7 @@ export { default as EyeCrossedIcon } from './eye-crossed.svelte';
 export { default as EyeIcon } from './eye.svelte';
 export { default as InfoIcon } from './info.svelte';
 export { default as MinusIcon } from './minus.svelte';
+export { default as SidebarToggleIcon } from './sidebar-toggle.svelte';
 export { default as SortIcon } from './sort.svelte';
 export { default as SpinnerIcon } from './spinner.svelte';
 export { default as SuccessIcon } from './success.svelte';

package/dist/components/icons/sidebar-toggle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let props: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <path
+    d="M3 8.229V15.771C3 17.112 3.324 18.228 3.945 19.083C4.206 19.461 4.539 19.794 4.917 20.055C5.655 20.595 6.591 20.91 7.698 20.982V3.027C4.746 3.216 3 5.133 3 8.229Z"
+    fill="currentColor"
+  />
+  <path
+    d="M20.055 4.917C19.794 4.539 19.461 4.206 19.083 3.945C18.228 3.324 17.112 3 15.771 3H9.048V21H15.771C19.047 21 21 19.047 21 15.771V8.229C21 6.888 20.676 5.772 20.055 4.917ZM15.15 13.827C15.411 14.088 15.411 14.52 15.15 14.781C15.015 14.916 14.844 14.979 14.673 14.979C14.502 14.979 14.331 14.916 14.196 14.781L11.892 12.477C11.631 12.216 11.631 11.784 11.892 11.523L14.196 9.219C14.457 8.958 14.889 8.958 15.15 9.219C15.411 9.48 15.411 9.912 15.15 10.173L13.332 12L15.15 13.827Z"
+    fill="currentColor"
+  />
+</svg>

package/dist/components/icons/sidebar-toggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SidebarToggle: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type SidebarToggle = ReturnType<typeof SidebarToggle>;
+export default SidebarToggle;

package/dist/components/input/input.password.svelte

@@ -27,6 +27,7 @@
 <Input bind:ref bind:value {type} {...restProps}>
   {#snippet endChevron()}
     <button
+      type="button"
       onclick={togglePassword}
       class={cn(
         'cgui:cursor-pointer cgui:p-0 cgui:flex cgui:items-center cgui:justify-center cgui:bg-transparent cgui:border-none',

package/dist/components/input/input.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
   import type { PrimitiveInputAttributes } from '../../internal/types/html-attributes.js';
   import { getDataActive } from '../../internal/utils/attrs.js';
-  import { cn } from '../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../internal/utils/common.js';
   import type { Snippet } from 'svelte';
   import type { WithElementRef, Without } from 'svelte-toolbelt';
   import { type InputVariants, inputStyles } from './styles.js';
@@ -63,5 +62,5 @@
     {/if}
   </div>
 {:else}
-  <input bind:this={ref} {id} data-slot="input" class={cn(variants.input(), className)} {...restProps} />
+  <input bind:this={ref} bind:value {id} data-slot="input" class={cn(variants.input(), className)} {...restProps} />
 {/if}

package/dist/components/segment/components/segment.item.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { PrimitiveButtonAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { SegmentStylesContext } from '../styles.js';
   import { SegmentItemState } from './segmet.svelte.js';

package/dist/components/segment/components/segment.root.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
   import type { Without } from '../../../internal/types/common.js';
   import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { useId } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChildren, type WithElementRef } from 'svelte-toolbelt';
   import { SegmentStylesContext, segmentVariants, type SegmentVariantsProps } from '../styles.js';
   import { SegmentRootState } from './segmet.svelte.js';

package/dist/components/select/components/select.trigger.svelte

@@ -8,8 +8,8 @@
 
 <script lang="ts">
   import { getDataActive } from '../../../internal/utils/attrs.js';
-  import { cn } from '../../../internal/utils/common.js';
-  import { Select as SelectPrimitive, useId, type SelectTriggerProps as SelectTriggerPropsPrimitive } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive, type SelectTriggerProps as SelectTriggerPropsPrimitive } from 'bits-ui';
   import type { Snippet } from 'svelte';
   import type { WithoutChild } from 'svelte-toolbelt';
   import { SelectStylesContext } from '../styles.js';

package/dist/components/skeleton/skeleton.svelte

@@ -6,6 +6,8 @@
 
   type SkeletonPropsWithoutHTML = WithElementRef<{
     count?: number;
+
+    as?: keyof HTMLElementTagNameMap;
   }> &
     SkeletonVariantProps;
 
@@ -19,13 +21,17 @@
     w = 'clear',
     rounded = 'md',
     variant = 'clear',
+    as = 'div',
     count = 1,
+    color = 'default',
     ...restProps
   }: SkeletonProps = $props();
 
-  const variants = $derived(skeletonStyles({ w, rounded, variant }));
+  const variants = $derived(skeletonStyles({ w, rounded, variant, color }));
+
+  const items = $derived(Array.from({ length: count }).map((_, idx) => idx));
 </script>
 
-{#each Array.from({ length: count }) as i (i)}
-  <div class={cn(variants, className)} {...restProps}></div>
+{#each items as item (item)}
+  <svelte:element this={as} class={cn(variants, className)} {...restProps}></svelte:element>
 {/each}

package/dist/components/skeleton/skeleton.svelte.d.ts

@@ -3,6 +3,7 @@ import type { WithElementRef, Without } from 'svelte-toolbelt';
 import { type SkeletonVariantProps } from './styles.js';
 type SkeletonPropsWithoutHTML = WithElementRef<{
     count?: number;
+    as?: keyof HTMLElementTagNameMap;
 }> & SkeletonVariantProps;
 export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
 declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "ref">;

package/dist/components/skeleton/styles.d.ts

@@ -1,5 +1,9 @@
 import type { VariantProps } from 'tailwind-variants';
 export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        surface: string;
+    };
     w: {
         full: string;
         clear: string;
@@ -24,7 +28,11 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         'avatar-lg': string;
         clear: string;
     };
-}, undefined, "cgui:animate-pulse cgui:bg-neutral-20", {
+}, undefined, "cgui:animate-pulse", {
+    color: {
+        default: string;
+        surface: string;
+    };
     w: {
         full: string;
         clear: string;
@@ -50,6 +58,10 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         clear: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        surface: string;
+    };
     w: {
         full: string;
         clear: string;
@@ -74,5 +86,5 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         'avatar-lg': string;
         clear: string;
     };
-}, undefined, "cgui:animate-pulse cgui:bg-neutral-20", unknown, unknown, undefined>>;
+}, undefined, "cgui:animate-pulse", unknown, unknown, undefined>>;
 export type SkeletonVariantProps = VariantProps<typeof skeletonStyles>;

package/dist/components/skeleton/styles.js

@@ -1,7 +1,11 @@
 import { tv } from '../../internal/utils/tailwindcss.js';
 export const skeletonStyles = tv({
-    base: 'cgui:animate-pulse cgui:bg-neutral-20',
+    base: 'cgui:animate-pulse',
     variants: {
+        color: {
+            default: 'cgui:bg-neutral-20',
+            surface: 'cgui:bg-surface-lightest',
+        },
         w: {
             full: 'cgui:w-full',
             clear: '',

package/dist/components/switch/components/switch.root.svelte

@@ -7,8 +7,8 @@
 
   import { SwitchStylesContext, switchVariants, type SwitchVariantsProps } from '../styles.js';
 
-  import { cn } from '../../../internal/utils/common.js';
-  import { Switch as SwitchPrimitive, useId, type SwitchRootProps as SwitchRootPropsPrimitive } from 'bits-ui';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Switch as SwitchPrimitive, type SwitchRootProps as SwitchRootPropsPrimitive } from 'bits-ui';
 
   let {
     id = useId(),