@casinogate/ui 1.11.7 → 1.11.9

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

@@ -2,7 +2,7 @@
   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 { PaginationContext, paginationRootStyles } from '../styles.js';
   import type { PaginationRootProps } from '../types.js';
 
   let {
@@ -14,9 +14,7 @@
     ...restProps
   }: PaginationRootProps = $props();
 
-  const variants = $derived(paginationStyles({ orientation, size, centered }));
-
-  PaginationStylesContext.set(box.with(() => variants));
+  PaginationContext.set(box.with(() => ({ size })));
 </script>
 
-<PaginationPrimitive.Root bind:page class={cn(variants.root(), className)} {...restProps} />
+<PaginationPrimitive.Root bind:page class={cn(paginationRootStyles({ orientation, centered }), className)} {...restProps} />

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,36 @@
+<script lang="ts">
+  import * as PaginationPrimitive from '../../components/index.js';
+  import type { PaginationProps } from '../../types.js';
+
+  let {
+    page = $bindable(1),
+    perPage = 10,
+    perPageItems = [10, 20, 50, 100],
+    hidePageSize = false,
+    ...restProps
+  }: PaginationProps = $props();
+</script>
+
+<PaginationPrimitive.Root bind:page {...restProps}>
+  {#snippet children({ pages })}
+    {#if !hidePageSize}
+      <PaginationPrimitive.PageSize bind:perPage {perPageItems} />
+    {/if}
+
+    <div class="cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:flex-1">
+      <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">;
+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,59 @@
 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;
     };
     orientation: {
-        horizontal: {
-            root: string[];
-        };
-        vertical: {
-            root: string[];
-        };
+        horizontal: string;
+        vertical: string;
     };
-    size: {
-        sm: {
-            item: string[];
-        };
-        md: {
-            item: string[];
-        };
-        lg: {
-            item: string[];
-        };
-    };
-}, {
-    root: string[];
-    item: string[];
-    button: string[];
-    ellipsis: string[];
-}, undefined, {
+}, undefined, string[], {
     centered: {
-        true: {
-            root: string[];
-        };
+        true: string;
     };
     orientation: {
-        horizontal: {
-            root: string[];
-        };
-        vertical: {
-            root: string[];
-        };
-    };
-    size: {
-        sm: {
-            item: string[];
-        };
-        md: {
-            item: string[];
-        };
-        lg: {
-            item: string[];
-        };
+        horizontal: string;
+        vertical: string;
     };
-}, {
-    root: string[];
-    item: string[];
-    button: string[];
-    ellipsis: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnType<{
     centered: {
-        true: {
-            root: string[];
-        };
+        true: 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[];
-        };
+        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>;
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, 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;
+type PaginationContextValues = ReadableBox<{
+    size: PaginationItemVariants['size'];
+}>;
+export declare const PaginationContext: Context<PaginationContextValues>;
 export {};

package/dist/components/pagination/styles.js

@@ -1,51 +1,45 @@
 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'],
-    },
+export const paginationRootStyles = tv({
+    base: ['cgui:flex cgui:items-center cgui:gap-1'],
     variants: {
         centered: {
-            true: {
-                root: ['cgui:justify-center'],
-            },
+            true: 'cgui:justify-center',
         },
         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'],
+});
+export const PaginationContext = new Context(keyWithPrefix('pagination'));

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

@@ -1,3 +1,4 @@
+import type { SelectContentProps } from '../select/types.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';
@@ -7,4 +8,16 @@ export type PaginationEllipsisProps = WithChild<WithElementRef<{} & PrimitiveDiv
 export type PaginationItemProps = PaginationPagePropsPrimitive;
 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.7",
+  "version": "1.11.9",
   "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;