@casinogate/ui 0.0.3 → 1.0.0

package/dist/components/pagination/styles.js

@@ -0,0 +1,51 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const paginationStyles = tv({
+    slots: {
+        root: ['cgui:flex cgui:items-center cgui:gap-1'],
+        item: [
+            'cgui:flex cgui:items-center cgui:justify-center',
+            'cgui:text-fg-dark cgui:text-body-2 cgui:font-normal',
+            'cgui:border cgui:border-transparent',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:cursor-pointer cgui:select-none cgui:rounded-full',
+            'cgui:data-[selected=""]:text-fg-primary cgui:data-[selected=""]:border-stroke-primary',
+            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
+        ],
+        button: [
+            'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular',
+            'cgui:select-none cgui:cursor-pointer',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
+        ],
+        ellipsis: ['cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular'],
+    },
+    variants: {
+        centered: {
+            true: {
+                root: ['cgui:justify-center'],
+            },
+        },
+        orientation: {
+            horizontal: {
+                root: ['cgui:flex-row'],
+            },
+            vertical: {
+                root: ['cgui:flex-col'],
+            },
+        },
+        size: {
+            sm: {
+                item: ['cgui:size-6'],
+            },
+            md: {
+                item: ['cgui:size-8'],
+            },
+            lg: {
+                item: ['cgui:size-10'],
+            },
+        },
+    },
+});
+export const PaginationStylesContext = new Context(keyWithPrefix('pagination-styles'));

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

@@ -0,0 +1,38 @@
+<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 { box, mergeProps, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { SegmentStylesContext } from '../styles.js';
+  import { SegmentItemState } from './segmet.svelte.js';
+
+  type SegmentItemPropsWithoutHTML = WithElementRef<
+    WithChildren<{
+      value: string;
+    }>
+  >;
+
+  export type SegmentItemProps = SegmentItemPropsWithoutHTML &
+    Without<PrimitiveButtonAttributes, SegmentItemPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  let { value, ref = $bindable(null), id = useId(), children, class: className, ...props }: SegmentItemProps = $props();
+
+  const itemState = SegmentItemState.create({
+    value: box.with(() => value),
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const styles = SegmentStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(props, itemState.props));
+</script>
+
+<button class={cn(styles.current.item(), className)} {...mergedProps}>
+  {@render children?.()}
+</button>

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

@@ -0,0 +1,9 @@
+import type { PrimitiveButtonAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
+type SegmentItemPropsWithoutHTML = WithElementRef<WithChildren<{
+    value: string;
+}>>;
+export type SegmentItemProps = SegmentItemPropsWithoutHTML & Without<PrimitiveButtonAttributes, SegmentItemPropsWithoutHTML>;
+declare const Segment: import("svelte").Component<SegmentItemProps, {}, "ref">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

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

@@ -0,0 +1,66 @@
+<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 { box, mergeProps, type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+  import { SegmentStylesContext, segmentVariants, type SegmentVariantsProps } from '../styles.js';
+  import { SegmentRootState } from './segmet.svelte.js';
+
+  type SegmentRootPropsWithouitHTML = WithElementRef<
+    WithChildren<
+      {
+        value?: string;
+
+        onValueChange?: (value: string) => void;
+
+        disabled?: boolean;
+      } & SegmentVariantsProps
+    >
+  >;
+
+  export type SegmentRootProps = SegmentRootPropsWithouitHTML &
+    Without<PrimitiveDivAttributes, SegmentRootPropsWithouitHTML>;
+</script>
+
+<script lang="ts">
+  let {
+    value = $bindable(''),
+    ref = $bindable(null),
+    id = useId(),
+    disabled = false,
+    children,
+    class: className,
+    variant = 'primary',
+    rounded = 'sm',
+    size = 'md',
+    onValueChange,
+    ...restProps
+  }: SegmentRootProps = $props();
+
+  const rootState = SegmentRootState.create({
+    value: box.with(
+      () => value,
+      (v) => {
+        onValueChange?.(v);
+        return (value = v);
+      }
+    ),
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+    disabled: box.with(() => disabled),
+  });
+
+  const variants = $derived(segmentVariants({ variant, rounded, size }));
+
+  SegmentStylesContext.set(box.with(() => variants));
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<div class={cn(variants.root(), className)} {...mergedProps}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Without } from '../../../internal/types/common.js';
+import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChildren, type WithElementRef } from 'svelte-toolbelt';
+import { type SegmentVariantsProps } from '../styles.js';
+type SegmentRootPropsWithouitHTML = WithElementRef<WithChildren<{
+    value?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+} & SegmentVariantsProps>>;
+export type SegmentRootProps = SegmentRootPropsWithouitHTML & Without<PrimitiveDivAttributes, SegmentRootPropsWithouitHTML>;
+declare const Segment: import("svelte").Component<SegmentRootProps, {}, "value" | "ref">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

package/dist/components/segment/components/segment.thumb.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Segment;
+type Segment = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Segment: $$__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/segment/components/segmet.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { RefAttachment } from '../../../internal/types/common.js';
+import { type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+type SegmentRootStateOpts = WithRefProps<WritableBoxedValues<{
+    value: string;
+}> & ReadableBoxedValues<{
+    disabled: boolean;
+}>>;
+export declare class SegmentRootState {
+    static create(opts: SegmentRootStateOpts): SegmentRootState;
+    readonly opts: SegmentRootStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: SegmentRootStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly 'data-disabled': "" | undefined;
+        readonly "data-slot": "root";
+    };
+    registerItem(id: string, value: string): void;
+    setValue(value: string): void;
+}
+type SegmentItemStateOpts = WithRefProps<ReadableBoxedValues<{
+    value: string;
+}>>;
+export declare class SegmentItemState {
+    #private;
+    static create(opts: SegmentItemStateOpts): SegmentItemState;
+    readonly opts: SegmentItemStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: SegmentRootState;
+    readonly trueDisabled: boolean;
+    readonly trueActive: boolean;
+    constructor(opts: SegmentItemStateOpts, root: SegmentRootState);
+    onclick(): void;
+    readonly props: {
+        readonly id: string;
+        readonly disabled: boolean;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'data-active': "" | undefined;
+        readonly "data-slot": "item";
+        readonly onclick: () => void;
+    };
+}
+export {};

package/dist/components/segment/components/segmet.svelte.js

@@ -0,0 +1,74 @@
+import { getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const SLOT_ATTR_NAME = 'data-slot';
+const SLOT_ATTR_VALUES = {
+    root: 'root',
+    item: 'item',
+    thumb: 'thumb',
+};
+const SegmentRootCtx = new Context(keyWithPrefix('segment-root'));
+export class SegmentRootState {
+    static create(opts) {
+        return SegmentRootCtx.set(new SegmentRootState(opts));
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.setValue = this.setValue.bind(this);
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-disabled': getDataDisabled(this.opts.disabled.current),
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.root,
+        ...this.attachment,
+    }));
+    registerItem(id, value) { }
+    setValue(value) {
+        this.opts.value.current = value;
+    }
+}
+export class SegmentItemState {
+    static create(opts) {
+        return new SegmentItemState(opts, SegmentRootCtx.get());
+    }
+    opts;
+    attachment;
+    root;
+    trueDisabled = $derived.by(() => {
+        if (this.root.opts.disabled.current)
+            return true;
+        return this.root.opts.disabled.current;
+    });
+    trueActive = $derived.by(() => {
+        return this.opts.value.current === this.root.opts.value.current;
+    });
+    constructor(opts, root) {
+        this.onclick = this.onclick.bind(this);
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    #activate() {
+        if (this.root.opts.value.current === this.opts.value.current)
+            return;
+        this.root.setValue(this.opts.value.current);
+    }
+    onclick() {
+        if (this.trueDisabled)
+            return;
+        this.#activate();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        disabled: this.trueDisabled,
+        'data-disabled': getDataDisabled(this.trueDisabled),
+        'data-active': getDataActive(this.trueActive),
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.item,
+        onclick: this.onclick,
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,7 @@
+import { type SegmentItemProps } from './components/segment.item.svelte';
+import { type SegmentRootProps } from './components/segment.root.svelte';
+export declare const SegmentPrimitive: {
+    Root: import("svelte").Component<SegmentRootProps, {}, "value" | "ref">;
+    Item: import("svelte").Component<SegmentItemProps, {}, "ref">;
+};
+export type { SegmentItemProps, SegmentRootProps };

package/dist/components/segment/index.js

@@ -0,0 +1,6 @@
+import Item, {} from './components/segment.item.svelte';
+import Root, {} from './components/segment.root.svelte';
+export const SegmentPrimitive = {
+    Root,
+    Item,
+};

package/dist/components/segment/segment.stories.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+
+  import type { ComponentProps } from 'svelte';
+  import { SegmentPrimitive } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['value', 'disabled', 'size', 'variant', 'rounded'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Segment',
+    component: SegmentPrimitive.Root,
+    render: template,
+    tags: ['autodocs'],
+
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof SegmentPrimitive.Root>;
+
+  const args: Args = {
+    value: '1',
+    disabled: false,
+    size: 'md',
+    variant: 'primary',
+    rounded: 'sm',
+  };
+</script>
+
+{#snippet template(args: Args)}
+  <SegmentPrimitive.Root {...args}>
+    <SegmentPrimitive.Item value="1">Segment</SegmentPrimitive.Item>
+    <SegmentPrimitive.Item value="2">Segment</SegmentPrimitive.Item>
+    <SegmentPrimitive.Item value="3">Segment</SegmentPrimitive.Item>
+    <SegmentPrimitive.Item value="4">Segment</SegmentPrimitive.Item>
+  </SegmentPrimitive.Root>
+{/snippet}
+
+<Story name="Basic" {args} {parameters} {template} />

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

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;