@casinogate/ui 1.11.9 → 1.11.10

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

@@ -1,12 +1,17 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/common.js';
   import { Pagination as PaginationPrimitive } from 'bits-ui';
-  import { PaginationContext, paginationItemStyles } from '../styles.js';
+  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 ctx = PaginationContext.get();
+  const rootCtx$ = PaginationRootContext.get();
 </script>
 
-<PaginationPrimitive.Page {page} class={cn(paginationItemStyles({ size: ctx.current.size }), 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

@@ -6,11 +6,9 @@
   import type { PaginationNextButtonProps } from '../types.js';
 
   let { class: className, children, ref = $bindable(null), ...props }: PaginationNextButtonProps = $props();
-
-  const classNames = $derived(cn(paginationButtonStyles(), 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.root.svelte

@@ -1,20 +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 { PaginationContext, paginationRootStyles } 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();
 
-  PaginationContext.set(box.with(() => ({ size })));
+  PaginationRootState.create({
+    size: boxWith(() => size),
+    orientation: boxWith(() => orientation),
+    centered: boxWith(() => centered),
+  });
 </script>
 
-<PaginationPrimitive.Root bind:page class={cn(paginationRootStyles({ orientation, centered }), 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/root/pagination.root.svelte

@@ -1,23 +1,29 @@
 <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 = 10,
+    perPage = $bindable(10),
+    orientation = 'horizontal',
     perPageItems = [10, 20, 50, 100],
     hidePageSize = false,
     ...restProps
   }: PaginationProps = $props();
 </script>
 
-<PaginationPrimitive.Root bind:page {...restProps}>
+<PaginationPrimitive.Root bind:page {orientation} {...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">
+    <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)}

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

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

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

@@ -1,10 +1,13 @@
-import { Context } from 'runed';
-import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
 export declare const paginationRootStyles: import("tailwind-variants").TVReturnType<{
     centered: {
         true: string;
     };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
     orientation: {
         horizontal: string;
         vertical: string;
@@ -13,6 +16,11 @@ export declare const paginationRootStyles: import("tailwind-variants").TVReturnT
     centered: {
         true: string;
     };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
     orientation: {
         horizontal: string;
         vertical: string;
@@ -21,6 +29,11 @@ export declare const paginationRootStyles: import("tailwind-variants").TVReturnT
     centered: {
         true: string;
     };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
     orientation: {
         horizontal: string;
         vertical: string;
@@ -28,21 +41,21 @@ export declare const paginationRootStyles: import("tailwind-variants").TVReturnT
 }, undefined, string[], unknown, unknown, undefined>>;
 export declare const paginationItemStyles: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
 }, undefined, string[], {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: string[];
+        md: string[];
+        lg: string[];
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        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>>;
@@ -52,8 +65,3 @@ 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,12 +1,17 @@
-import { keyWithPrefix } from '../../internal/utils/common.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
-import { Context } from 'runed';
+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: 'cgui:justify-center',
         },
+        size: {
+            sm: [''],
+            md: [''],
+            lg: [''],
+        },
         orientation: {
             horizontal: 'cgui:flex-row',
             vertical: 'cgui:flex-col',
@@ -25,9 +30,9 @@ export const paginationItemStyles = tv({
     ],
     variants: {
         size: {
-            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',
+            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'],
         },
     },
 });
@@ -42,4 +47,3 @@ export const paginationButtonStyles = tv({
 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,11 +1,12 @@
 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 PaginationPageSizeProps = {

package/package.json

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