@casinogate/ui 1.11.14 → 2.0.0

package/dist/primitives/button/styles.js

@@ -0,0 +1,64 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const buttonVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:select-none cgui:font-medium',
+        'cgui:data-disabled:cursor-not-allowed cgui:data-disabled:opacity-50',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:size-4.5',
+    ],
+    variants: {
+        variant: {
+            primary: ['cgui:bg-primary-80  cgui:text-fg-white', 'cgui:hover:bg-primary-60 ', ' cgui:active:bg-primary-100'],
+            outline: [
+                'cgui:bg-transparent cgui:text-primary-80 cgui:border cgui:border-stroke-primary',
+                'cgui:hover:text-primary-60 cgui:hover:border-stroke-primary-60',
+                'cgui:active:text-primary-100 cgui:active:border-stroke-primary-100',
+            ],
+            ghost: ['cgui:bg-transparent cgui:text-primary-80', 'cgui:hover:text-primary-60', 'cgui:active:text-primary-100'],
+            link: [
+                'cgui:bg-transparent cgui:text-primary-80',
+                'cgui:hover:text-primary-60',
+                'cgui:active:text-primary-100',
+                'cgui:underline',
+            ],
+            none: [],
+        },
+        loading: {
+            true: 'cgui:pointer-events-none cgui:opacity-50',
+        },
+        shadow: {
+            true: 'cgui:shadow-btn',
+        },
+        size: {
+            xs: 'cgui:h-7.5 cgui:px-2 cgui:text-body',
+            sm: 'cgui:h-8 cgui:px-2.5 cgui:text-body',
+            md: 'cgui:h-9 cgui:px-3 cgui:text-body',
+            lg: 'cgui:h-10.5 cgui:px-4 cgui:text-heading-2',
+            none: '',
+        },
+        w: {
+            full: 'cgui:w-full',
+            auto: 'cgui:w-auto',
+            fit: 'cgui:w-fit',
+            none: '',
+        },
+        fullWidth: {
+            true: 'cgui:w-full',
+        },
+        rounded: {
+            sm: 'cgui:rounded-sm',
+            md: 'cgui:rounded-md',
+            lg: 'cgui:rounded-lg',
+            xl: 'cgui:rounded-xl',
+            full: 'cgui:rounded-full',
+            none: '',
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        shadow: true,
+        rounded: 'md',
+    },
+});

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

@@ -0,0 +1,8 @@
+import type { WithVariants } from '../../internal/types/composition.js';
+import type { PrimitiveButtonAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChild, Without } from 'svelte-toolbelt';
+import type { ButtonVariantsProps } from './styles.js';
+export type ButtonPropsWithoutHTML = WithChild<WithVariants<{
+    loading?: boolean;
+}, ButtonVariantsProps>>;
+export type ButtonProps = ButtonPropsWithoutHTML & Without<PrimitiveButtonAttributes, ButtonPropsWithoutHTML>;

package/dist/primitives/button/types.js

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

package/dist/primitives/button-group/components/button-group.root.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { buttonGroupRootVariants } from '../styles.js';
+  import type { ButtonGroupRootProps } from '../types.js';
+
+  let {
+    children,
+    ref = $bindable(null),
+    orientation = 'horizontal',
+    class: className,
+    ...restProps
+  }: ButtonGroupRootProps = $props();
+
+  const classNames = $derived(cn(buttonGroupRootVariants({ orientation }), className));
+</script>
+
+<div bind:this={ref} class={classNames} {...restProps} {...{ [SLOT_ATTR_NAME]: 'button-group' }}>
+  {@render children?.()}
+</div>

package/dist/primitives/button-group/components/button-group.root.svelte.d.ts

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

package/dist/primitives/button-group/components/button-group.separator.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Separator } from '../../separator/index.js';
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { buttonGroupSeparatorVariants } from '../styles.js';
+  import type { ButtonGroupSeparatorProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    ...restProps
+  }: ButtonGroupSeparatorProps = $props();
+
+  const classNames = $derived(cn(buttonGroupSeparatorVariants({ orientation }), className));
+</script>
+
+<Separator
+  bind:ref
+  {orientation}
+  class={classNames}
+  {...{ [SLOT_ATTR_NAME]: 'button-group-separator' }}
+  {...restProps}
+/>

package/dist/primitives/button-group/components/button-group.separator.svelte.d.ts

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

package/dist/primitives/button-group/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './button-group.root.svelte';
+export { default as Separator } from './button-group.separator.svelte';

package/dist/primitives/button-group/components/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './button-group.root.svelte';
+export { default as Separator } from './button-group.separator.svelte';

package/dist/primitives/button-group/index.d.ts

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

package/dist/primitives/button-group/index.js

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

package/dist/primitives/button-group/styles.d.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const buttonGroupRootVariants: 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 declare const buttonGroupSeparatorVariants: 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 ButtonGroupVariantsProps = VariantProps<typeof buttonGroupRootVariants>;

package/dist/primitives/button-group/styles.js

@@ -0,0 +1,25 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const buttonGroupRootVariants = tv({
+    base: [
+        'cgui:flex cgui:w-fit cgui:items-stretch',
+        'cgui:has-[>[data-slot=button-group]]:gap-2',
+        'cgui:[&>*]:focus-visible:relative cgui:[&>*]:focus-visible:z-10',
+        'cgui:[&>input]:flex-1',
+        "cgui:has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md cgui:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
+    ],
+    variants: {
+        orientation: {
+            horizontal: 'cgui:[&>*:not(:first-child)]:rounded-l-none cgui:[&>*:not(:first-child)]:border-l-0 cgui:[&>*:not(:last-child)]:rounded-r-none',
+            vertical: 'cgui:flex-col cgui:[&>*:not(:first-child)]:rounded-t-none cgui:[&>*:not(:first-child)]:border-t-0 cgui:[&>*:not(:last-child)]:rounded-b-none',
+        },
+    },
+});
+export const buttonGroupSeparatorVariants = tv({
+    base: ['cgui:relative cgui:!m-0 cgui:self-stretch cgui:data-[orientation=vertical]:h-auto'],
+    variants: {
+        orientation: {
+            horizontal: [''],
+            vertical: ['cgui:h-auto'],
+        },
+    },
+});

package/dist/primitives/button-group/types.d.ts

@@ -0,0 +1,8 @@
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { ButtonGroupVariantsProps } from './styles.js';
+import type { SeparatorRootProps } from 'bits-ui';
+type ButtonGroupRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & ButtonGroupVariantsProps;
+export type ButtonGroupRootProps = ButtonGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ButtonGroupRootPropsWithoutHTML>;
+export type ButtonGroupSeparatorProps = SeparatorRootProps;
+export {};

package/dist/primitives/button-group/types.js

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

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { CheckboxGroupProps } from '../types.js';
+
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+
+  let { value = $bindable(), ref = $bindable(null), ...restProps }: CheckboxGroupProps = $props();
+</script>
+
+<CheckboxPrimitive.Group bind:value bind:ref {...restProps as any} />

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

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+declare const Checkbox: import("svelte").Component<CheckboxPrimitive.GroupProps, {}, "value" | "ref">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Checkbox } from 'bits-ui';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import {
+    checkboxCheckedIndicatorVariants,
+    checkboxIndeterminateIndicatorVariants,
+    checkboxRootVariants,
+  } from '../styles.js';
+  import type { CheckboxRootProps } from '../types.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenSnippet,
+    size = 'md',
+    rounded = 'xs',
+    ...props
+  }: CheckboxRootProps = $props();
+</script>
+
+<Checkbox.Root
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  {id}
+  class={cn(checkboxRootVariants({ size, rounded }), className)}
+  {...props}
+>
+  {#snippet children(childrenProps)}
+    {#if childrenSnippet}
+      {@render childrenSnippet?.(childrenProps)}
+    {:else if childrenProps.indeterminate}
+      <span
+        data-slot="indeterminate-indicator"
+        data-state="indeterminate"
+        in:fly={{ duration: 250, y: 4, easing: cubicInOut }}
+        out:fly={{ duration: 250, y: -4, easing: cubicInOut }}
+        class={checkboxIndeterminateIndicatorVariants({ size, rounded })}
+      ></span>
+    {:else if childrenProps.checked}
+      <span
+        data-slot="checked-indicator"
+        data-state="checked"
+        in:fly={{ duration: 250, y: 4, easing: cubicInOut }}
+        out:fly={{ duration: 250, y: -4, easing: cubicInOut }}
+        class={checkboxCheckedIndicatorVariants({ size, rounded })}
+      >
+        <Icon.Check />
+      </span>
+    {/if}
+  {/snippet}
+</Checkbox.Root>

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

@@ -0,0 +1,5 @@
+import { Checkbox } from 'bits-ui';
+import type { CheckboxRootProps } from '../types.js';
+declare const Checkbox: import("svelte").Component<CheckboxRootProps, {}, "checked" | "indeterminate" | "ref">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

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

@@ -0,0 +1,2 @@
+export { default as Group } from './checkbox.group.svelte';
+export { default as Root } from './checkbox.root.svelte';

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

@@ -0,0 +1,2 @@
+export { default as Group } from './checkbox.group.svelte';
+export { default as Root } from './checkbox.root.svelte';

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

@@ -0,0 +1,3 @@
+export * as Checkbox from './components/index.js';
+export type * from './types.js';
+export * from './model/index.js';

package/dist/primitives/checkbox/index.js

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

package/dist/primitives/checkbox/model/index.d.ts

@@ -0,0 +1 @@
+export { useCheckboxState, type CheckboxStateOpts } from './use-checkbox-state.svelte.js';

package/dist/primitives/checkbox/model/index.js

@@ -0,0 +1 @@
+export { useCheckboxState } from './use-checkbox-state.svelte.js';

package/dist/primitives/checkbox/model/use-checkbox-state.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type MaybeGetter } from 'svelte-toolbelt';
+export type CheckboxStateOpts = {
+    defaultChecked?: MaybeGetter<boolean>;
+    defaultIndeterminate?: MaybeGetter<boolean>;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+};
+declare class CheckboxState {
+    #private;
+    constructor(opts?: CheckboxStateOpts);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+}
+export declare function useCheckboxState(opts?: CheckboxStateOpts): CheckboxState;
+export {};

package/dist/primitives/checkbox/model/use-checkbox-state.svelte.js

@@ -0,0 +1,29 @@
+import { extract } from '../../../internal/utils/extract.js';
+import {} from 'svelte-toolbelt';
+class CheckboxState {
+    #opts;
+    #checked = $state(false);
+    #indeterminate = $state(false);
+    constructor(opts = {}) {
+        this.#opts = opts;
+        this.#checked = extract(this.#opts.defaultChecked, false);
+        this.#indeterminate = extract(this.#opts.defaultIndeterminate, false);
+    }
+    get checked() {
+        return this.#checked;
+    }
+    set checked(value) {
+        this.#checked = value;
+        this.#opts.onCheckedChange?.(value);
+    }
+    get indeterminate() {
+        return this.#indeterminate;
+    }
+    set indeterminate(value) {
+        this.#indeterminate = value;
+        this.#opts.onIndeterminateChange?.(value);
+    }
+}
+export function useCheckboxState(opts = {}) {
+    return new CheckboxState(opts);
+}

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

@@ -0,0 +1,149 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const checkboxRootVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: {};
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: {};
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: {};
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const checkboxIndeterminateIndicatorVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: string[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: string[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: string[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const checkboxCheckedIndicatorVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: string[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: string[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    rounded: {
+        none: string[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type CheckboxRootVariantsProps = VariantProps<typeof checkboxRootVariants>;

package/dist/primitives/checkbox/styles.js

@@ -0,0 +1,73 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const checkboxRootVariants = tv({
+    base: [
+        'cgui:relative cgui:overflow-hidden',
+        'cgui:flex cgui:items-center cgui:justify-center',
+        'cgui:border cgui:border-surface-regular cgui:outline-none',
+        'cgui:cursor-pointer cgui:select-none',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:active:scale-95',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
+        'cgui:data-[state=indeterminate]:border-surface-primary',
+        'cgui:data-[state=checked]:border-surface-primary cgui:data-[state=checked]:bg-surface-primary',
+    ],
+    variants: {
+        size: {
+            sm: ['cgui:size-3'],
+            md: ['cgui:size-4'],
+            lg: ['cgui:size-6'],
+            xl: ['cgui:size-12'],
+        },
+        rounded: {
+            none: {},
+            xs: ['cgui:rounded-xxs'],
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+        },
+    },
+});
+export const checkboxIndeterminateIndicatorVariants = tv({
+    base: [
+        'cgui:absolute cgui:top-1/2 cgui:left-1/2 cgui:-translate-x-1/2 cgui:-translate-y-1/2 cgui:flex cgui:size-1/2 cgui:bg-surface-primary cgui:rounded-xs',
+    ],
+    variants: {
+        size: {
+            sm: [''],
+            md: [''],
+            lg: [''],
+            xl: [''],
+        },
+        rounded: {
+            none: [''],
+            xs: [''],
+            sm: [''],
+            md: [''],
+            lg: [''],
+            xl: [''],
+            full: [''],
+        },
+    },
+});
+export const checkboxCheckedIndicatorVariants = tv({
+    base: ['cgui:absolute cgui:size-full cgui:flex cgui:items-center cgui:justify-center cgui:text-icon-white'],
+    variants: {
+        size: {
+            sm: ['cgui:[&>svg]:size-2'],
+            md: ['cgui:[&>svg]:size-4'],
+            lg: ['cgui:[&>svg]:size-6'],
+            xl: ['cgui:[&>svg]:size-10'],
+        },
+        rounded: {
+            none: [''],
+            xs: [''],
+            sm: [''],
+            md: [''],
+            lg: [''],
+            xl: [''],
+            full: [''],
+        },
+    },
+});

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

@@ -0,0 +1,5 @@
+import type { WithVariants } from '../../internal/types/composition.js';
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+import { type CheckboxRootVariantsProps } from './styles.js';
+export type CheckboxRootProps = WithVariants<CheckboxPrimitive.RootProps, CheckboxRootVariantsProps>;
+export type CheckboxGroupProps = CheckboxPrimitive.GroupProps;

package/dist/primitives/checkbox/types.js

@@ -0,0 +1,2 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+import {} from './styles.js';