@casinogate/ui 0.0.4 → 1.0.0

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

@@ -0,0 +1,141 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const inputStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            input: string[];
+        };
+    };
+    size: {
+        sm: {
+            input: string[];
+        };
+        md: {
+            input: string[];
+        };
+        lg: {
+            input: string[];
+        };
+    };
+    rounded: {
+        sm: {
+            input: string[];
+        };
+        md: {
+            input: string[];
+        };
+        lg: {
+            input: string[];
+        };
+    };
+    w: {
+        full: {
+            wrapper: string[];
+            input: string[];
+        };
+        auto: {
+            wrapper: string[];
+            input: string[];
+        };
+        fit: {
+            wrapper: string[];
+            input: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    input: string[];
+    chevron: string[];
+}, undefined, {
+    variant: {
+        primary: {
+            input: string[];
+        };
+    };
+    size: {
+        sm: {
+            input: string[];
+        };
+        md: {
+            input: string[];
+        };
+        lg: {
+            input: string[];
+        };
+    };
+    rounded: {
+        sm: {
+            input: string[];
+        };
+        md: {
+            input: string[];
+        };
+        lg: {
+            input: string[];
+        };
+    };
+    w: {
+        full: {
+            wrapper: string[];
+            input: string[];
+        };
+        auto: {
+            wrapper: string[];
+            input: string[];
+        };
+        fit: {
+            wrapper: string[];
+            input: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    input: string[];
+    chevron: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            input: string[];
+        };
+    };
+    size: {
+        sm: {
+            input: string[];
+        };
+        md: {
+            input: string[];
+        };
+        lg: {
+            input: string[];
+        };
+    };
+    rounded: {
+        sm: {
+            input: string[];
+        };
+        md: {
+            input: string[];
+        };
+        lg: {
+            input: string[];
+        };
+    };
+    w: {
+        full: {
+            wrapper: string[];
+            input: string[];
+        };
+        auto: {
+            wrapper: string[];
+            input: string[];
+        };
+        fit: {
+            wrapper: string[];
+            input: string[];
+        };
+    };
+}, {
+    wrapper: string[];
+    input: string[];
+    chevron: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type InputVariants = VariantProps<typeof inputStyles>;

package/dist/components/input/styles.js

@@ -0,0 +1,64 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const inputStyles = tv({
+    slots: {
+        wrapper: ['cgui:relative'],
+        input: [
+            'cgui:outline-none',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:text-body',
+            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
+        ],
+        chevron: [
+            'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:flex cgui:items-center cgui:justify-center cgui:size-5',
+            'cgui:text-fg-regular',
+            'cgui:data-[slot=start-chevron]:left-2 cgui:data-[slot=end-chevron]:right-2',
+        ],
+    },
+    variants: {
+        variant: {
+            primary: {
+                input: [
+                    'cgui:border cgui:border-stroke-default cgui:bg-surface-lightest cgui:placeholder:text-fg-regular cgui:shadow-none',
+                    'cgui:focus:ring-stroke-default cgui:focus-visible:border-stroke-focus',
+                    'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
+                ],
+            },
+        },
+        size: {
+            sm: {
+                input: ['cgui:py-1.5 cgui:pl-2.5 cgui:pr-1.5', ''],
+            },
+            md: {
+                input: ['cgui:py-2 cgui:pl-3 cgui:pr-2', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-7'],
+            },
+            lg: {
+                input: ['cgui:py-2.5 cgui:pl-4 cgui:pr-2.5', ''],
+            },
+        },
+        rounded: {
+            sm: {
+                input: ['cgui:rounded-sm'],
+            },
+            md: {
+                input: ['cgui:rounded-md'],
+            },
+            lg: {
+                input: ['cgui:rounded-lg'],
+            },
+        },
+        w: {
+            full: {
+                wrapper: ['cgui:w-full'],
+                input: ['cgui:w-full'],
+            },
+            auto: {
+                wrapper: ['cgui:w-auto'],
+                input: ['cgui:w-auto'],
+            },
+            fit: {
+                wrapper: ['cgui:w-fit'],
+                input: ['cgui:w-fit'],
+            },
+        },
+    },
+});

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

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  export type PaginationEllipsisProps = WithChild<WithElementRef<{} & PrimitiveDivAttributes>>;
+</script>
+
+<script lang="ts">
+  import { PaginationStylesContext } from '../styles.js';
+
+  import { DotsIcon } from '../../icons/index.js';
+  import type { WithChild } from '../../../internal/types/composition.js';
+  import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import type { WithElementRef } from 'svelte-toolbelt';
+
+  let { class: className, ref = $bindable(null), child, ...restProps }: PaginationEllipsisProps = $props();
+
+  const variants = PaginationStylesContext.get();
+
+  const classNames = $derived(cn(variants.current.ellipsis(), className));
+</script>
+
+{#if child}
+  {@render child?.({ props: { class: classNames, ...restProps } })}
+{:else}
+  <div bind:this={ref} class={classNames} {...restProps}>
+    <DotsIcon width={16} height={16} />
+  </div>
+{/if}

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

@@ -0,0 +1,7 @@
+export type PaginationEllipsisProps = WithChild<WithElementRef<{} & PrimitiveDivAttributes>>;
+import type { WithChild } from '../../../internal/types/composition.js';
+import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+import type { WithElementRef } from 'svelte-toolbelt';
+declare const Pagination: import("svelte").Component<PaginationEllipsisProps, {}, "ref">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

@@ -0,0 +1,16 @@
+<script lang="ts" module>
+  export type PaginationItemProps = PaginationPagePropsPrimitive;
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { PaginationStylesContext } from '../styles.js';
+
+  import { Pagination as PaginationPrimitive, type PaginationPageProps as PaginationPagePropsPrimitive } from 'bits-ui';
+
+  let { page, class: className, ...props }: PaginationItemProps = $props();
+
+  const variants = PaginationStylesContext.get();
+</script>
+
+<PaginationPrimitive.Page {page} class={cn(variants.current.item(), className)} {...props} />

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

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

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

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  export type PaginationNextButtonProps = PaginationNextButtonPropsPrimitive;
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { PaginationStylesContext } from '../styles.js';
+
+  import { ChevronRightIcon } from '../../icons/index.js';
+  import {
+    Pagination as PaginationPrimitive,
+    type PaginationNextButtonProps as PaginationNextButtonPropsPrimitive,
+  } from 'bits-ui';
+
+  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}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <ChevronRightIcon />
+  {/if}
+</PaginationPrimitive.NextButton>

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  export type PaginationRootProps = PaginationRootPropsPrimitive & PaginationVariantsProps;
+</script>
+
+<script lang="ts">
+  import {
+    PaginationStylesContext,
+    type PaginationVariantsProps,
+    paginationStyles,
+  } from '../styles.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Pagination as PaginationPrimitive, type PaginationRootProps as PaginationRootPropsPrimitive } from 'bits-ui';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    page = $bindable(1),
+    orientation = 'horizontal',
+    size = 'md',
+    centered = false,
+    class: className,
+    ...restProps
+  }: PaginationRootProps = $props();
+
+  const variants = $derived(paginationStyles({ orientation, size, centered }));
+
+  PaginationStylesContext.set(box.with(() => variants));
+</script>
+
+<PaginationPrimitive.Root bind:page class={cn(variants.root(), className)} {...restProps} />

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

@@ -0,0 +1,6 @@
+export type PaginationRootProps = PaginationRootPropsPrimitive & PaginationVariantsProps;
+import { type PaginationVariantsProps } from '../styles.js';
+import { type PaginationRootProps as PaginationRootPropsPrimitive } from 'bits-ui';
+declare const Pagination: import("svelte").Component<PaginationRootProps, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

@@ -0,0 +1,16 @@
+import { type PaginationEllipsisProps } from './components/pagination.ellipsis.svelte';
+import { type PaginationItemProps } from './components/pagination.item.svelte';
+import { type PaginationNextButtonProps } from './components/pagination.next-button.svelte';
+import { type PaginationPrevButtonProps } from './components/pagination.prev-button.svelte';
+import { type PaginationRootProps } from './components/pagination.root.svelte';
+export declare const PaginationPrimitive: {
+    readonly Root: import("svelte").Component<PaginationRootProps, {}, "page">;
+    readonly Item: import("svelte").Component<import("bits-ui").PaginationPageProps, {}, "">;
+    readonly Ellipsis: import("svelte").Component<PaginationEllipsisProps, {}, "ref">;
+    readonly PrevButton: import("svelte").Component<import("bits-ui").PaginationPrevButtonProps, {}, "ref">;
+    readonly NextButton: import("svelte").Component<import("bits-ui").PaginationNextButtonProps, {}, "ref">;
+};
+export declare const Pagination: {
+    readonly Basic: import("svelte").Component<PaginationRootProps, {}, "page">;
+};
+export type { PaginationEllipsisProps, PaginationItemProps, PaginationNextButtonProps, PaginationPrevButtonProps, PaginationRootProps, };

package/dist/components/pagination/index.js

@@ -0,0 +1,16 @@
+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 Basic from './presets/basic.svelte';
+export const PaginationPrimitive = {
+    Root,
+    Item,
+    Ellipsis,
+    PrevButton,
+    NextButton,
+};
+export const Pagination = {
+    Basic,
+};

package/dist/components/pagination/pagination.stories.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import { Pagination, PaginationPrimitive } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['page', 'count', 'perPage', 'siblingCount', 'orientation', 'size', 'centered'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Pagination',
+    component: PaginationPrimitive.Root,
+    render: template,
+    tags: ['autodocs'],
+
+    argTypes: {
+      page: {
+        table: {
+          type: { summary: 'number | $bindable(number)' },
+        },
+      },
+    },
+
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof PaginationPrimitive.Root>;
+
+  const args: Args = {
+    page: 1,
+    count: 100,
+    perPage: 10,
+    siblingCount: 1,
+    orientation: 'horizontal',
+    size: 'md',
+    centered: true,
+  };
+</script>
+
+{#snippet template(args: Args)}
+  <PaginationPrimitive.Root {...args}>
+    {#snippet children({ pages })}
+      <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 />
+    {/snippet}
+  </PaginationPrimitive.Root>
+{/snippet}
+
+<Story name="Primitive" {args} {parameters} />
+
+<Story name="Basic Preset" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Pagination.Basic {...args} />
+  {/snippet}
+</Story>

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

@@ -0,0 +1,19 @@
+import { Pagination } from './index.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;

package/dist/components/pagination/presets/basic.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  export type PaginationBasicProps = PaginationRootProps;
+</script>
+
+<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, { type PaginationRootProps } from '../components/pagination.root.svelte';
+
+  let { page = $bindable(1), ...restProps }: PaginationBasicProps = $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/presets/basic.svelte.d.ts

@@ -0,0 +1,5 @@
+export type PaginationBasicProps = PaginationRootProps;
+import { type PaginationRootProps } from '../components/pagination.root.svelte';
+declare const Basic: import("svelte").Component<PaginationRootProps, {}, "page">;
+type Basic = ReturnType<typeof Basic>;
+export default Basic;

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

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

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

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

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

@@ -0,0 +1,98 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+    centered: {
+        true: {
+            root: string[];
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string[];
+        };
+        vertical: {
+            root: string[];
+        };
+    };
+    size: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+    };
+}, {
+    root: string[];
+    item: string[];
+    button: string[];
+    ellipsis: string[];
+}, undefined, {
+    centered: {
+        true: {
+            root: string[];
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string[];
+        };
+        vertical: {
+            root: string[];
+        };
+    };
+    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[];
+        };
+    };
+    orientation: {
+        horizontal: {
+            root: string[];
+        };
+        vertical: {
+            root: string[];
+        };
+    };
+    size: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: 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 {};