@casinogate/ui 0.0.3 → 1.0.0

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

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  export type SelectTriggerProps = WithoutChild<SelectTriggerPropsPrimitive> & {
+    startChevron?: Snippet;
+
+    endChevron?: Snippet;
+  };
+</script>
+
+<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 type { Snippet } from 'svelte';
+  import type { WithoutChild } from 'svelte-toolbelt';
+  import { SelectStylesContext } from '../styles.js';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    startChevron,
+    endChevron,
+    children,
+    ...restProps
+  }: SelectTriggerProps = $props();
+
+  const styles = SelectStylesContext.get();
+</script>
+
+<SelectPrimitive.Trigger
+  bind:ref
+  {id}
+  data-slot="trigger"
+  data-start-chevron={getDataActive(Boolean(startChevron))}
+  data-end-chevron={getDataActive(Boolean(endChevron))}
+  class={cn(styles.current.trigger(), className)}
+  {...restProps}
+>
+  {#if startChevron}
+    <span data-slot="start-chevron" class={styles.current.chevron()}>
+      {@render startChevron()}
+    </span>
+  {/if}
+
+  {@render children?.()}
+
+  {#if endChevron}
+    <span data-slot="end-chevron" class={styles.current.chevron()}>
+      {@render endChevron()}
+    </span>
+  {/if}
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,10 @@
+export type SelectTriggerProps = WithoutChild<SelectTriggerPropsPrimitive> & {
+    startChevron?: Snippet;
+    endChevron?: Snippet;
+};
+import { type SelectTriggerProps as SelectTriggerPropsPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChild } from 'svelte-toolbelt';
+declare const Select: import("svelte").Component<SelectTriggerProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1,26 @@
+export default Select;
+type Select = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

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

@@ -0,0 +1,7 @@
+import { type SelectRootProps } from './components/select.root.svelte';
+import { type SelectTriggerProps } from './components/select.trigger.svelte';
+export declare const SelectPrimitive: {
+    Root: import("svelte").Component<SelectRootProps, {}, "value" | "open">;
+    Trigger: import("svelte").Component<SelectTriggerProps, {}, "ref">;
+};
+export type { SelectRootProps, SelectTriggerProps };

package/dist/components/select/index.js

@@ -0,0 +1,6 @@
+import Root, {} from './components/select.root.svelte';
+import Trigger, {} from './components/select.trigger.svelte';
+export const SelectPrimitive = {
+    Root,
+    Trigger,
+};

package/dist/components/select/select.stories.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+  import { ChevronDownIcon } from '../icons/index.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import { SelectPrimitive } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['size', 'variant', 'rounded', 'w'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Select',
+    component: SelectPrimitive.Root,
+    tags: ['autodocs'],
+  });
+
+  type Args = ComponentProps<typeof SelectPrimitive.Root>;
+
+  const args: Args = {
+    size: 'md',
+    variant: 'primary',
+    rounded: 'sm',
+    w: 'full',
+    type: 'single',
+  };
+</script>
+
+{#snippet startChevron()}
+  <ChevronDownIcon class="cgui:size-4" />
+{/snippet}
+
+{#snippet endChevron()}
+  <ChevronDownIcon class="cgui:size-4" />
+{/snippet}
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <SelectPrimitive.Root {...args}>
+      <SelectPrimitive.Trigger>Select</SelectPrimitive.Trigger>
+    </SelectPrimitive.Root>
+  {/snippet}
+</Story>
+
+<Story name="With Chevron" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <SelectPrimitive.Root {...args}>
+      <SelectPrimitive.Trigger {startChevron} {endChevron}>Select</SelectPrimitive.Trigger>
+    </SelectPrimitive.Root>
+  {/snippet}
+</Story>

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

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

@@ -0,0 +1,149 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const selectVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            trigger: string[];
+        };
+        outline: {
+            trigger: string[];
+        };
+        clear: {};
+    };
+    size: {
+        sm: {
+            trigger: string[];
+        };
+        md: {
+            trigger: string[];
+            chevron: never[];
+        };
+        lg: {
+            trigger: string[];
+        };
+    };
+    rounded: {
+        sm: {
+            trigger: string[];
+        };
+        md: {
+            trigger: string[];
+        };
+        lg: {
+            trigger: string[];
+        };
+    };
+    w: {
+        full: {
+            trigger: string[];
+        };
+        auto: {
+            trigger: string[];
+        };
+        fit: {
+            trigger: string[];
+        };
+    };
+}, {
+    trigger: string[];
+    chevron: string[];
+}, undefined, {
+    variant: {
+        primary: {
+            trigger: string[];
+        };
+        outline: {
+            trigger: string[];
+        };
+        clear: {};
+    };
+    size: {
+        sm: {
+            trigger: string[];
+        };
+        md: {
+            trigger: string[];
+            chevron: never[];
+        };
+        lg: {
+            trigger: string[];
+        };
+    };
+    rounded: {
+        sm: {
+            trigger: string[];
+        };
+        md: {
+            trigger: string[];
+        };
+        lg: {
+            trigger: string[];
+        };
+    };
+    w: {
+        full: {
+            trigger: string[];
+        };
+        auto: {
+            trigger: string[];
+        };
+        fit: {
+            trigger: string[];
+        };
+    };
+}, {
+    trigger: string[];
+    chevron: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            trigger: string[];
+        };
+        outline: {
+            trigger: string[];
+        };
+        clear: {};
+    };
+    size: {
+        sm: {
+            trigger: string[];
+        };
+        md: {
+            trigger: string[];
+            chevron: never[];
+        };
+        lg: {
+            trigger: string[];
+        };
+    };
+    rounded: {
+        sm: {
+            trigger: string[];
+        };
+        md: {
+            trigger: string[];
+        };
+        lg: {
+            trigger: string[];
+        };
+    };
+    w: {
+        full: {
+            trigger: string[];
+        };
+        auto: {
+            trigger: string[];
+        };
+        fit: {
+            trigger: string[];
+        };
+    };
+}, {
+    trigger: string[];
+    chevron: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type SelectVariantsProps = VariantProps<typeof selectVariants>;
+type SelectStylesContextValues = ReadableBox<ReturnType<typeof selectVariants>>;
+export declare const SelectStylesContext: Context<SelectStylesContextValues>;
+export {};

package/dist/components/select/styles.js

@@ -0,0 +1,93 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+import { keyWithPrefix } from './../../internal/utils/common.js';
+export const selectVariants = tv({
+    slots: {
+        trigger: [
+            'cgui:relative cgui:flex cgui:items-center cgui:justify-start cgui:flex-wrap',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        ],
+        chevron: [
+            'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:flex cgui:items-center cgui:justify-center cgui:size-6',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:text-icon-regular',
+            'cgui:data-[slot=start-chevron]:left-0 cgui:data-[slot=end-chevron]:right-0',
+            'cgui:data-[slot=start-chevron]:translate-x-1/2 cgui:data-[slot=end-chevron]:-translate-x-1/2',
+        ],
+    },
+    variants: {
+        variant: {
+            primary: {
+                trigger: [
+                    'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default',
+                    'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
+                ],
+            },
+            outline: {
+                trigger: [
+                    'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
+                    'cgui:border-b cgui:border-b-stroke-default',
+                ],
+            },
+            clear: {},
+        },
+        size: {
+            sm: {
+                trigger: [
+                    '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',
+                ],
+                // chevron: ['cgui:data-[start-chevron]:left-2.5 cgui:data-[end-chevron]:right-2.5'],
+            },
+            md: {
+                trigger: [
+                    'cgui:min-h-9',
+                    'cgui:px-3 cgui:py-2',
+                    'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
+                ],
+                chevron: [],
+                // chevron: ['cgui:data-[start-chevron]:left-3 cgui:data-[end-chevron]:right-3'],
+            },
+            lg: {
+                trigger: [
+                    'cgui:min-h-11',
+                    'cgui:px-4 cgui:py-2.5',
+                    'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
+                ],
+                // chevron: ['cgui:data-[start-chevron]:left-4 cgui:data-[end-chevron]:right-4'],
+            },
+        },
+        rounded: {
+            sm: {
+                trigger: ['cgui:rounded-sm'],
+            },
+            md: {
+                trigger: ['cgui:rounded-md'],
+            },
+            lg: {
+                trigger: ['cgui:rounded-lg'],
+            },
+        },
+        w: {
+            full: {
+                trigger: ['cgui:w-full'],
+            },
+            auto: {
+                trigger: ['cgui:w-auto'],
+            },
+            fit: {
+                trigger: ['cgui:w-fit'],
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'outline',
+            class: {
+                trigger: ['cgui:rounded-none'],
+            },
+        },
+    ],
+});
+export const SelectStylesContext = new Context(keyWithPrefix('select-styles'));

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

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

package/dist/components/skeleton/index.js

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

package/dist/components/skeleton/skeleton.stories.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import Skeleton from './skeleton.svelte';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['rounded', 'w', 'variant'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Skeleton',
+    component: Skeleton,
+    tags: ['autodocs'],
+
+    argTypes: {
+      rounded: {
+        table: {
+          defaultValue: { summary: 'md' },
+        },
+      },
+      variant: {
+        table: {
+          defaultValue: { summary: 'clear' },
+        },
+      },
+      w: {
+        table: {
+          defaultValue: { summary: 'clear' },
+        },
+      },
+    },
+
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof Skeleton>;
+
+  const args: Args = {
+    rounded: 'md',
+    variant: 'clear',
+  };
+</script>
+
+<Story
+  name="Basic"
+  args={{
+    ...args,
+    class: 'cgui:h-11',
+    w: 'full',
+  }}
+  {parameters}
+/>
+
+<Story
+  name="Avatar"
+  args={{
+    ...args,
+    class: 'cgui:size-11',
+    rounded: 'full',
+  }}
+  {parameters}
+/>
+
+<Story name="Card" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:gap-2.5">
+      <Skeleton {...args} class="cgui:size-14" rounded="full" />
+
+      <div class="cgui:flex cgui:flex-col cgui:gap-2.5 cgui:flex-1">
+        <Skeleton {...args} class="cgui:h-5" w="full" />
+        <Skeleton {...args} class="cgui:h-5" w="full" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Variants" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:flex-col cgui:gap-2.5">
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Heading 1</p>
+        <Skeleton {...args} variant="h1" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Heading 2</p>
+        <Skeleton {...args} variant="h2" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Heading 3</p>
+        <Skeleton {...args} variant="h3" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Heading 4</p>
+        <Skeleton {...args} variant="h4" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Heading 5</p>
+        <Skeleton {...args} variant="h5" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Heading 6</p>
+        <Skeleton {...args} variant="h6" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Paragraph</p>
+        <Skeleton {...args} variant="p" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Avatar</p>
+        <Skeleton {...args} variant="avatar" rounded="full" />
+      </div>
+      <div class="cgui:flex cgui:flex-col cgui:gap-2">
+        <p>Avatar Large</p>
+        <Skeleton {...args} variant="avatar-lg" rounded="full" />
+      </div>
+    </div>
+  {/snippet}
+</Story>

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

@@ -0,0 +1,19 @@
+import Skeleton from './skeleton.svelte';
+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 Skeleton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Skeleton = InstanceType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/skeleton/skeleton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+  import { cn } from '../../internal/utils/common.js';
+  import type { WithElementRef, Without } from 'svelte-toolbelt';
+  import { skeletonStyles, type SkeletonVariantProps } from './styles.js';
+
+  type SkeletonPropsWithoutHTML = WithElementRef<{}> & SkeletonVariantProps;
+
+  export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  let {
+    ref = $bindable(null),
+    class: className,
+    w = 'clear',
+    rounded = 'md',
+    variant = 'clear',
+    ...restProps
+  }: SkeletonProps = $props();
+
+  const variants = $derived(skeletonStyles({ w, rounded, variant }));
+</script>
+
+<div class={cn(variants, className)} {...restProps}></div>

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

@@ -0,0 +1,8 @@
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { WithElementRef, Without } from 'svelte-toolbelt';
+import { type SkeletonVariantProps } from './styles.js';
+type SkeletonPropsWithoutHTML = WithElementRef<{}> & SkeletonVariantProps;
+export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "ref">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/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-neutral-20", {
+    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-neutral-20", unknown, unknown, undefined>>;
+export type SkeletonVariantProps = VariantProps<typeof skeletonStyles>;