@casinogate/ui 1.6.2 → 1.8.0

package/dist/components/button/button.component.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { buttonVariants } from './styles.js';
   import type { ButtonProps } from './types.js';
+  import { Spinner } from '../spinner/index.js';
   import { cn } from '../../internal/utils/common.js';
   import { Button, useId } from 'bits-ui';
   import { fly } from 'svelte/transition';
@@ -38,7 +39,7 @@
 
   {#if loading}
     <span in:fly={{ duration: 200, x: 20 }} data-slot="loading" class={variants.chevron()}>
-      <!-- <AnimatedLoaderIcon width={18} height={18} /> -->
+      <Spinner size={18} />
     </span>
   {/if}
 

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

@@ -52,6 +52,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    fullWidth: {
+        true: {
+            root: string;
+        };
+    };
     rounded: {
         sm: {
             root: string;
@@ -128,6 +133,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    fullWidth: {
+        true: {
+            root: string;
+        };
+    };
     rounded: {
         sm: {
             root: string;
@@ -204,6 +214,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    fullWidth: {
+        true: {
+            root: string;
+        };
+    };
     rounded: {
         sm: {
             root: string;

package/dist/components/button/styles.js

@@ -2,7 +2,7 @@ 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: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:disabled:cursor-not-allowed cgui:disabled:opacity-50',
@@ -49,16 +49,16 @@ export const buttonVariants = tv({
         },
         size: {
             xs: {
-                root: 'cgui:h-7.5',
+                root: 'cgui:h-7.5 cgui:px-2 cgui:text-body',
             },
             sm: {
-                root: 'cgui:h-8',
+                root: 'cgui:h-8 cgui:px-2.5 cgui:text-body',
             },
             md: {
-                root: 'cgui:h-8.5',
+                root: 'cgui:h-9 cgui:px-3 cgui:text-body',
             },
             lg: {
-                root: 'cgui:h-14',
+                root: 'cgui:h-10.5 cgui:px-4 cgui:text-heading-2',
             },
         },
         w: {
@@ -75,6 +75,11 @@ export const buttonVariants = tv({
                 root: '',
             },
         },
+        fullWidth: {
+            true: {
+                root: 'cgui:w-full',
+            },
+        },
         rounded: {
             sm: {
                 root: 'cgui:rounded-sm',

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

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

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

@@ -1,6 +1,6 @@
-import { arraysAreEqual } from '../../../internal/utils/arrays.js';
 import { getDataDisabled } from '../../../internal/utils/attrs.js';
 import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { isEqual } from '../../../internal/utils/equal.js';
 import { Context, watch } from 'runed';
 import { attachRef } from 'svelte-toolbelt';
 const CollapsibleRootContext = new Context(keyWithPrefix('collapsible-root'));
@@ -28,7 +28,7 @@ export class CollapsibleGroupState {
             newValue = [...$state.snapshot(this.opts.value.current), value];
         }
         this.opts.value.current = newValue;
-        if (arraysAreEqual(this.opts.value.current, newValue))
+        if (isEqual(this.opts.value.current, newValue))
             return;
         this.opts.onValueChange.current(newValue);
     }
@@ -40,7 +40,7 @@ export class CollapsibleGroupState {
             return;
         const newValue = this.opts.value.current.filter((v) => v !== value);
         this.opts.value.current = newValue;
-        if (arraysAreEqual(this.opts.value.current, newValue))
+        if (isEqual(this.opts.value.current, newValue))
             return;
         this.opts.onValueChange.current(newValue);
     }

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

@@ -73,34 +73,34 @@ export declare const CollapsibleStylesContext: Context<ReadableBox<{
     root: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     trigger: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     icon: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     content: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
 } & {
     root: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     trigger: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     icon: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
     content: (slotProps?: ({
         variant?: "default" | "clean" | undefined;
         iconPosition?: "end" | "start" | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
 } & {}>>;

package/dist/components/data-table/data-table.svelte

@@ -14,7 +14,7 @@
   import FlexRender from './components/flex-render.svelte';
   import { type DataTableProps, type RowData } from './types.js';
 
-  let { ref = $bindable(null), table, empty, loading, ...restProps }: DataTableProps<TData> = $props();
+  let { ref = $bindable(null), table, empty, ...restProps }: DataTableProps<TData> = $props();
 
   let isFirstLoaded = $state(false);
 

package/dist/components/data-table/utils/pagination-state.svelte.js

@@ -7,9 +7,9 @@ export const usePaginationState = (opts) => {
         get value() {
             return value;
         },
-        set value(value) {
-            value = value;
-            opts?.onValueChange?.(value);
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
         },
         updater: (updater) => {
             let newPaginationState;

package/dist/components/data-table/utils/resize-state.svelte.js

@@ -4,9 +4,9 @@ export const useResizeState = (opts) => {
         get value() {
             return value;
         },
-        set value(value) {
-            value = value;
-            opts?.onValueChange?.(value);
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
         },
         updater: (updater) => {
             let newColumnSizing;

package/dist/components/data-table/utils/row-selection-state.svelte.js

@@ -4,9 +4,9 @@ export const useRowSelectionState = (opts) => {
         get value() {
             return value;
         },
-        set value(value) {
-            value = value;
-            opts?.onValueChange?.(value);
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
         },
         updater: (updater) => {
             let newRowSelection;

package/dist/components/dialog/components/dialog.overlay.svelte

@@ -8,13 +8,7 @@
 
   const uid = $props.id();
 
-  let {
-    children,
-    id = useId(uid),
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-  }: DialogOverlayProps = $props();
+  let { id = useId(uid), ref = $bindable(null), class: className, ...restProps }: DialogOverlayProps = $props();
 
   const overlayState = DialogOverlayState.create({
     ref: boxWith(

package/dist/components/dropdown/components/dropdown.content.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownContentStyles } from '../styles.js';
+  import type { DropdownContentProps } from '../types.js';
+
+  let {
+    children,
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    variant = 'default',
+    rounded = 'default',
+    shadow = true,
+    w = 'default',
+    gap = 'default',
+    ...restProps
+  }: DropdownContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Content
+  bind:ref
+  class={cn(
+    dropdownContentStyles({
+      variant,
+      rounded,
+      shadow,
+      w,
+      gap,
+    }),
+    className
+  )}
+  {sideOffset}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-content' }}
+>
+  {@render children?.()}
+</DropdownMenuPrimitive.Content>

package/dist/components/dropdown/components/dropdown.content.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.group-heading.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownGroupHeadingStyles } from '../styles.js';
+  import type { DropdownGroupHeadingProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: DropdownGroupHeadingProps = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+  bind:ref
+  class={cn(dropdownGroupHeadingStyles(), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-group-heading' }}
+/>

package/dist/components/dropdown/components/dropdown.group-heading.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownGroupStyles } from '../styles.js';
+  import type { DropdownGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: DropdownGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group
+  bind:ref
+  class={cn(dropdownGroupStyles(), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-group' }}
+/>

package/dist/components/dropdown/components/dropdown.group.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.item.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownItemStyles } from '../styles.js';
+  import type { DropdownItemProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    gap = 'default',
+    rounded = 'default',
+    ...restProps
+  }: DropdownItemProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+  bind:ref
+  class={cn(dropdownItemStyles({ gap, rounded }), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-item' }}
+/>

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

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

package/dist/components/dropdown/components/dropdown.portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import type { DropdownPortalProps } from '../types.js';
+
+  let { children, ...restProps }: DropdownPortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps}>
+  {@render children?.()}
+</DropdownMenuPrimitive.Portal>

package/dist/components/dropdown/components/dropdown.portal.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.root.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import type { DropdownRootProps } from '../types.js';
+
+  let { children, open = $bindable(false), ...restProps }: DropdownRootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps}>
+  {@render children?.()}
+</DropdownMenuPrimitive.Root>

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

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

package/dist/components/dropdown/components/dropdown.separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownSeparatorStyles } from '../styles.js';
+  import type { DropdownSeparatorProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'horizontal',
+    ...restProps
+  }: DropdownSeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  {orientation}
+  class={cn(dropdownSeparatorStyles({ orientation }), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-separator' }}
+/>

package/dist/components/dropdown/components/dropdown.separator.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.sub-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownSubContentStyles } from '../styles.js';
+  import type { DropdownSubContentProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: DropdownSubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+  bind:ref
+  class={cn(dropdownSubContentStyles(), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-sub-content' }}
+/>

package/dist/components/dropdown/components/dropdown.sub-content.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.sub-trigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Icon } from '../../icons/index.js';
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownSubTriggerStyles } from '../styles.js';
+  import type { DropdownSubTriggerProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: DropdownSubTriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+  bind:ref
+  class={cn(dropdownSubTriggerStyles(), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-sub-trigger' }}
+>
+  {@render children?.()}
+
+  <Icon.ChevronSmallDown class="cgui:ms-auto" />
+</DropdownMenuPrimitive.SubTrigger>

package/dist/components/dropdown/components/dropdown.sub-trigger.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.sub.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import type { DropdownSubProps } from '../types.js';
+
+  let { open = $bindable(false), ...restProps }: DropdownSubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />

package/dist/components/dropdown/components/dropdown.sub.svelte.d.ts

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

package/dist/components/dropdown/components/dropdown.trigger.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { dropdownTriggerStyles } from '../styles.js';
+  import type { DropdownTriggerProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: DropdownTriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+  bind:ref
+  class={cn(dropdownTriggerStyles(), className)}
+  {...restProps}
+  {...{ [SLOT_ATTR_NAME]: 'dropdown-trigger' }}
+/>

package/dist/components/dropdown/components/dropdown.trigger.svelte.d.ts

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