@casinogate/ui 1.11.14 → 2.0.0

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

@@ -0,0 +1,64 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const popoverVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const popoverContentVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    w: {
+        default: string[];
+        auto: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    w: {
+        default: string[];
+        auto: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    w: {
+        default: string[];
+        auto: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const popoverTriggerVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type PopoverRootVariantsProps = VariantProps<typeof popoverVariants>;
+export type PopoverContentVariantsProps = VariantProps<typeof popoverContentVariants>;
+export type PopoverTriggerVariantsProps = VariantProps<typeof popoverTriggerVariants>;

package/dist/primitives/popover/styles.js

@@ -0,0 +1,44 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const popoverVariants = tv({
+    base: [],
+});
+export const popoverContentVariants = tv({
+    base: [
+        'cgui:z-(--cg-ui-z-index-popover)',
+        'cgui:origin-(--bits-popover-content-transform-origin) cgui:outline-hidden',
+        '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-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+    ],
+    variants: {
+        variant: {
+            default: ['cgui:bg-surface-white'],
+        },
+        shadow: {
+            true: ['cgui:shadow-popover'],
+        },
+        w: {
+            default: ['cgui:min-w-(--bits-popover-anchor-width)'],
+            auto: ['cgui:w-auto'],
+        },
+        rounded: {
+            default: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        shadow: true,
+        w: 'default',
+        rounded: 'default',
+    },
+});
+export const popoverTriggerVariants = tv({
+    base: [
+        'cgui:cursor-pointer',
+        'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
+    ],
+});

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

@@ -0,0 +1,8 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import type { PopoverContentVariantsProps, PopoverTriggerVariantsProps } from './styles.js';
+export type PrimitivePopoverRootProps = PopoverPrimitive.RootProps & {
+    disabled?: boolean;
+};
+export type PrimitivePopoverContentProps = PopoverPrimitive.ContentProps & PopoverContentVariantsProps;
+export type PrimitivePopoverPortalProps = PopoverPrimitive.PortalProps;
+export type PrimitivePopoverTriggerProps = PopoverPrimitive.TriggerProps & PopoverTriggerVariantsProps;

package/dist/primitives/popover/types.js

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

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

@@ -0,0 +1,2 @@
+export { default as Item } from './segment.item.svelte';
+export { default as Root } from './segment.root.svelte';

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

@@ -0,0 +1,2 @@
+export { default as Item } from './segment.item.svelte';
+export { default as Root } from './segment.root.svelte';

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { SegmentStylesContext, segmentItemVariants } from '../styles.js';
+  import type { SegmentItemProps } from '../types.js';
+  import { SegmentItemState } from './segmet.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    value,
+    ref = $bindable(null),
+    id = useId(uid),
+    children,
+    child,
+    class: className,
+    variant,
+    size,
+    spacingX,
+    fullWidth,
+    ...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 variants = $derived({
+    variant: variant ?? styles.current.variant,
+    size: size ?? styles.current.size,
+    spacingX: spacingX ?? styles.current.spacingX,
+    fullWidth: fullWidth ?? styles.current.fullWidth,
+  });
+
+  const mergedProps = $derived(
+    mergeProps(props, itemState.props, { class: cn(segmentItemVariants(variants), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <button {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

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

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { SegmentStylesContext, segmentRootVariants } from '../styles.js';
+  import type { SegmentRootProps } from '../types.js';
+  import { SegmentRootState } from './segmet.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    value = $bindable(''),
+    ref = $bindable(null),
+    id = useId(uid),
+    disabled = false,
+    children,
+    class: className,
+    variant = 'primary',
+    rounded = 'sm',
+    size = 'md',
+    spacingX = 'md',
+    onValueChange,
+    fullWidth = false,
+    ...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({ variant, rounded, size, spacingX, fullWidth });
+
+  SegmentStylesContext.set(box.with(() => variants));
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<div class={cn(segmentRootVariants({ variant, rounded, fullWidth }), className)} {...mergedProps}>
+  {@render children?.()}
+</div>

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

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

package/dist/primitives/segment/components/segmet.svelte.d.ts

@@ -0,0 +1,42 @@
+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";
+    };
+    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/primitives/segment/components/segmet.svelte.js

@@ -0,0 +1,73 @@
+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,
+    }));
+    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/primitives/segment/index.d.ts

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

package/dist/primitives/segment/index.js

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

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

@@ -0,0 +1,130 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+export type SegmentVariant = 'primary' | 'clear';
+export type SegmentRounded = 'sm' | 'md' | 'clear';
+export type SegmentSize = 'sm' | 'md' | 'lg';
+export type SegmentSpacingX = 'sm' | 'md' | 'lg' | 'clear';
+export type SegmentVariants = {
+    variant: SegmentVariant;
+    rounded: SegmentRounded;
+    size: SegmentSize;
+    spacingX: SegmentSpacingX;
+    fullWidth: boolean;
+};
+export declare const segmentRootVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        clear: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        clear: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        clear: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const segmentItemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+    spacingX: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        clear: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+    spacingX: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        clear: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+    spacingX: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        clear: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const segmentThumbVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type SegmentStylesContextValues = ReadableBox<SegmentVariants>;
+export declare const SegmentStylesContext: Context<SegmentStylesContextValues>;
+export {};

package/dist/primitives/segment/styles.js

@@ -0,0 +1,70 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const segmentRootVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:p-1 cgui:w-fit',
+        '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',
+    ],
+    variants: {
+        variant: {
+            primary: ['cgui:bg-surface-primary-light-active cgui:border cgui:border-stroke-divider'],
+            clear: [''],
+        },
+        rounded: {
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            clear: [''],
+        },
+        fullWidth: {
+            true: ['cgui:w-full'],
+        },
+    },
+});
+export const segmentItemVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:justify-center cgui:min-w-fit',
+        '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',
+    ],
+    variants: {
+        variant: {
+            primary: [
+                'cgui:text-fg-semilight',
+                'cgui:data-[active=""]:text-fg-primary cgui:data-[active=""]:bg-surface-white cgui:data-[active=""]:shadow-segment-thumb',
+            ],
+            clear: [''],
+        },
+        size: {
+            sm: ['cgui:h-6'],
+            md: ['cgui:h-8.5'],
+            lg: ['cgui:h-11'],
+        },
+        fullWidth: {
+            true: ['cgui:flex-1'],
+        },
+        spacingX: {
+            sm: ['cgui:px-2'],
+            md: ['cgui:px-4'],
+            lg: ['cgui:px-6'],
+            clear: [''],
+        },
+    },
+});
+export const segmentThumbVariants = tv({
+    base: [
+        'cgui:rounded-[inherit] cgui:pointer-events-none',
+        'cgui:shadow-segment-thumb',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+    ],
+    variants: {
+        variant: {
+            primary: ['cgui:bg-surface-white'],
+            clear: [''],
+        },
+    },
+});
+export const SegmentStylesContext = new Context(keyWithPrefix('segment-styles'));

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

@@ -0,0 +1,14 @@
+import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChild, WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { SegmentVariants } from './styles.js';
+type SegmentRootPropsWithoutHTML = WithElementRef<WithChildren<{
+    value?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+} & Partial<SegmentVariants>>>;
+export type SegmentRootProps = SegmentRootPropsWithoutHTML & Without<PrimitiveDivAttributes, SegmentRootPropsWithoutHTML>;
+type SegmentItemPropsWithoutHTML = WithElementRef<WithChild<{
+    value: string;
+} & Partial<Pick<SegmentVariants, 'variant' | 'size' | 'spacingX' | 'fullWidth'>>>>;
+export type SegmentItemProps = SegmentItemPropsWithoutHTML & Without<PrimitiveButtonAttributes, SegmentItemPropsWithoutHTML>;
+export {};

package/dist/primitives/segment/types.js

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

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

@@ -0,0 +1,8 @@
+export { default as Content } from './select.content.svelte';
+export { default as GroupHeading } from './select.group-heading.svelte';
+export { default as Group } from './select.group.svelte';
+export { default as Item } from './select.item.svelte';
+export { default as Portal } from './select.portal.svelte';
+export { default as Root } from './select.root.svelte';
+export { default as Trigger } from './select.trigger.svelte';
+export { default as Viewport } from './select.viewport.svelte';

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

@@ -0,0 +1,8 @@
+export { default as Content } from './select.content.svelte';
+export { default as GroupHeading } from './select.group-heading.svelte';
+export { default as Group } from './select.group.svelte';
+export { default as Item } from './select.item.svelte';
+export { default as Portal } from './select.portal.svelte';
+export { default as Root } from './select.root.svelte';
+export { default as Trigger } from './select.trigger.svelte';
+export { default as Viewport } from './select.viewport.svelte';

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { Attachment } from 'svelte/attachments';
+  import { selectContentStyles } from '../styles.js';
+  import type { SelectContentProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    children,
+    side = 'bottom',
+    forceMount = false,
+    maxContentHeight,
+    ...restProps
+  }: SelectContentProps = $props();
+
+  const attrs = $derived({
+    'data-slot': 'select-content',
+    class: cn(selectContentStyles(), className),
+    sideOffset,
+    forceMount,
+    side,
+    ...restProps,
+  });
+
+  const contentStyle = $derived.by(() => {
+    return {
+      ...(maxContentHeight ? { '--cg-ui-max-content-height': maxContentHeight } : {}),
+    };
+  });
+
+  const contentMount: Attachment<HTMLDivElement> = (el) => {
+    $effect.pre(() => {
+      if (!el) return;
+
+      Object.entries(contentStyle).forEach(([key, value]) => {
+        el.style.setProperty(key, value);
+      });
+    });
+  };
+</script>
+
+<SelectPrimitive.Content bind:ref {...attrs} {@attach contentMount}>
+  {@render children?.()}
+</SelectPrimitive.Content>

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

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