@casinogate/ui 1.11.8 → 1.11.10

package/dist/assets/css/root.css

@@ -499,12 +499,21 @@
   .cgui\:max-h-80 {
     max-height: calc(var(--cgui-spacing) * 80);
   }
+  .cgui\:min-h-6 {
+    min-height: calc(var(--cgui-spacing) * 6);
+  }
   .cgui\:min-h-7\.5 {
     min-height: calc(var(--cgui-spacing) * 7.5);
   }
+  .cgui\:min-h-8 {
+    min-height: calc(var(--cgui-spacing) * 8);
+  }
   .cgui\:min-h-9 {
     min-height: calc(var(--cgui-spacing) * 9);
   }
+  .cgui\:min-h-10 {
+    min-height: calc(var(--cgui-spacing) * 10);
+  }
   .cgui\:min-h-11 {
     min-height: calc(var(--cgui-spacing) * 11);
   }
@@ -631,6 +640,18 @@
   .cgui\:min-w-5 {
     min-width: calc(var(--cgui-spacing) * 5);
   }
+  .cgui\:min-w-6 {
+    min-width: calc(var(--cgui-spacing) * 6);
+  }
+  .cgui\:min-w-8 {
+    min-width: calc(var(--cgui-spacing) * 8);
+  }
+  .cgui\:min-w-10 {
+    min-width: calc(var(--cgui-spacing) * 10);
+  }
+  .cgui\:min-w-15 {
+    min-width: calc(var(--cgui-spacing) * 15);
+  }
   .cgui\:min-w-35 {
     min-width: calc(var(--cgui-spacing) * 35);
   }
@@ -1858,6 +1879,21 @@
       padding-right: calc(var(--cgui-spacing) * 14);
     }
   }
+  .cgui\:data-\[has-chevron\]\:pr-8 {
+    &[data-has-chevron] {
+      padding-right: calc(var(--cgui-spacing) * 8);
+    }
+  }
+  .cgui\:data-\[has-chevron\]\:pr-10 {
+    &[data-has-chevron] {
+      padding-right: calc(var(--cgui-spacing) * 10);
+    }
+  }
+  .cgui\:data-\[has-chevron\]\:pr-14 {
+    &[data-has-chevron] {
+      padding-right: calc(var(--cgui-spacing) * 14);
+    }
+  }
   .cgui\:data-\[highlighted\]\:bg-surface-lightest {
     &[data-highlighted] {
       background-color: var(--cg-ui-color-surface-lightest);

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
+export * from './file-upload/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';

package/dist/components/index.js

@@ -12,6 +12,7 @@ export * from './dialog/index.js';
 export * from './drawer/index.js';
 export * from './dropdown/index.js';
 export * from './field/index.js';
+export * from './file-upload/index.js';
 export * from './icons/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';

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

@@ -0,0 +1,6 @@
+export { default as Ellipsis } from './pagination.ellipsis.svelte';
+export { default as Item } from './pagination.item.svelte';
+export { default as NextButton } from './pagination.next-button.svelte';
+export { default as PageSize } from './pagination.page-size.svelte';
+export { default as PrevButton } from './pagination.prev-button.svelte';
+export { default as Root } from './pagination.root.svelte';

package/dist/components/pagination/components/index.js

@@ -0,0 +1,6 @@
+export { default as Ellipsis } from './pagination.ellipsis.svelte';
+export { default as Item } from './pagination.item.svelte';
+export { default as NextButton } from './pagination.next-button.svelte';
+export { default as PageSize } from './pagination.page-size.svelte';
+export { default as PrevButton } from './pagination.prev-button.svelte';
+export { default as Root } from './pagination.root.svelte';

package/dist/components/pagination/components/pagination.ellipsis.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-  import { PaginationStylesContext } from '../styles.js';
-
   import { Icon } from '../../icons/index.js';
   import { cn } from '../../../internal/utils/common.js';
+  import { paginationEllipsisStyles } from '../styles.js';
   import type { PaginationEllipsisProps } from '../types.js';
 
   let { class: className, ref = $bindable(null), child, ...restProps }: PaginationEllipsisProps = $props();
 
-  const variants = PaginationStylesContext.get();
-
-  const classNames = $derived(cn(variants.current.ellipsis(), className));
+  const classNames = $derived(cn(paginationEllipsisStyles(), className));
 </script>
 
 {#if child}

package/dist/components/pagination/components/pagination.item.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/common.js';
-  import { PaginationStylesContext } from '../styles.js';
-  import type { PaginationItemProps } from '../types.js';
-
   import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import { paginationItemStyles } from '../styles.js';
+  import type { PaginationItemProps } from '../types.js';
+  import { PaginationRootContext } from './state.svelte.js';
 
-  let { page, class: className, ...props }: PaginationItemProps = $props();
+  let { page, class: className, size, ...props }: PaginationItemProps = $props();
 
-  const variants = PaginationStylesContext.get();
+  const rootCtx$ = PaginationRootContext.get();
 </script>
 
-<PaginationPrimitive.Page {page} class={cn(variants.current.item(), className)} {...props} />
+<PaginationPrimitive.Page
+  {page}
+  class={cn(paginationItemStyles({ size: size ?? rootCtx$.opts.size.current }), className)}
+  {...props}
+/>

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

@@ -1,4 +1,4 @@
-import { Pagination as PaginationPrimitive } from 'bits-ui';
-declare const Pagination: import("svelte").Component<PaginationPrimitive.PageProps, {}, "">;
+import type { PaginationItemProps } from '../types.js';
+declare const Pagination: import("svelte").Component<PaginationItemProps, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/dist/components/pagination/components/pagination.next-button.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
-  import { cn } from '../../../internal/utils/common.js';
-  import { PaginationStylesContext } from '../styles.js';
-
   import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
   import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import { paginationButtonStyles } from '../styles.js';
   import type { PaginationNextButtonProps } from '../types.js';
 
   let { class: className, children, ref = $bindable(null), ...props }: PaginationNextButtonProps = $props();
-
-  const variants = PaginationStylesContext.get();
-
-  const classNames = $derived(cn(variants.current.button(), className));
 </script>
 
-<PaginationPrimitive.NextButton bind:ref class={classNames} {...props}>
+<PaginationPrimitive.NextButton bind:ref class={cn(paginationButtonStyles(), className)} {...props}>
   {#if children}
     {@render children?.()}
   {:else}

package/dist/components/pagination/components/pagination.page-size.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Select, type SelectCollection } from '../../select/index.js';
+  import { createSelectCollection } from '../../select/select.svelte';
+  import type { PaginationPageSizeProps } from '../types.js';
+
+  let { perPage = $bindable(10), perPageItems = [10, 20, 50, 100], ...restProps }: PaginationPageSizeProps = $props();
+
+  let value = $state(String(perPage));
+
+  const collection: SelectCollection = $derived(
+    createSelectCollection({
+      items: perPageItems.map((item) => ({
+        value: String(item),
+        label: String(item),
+      })),
+    })
+  );
+
+  $effect(() => {
+    value = String(perPage);
+  });
+
+  function onSelect(newValue: string | string[]) {
+    if (typeof newValue === 'string' && newValue) {
+      perPage = Number(newValue);
+    }
+  }
+</script>
+
+<Select.Root
+  {collection}
+  bind:value
+  type="single"
+  {onSelect}
+  triggerClass="cgui:min-w-15"
+  triggerProps={{
+    fullWidth: false,
+  }}
+  {...restProps}
+/>

package/dist/components/pagination/components/pagination.page-size.svelte.d.ts

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

package/dist/components/pagination/components/pagination.prev-button.svelte

@@ -2,14 +2,12 @@
   import { Icon } from '../../icons/index.js';
   import { cn } from '../../../internal/utils/common.js';
   import { Pagination as PaginationPrimitive } from 'bits-ui';
-  import { PaginationStylesContext } from '../styles.js';
+  import { paginationButtonStyles } from '../styles.js';
   import type { PaginationPrevButtonProps } from '../types.js';
 
   let { class: className, children, ref = $bindable(null), ...props }: PaginationPrevButtonProps = $props();
 
-  const variants = PaginationStylesContext.get();
-
-  const classNames = $derived(cn(variants.current.button(), className));
+  const classNames = $derived(cn(paginationButtonStyles(), className));
 </script>
 
 <PaginationPrimitive.PrevButton bind:ref class={classNames} {...props}>

package/dist/components/pagination/components/pagination.root.svelte

@@ -1,22 +1,31 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/common.js';
   import { Pagination as PaginationPrimitive } from 'bits-ui';
-  import { box } from 'svelte-toolbelt';
-  import { PaginationStylesContext, paginationStyles } from '../styles.js';
+  import { boxWith } from 'svelte-toolbelt';
+  import { paginationRootStyles } from '../styles.js';
   import type { PaginationRootProps } from '../types.js';
+  import { PaginationRootState } from './state.svelte.js';
 
   let {
     page = $bindable(1),
     orientation = 'horizontal',
     size = 'md',
     centered = false,
+    ref = $bindable(null),
     class: className,
     ...restProps
   }: PaginationRootProps = $props();
 
-  const variants = $derived(paginationStyles({ orientation, size, centered }));
-
-  PaginationStylesContext.set(box.with(() => variants));
+  PaginationRootState.create({
+    size: boxWith(() => size),
+    orientation: boxWith(() => orientation),
+    centered: boxWith(() => centered),
+  });
 </script>
 
-<PaginationPrimitive.Root bind:page class={cn(variants.root(), className)} {...restProps} />
+<PaginationPrimitive.Root
+  bind:page
+  bind:ref
+  class={cn(paginationRootStyles({ size, orientation, centered }), className)}
+  {...restProps}
+/>

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

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

package/dist/components/pagination/components/state.svelte.d.ts

@@ -0,0 +1,15 @@
+import { Context } from 'runed';
+import type { ReadableBoxedValues } from 'svelte-toolbelt';
+import type { PaginationRootProps } from '../types.js';
+export declare const PaginationRootContext: Context<PaginationRootState>;
+type PaginationRootStateOpts = ReadableBoxedValues<{
+    size: PaginationRootProps['size'];
+    orientation: PaginationRootProps['orientation'];
+    centered: PaginationRootProps['centered'];
+}>;
+export declare class PaginationRootState {
+    static create(opts: PaginationRootStateOpts): PaginationRootState;
+    readonly opts: PaginationRootStateOpts;
+    constructor(opts: PaginationRootStateOpts);
+}
+export {};

package/dist/components/pagination/components/state.svelte.js

@@ -0,0 +1,11 @@
+import { Context } from 'runed';
+export const PaginationRootContext = new Context('pagination-root');
+export class PaginationRootState {
+    static create(opts) {
+        return PaginationRootContext.set(new PaginationRootState(opts));
+    }
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+    }
+}

package/dist/components/pagination/composed/index.d.ts

@@ -0,0 +1 @@
+export { Root } from './root/index.js';

package/dist/components/pagination/composed/index.js

@@ -0,0 +1 @@
+export { Root } from './root/index.js';

package/dist/components/pagination/composed/root/index.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './pagination.root.svelte';

package/dist/components/pagination/composed/root/index.js

@@ -0,0 +1 @@
+export { default as Root } from './pagination.root.svelte';

package/dist/components/pagination/composed/root/pagination.root.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { cn } from '../../../../internal/utils/common.js';
+  import * as PaginationPrimitive from '../../components/index.js';
+  import type { PaginationProps } from '../../types.js';
+
+  let {
+    page = $bindable(1),
+    perPage = $bindable(10),
+    orientation = 'horizontal',
+    perPageItems = [10, 20, 50, 100],
+    hidePageSize = false,
+    ...restProps
+  }: PaginationProps = $props();
+</script>
+
+<PaginationPrimitive.Root bind:page {orientation} {...restProps}>
+  {#snippet children({ pages })}
+    {#if !hidePageSize}
+      <PaginationPrimitive.PageSize bind:perPage {perPageItems} />
+    {/if}
+
+    <div
+      class={cn('cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:flex-1', {
+        'cgui:flex-col': orientation === 'vertical',
+      })}
+    >
+      <PaginationPrimitive.PrevButton />
+
+      {#each pages as page (page.key)}
+        {#if page.type === 'ellipsis'}
+          <PaginationPrimitive.Ellipsis />
+        {:else}
+          <PaginationPrimitive.Item {page}>
+            {page.value}
+          </PaginationPrimitive.Item>
+        {/if}
+      {/each}
+
+      <PaginationPrimitive.NextButton />
+    </div>
+  {/snippet}
+</PaginationPrimitive.Root>

package/dist/components/pagination/composed/root/pagination.root.svelte.d.ts

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

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

@@ -1,3 +1,3 @@
-export * as PaginationPrimitive from './exports-primitive.js';
-export * from './exports.js';
-export type { PaginationEllipsisProps, PaginationItemProps, PaginationNextButtonProps, PaginationPrevButtonProps, PaginationProps, PaginationRootProps, } from './types.js';
+export * as PaginationPrimitive from './components/index.js';
+export * as Pagination from './composed/index.js';
+export * from './types.js';

package/dist/components/pagination/index.js

@@ -1,2 +1,3 @@
-export * as PaginationPrimitive from './exports-primitive.js';
-export * from './exports.js';
+export * as PaginationPrimitive from './components/index.js';
+export * as Pagination from './composed/index.js';
+export * from './types.js';

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

@@ -1,98 +1,67 @@
-import { Context } from 'runed';
-import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
-export declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+export declare const paginationRootStyles: import("tailwind-variants").TVReturnType<{
     centered: {
-        true: {
-            root: string[];
-        };
+        true: string;
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
     orientation: {
-        horizontal: {
-            root: string[];
-        };
-        vertical: {
-            root: string[];
-        };
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, string[], {
+    centered: {
+        true: string;
     };
     size: {
-        sm: {
-            item: string[];
-        };
-        md: {
-            item: string[];
-        };
-        lg: {
-            item: string[];
-        };
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
     };
-}, {
-    root: string[];
-    item: string[];
-    button: string[];
-    ellipsis: string[];
-}, undefined, {
+}, undefined, import("tailwind-variants").TVReturnType<{
     centered: {
-        true: {
-            root: string[];
-        };
+        true: string;
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
     orientation: {
-        horizontal: {
-            root: string[];
-        };
-        vertical: {
-            root: string[];
-        };
+        horizontal: string;
+        vertical: string;
     };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const paginationItemStyles: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: {
-            item: string[];
-        };
-        md: {
-            item: string[];
-        };
-        lg: {
-            item: string[];
-        };
-    };
-}, {
-    root: string[];
-    item: string[];
-    button: string[];
-    ellipsis: string[];
-}, import("tailwind-variants").TVReturnType<{
-    centered: {
-        true: {
-            root: string[];
-        };
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
-    orientation: {
-        horizontal: {
-            root: string[];
-        };
-        vertical: {
-            root: string[];
-        };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
+}, undefined, import("tailwind-variants").TVReturnType<{
     size: {
-        sm: {
-            item: string[];
-        };
-        md: {
-            item: string[];
-        };
-        lg: {
-            item: string[];
-        };
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
-}, {
-    root: string[];
-    item: string[];
-    button: string[];
-    ellipsis: string[];
-}, undefined, unknown, unknown, undefined>>;
-export type PaginationVariantsProps = VariantProps<typeof paginationStyles>;
-type PaginationStylesContextValues = ReadableBox<ReturnType<typeof paginationStyles>>;
-export declare const PaginationStylesContext: Context<PaginationStylesContextValues>;
-export {};
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const paginationButtonStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const paginationEllipsisStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type PaginationRootVariants = VariantProps<typeof paginationRootStyles>;
+export type PaginationItemVariants = VariantProps<typeof paginationItemStyles>;
+export type PaginationButtonVariants = VariantProps<typeof paginationButtonStyles>;
+export type PaginationEllipsisVariants = VariantProps<typeof paginationEllipsisStyles>;
+export type PaginationVariantsProps = PaginationRootVariants & PaginationItemVariants;

package/dist/components/pagination/styles.js

@@ -1,51 +1,49 @@
-import { keyWithPrefix } from '../../internal/utils/common.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
-import { Context } from 'runed';
-export const paginationStyles = tv({
-    slots: {
-        root: ['cgui:flex cgui:items-center cgui:gap-1'],
-        item: [
-            'cgui:flex cgui:items-center cgui:justify-center',
-            'cgui:text-fg-dark cgui:text-body-2 cgui:font-normal',
-            'cgui:border cgui:border-transparent',
-            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-            'cgui:cursor-pointer cgui:select-none cgui:rounded-full',
-            'cgui:data-[selected=""]:text-fg-primary cgui:data-[selected=""]:border-stroke-primary',
-            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
-        ],
-        button: [
-            'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular',
-            'cgui:select-none cgui:cursor-pointer',
-            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
-        ],
-        ellipsis: ['cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular'],
-    },
+const PaginationSizes = ['sm', 'md', 'lg'];
+const PaginationOrientations = ['horizontal', 'vertical'];
+export const paginationRootStyles = tv({
+    base: ['cgui:flex cgui:items-center cgui:gap-1'],
     variants: {
         centered: {
-            true: {
-                root: ['cgui:justify-center'],
-            },
+            true: 'cgui:justify-center',
+        },
+        size: {
+            sm: [''],
+            md: [''],
+            lg: [''],
         },
         orientation: {
-            horizontal: {
-                root: ['cgui:flex-row'],
-            },
-            vertical: {
-                root: ['cgui:flex-col'],
-            },
+            horizontal: 'cgui:flex-row',
+            vertical: 'cgui:flex-col',
         },
+    },
+});
+export const paginationItemStyles = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:justify-center',
+        'cgui:text-fg-dark cgui:text-body-2 cgui:font-normal',
+        'cgui:border cgui:border-transparent',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:cursor-pointer cgui:select-none cgui:rounded-full',
+        'cgui:data-[selected=""]:text-fg-primary cgui:data-[selected=""]:border-stroke-primary',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
+    ],
+    variants: {
         size: {
-            sm: {
-                item: ['cgui:size-6'],
-            },
-            md: {
-                item: ['cgui:size-8'],
-            },
-            lg: {
-                item: ['cgui:size-10'],
-            },
+            sm: ['cgui:min-w-6 cgui:min-h-6 cgui:px-1'],
+            md: ['cgui:min-w-8 cgui:min-h-8 cgui:px-1'],
+            lg: ['cgui:min-w-10 cgui:min-h-10 cgui:px-1'],
         },
     },
 });
-export const PaginationStylesContext = new Context(keyWithPrefix('pagination-styles'));
+export const paginationButtonStyles = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular',
+        'cgui:select-none cgui:cursor-pointer',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
+    ],
+});
+export const paginationEllipsisStyles = tv({
+    base: ['cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular'],
+});

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

@@ -1,10 +1,24 @@
+import type { SelectContentProps } from '../select/types.js';
+import type { WithVariants } from '../../internal/types/composition.js';
 import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
 import { type PaginationNextButtonProps as PaginationNextButtonPropsPrimitive, type PaginationPageProps as PaginationPagePropsPrimitive, type PaginationPrevButtonProps as PaginationPrevButtonPropsPrimitive, type PaginationRootProps as PaginationRootPropsPrimitive } from 'bits-ui';
 import type { WithChild, WithElementRef } from 'svelte-toolbelt';
-import type { PaginationVariantsProps } from './styles.js';
-export type PaginationRootProps = PaginationRootPropsPrimitive & PaginationVariantsProps;
+import type { PaginationItemVariants, PaginationVariantsProps } from './styles.js';
+export type PaginationRootProps = WithVariants<PaginationRootPropsPrimitive, PaginationVariantsProps>;
 export type PaginationEllipsisProps = WithChild<WithElementRef<{} & PrimitiveDivAttributes>>;
-export type PaginationItemProps = PaginationPagePropsPrimitive;
+export type PaginationItemProps = WithVariants<PaginationPagePropsPrimitive, PaginationItemVariants>;
 export type PaginationNextButtonProps = PaginationNextButtonPropsPrimitive;
 export type PaginationPrevButtonProps = PaginationPrevButtonPropsPrimitive;
-export type PaginationProps = PaginationRootProps;
+export type PaginationPageSizeProps = {
+    perPage?: number;
+    perPageItems?: number[];
+    placeholder?: string;
+    contentProps?: Omit<SelectContentProps, 'class' | 'children' | 'child' | 'ref'>;
+    contentClass?: string;
+    disabled?: boolean;
+};
+export type PaginationProps = PaginationRootProps & {
+    perPage?: number;
+    perPageItems?: number[];
+    hidePageSize?: boolean;
+};

package/dist/components/select/components/select.trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Icon } from '../../icons/index.js';
+  import { boolAttr } from '../../../internal/utils/attrs.js';
   import { cn } from '../../../internal/utils/common.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import { selectTriggerStyles } from '../styles.js';
@@ -20,12 +21,14 @@
 
   const attrs = $derived({
     'data-slot': 'trigger',
+    'data-has-chevron': boolAttr(hasChevron),
     class: cn(
       selectTriggerStyles({
         size,
         variant,
         rounded,
         fullWidth,
+        hasChevron,
       }),
       className
     ),

package/dist/components/select/select.svelte

@@ -59,6 +59,9 @@
     contentClass,
     contentRef = $bindable(null),
 
+    triggerClass,
+    triggerProps,
+
     placeholder: placeholderProp,
     clearable = false,
 
@@ -198,13 +201,13 @@
 
 <Root bind:value={value as never} bind:open {...restProps}>
   {#if triggerSnippet}
-    <Trigger>
+    <Trigger class={cn(triggerClass)} {...triggerProps}>
       {#snippet child({ props })}
         {@render triggerSnippet?.({ props, label: displayLabel })}
       {/snippet}
     </Trigger>
   {:else}
-    <Trigger>
+    <Trigger class={cn(triggerClass)} {...triggerProps}>
       {#if labelSnippet}
         {@render labelSnippet?.({ placeholder: displayLabel, value, selectedItems })}
       {:else}

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

@@ -15,6 +15,9 @@ export declare const selectTriggerStyles: import("tailwind-variants").TVReturnTy
         md: string[];
         lg: string[];
     };
+    hasChevron: {
+        true: string[];
+    };
     fullWidth: {
         true: string[];
     };
@@ -34,6 +37,9 @@ export declare const selectTriggerStyles: import("tailwind-variants").TVReturnTy
         md: string[];
         lg: string[];
     };
+    hasChevron: {
+        true: string[];
+    };
     fullWidth: {
         true: string[];
     };
@@ -53,6 +59,9 @@ export declare const selectTriggerStyles: import("tailwind-variants").TVReturnTy
         md: string[];
         lg: string[];
     };
+    hasChevron: {
+        true: string[];
+    };
     fullWidth: {
         true: string[];
     };
@@ -62,7 +71,7 @@ export declare const selectViewportStyles: import("tailwind-variants").TVReturnT
 export declare const selectItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export declare const selectGroupStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
 export declare const selectGroupHeadingStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export type SelectTriggerVariantsProps = VariantProps<typeof selectTriggerStyles>;
+export type SelectTriggerVariantsProps = Omit<VariantProps<typeof selectTriggerStyles>, 'hasChevron'>;
 export type SelectContentVariantsProps = VariantProps<typeof selectContentStyles>;
 export type SelectItemVariantsProps = VariantProps<typeof selectItemStyles>;
 export type SelectViewportVariantsProps = VariantProps<typeof selectViewportStyles>;

package/dist/components/select/styles.js

@@ -22,13 +22,24 @@ export const selectTriggerStyles = tv({
             clear: [],
         },
         size: {
-            sm: ['cgui:min-h-7.5', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8'],
-            md: ['cgui:min-h-9', 'cgui:px-3 cgui:py-2', 'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10'],
+            sm: [
+                'cgui:min-h-7.5',
+                'cgui:px-2.5 cgui:py-1.5',
+                'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8',
+                'cgui:data-[has-chevron]:pr-8',
+            ],
+            md: [
+                'cgui:min-h-9',
+                'cgui:px-3 cgui:py-2',
+                'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
+                'cgui:data-[has-chevron]:pr-10',
+            ],
             lg: [
                 'cgui:min-h-11',
                 'cgui:text-heading-2',
                 'cgui:px-4 cgui:py-2.5',
                 'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
+                'cgui:data-[has-chevron]:pr-14',
             ],
         },
         rounded: {
@@ -36,6 +47,9 @@ export const selectTriggerStyles = tv({
             md: ['cgui:rounded-md'],
             lg: ['cgui:rounded-lg'],
         },
+        hasChevron: {
+            true: [''],
+        },
         fullWidth: {
             true: ['cgui:w-full'],
         },

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

@@ -87,6 +87,8 @@ export type SelectProps = SelectRootProps & {
     contentProps?: Omit<SelectContentProps, 'class' | 'children' | 'child' | 'ref'>;
     contentRef?: HTMLDivElement | null;
     contentClass?: string;
+    triggerClass?: string;
+    triggerProps?: Omit<SelectTriggerProps, 'class' | 'children' | 'child' | 'ref'>;
     disabledPortal?: boolean;
     /** Callback when selection changes. Provides value(s) and the item that was just selected, or null on deselect. */
     onSelect?: (value: string | string[], item: SelectItem | null) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.11.8",
+  "version": "1.11.10",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",

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

@@ -1,5 +0,0 @@
-export { default as Ellipsis } from './components/pagination.ellipsis.svelte';
-export { default as Item } from './components/pagination.item.svelte';
-export { default as NextButton } from './components/pagination.next-button.svelte';
-export { default as PrevButton } from './components/pagination.prev-button.svelte';
-export { default as Root } from './components/pagination.root.svelte';

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

@@ -1,5 +0,0 @@
-export { default as Ellipsis } from './components/pagination.ellipsis.svelte';
-export { default as Item } from './components/pagination.item.svelte';
-export { default as NextButton } from './components/pagination.next-button.svelte';
-export { default as PrevButton } from './components/pagination.prev-button.svelte';
-export { default as Root } from './components/pagination.root.svelte';

package/dist/components/pagination/exports.d.ts

@@ -1 +0,0 @@
-export { default as Pagination } from './pagination.svelte';

package/dist/components/pagination/exports.js

@@ -1 +0,0 @@
-export { default as Pagination } from './pagination.svelte';

package/dist/components/pagination/pagination.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import Ellipsis from './components/pagination.ellipsis.svelte';
-  import Item from './components/pagination.item.svelte';
-  import NextButton from './components/pagination.next-button.svelte';
-  import PrevButton from './components/pagination.prev-button.svelte';
-  import Root from './components/pagination.root.svelte';
-  import type { PaginationProps } from './types.js';
-
-  let { page = $bindable(1), ...restProps }: PaginationProps = $props();
-</script>
-
-<Root bind:page {...restProps}>
-  {#snippet children({ pages })}
-    <PrevButton />
-
-    {#each pages as page (page.key)}
-      {#if page.type === 'ellipsis'}
-        <Ellipsis />
-      {:else}
-        <Item {page}>
-          {page.value}
-        </Item>
-      {/if}
-    {/each}
-
-    <NextButton />
-  {/snippet}
-</Root>

package/dist/components/pagination/pagination.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Pagination: import("svelte").Component<import("./types.js").PaginationRootProps, {}, "page">;
-type Pagination = ReturnType<typeof Pagination>;
-export default Pagination;