@casinogate/ui 0.0.4 → 1.0.1

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

@@ -0,0 +1,107 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            root: string[];
+            item: string[];
+            thumb: string[];
+        };
+        clear: {};
+    };
+    rounded: {
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        clear: {};
+    };
+    size: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+    };
+}, {
+    root: string[];
+    item: string[];
+    thumb: string[];
+}, undefined, {
+    variant: {
+        primary: {
+            root: string[];
+            item: string[];
+            thumb: string[];
+        };
+        clear: {};
+    };
+    rounded: {
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        clear: {};
+    };
+    size: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+    };
+}, {
+    root: string[];
+    item: string[];
+    thumb: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            root: string[];
+            item: string[];
+            thumb: string[];
+        };
+        clear: {};
+    };
+    rounded: {
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        clear: {};
+    };
+    size: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+    };
+}, {
+    root: string[];
+    item: string[];
+    thumb: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type SegmentVariantsProps = VariantProps<typeof segmentVariants>;
+type SegmentStylesContextValues = ReadableBox<ReturnType<typeof segmentVariants>>;
+export declare const SegmentStylesContext: Context<SegmentStylesContextValues>;
+export {};

package/dist/components/segment/styles.js

@@ -0,0 +1,58 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const segmentVariants = tv({
+    slots: {
+        root: [
+            'cgui:flex cgui:items-center cgui:p-1',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:data-[disabled=""]:opacity-50 cgui:data-[disabled=""]:cursor-not-allowed cgui:data-[disabled=""]:pointer-events-none',
+        ],
+        item: [
+            'cgui:flex cgui:items-center cgui:justify-center cgui:flex-1',
+            'cgui:font-medium cgui:text-body-2',
+            'cgui:rounded-[inherit]',
+            'cgui:cursor-pointer cgui:overflow-hidden cgui:select-none',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        ],
+        thumb: [
+            'cgui:rounded-[inherit] cgui:pointer-events-none',
+            'cgui:shadow-segment-thumb',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        ],
+    },
+    variants: {
+        variant: {
+            primary: {
+                root: ['cgui:bg-surface-primary-light cgui:border cgui:border-stroke-divider'],
+                item: [
+                    'cgui:text-fg-regular',
+                    'cgui:data-[active=""]:text-fg-primary cgui:data-[active=""]:bg-surface-white cgui:data-[active=""]:shadow-segment-thumb',
+                ],
+                thumb: ['cgui:bg-surface-white'],
+            },
+            clear: {},
+        },
+        rounded: {
+            sm: {
+                root: ['cgui:rounded-sm'],
+            },
+            md: {
+                root: ['cgui:rounded-md'],
+            },
+            clear: {},
+        },
+        size: {
+            sm: {
+                item: ['cgui:h-6'],
+            },
+            md: {
+                item: ['cgui:h-8.5'],
+            },
+            lg: {
+                item: ['cgui:h-11'],
+            },
+        },
+    },
+});
+export const SegmentStylesContext = new Context(keyWithPrefix('segment-styles'));

package/dist/components/select/components/select.content.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/components/select.item.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/components/select.root.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  export type SelectRootProps = SelectRootPropsPrimitive & SelectVariantsProps;
+</script>
+
+<script lang="ts">
+  import { box } from 'svelte-toolbelt';
+
+  import { SelectStylesContext, selectVariants, type SelectVariantsProps } from '../styles.js';
+
+  import { Select as SelectPrimitive, type SelectRootProps as SelectRootPropsPrimitive } from 'bits-ui';
+
+  let {
+    value = $bindable(''),
+    open = $bindable(false),
+    size = 'md',
+    variant = 'primary',
+    rounded = 'sm',
+    w = 'full',
+    ...restProps
+  }: SelectRootProps = $props();
+
+  const variants = $derived(selectVariants({ size, variant, rounded, w }));
+
+  SelectStylesContext.set(box.with(() => variants));
+</script>
+
+<SelectPrimitive.Root bind:value={value as never} bind:open {...restProps} />

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

@@ -0,0 +1,6 @@
+export type SelectRootProps = SelectRootPropsPrimitive & SelectVariantsProps;
+import { type SelectVariantsProps } from '../styles.js';
+import { type SelectRootProps as SelectRootPropsPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectRootProps, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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';