@casinogate/ui 1.3.1 → 1.3.2

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

@@ -0,0 +1,231 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            root: string[];
+        };
+        outline: {
+            root: string[];
+        };
+        ghost: {
+            root: string[];
+        };
+        link: {
+            root: string[];
+        };
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+    shadow: {
+        true: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    w: {
+        full: {
+            root: string;
+        };
+        auto: {
+            root: string;
+        };
+        fit: {
+            root: string;
+        };
+        clean: {
+            root: string;
+        };
+    };
+    rounded: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+        clean: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    chevron: string[];
+}, undefined, {
+    variant: {
+        primary: {
+            root: string[];
+        };
+        outline: {
+            root: string[];
+        };
+        ghost: {
+            root: string[];
+        };
+        link: {
+            root: string[];
+        };
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+    shadow: {
+        true: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    w: {
+        full: {
+            root: string;
+        };
+        auto: {
+            root: string;
+        };
+        fit: {
+            root: string;
+        };
+        clean: {
+            root: string;
+        };
+    };
+    rounded: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+        clean: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    chevron: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            root: string[];
+        };
+        outline: {
+            root: string[];
+        };
+        ghost: {
+            root: string[];
+        };
+        link: {
+            root: string[];
+        };
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+    shadow: {
+        true: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    w: {
+        full: {
+            root: string;
+        };
+        auto: {
+            root: string;
+        };
+        fit: {
+            root: string;
+        };
+        clean: {
+            root: string;
+        };
+    };
+    rounded: {
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        full: {
+            root: string;
+        };
+        clean: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    chevron: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type ButtonVariantsProps = VariantProps<typeof buttonVariants>;

package/dist/components/button/styles.js

@@ -0,0 +1,105 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const buttonVariants = tv({
+    slots: {
+        root: [
+            'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1.5 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:disabled:cursor-not-allowed cgui:disabled:opacity-50',
+        ],
+        chevron: ['cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0'],
+    },
+    variants: {
+        variant: {
+            primary: {
+                root: ['cgui:bg-primary-80  cgui:text-fg-white', 'cgui:hover:bg-primary-60 ', ' cgui:active:bg-primary-100'],
+            },
+            outline: {
+                root: [
+                    '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: {
+                root: [
+                    'cgui:bg-transparent cgui:text-primary-80',
+                    'cgui:hover:text-primary-60',
+                    'cgui:active:text-primary-100',
+                ],
+            },
+            link: {
+                root: [
+                    'cgui:bg-transparent cgui:text-primary-80',
+                    'cgui:hover:text-primary-60',
+                    'cgui:active:text-primary-100',
+                    'cgui:underline',
+                ],
+            },
+        },
+        loading: {
+            true: {
+                root: 'cgui:pointer-events-none cgui:opacity-50',
+            },
+        },
+        shadow: {
+            true: {
+                root: 'cgui:shadow-btn',
+            },
+        },
+        size: {
+            xs: {
+                root: 'cgui:h-7.5',
+            },
+            sm: {
+                root: 'cgui:h-8',
+            },
+            md: {
+                root: 'cgui:h-8.5',
+            },
+            lg: {
+                root: 'cgui:h-14',
+            },
+        },
+        w: {
+            full: {
+                root: 'cgui:w-full',
+            },
+            auto: {
+                root: 'cgui:w-auto',
+            },
+            fit: {
+                root: 'cgui:w-fit',
+            },
+            clean: {
+                root: '',
+            },
+        },
+        rounded: {
+            sm: {
+                root: 'cgui:rounded-sm',
+            },
+            md: {
+                root: 'cgui:rounded-md',
+            },
+            lg: {
+                root: 'cgui:rounded-lg',
+            },
+            xl: {
+                root: 'cgui:rounded-xl',
+            },
+            full: {
+                root: 'cgui:rounded-full',
+            },
+            clean: {
+                root: '',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'primary',
+        size: 'md',
+        shadow: true,
+        rounded: 'md',
+    },
+});

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

@@ -0,0 +1,7 @@
+import type { ButtonVariantsProps } from './styles.js';
+import { type ButtonRootProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type ButtonProps = ButtonRootProps & {
+    startChevron?: Snippet;
+    endChevron?: Snippet;
+} & ButtonVariantsProps;

package/dist/components/button/types.js

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

package/dist/components/button-group/button-group.stories.svelte

@@ -5,7 +5,7 @@
   import type { Parameters } from '@storybook/sveltekit';
   import type { ComponentProps } from 'svelte';
   import ButtonGroupRoot from './components/button-group.root.svelte';
-  import { ButtonGroup } from './index.js';
+  import { ButtonGroupPrimitive } from './index.js';
 
   const parameters: Parameters = {
     controls: {
@@ -20,7 +20,7 @@
     parameters,
   });
 
-  type Args = ComponentProps<typeof ButtonGroup.Root>;
+  type Args = ComponentProps<typeof ButtonGroupPrimitive.Root>;
 
   const args: Args = {
     orientation: 'horizontal',
@@ -29,31 +29,31 @@
 
 <Story name="Basic" {args} {parameters}>
   {#snippet template(args: Args)}
-    <ButtonGroup.Root {...args} class="cgui:w-full">
+    <ButtonGroupPrimitive.Root {...args} class="cgui:w-full">
       <Button class="cgui:flex-1">Button 1</Button>
       <Button class="cgui:flex-1">Button 2</Button>
       <Button class="cgui:flex-1">Button 3</Button>
-    </ButtonGroup.Root>
+    </ButtonGroupPrimitive.Root>
   {/snippet}
 </Story>
 
 <Story name="Input with Button" {args} {parameters}>
   {#snippet template(args: Args)}
-    <ButtonGroup.Root {...args} class="cgui:w-full">
+    <ButtonGroupPrimitive.Root {...args} class="cgui:w-full">
       <Input placeholder="Search" />
       <Button w="clean" class="cgui:h-9">OK</Button>
-    </ButtonGroup.Root>
+    </ButtonGroupPrimitive.Root>
   {/snippet}
 </Story>
 
 <Story name="With Separator" {args} {parameters}>
   {#snippet template(args: Args)}
-    <ButtonGroup.Root {...args} class="cgui:w-full">
+    <ButtonGroupPrimitive.Root {...args} class="cgui:w-full">
       <Button class="cgui:flex-1">Button 1</Button>
-      <ButtonGroup.Separator />
+      <ButtonGroupPrimitive.Separator />
       <Button class="cgui:flex-1">Button 2</Button>
-      <ButtonGroup.Separator />
+      <ButtonGroupPrimitive.Separator />
       <Button class="cgui:flex-1">Button 3</Button>
-    </ButtonGroup.Root>
+    </ButtonGroupPrimitive.Root>
   {/snippet}
 </Story>

package/dist/components/button-group/button-group.stories.svelte.d.ts

@@ -1,4 +1,3 @@
-import { ButtonGroup } from './index.js';
 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;

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

@@ -1,22 +1,15 @@
-<script lang="ts" module>
-  type ButtonGroupRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & ButtonGroupVariantsProps;
-
-  export type ButtonGroupRootProps = ButtonGroupRootPropsWithoutHTML &
-    Without<PrimitiveDivAttributes, ButtonGroupRootPropsWithoutHTML>;
-</script>
-
 <script lang="ts">
+  import type { ButtonGroupRootProps } from '../types.js';
   import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
-  import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
-  import type { ButtonGroupVariantsProps } from '../styles.js';
+  import { box } from 'svelte-toolbelt';
   import { ButtonGroupStylesContext, buttonGroupStyles } from '../styles.js';
 
+  const uid = $props.id();
   let {
     children,
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     orientation = 'horizontal',
     class: className,
     ...restProps

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

@@ -1,8 +1,4 @@
-type ButtonGroupRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & ButtonGroupVariantsProps;
-export type ButtonGroupRootProps = ButtonGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ButtonGroupRootPropsWithoutHTML>;
-import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
-import { type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
-import type { ButtonGroupVariantsProps } from '../styles.js';
+import type { ButtonGroupRootProps } from '../types.js';
 declare const ButtonGroup: import("svelte").Component<ButtonGroupRootProps, {}, "ref">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import type { ButtonGroupSeparatorProps } from '../types.js';
   import { Separator } from '../../separator/index.js';
   import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
   import { cn } from '../../../internal/utils/common.js';
-  import type { ComponentProps } from 'svelte';
   import { ButtonGroupStylesContext } from '../styles.js';
 
   let {
@@ -10,7 +10,7 @@
     class: className,
     orientation = 'vertical',
     ...restProps
-  }: ComponentProps<typeof Separator.Root> = $props();
+  }: ButtonGroupSeparatorProps = $props();
 
   const styles = ButtonGroupStylesContext.get();
 </script>

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

@@ -1,13 +1,3 @@
-declare const ButtonGroup: import("svelte").Component<Omit<{
-    orientation?: import("bits-ui").Orientation;
-    decorative?: boolean;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[{
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+declare const ButtonGroup: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

package/dist/components/button-group/exports-primitive.d.ts

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

package/dist/components/button-group/exports-primitive.js

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

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

@@ -1,16 +1,2 @@
-import { type ButtonGroupRootProps } from './components/button-group.root.svelte';
-export declare const ButtonGroup: {
-    readonly Root: import("svelte").Component<ButtonGroupRootProps, {}, "ref">;
-    readonly Separator: import("svelte").Component<Omit<{
-        orientation?: import("bits-ui").Orientation;
-        decorative?: boolean;
-    }, "child" | "children"> & {
-        child?: import("svelte").Snippet<[{
-            props: Record<string, unknown>;
-        }]> | undefined;
-        children?: import("svelte").Snippet<[]> | undefined;
-        style?: import("bits-ui").StyleProperties | string | null | undefined;
-        ref?: HTMLElement | null | undefined;
-    } & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
-};
-export type { ButtonGroupRootProps };
+export * as ButtonGroupPrimitive from './exports-primitive.js';
+export type { ButtonGroupRootProps, ButtonGroupSeparatorProps } from './types.js';

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

@@ -1,6 +1 @@
-import Root, {} from './components/button-group.root.svelte';
-import Separator from './components/button-group.separator.svelte';
-export const ButtonGroup = {
-    Root,
-    Separator,
-};
+export * as ButtonGroupPrimitive from './exports-primitive.js';

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

@@ -0,0 +1,8 @@
+import type { ButtonGroupVariantsProps } from './styles.js';
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+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/components/button-group/types.js

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

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

@@ -1,18 +1,17 @@
-<script lang="ts" module>
-  export type CheckboxRootProps = CheckboxRootPropsPrimitive & CheckboxVariantsProps;
-</script>
-
 <script lang="ts">
-  import { checkboxVariants, type CheckboxVariantsProps } from '../styles.js';
-  import { CheckIcon } from '../../icons/index.js';
+  import { checkboxVariants } from '../styles.js';
+  import type { CheckboxRootProps } from '../types.js';
+  import { Icon } from '../../icons/index.js';
   import { useId } from '../../../internal/utils/common.js';
-  import { Checkbox, type CheckboxRootProps as CheckboxRootPropsPrimitive } from 'bits-ui';
+  import { Checkbox } from 'bits-ui';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
 
+  const uid = $props.id();
+
   let {
     ref = $bindable(null),
-    id = useId(),
+    id = useId(uid),
     checked = $bindable(false),
     indeterminate = $bindable(false),
     class: className,
@@ -45,7 +44,7 @@
         out:fly={{ duration: 250, y: -4, easing: cubicInOut }}
         class={variants.checkedIndicator()}
       >
-        <CheckIcon width={16} height={16} />
+        <Icon.Check width={16} height={16} />
       </span>
     {/if}
   {/snippet}

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

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

package/dist/components/checkbox/exports-primitive.d.ts

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

package/dist/components/checkbox/exports-primitive.js

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

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

@@ -0,0 +1,3 @@
+export * as CheckboxPrimitive from './exports-primitive.js';
+export type { CheckboxRootProps } from './types.js';
+export { CheckboxController } from './model/index.js';

package/dist/components/checkbox/index.js

@@ -1,6 +1,2 @@
-import Group from './components/checkbox.group.svelte';
-import Root, {} from './components/checkbox.root.svelte';
-export const CheckboxPrimitive = {
-    Root,
-    Group,
-};
+export * as CheckboxPrimitive from './exports-primitive.js';
+export { CheckboxController } from './model/index.js';

package/dist/components/checkbox/model/{checkbox-model.svelte.d.ts → checkbox-controller.svelte.d.ts}

@@ -1,16 +1,15 @@
-type CheckboxModelOpts = {
+type CheckboxControllerOpts = {
     defaultChecked?: boolean;
     defaultIndeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     onIndeterminateChange?: (indeterminate: boolean) => void;
 };
-export declare class CheckboxModel {
+export declare class CheckboxController {
     #private;
-    constructor(opts?: CheckboxModelOpts);
+    constructor(opts?: CheckboxControllerOpts);
     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 → checkbox-controller.svelte.js}

@@ -1,4 +1,4 @@
-export class CheckboxModel {
+export class CheckboxController {
     #opts;
     #checked = $state(false);
     #indeterminate = $state(false);
@@ -20,6 +20,3 @@ export class CheckboxModel {
         this.#opts.onIndeterminateChange?.(value);
     }
 }
-export const createCheckboxModel = (opts = {}) => {
-    return new CheckboxModel(opts);
-};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type CheckboxVariantsProps } from './styles.js';
+import { type CheckboxRootProps as CheckboxRootPropsPrimitive } from 'bits-ui';
+export type CheckboxRootProps = CheckboxRootPropsPrimitive & CheckboxVariantsProps;

package/dist/components/checkbox/types.js

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