@casinogate/ui 1.11.14 → 2.0.0

package/dist/primitives/select/components/select.group-heading.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { selectGroupHeadingStyles } from '../styles.js';
+  import type { SelectGroupHeadingProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: SelectGroupHeadingProps = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn(selectGroupHeadingStyles(), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>

package/dist/primitives/select/components/select.group-heading.svelte.d.ts

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

package/dist/primitives/select/components/select.group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), ...restProps }: SelectGroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" bind:ref {...restProps} />

package/dist/primitives/select/components/select.group.svelte.d.ts

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

package/dist/primitives/select/components/select.item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { selectItemStyles } from '../styles.js';
+  import type { SelectItemProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenSnippet,
+    ...restProps
+  }: SelectItemProps = $props();
+</script>
+
+<SelectPrimitive.Item bind:ref {value} data-slot="select-item" class={cn(selectItemStyles(), className)} {...restProps}>
+  {#snippet children({ selected, highlighted })}
+    {#if childrenSnippet}
+      {@render childrenSnippet({ selected, highlighted })}
+    {:else}
+      {label || value}
+
+      {#if selected}
+        <Icon.Checkmark width={16} height={16} />
+      {/if}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>

package/dist/primitives/select/components/select.item.svelte.d.ts

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

package/dist/primitives/select/components/select.portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectPortalProps } from '../types.js';
+
+  let { children, ...restProps }: SelectPortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps}>
+  {@render children?.()}
+</SelectPrimitive.Portal>

package/dist/primitives/select/components/select.portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/primitives/select/components/select.root.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectRootProps } from '../types.js';
+
+  let { value = $bindable(''), open = $bindable(false), ...restProps }: SelectRootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:value={value as never} bind:open {...restProps} />

package/dist/primitives/select/components/select.root.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { selectTriggerStyles } from '../styles.js';
+  import type { SelectTriggerProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child: childSnippet,
+    children,
+    hasChevron = true,
+    size = 'md',
+    variant = 'primary',
+    rounded = 'sm',
+    fullWidth = true,
+    ...restProps
+  }: SelectTriggerProps = $props();
+
+  const attrs = $derived({
+    'data-slot': 'trigger',
+    'data-has-chevron': boolAttr(hasChevron),
+    class: cn(
+      selectTriggerStyles({
+        size,
+        variant,
+        rounded,
+        fullWidth,
+        hasChevron,
+      }),
+      className
+    ),
+    ...restProps,
+  });
+</script>
+
+<SelectPrimitive.Trigger bind:ref {...attrs}>
+  {#snippet child({ props })}
+    {#if childSnippet}
+      {@render childSnippet({ props })}
+    {:else}
+      <button {...props}>
+        {@render children?.()}
+
+        {#if hasChevron}
+          <span
+            data-slot="chevron"
+            class={cn(
+              'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:right-2',
+              'cgui:transition-transform cgui:duration-250 cgui:ease-in-out',
+              'cgui:group-data-[state=open]/select-trigger:-rotate-180',
+              'cgui:ms-auto'
+            )}
+          >
+            <Icon.ChevronDown width={18} height={18} />
+          </span>
+        {/if}
+      </button>
+    {/if}
+  {/snippet}
+</SelectPrimitive.Trigger>

package/dist/primitives/select/components/select.trigger.svelte.d.ts

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

package/dist/primitives/select/components/select.viewport.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { selectViewportStyles } from '../styles.js';
+  import type { SelectViewportProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, child, ...restProps }: SelectViewportProps = $props();
+
+  const attrs = $derived({
+    'data-slot': 'select-viewport',
+    class: cn(selectViewportStyles(), className),
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <SelectPrimitive.Viewport bind:ref {...attrs}>
+    {@render children?.()}
+  </SelectPrimitive.Viewport>
+{/if}

package/dist/primitives/select/components/select.viewport.svelte.d.ts

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

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

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

package/dist/primitives/select/index.js

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

package/dist/primitives/select/styles.d.ts

@@ -0,0 +1,79 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const selectTriggerStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasChevron: {
+        true: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasChevron: {
+        true: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    hasChevron: {
+        true: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const selectContentStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const selectViewportStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const selectItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const selectGroupStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const selectGroupHeadingStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type SelectTriggerVariantsProps = Omit<VariantProps<typeof selectTriggerStyles>, 'hasChevron'>;
+export type SelectContentVariantsProps = VariantProps<typeof selectContentStyles>;
+export type SelectItemVariantsProps = VariantProps<typeof selectItemStyles>;
+export type SelectViewportVariantsProps = VariantProps<typeof selectViewportStyles>;
+export type SelectGroupVariantsProps = VariantProps<typeof selectGroupStyles>;
+export type SelectGroupHeadingVariantsProps = VariantProps<typeof selectGroupHeadingStyles>;

package/dist/primitives/select/styles.js

@@ -0,0 +1,99 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const selectTriggerStyles = tv({
+    base: [
+        'cgui:group/select-trigger',
+        'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
+        'cgui:text-body',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
+        'cgui:has-[data-slot=chevron]:pr-3',
+    ],
+    variants: {
+        variant: {
+            primary: [
+                'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default',
+                'cgui:data-[placeholder]:text-fg-regular/70 cgui:text-fg-dark',
+            ],
+            outline: [
+                'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
+                'cgui:border-b cgui:border-b-stroke-default',
+                'cgui:rounded-none',
+            ],
+            clear: [],
+        },
+        size: {
+            sm: [
+                'cgui:min-h-7.5',
+                'cgui:px-2.5 cgui:py-1.5',
+                'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8',
+                'cgui:data-[has-chevron]:pr-8',
+            ],
+            md: [
+                'cgui:min-h-9',
+                'cgui:px-3 cgui:py-2',
+                'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
+                'cgui:data-[has-chevron]:pr-10',
+            ],
+            lg: [
+                'cgui:min-h-11',
+                'cgui:text-heading-2',
+                'cgui:px-4 cgui:py-2.5',
+                'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
+                'cgui:data-[has-chevron]:pr-14',
+            ],
+        },
+        rounded: {
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+        },
+        hasChevron: {
+            true: [''],
+        },
+        fullWidth: {
+            true: ['cgui:w-full'],
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        rounded: 'sm',
+        w: 'full',
+    },
+});
+export const selectContentStyles = tv({
+    base: [
+        'cgui:scrollbar-thin cgui:scrollbar-track-transparent cgui:scrollbar-thumb-stroke-default cgui:scrollbar-thumb-rounded-full',
+        'cgui:relative cgui:overflow-y-auto cgui:overflow-x-hidden',
+        'cgui:shadow-select cgui:bg-surface-white',
+        'cgui:rounded-sm',
+        'cgui:z-(--cg-ui-z-index-select)',
+        'cgui:max-h-(--bits-select-content-available-height) cgui:origin-(--bits-select-content-transform-origin) cgui:h-(--cg-ui-max-content-height)',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95 cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-right-2 cgui:data-[side=right]:slide-in-from-left-2 cgui:data-[side=top]:slide-in-from-bottom-2  cgui:data-[side=bottom]:translate-y-1 cgui:data-[side=left]:-translate-x-1 cgui:data-[side=right]:translate-x-1 cgui:data-[side=top]:-translate-y-1',
+    ],
+});
+export const selectViewportStyles = tv({
+    base: [
+        'cgui:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
+    ],
+});
+export const selectItemStyles = tv({
+    base: [
+        'cgui:relative cgui:w-full',
+        'cgui:flex cgui:items-center cgui:gap-2',
+        'cgui:outline-hidden cgui:cursor-default cgui:select-none',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:rounded-xs',
+        'cgui:p-2',
+        'cgui:text-body cgui:text-fg-medium',
+        'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
+        'cgui:data-[highlighted]:bg-surface-lightest',
+    ],
+});
+export const selectGroupStyles = tv({
+    base: [],
+});
+export const selectGroupHeadingStyles = tv({
+    base: ['cgui:text-fg-semilight cgui:px-2 cgui:py-1.5 cgui:text-caption'],
+});

package/dist/primitives/select/types.d.ts

@@ -0,0 +1,18 @@
+import { type SelectContentProps as SelectContentPropsPrimitive, type SelectGroupHeadingProps as SelectGroupHeadingPropsPrimitive, type SelectGroupProps as SelectGroupPropsPrimitive, type SelectItemProps as SelectItemPropsPrimitive, type SelectPortalProps as SelectPortalPropsPrimitive, type SelectRootProps as SelectRootPropsPrimitive, type SelectTriggerProps as SelectTriggerPropsPrimitive, type SelectViewportProps as SelectViewportPropsPrimitive } from 'bits-ui';
+import type { WithoutChild } from 'svelte-toolbelt';
+import type { SelectContentVariantsProps, SelectGroupHeadingVariantsProps, SelectGroupVariantsProps, SelectItemVariantsProps, SelectTriggerVariantsProps, SelectViewportVariantsProps } from './styles.js';
+/**
+ * Primitive props
+ */
+export type SelectRootProps = SelectRootPropsPrimitive;
+export type SelectTriggerProps = SelectTriggerPropsPrimitive & SelectTriggerVariantsProps & {
+    hasChevron?: boolean;
+};
+export type SelectContentProps = WithoutChild<SelectContentPropsPrimitive> & SelectContentVariantsProps & {
+    maxContentHeight?: string;
+};
+export type SelectViewportProps = SelectViewportPropsPrimitive & SelectViewportVariantsProps;
+export type SelectItemProps = SelectItemPropsPrimitive & SelectItemVariantsProps;
+export type SelectGroupProps = SelectGroupPropsPrimitive & SelectGroupVariantsProps;
+export type SelectGroupHeadingProps = SelectGroupHeadingPropsPrimitive & SelectGroupHeadingVariantsProps;
+export type SelectPortalProps = SelectPortalPropsPrimitive;

package/dist/primitives/select/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

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

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

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

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

package/dist/primitives/separator/components/separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { separatorStyles } from '../styles.js';
+  import type { SeparatorProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, orientation = 'horizontal', ...restProps }: SeparatorProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  {orientation}
+  class={cn(separatorStyles({ orientation }), className)}
+  {...{ [SLOT_ATTR_NAME]: 'separator' }}
+  {...restProps}
+/>

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

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

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

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

package/dist/primitives/separator/index.js

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

package/dist/primitives/separator/styles.d.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const separatorStyles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, string[], {
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type SeparatorVariantsProps = VariantProps<typeof separatorStyles>;

package/dist/primitives/separator/styles.js

@@ -0,0 +1,10 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const separatorStyles = tv({
+    base: ['cgui:bg-stroke-divider cgui:shrink-0'],
+    variants: {
+        orientation: {
+            horizontal: ['cgui:h-px cgui:w-full'],
+            vertical: ['cgui:w-px cgui:h-full'],
+        },
+    },
+});

package/dist/primitives/separator/types.d.ts

@@ -0,0 +1,3 @@
+import { type SeparatorRootProps as SeparatorRootPropsPrimitive } from 'bits-ui';
+import type { SeparatorVariantsProps } from './styles.js';
+export type SeparatorProps = SeparatorRootPropsPrimitive & Omit<SeparatorVariantsProps, 'orientation'>;

package/dist/primitives/separator/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

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

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

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

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

package/dist/primitives/skeleton/components/skeleton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { skeletonStyles } from '../styles.js';
+  import type { SkeletonProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    w = 'clear',
+    rounded = 'md',
+    variant = 'clear',
+    as = 'div',
+    count = 1,
+    ...restProps
+  }: SkeletonProps = $props();
+
+  const variants = $derived(skeletonStyles({ w, rounded, variant }));
+
+  const items = $derived(Array.from({ length: count }).map((_, idx) => idx));
+</script>
+
+{#each items as item (item)}
+  <svelte:element this={as} bind:this={ref} class={cn(variants, className)} {...restProps}></svelte:element>
+{/each}

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

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

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

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

package/dist/primitives/skeleton/index.js

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

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

@@ -0,0 +1,78 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
+    w: {
+        full: string;
+        clear: string;
+    };
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clear: string;
+    };
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        p: string;
+        avatar: string;
+        'avatar-lg': string;
+        clear: string;
+    };
+}, undefined, "cgui:animate-pulse cgui:bg-surface-regular", {
+    w: {
+        full: string;
+        clear: string;
+    };
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clear: string;
+    };
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        p: string;
+        avatar: string;
+        'avatar-lg': string;
+        clear: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    w: {
+        full: string;
+        clear: string;
+    };
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clear: string;
+    };
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        p: string;
+        avatar: string;
+        'avatar-lg': string;
+        clear: string;
+    };
+}, undefined, "cgui:animate-pulse cgui:bg-surface-regular", unknown, unknown, undefined>>;
+export type SkeletonVariantProps = VariantProps<typeof skeletonStyles>;

package/dist/primitives/skeleton/styles.js

@@ -0,0 +1,30 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const skeletonStyles = tv({
+    base: 'cgui:animate-pulse cgui:bg-surface-regular',
+    variants: {
+        w: {
+            full: 'cgui:w-full',
+            clear: '',
+        },
+        rounded: {
+            sm: 'cgui:rounded-sm',
+            md: 'cgui:rounded-md',
+            lg: 'cgui:rounded-lg',
+            xl: 'cgui:rounded-xl',
+            full: 'cgui:rounded-full',
+            clear: '',
+        },
+        variant: {
+            h1: 'cgui:h-10 cgui:max-w-44 cgui:w-full',
+            h2: 'cgui:h-8 cgui:max-w-36 cgui:w-full',
+            h3: 'cgui:h-7 cgui:max-w-32 cgui:w-full',
+            h4: 'cgui:h-6 cgui:max-w-32 cgui:w-full',
+            h5: 'cgui:h-5 cgui:max-w-32 cgui:w-full',
+            h6: 'cgui:h-4 cgui:max-w-32 cgui:w-full',
+            p: 'cgui:h-3 cgui:max-w-100 cgui:w-full',
+            avatar: 'cgui:size-11',
+            'avatar-lg': 'cgui:size-14',
+            clear: '',
+        },
+    },
+});