@casinogate/ui 0.0.3

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

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  export type CheckboxRootProps = CheckboxRootPropsPrimitive & CheckboxVariantsProps;
+</script>
+
+<script lang="ts">
+  import CheckIcon from '../../../assets/icons/check.svg?component';
+  import { checkboxVariants, type CheckboxVariantsProps } from '../styles.js';
+  import { Checkbox, useId, type CheckboxRootProps as CheckboxRootPropsPrimitive } from 'bits-ui';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenSnippet,
+    size = 'md',
+    rounded = 'xs',
+    ...props
+  }: CheckboxRootProps = $props();
+
+  const variants = $derived(checkboxVariants({ size, rounded }));
+</script>
+
+<Checkbox.Root bind:ref bind:checked bind:indeterminate {id} class={[variants.root(), 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={variants.indeterminateIndicator()}
+      ></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={variants.checkedIndicator()}
+      >
+        <CheckIcon />
+      </span>
+    {/if}
+  {/snippet}
+</Checkbox.Root>

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

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

package/dist/components/checkbox/index.js

@@ -0,0 +1,6 @@
+import Group from './components/checkbox.group.svelte';
+import Root from './components/checkbox.root.svelte';
+export const CheckboxPrimitive = {
+    Root,
+    Group,
+};

package/dist/components/checkbox/model/checkbox-model.svelte.d.ts

@@ -0,0 +1,16 @@
+type CheckboxModelOpts = {
+    defaultChecked?: boolean;
+    defaultIndeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    onIndeterminateChange?: (indeterminate: boolean) => void;
+};
+export declare class CheckboxModel {
+    #private;
+    constructor(opts?: CheckboxModelOpts);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+}
+export declare const createCheckboxModel: (opts?: CheckboxModelOpts) => CheckboxModel;
+export {};

package/dist/components/checkbox/model/checkbox-model.svelte.js

@@ -0,0 +1,25 @@
+export class CheckboxModel {
+    #opts;
+    #checked = $state(false);
+    #indeterminate = $state(false);
+    constructor(opts = {}) {
+        this.#opts = opts;
+    }
+    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 const createCheckboxModel = (opts = {}) => {
+    return new CheckboxModel(opts);
+};

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

@@ -0,0 +1 @@
+export { CheckboxModel, createCheckboxModel } from './checkbox-model.svelte.js';

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

@@ -0,0 +1 @@
+export { CheckboxModel, createCheckboxModel } from './checkbox-model.svelte.js';

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

@@ -0,0 +1,126 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string[];
+            indeterminateIndicator: string[];
+        };
+        md: {
+            root: string[];
+            indeterminateIndicator: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+    rounded: {
+        none: {
+            root: never[];
+        };
+        xs: {
+            root: string[];
+        };
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    indeterminateIndicator: string[];
+    checkedIndicator: string[];
+}, undefined, {
+    size: {
+        sm: {
+            root: string[];
+            indeterminateIndicator: string[];
+        };
+        md: {
+            root: string[];
+            indeterminateIndicator: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+    rounded: {
+        none: {
+            root: never[];
+        };
+        xs: {
+            root: string[];
+        };
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    indeterminateIndicator: string[];
+    checkedIndicator: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string[];
+            indeterminateIndicator: string[];
+        };
+        md: {
+            root: string[];
+            indeterminateIndicator: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+    rounded: {
+        none: {
+            root: never[];
+        };
+        xs: {
+            root: string[];
+        };
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    indeterminateIndicator: string[];
+    checkedIndicator: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariantsProps = VariantProps<typeof checkboxVariants>;

package/dist/components/checkbox/styles.js

@@ -0,0 +1,60 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const checkboxVariants = tv({
+    slots: {
+        root: [
+            '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',
+        ],
+        indeterminateIndicator: [
+            '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-[inherit]',
+        ],
+        checkedIndicator: [
+            'cgui:absolute cgui:size-full cgui:flex cgui:items-center cgui:justify-center cgui:text-icon-white',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                root: ['cgui:size-3'],
+                indeterminateIndicator: ['cgui:rounded-xxxs'],
+            },
+            md: {
+                root: ['cgui:size-4'],
+                indeterminateIndicator: ['cgui:rounded-xxxs'],
+            },
+            lg: {
+                root: ['cgui:size-6'],
+            },
+            xl: {
+                root: ['cgui:size-12'],
+            },
+        },
+        rounded: {
+            none: {
+                root: [],
+            },
+            xs: {
+                root: ['cgui:rounded-xxs'],
+            },
+            sm: {
+                root: ['cgui:rounded-sm'],
+            },
+            md: {
+                root: ['cgui:rounded-md'],
+            },
+            lg: {
+                root: ['cgui:rounded-md'],
+            },
+            xl: {
+                root: ['cgui:rounded-lg'],
+            },
+        },
+    },
+});

package/dist/components/collapsible/collapsible.stories.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+  import { defineMeta } from '../../storybook/addon-svelte-csf';
+  import type { Parameters } from '../../storybook/sveltekit';
+
+  import type { ComponentProps } from 'svelte';
+  import CollapsibleContent from './components/collapsaible.content.svelte';
+  import CollapsibleRoot from './components/collapsaible.root.svelte';
+  import CollapsibleTrigger from './components/collapsaible.trigger.svelte';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['open', 'disabled'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Collapsible',
+    component: CollapsibleRoot,
+    render: template,
+    tags: ['autodocs'],
+
+    argTypes: {
+      open: {
+        table: {
+          defaultValue: { summary: '$bindable(false)' },
+        },
+      },
+    },
+
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof CollapsibleRoot>;
+
+  const args: Args = {
+    open: false,
+    disabled: false,
+  };
+</script>
+
+{#snippet template(args: Args)}
+  <CollapsibleRoot {...args}>
+    <CollapsibleTrigger>Nisi nulla esse qui dolor</CollapsibleTrigger>
+    <CollapsibleContent>
+      Labore cupidatat nisi nostrud non laboris tempor velit. Commodo in sint ea fugiat ad ullamco labore. Laboris
+      labore sunt nostrud labore aliqua. Consectetur nulla anim amet laborum ex sunt nisi do consectetur magna Lorem
+      irure. Anim aute magna ad. Aliqua labore enim in quis. Eu exercitation cupidatat anim mollit ipsum eiusmod ex. Id
+      exercitation nulla esse consequat incididunt tempor.
+    </CollapsibleContent>
+  </CollapsibleRoot>
+{/snippet}
+
+<Story name="Basic" {args} {template} {parameters} />

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

package/dist/components/collapsible/components/collapsaible.content.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  export type CollapsibleContentProps = CollapsibleContentPropsPrimitive;
+</script>
+
+<script lang="ts">
+  import { CollapsibleStylesContext } from '../styles.js';
+
+  import { cn } from '../../../internal/utils/common.js';
+
+  import {
+    Collapsible as CollapsiblePrimitive,
+    useId,
+    type CollapsibleContentProps as CollapsibleContentPropsPrimitive,
+  } from 'bits-ui';
+  import { fade } from 'svelte/transition';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    forceMount = true,
+    class: className,
+    child: childSnippet,
+    children,
+    ...restProps
+  }: CollapsibleContentProps = $props();
+
+  const styles = CollapsibleStylesContext.get();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref {id} class={cn(styles.current.content(), className)} {forceMount} {...restProps}>
+  {#snippet child(childProps)}
+    {#if childSnippet}
+      {@render childSnippet?.(childProps)}
+    {:else if childProps.open}
+      <div {...childProps.props} transition:fade={{ duration: 250 }}>
+        {@render children?.()}
+      </div>
+    {/if}
+  {/snippet}
+</CollapsiblePrimitive.Content>

package/dist/components/collapsible/components/collapsaible.content.svelte.d.ts

@@ -0,0 +1,5 @@
+export type CollapsibleContentProps = CollapsibleContentPropsPrimitive;
+import { Collapsible as CollapsiblePrimitive, type CollapsibleContentProps as CollapsibleContentPropsPrimitive } from 'bits-ui';
+declare const Collapsaible: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
+type Collapsaible = ReturnType<typeof Collapsaible>;
+export default Collapsaible;

package/dist/components/collapsible/components/collapsaible.group.svelte.d.ts

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

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  export type CollapsibleRootProps = CollapsibleRootPropsPrimitive;
+</script>
+
+<script lang="ts">
+  import { CollapsibleStylesContext, collapsibleVariants } from '../styles.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import {
+    Collapsible as CollapsiblePrimitive,
+    useId,
+    type CollapsibleRootProps as CollapsibleRootPropsPrimitive,
+  } from 'bits-ui';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { CollapsibleGroupContext, CollapsibleRootState } from './collapsaible.svelte.js';
+
+  let {
+    open = $bindable(false),
+    ref = $bindable(null),
+    id = useId(),
+    disabled,
+    class: className,
+    ...restProps
+  }: CollapsibleRootProps = $props();
+
+  const group = CollapsibleGroupContext.getOr(null);
+
+  if (group) {
+    if (group.opts.value.current.includes(id)) {
+      open = true;
+    } else {
+      open = false;
+    }
+  }
+
+  const rootState = CollapsibleRootState.create(
+    {
+      value: box.with(
+        () => open,
+        (v) => (open = v)
+      ),
+      ref: box.with(
+        () => ref,
+        (v) => (ref = v)
+      ),
+      disabled: box.with(() => disabled ?? false),
+      id: box.with(() => id),
+    },
+    group
+  );
+
+  const variants = $derived(collapsibleVariants());
+
+  CollapsibleStylesContext.set(box.with(() => variants));
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+<CollapsiblePrimitive.Root
+  bind:open={rootState.opts.value.current}
+  class={cn(variants.root(), className)}
+  {...mergedProps}
+/>

package/dist/components/collapsible/components/collapsaible.root.svelte.d.ts

@@ -0,0 +1,5 @@
+export type CollapsibleRootProps = CollapsibleRootPropsPrimitive;
+import { Collapsible as CollapsiblePrimitive, type CollapsibleRootProps as CollapsibleRootPropsPrimitive } from 'bits-ui';
+declare const Collapsaible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+type Collapsaible = ReturnType<typeof Collapsaible>;
+export default Collapsaible;

package/dist/components/collapsible/components/collapsaible.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { CollapsibleOpenVariant } from '../types.js';
+import type { OnChangeFn, RefAttachment } from '../../../internal/types/common.js';
+import { Context } from 'runed';
+import { type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+export declare const CollapsibleGroupContext: Context<CollapsibleGroupState>;
+type CollapsibleGroupStateOpts = WithRefProps<WritableBoxedValues<{
+    value: string[];
+}> & ReadableBoxedValues<{
+    variant: CollapsibleOpenVariant;
+    disabled: boolean;
+    onValueChange: OnChangeFn<string[]>;
+}>>;
+export declare class CollapsibleGroupState {
+    static create(opts: CollapsibleGroupStateOpts): CollapsibleGroupState;
+    readonly opts: CollapsibleGroupStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: CollapsibleGroupStateOpts);
+    addValue(value: string | undefined): void;
+    removeValue(value: string | undefined): void;
+    readonly props: {
+        readonly id: string;
+        readonly 'data-disabled': "" | undefined;
+        readonly role: "group";
+    };
+}
+type CollapsibleRootStateOpts = WithRefProps<WritableBoxedValues<{
+    value: boolean;
+}> & ReadableBoxedValues<{
+    disabled: boolean;
+}>>;
+export declare class CollapsibleRootState {
+    static create(opts: CollapsibleRootStateOpts, group: CollapsibleGroupState | null): CollapsibleRootState;
+    readonly opts: CollapsibleRootStateOpts;
+    readonly group: CollapsibleGroupState | null;
+    readonly attachment: RefAttachment;
+    readonly trueDisabled: boolean;
+    constructor(opts: CollapsibleRootStateOpts, group: CollapsibleGroupState | null);
+    readonly props: {
+        readonly id: string;
+        readonly disabled: boolean;
+        readonly 'data-disabled': "" | undefined;
+    };
+}
+export {};

package/dist/components/collapsible/components/collapsaible.svelte.js

@@ -0,0 +1,92 @@
+import { getDataDisabled } from '../../../internal/types/attrs.js';
+import { arraysAreEqual } from '../../../internal/utils/arrays.js';
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context, watch } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const CollapsibleRootContext = new Context(keyWithPrefix('collapsible-root'));
+export const CollapsibleGroupContext = new Context(keyWithPrefix('collapsible-group'));
+export class CollapsibleGroupState {
+    static create(opts) {
+        return CollapsibleGroupContext.set(new CollapsibleGroupState(opts));
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    addValue(value) {
+        if (!value)
+            return;
+        if (this.opts.value.current.includes(value))
+            return;
+        let newValue = [];
+        if (this.opts.variant.current === 'single') {
+            newValue = [value];
+        }
+        else {
+            newValue = [...$state.snapshot(this.opts.value.current), value];
+        }
+        this.opts.value.current = newValue;
+        if (arraysAreEqual(this.opts.value.current, newValue))
+            return;
+        this.opts.onValueChange.current(newValue);
+    }
+    removeValue(value) {
+        if (!value)
+            return;
+        const idx = this.opts.value.current.indexOf(value);
+        if (idx === -1)
+            return;
+        const newValue = this.opts.value.current.filter((v) => v !== value);
+        this.opts.value.current = newValue;
+        if (arraysAreEqual(this.opts.value.current, newValue))
+            return;
+        this.opts.onValueChange.current(newValue);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-disabled': getDataDisabled(this.opts.disabled.current),
+        role: 'group',
+        ...this.attachment,
+    }));
+}
+export class CollapsibleRootState {
+    static create(opts, group) {
+        return CollapsibleRootContext.set(new CollapsibleRootState(opts, group));
+    }
+    opts;
+    group;
+    attachment;
+    trueDisabled = $derived.by(() => {
+        if (this.group && this.group.opts.disabled.current)
+            return true;
+        return this.opts.disabled.current;
+    });
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.attachment = attachRef(opts.ref);
+        watch.pre([() => $state.snapshot(this.group?.opts.value.current), () => this.opts.value.current], ([groupValue, value]) => {
+            if (!groupValue || !value)
+                return;
+            this.opts.value.current = groupValue.includes(this.opts.id.current);
+        });
+        watch.pre([() => this.opts.value.current], ([value]) => {
+            if (!value)
+                return;
+            if (value) {
+                this.group?.addValue(this.opts.id.current);
+            }
+            else {
+                this.group?.removeValue(this.opts.id.current);
+            }
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        disabled: this.trueDisabled,
+        'data-disabled': getDataDisabled(this.trueDisabled),
+        ...this.attachment,
+    }));
+}