@casinogate/ui 1.11.14 → 2.0.1

package/dist/primitives/navigation/types.d.ts

@@ -0,0 +1,53 @@
+import type { PrimitiveElementAttributes } from '../../internal/types/html-attributes.js';
+import type { Snippet } from 'svelte';
+import type { WithChild, WithElementRef, Without, WithoutChildren } from 'svelte-toolbelt';
+import type { NavigationContentVariantsProps, NavigationItemVariantsProps, NavigationRootVariantsProps, NavigationSubContentVariantsProps, NavigationSubTriggerVariantsProps, NavigationSubVariantsProps, NavigationTriggerVariantsProps } from './styles.js';
+type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{
+    dropdownProps?: {
+        sideOffset?: number;
+        alignOffset?: number;
+        side?: 'top' | 'bottom' | 'left' | 'right';
+    };
+}, {
+    compact: boolean;
+}>> & NavigationRootVariantsProps;
+export type NavigationRootProps = NavigationRootPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationRootPropsWithoutHTML>;
+type NavigationContentPropsWithoutHTML = WithElementRef<WithChild<{}>> & NavigationContentVariantsProps;
+export type NavigationContentProps = NavigationContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationContentPropsWithoutHTML>;
+type NavigationItemPropsWithoutHTML = WithElementRef<WithChild<{}>> & NavigationItemVariantsProps;
+export type NavigationItemProps = NavigationItemPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationItemPropsWithoutHTML>;
+type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
+    href?: string;
+    disabled?: boolean;
+    active?: boolean;
+    icon?: Snippet;
+    label?: string | Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}, {
+    compact: boolean;
+}>>> & NavigationTriggerVariantsProps;
+export type NavigationTriggerProps = NavigationTriggerPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationTriggerPropsWithoutHTML>;
+type NavigationSubPropsWithoutHTML = WithElementRef<WithChild<{
+    open?: boolean;
+}, {
+    open: boolean;
+}>> & NavigationSubVariantsProps;
+export type NavigationSubProps = NavigationSubPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubPropsWithoutHTML>;
+type NavigationSubTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
+    disabled?: boolean;
+    active?: boolean;
+    icon?: Snippet;
+    label?: string | Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}, {
+    compact: boolean;
+    open: boolean;
+}>>> & NavigationSubTriggerVariantsProps;
+export type NavigationSubTriggerProps = NavigationSubTriggerPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubTriggerPropsWithoutHTML>;
+type NavigationSubContentPropsWithoutHTML = WithElementRef<WithChild<{}, {
+    compact: boolean;
+}>> & NavigationSubContentVariantsProps;
+export type NavigationSubContentProps = NavigationSubContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubContentPropsWithoutHTML>;
+export {};

package/dist/primitives/navigation/types.js

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

package/dist/primitives/number-input/components/index.d.ts

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

package/dist/primitives/number-input/components/index.js

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

package/dist/primitives/number-input/components/number-input.root.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { untrack } from 'svelte';
+  import { boxWith } from 'svelte-toolbelt';
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { ButtonGroup } from '../../button-group/index.js';
+  import { Button } from '../../button/index.js';
+  import { Input } from '../../input/index.js';
+  import type { NumberInputProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    min = 0,
+    max = Infinity,
+    step = 1,
+    allowFloat = false,
+    precision = 2,
+    class: className,
+    containerClass,
+    disabled,
+    ...restProps
+  }: NumberInputProps = $props();
+
+  const onlyNumberPattern = $derived(allowFloat ? /^\d*\.?\d*$/ : /^\d*$/);
+
+  const roundToPrecision = (num: number): number => {
+    if (!allowFloat || precision == null) return num;
+    const factor = Math.pow(10, precision);
+    return Math.round(num * factor) / factor;
+  };
+
+  let internalValue = $state(value?.toString() ?? '');
+
+  $effect(() => {
+    const externalStr = value?.toString() ?? '';
+
+    untrack(() => {
+      if (parseFloat(internalValue) !== value) {
+        internalValue = externalStr;
+      }
+    });
+  });
+
+  let internalValueBox = boxWith(
+    () => internalValue,
+    (v) => {
+      if (!onlyNumberPattern.test(v)) return;
+
+      if (v === '') {
+        internalValue = '';
+        value = undefined;
+        return;
+      }
+
+      const vNum = parseFloat(v);
+
+      if (Number.isNaN(vNum)) {
+        internalValue = v;
+        return;
+      }
+
+      if (vNum > max) return;
+      if (vNum < min) return;
+
+      const rounded = roundToPrecision(vNum);
+
+      if (rounded !== vNum) {
+        const roundedStr = rounded.toString();
+        internalValue = roundedStr;
+        value = rounded;
+        return;
+      }
+
+      internalValue = v;
+      value = vNum;
+    }
+  );
+
+  const onPlusClick = () => {
+    const currentVal = internalValue ? parseFloat(internalValue) : 0;
+    const base = Number.isNaN(currentVal) ? 0 : currentVal;
+    const newValue = roundToPrecision(base + step);
+    if (newValue > max) return;
+    internalValueBox.current = newValue.toString();
+  };
+
+  const onMinusClick = () => {
+    const currentVal = internalValue ? parseFloat(internalValue) : 0;
+    const base = Number.isNaN(currentVal) ? 0 : currentVal;
+    const newValue = roundToPrecision(base - step);
+    if (newValue < min) return;
+    internalValueBox.current = newValue.toString();
+  };
+</script>
+
+<ButtonGroup.Root class={cn('cgui:w-full', containerClass)}>
+  <Button
+    type="button"
+    variant="none"
+    w="none"
+    class="cgui:border cgui:w-9 cgui:border-r-0 cgui:border-stroke-default cgui:text-fg-dark cgui:bg-surface-lightest"
+    size="none"
+    onclick={onMinusClick}
+    {disabled}
+  >
+    <Icon.Minus width={16} height={16} />
+  </Button>
+
+  <Input
+    bind:value={internalValueBox.current}
+    class={cn('cgui:border-r cgui:border-l!', className)}
+    {disabled}
+    {...restProps}
+  />
+
+  <Button
+    type="button"
+    variant="none"
+    w="none"
+    class="cgui:border cgui:w-9 cgui:border-stroke-default cgui:text-fg-dark cgui:bg-surface-lightest"
+    size="none"
+    onclick={onPlusClick}
+    {disabled}
+  >
+    <Icon.Plus width={16} height={16} />
+  </Button>
+</ButtonGroup.Root>

package/dist/primitives/number-input/components/number-input.root.svelte.d.ts

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

package/dist/primitives/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export * as NumberInput from './components/index.js';
+export type * from './types.js';

package/dist/primitives/number-input/index.js

@@ -0,0 +1 @@
+export * as NumberInput from './components/index.js';

package/dist/primitives/number-input/types.d.ts

@@ -0,0 +1,10 @@
+import type { InputProps } from '../input/index.js';
+export type NumberInputProps = Omit<InputProps, 'value' | 'min' | 'max' | 'step' | 'type'> & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    allowFloat?: boolean;
+    precision?: number;
+    containerClass?: string;
+};

package/dist/primitives/number-input/types.js

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

package/dist/primitives/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/primitives/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/primitives/pagination/components/pagination.ellipsis.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { paginationEllipsisStyles } from '../styles.js';
+  import type { PaginationEllipsisProps } from '../types.js';
+
+  let { class: className, ref = $bindable(null), child, ...restProps }: PaginationEllipsisProps = $props();
+
+  const classNames = $derived(cn(paginationEllipsisStyles(), className));
+</script>
+
+{#if child}
+  {@render child?.({ props: { class: classNames, ...restProps } })}
+{:else}
+  <div bind:this={ref} class={classNames} {...restProps}>
+    <Icon.Dots width={16} height={16} />
+  </div>
+{/if}

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.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, size, ...props }: PaginationItemProps = $props();
+
+  const rootCtx$ = PaginationRootContext.get();
+</script>
+
+<PaginationPrimitive.Page
+  {page}
+  class={cn(paginationItemStyles({ size: size ?? rootCtx$.opts.size.current }), className)}
+  {...props}
+/>

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.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();
+</script>
+
+<PaginationPrimitive.NextButton bind:ref class={cn(paginationButtonStyles(), className)} {...props}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <Icon.ChevronRight />
+  {/if}
+</PaginationPrimitive.NextButton>

package/dist/primitives/pagination/components/pagination.next-button.svelte.d.ts

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

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import * as SelectPrimitive from '../../select/components/index.js';
+  import type { PaginationPageSizeProps } from '../types.js';
+
+  let {
+    perPage = $bindable(10),
+    perPageItems = [10, 20, 50, 100],
+    placeholder,
+    contentProps,
+    contentClass,
+    disabled,
+    ...restProps
+  }: PaginationPageSizeProps = $props();
+
+  let value = $state(String(perPage));
+
+  const selectedLabel = $derived(perPageItems.includes(Number(value)) ? value : (placeholder ?? value));
+
+  $effect(() => {
+    value = String(perPage);
+  });
+
+  function onValueChange(newValue: string | string[]) {
+    if (typeof newValue === 'string' && newValue) {
+      perPage = Number(newValue);
+    }
+  }
+</script>
+
+<SelectPrimitive.Root bind:value={value as never} type="single" {disabled} {onValueChange} {...restProps}>
+  <SelectPrimitive.Trigger class="cgui:min-w-15" fullWidth={false}>
+    {selectedLabel}
+  </SelectPrimitive.Trigger>
+
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content class={cn(contentClass)} {...contentProps}>
+      <SelectPrimitive.Viewport>
+        {#each perPageItems as item (item)}
+          <SelectPrimitive.Item value={String(item)} label={String(item)} />
+        {/each}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+</SelectPrimitive.Root>

package/dist/primitives/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/primitives/pagination/components/pagination.prev-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import { paginationButtonStyles } from '../styles.js';
+  import type { PaginationPrevButtonProps } from '../types.js';
+
+  let { class: className, children, ref = $bindable(null), ...props }: PaginationPrevButtonProps = $props();
+
+  const classNames = $derived(cn(paginationButtonStyles(), className));
+</script>
+
+<PaginationPrimitive.PrevButton bind:ref class={classNames} {...props}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <Icon.ChevronLeft />
+  {/if}
+</PaginationPrimitive.PrevButton>

package/dist/primitives/pagination/components/pagination.prev-button.svelte.d.ts

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  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();
+
+  PaginationRootState.create({
+    size: boxWith(() => size),
+    orientation: boxWith(() => orientation),
+    centered: boxWith(() => centered),
+  });
+</script>
+
+<PaginationPrimitive.Root
+  bind:page
+  bind:ref
+  class={cn(paginationRootStyles({ size, orientation, centered }), className)}
+  {...restProps}
+/>

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

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

package/dist/primitives/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/primitives/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/primitives/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * as Pagination from './components/index.js';
+export type * from './types.js';

package/dist/primitives/pagination/index.js

@@ -0,0 +1 @@
+export * as Pagination from './components/index.js';

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

@@ -0,0 +1,67 @@
+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;
+    };
+}, undefined, string[], {
+    centered: {
+        true: string;
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    centered: {
+        true: string;
+    };
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const paginationItemStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, 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;

package/dist/primitives/pagination/styles.js

@@ -0,0 +1,47 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+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',
+        },
+    },
+});
+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: ['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 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/primitives/pagination/types.d.ts

@@ -0,0 +1,19 @@
+import type { WithVariants } from '../../internal/types/composition.js';
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { SelectContentProps } from '../select/types.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 { PaginationItemVariants, PaginationVariantsProps } from './styles.js';
+export type PaginationRootProps = WithVariants<PaginationRootPropsPrimitive, PaginationVariantsProps>;
+export type PaginationEllipsisProps = WithChild<WithElementRef<{} & PrimitiveDivAttributes>>;
+export type PaginationItemProps = WithVariants<PaginationPagePropsPrimitive, PaginationItemVariants>;
+export type PaginationNextButtonProps = PaginationNextButtonPropsPrimitive;
+export type PaginationPrevButtonProps = PaginationPrevButtonPropsPrimitive;
+export type PaginationPageSizeProps = {
+    perPage?: number;
+    perPageItems?: number[];
+    placeholder?: string;
+    contentProps?: Omit<SelectContentProps, 'class' | 'children' | 'child' | 'ref'>;
+    contentClass?: string;
+    disabled?: boolean;
+};

package/dist/primitives/pagination/types.js

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

package/dist/primitives/pill/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Group } from './pill.group.svelte';
+export { default as Item } from './pill.item.svelte';
+export { default as Label } from './pill.label.svelte';
+export { default as Remove } from './pill.remove.svelte';

package/dist/primitives/pill/components/index.js

@@ -0,0 +1,4 @@
+export { default as Group } from './pill.group.svelte';
+export { default as Item } from './pill.item.svelte';
+export { default as Label } from './pill.label.svelte';
+export { default as Remove } from './pill.remove.svelte';

package/dist/primitives/pill/components/pill.group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { box } from 'svelte-toolbelt';
+
+  import { PillGroupContext, pillGroupVariants } from '../styles.js';
+  import type { PillGroupProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size,
+    disabled,
+    ...restProps
+  }: PillGroupProps = $props();
+
+  const value = $derived({ size, disabled });
+
+  PillGroupContext.set(box.with(() => value));
+</script>
+
+<div bind:this={ref} data-slot="pill-group" class={cn(pillGroupVariants(), className)} {...restProps}>
+  {@render children?.()}
+</div>

package/dist/primitives/pill/components/pill.group.svelte.d.ts

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