@casinogate/ui 1.11.14 → 2.0.0

package/dist/composed/dropdown/model/use-dropdown-items.svelte.js

@@ -0,0 +1,42 @@
+import { SvelteMap } from 'svelte/reactivity';
+export const DROPDOWN_UNGROUPED_KEY = '__ungrouped__';
+const LAST_GROUP_ORDER = Number.MAX_SAFE_INTEGER;
+export const useDropdownItems = ({ items, groups }) => {
+    const groupLabelMap = $derived.by(() => {
+        const map = new SvelteMap();
+        for (const group of groups())
+            map.set(group.key, group.label ?? group.key);
+        return map;
+    });
+    const groupOrderMap = $derived.by(() => {
+        const map = new SvelteMap();
+        groups().forEach((group, index) => map.set(group.key, group.order ?? index));
+        return map;
+    });
+    const groupedItems = $derived.by(() => {
+        const buckets = new SvelteMap();
+        for (const item of items()) {
+            const key = item.group ?? '';
+            const bucket = buckets.get(key);
+            if (bucket)
+                bucket.push(item);
+            else
+                buckets.set(key, [item]);
+        }
+        return [...buckets.entries()].sort(([a], [b]) => {
+            const orderA = groupOrderMap.get(a) ?? LAST_GROUP_ORDER;
+            const orderB = groupOrderMap.get(b) ?? LAST_GROUP_ORDER;
+            if (orderA !== orderB)
+                return orderA - orderB;
+            return a.localeCompare(b);
+        });
+    });
+    return {
+        get groupLabelMap() {
+            return groupLabelMap;
+        },
+        get groupedItems() {
+            return groupedItems;
+        },
+    };
+};

package/dist/composed/dropdown/root/dropdown.root.svelte

@@ -0,0 +1,179 @@
+<script lang="ts" module>
+  import type {
+    DropdownItem,
+    DropdownItemAction,
+    DropdownItemLink,
+    DropdownItemSeparator,
+    DropdownItemSub,
+    DropdownSelectableItem,
+  } from '../types.js';
+
+  function isSeparator<TItem extends DropdownItem>(item: TItem): item is Extract<TItem, DropdownItemSeparator> {
+    return item.type === 'separator';
+  }
+
+  function isLink<TItem extends DropdownSelectableItem>(item: TItem): item is Extract<TItem, DropdownItemLink> {
+    return item.type === 'link';
+  }
+
+  function isSub<TItem extends DropdownSelectableItem>(item: TItem): item is Extract<TItem, DropdownItemSub> {
+    return item.type === 'sub';
+  }
+
+  function isAction<TItem extends DropdownSelectableItem>(item: TItem): item is Extract<TItem, DropdownItemAction> {
+    return item.type === 'action';
+  }
+
+  function isSelectable<TItem extends DropdownItem>(item: TItem): item is DropdownSelectableItem<TItem> {
+    return item.type !== 'separator';
+  }
+</script>
+
+<script lang="ts" generics="TItem extends DropdownItem">
+  import * as Primitive from '../../../primitives/dropdown/components/index.js';
+  import { DROPDOWN_UNGROUPED_KEY, useDropdownItems } from '../model/use-dropdown-items.svelte.js';
+  import type { DropdownProps } from '../types.js';
+
+  let {
+    items = [],
+    groups = [],
+    open = $bindable(false),
+    trigger,
+    contentProps,
+    contentClass,
+    item: itemSnippet,
+    ...restProps
+  }: DropdownProps<TItem> = $props();
+
+  const itemsModel = useDropdownItems({
+    items: () => items,
+    groups: () => groups,
+  });
+</script>
+
+{#snippet defaultSubRenderer(item: DropdownItemSub)}
+  <Primitive.Sub>
+    <Primitive.SubTrigger disabled={item.disabled} textValue={item.textValue ?? item.label}>
+      {#if item.icon}
+        <item.icon width={16} height={16} />
+      {/if}
+      {item.label}
+    </Primitive.SubTrigger>
+    <Primitive.Portal>
+      <Primitive.SubContent data-value={item.key}>
+        {#each item.children as child (child.key)}
+          {#if isSelectable(child)}
+            {@render renderItem(child as DropdownSelectableItem<TItem>)}
+          {/if}
+        {/each}
+      </Primitive.SubContent>
+    </Primitive.Portal>
+  </Primitive.Sub>
+{/snippet}
+
+{#snippet defaultLinkRenderer(item: DropdownItemLink)}
+  {@const {
+    key,
+    label,
+    icon: Icon,
+    disabled,
+    textValue,
+    group: _group,
+    onSelect,
+    closeOnSelect,
+    type: _,
+    ...restItem
+  } = item}
+  <Primitive.Item {disabled} textValue={textValue ?? label} {onSelect} data-value={key} {closeOnSelect}>
+    {#snippet child({ props })}
+      <a {...props} {...restItem as any}>
+        {#if Icon}
+          <Icon width={16} height={16} />
+        {/if}
+        {label}
+      </a>
+    {/snippet}
+  </Primitive.Item>
+{/snippet}
+
+{#snippet defaultActionRenderer(item: DropdownItemAction)}
+  {@const {
+    key,
+    label,
+    icon: Icon,
+    disabled,
+    textValue,
+    group: _group,
+    onSelect,
+    closeOnSelect,
+    type: _,
+    ...restItem
+  } = item}
+  <Primitive.Item {disabled} textValue={textValue ?? label} {onSelect} data-value={key} {closeOnSelect}>
+    {#snippet child({ props })}
+      <button {...props} type="button" {...restItem as any}>
+        {#if Icon}
+          <Icon width={16} height={16} />
+        {/if}
+        {label}
+      </button>
+    {/snippet}
+  </Primitive.Item>
+{/snippet}
+
+{#snippet renderItem(item: DropdownSelectableItem<TItem>)}
+  {#if itemSnippet}
+    <Primitive.Item disabled={item.disabled} onSelect={item.onSelect} data-value={item.key}>
+      {#snippet child({ props })}
+        {@render itemSnippet({ item, props })}
+      {/snippet}
+    </Primitive.Item>
+  {:else if isSub(item)}
+    {@render defaultSubRenderer(item)}
+  {:else if isLink(item)}
+    {@render defaultLinkRenderer(item)}
+  {:else if isAction(item)}
+    {@render defaultActionRenderer(item)}
+  {/if}
+{/snippet}
+
+<Primitive.Root bind:open {...restProps}>
+  {#if trigger !== undefined}
+    {#if typeof trigger === 'string'}
+      <Primitive.Trigger>{trigger}</Primitive.Trigger>
+    {:else}
+      <Primitive.Trigger>
+        {#snippet child({ props })}
+          {@render trigger?.({ props })}
+        {/snippet}
+      </Primitive.Trigger>
+    {/if}
+  {/if}
+
+  <Primitive.Portal>
+    <Primitive.Content {...contentProps} class={contentClass}>
+      {#each itemsModel.groupedItems as [groupKey, items] (groupKey || DROPDOWN_UNGROUPED_KEY)}
+        {#if groupKey}
+          <Primitive.Group>
+            <Primitive.GroupHeading>{itemsModel.groupLabelMap.get(groupKey) ?? groupKey}</Primitive.GroupHeading>
+            {#each items as item (item.key)}
+              {#if isSeparator(item)}
+                <Primitive.Separator />
+              {:else}
+                {@render renderItem(item as DropdownSelectableItem<TItem>)}
+              {/if}
+            {/each}
+          </Primitive.Group>
+        {:else}
+          {#each items as item (item.key)}
+            {#if isSeparator(item)}
+              <Primitive.Separator />
+            {:else}
+              {@render renderItem(item as DropdownSelectableItem<TItem>)}
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+    </Primitive.Content>
+  </Primitive.Portal>
+</Primitive.Root>

package/dist/composed/dropdown/root/dropdown.root.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { DropdownItem } from '../types.js';
+import type { DropdownProps } from '../types.js';
+declare function $$render<TItem extends DropdownItem>(): {
+    props: DropdownProps<TItem>;
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends DropdownItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends DropdownItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends DropdownItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Dropdown: $$IsomorphicComponent;
+type Dropdown<TItem extends DropdownItem> = InstanceType<typeof Dropdown<TItem>>;
+export default Dropdown;

package/dist/composed/dropdown/root/index.d.ts

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

package/dist/composed/dropdown/root/index.js

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

package/dist/composed/dropdown/types.d.ts

@@ -0,0 +1,54 @@
+import type { DropdownContentProps, DropdownRootProps } from '../../primitives/dropdown/types.js';
+import type { ExtractPrimitiveEvents, PrimitiveAnchorAttributes, PrimitiveButtonAttributes } from '../../internal/types/html-attributes.js';
+import type { Component, Snippet } from 'svelte';
+export type DropdownItemBase = {
+    key: string;
+    label: string;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+    disabled?: boolean;
+    textValue?: string;
+    group?: string;
+    onSelect?: () => void;
+    closeOnSelect?: boolean;
+};
+export type DropdownItemAction = DropdownItemBase & ExtractPrimitiveEvents<PrimitiveAnchorAttributes> & {
+    type: 'action';
+};
+export type DropdownItemLink = DropdownItemBase & ExtractPrimitiveEvents<PrimitiveButtonAttributes> & {
+    type: 'link';
+    href: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+};
+export type DropdownItemSeparator = {
+    key: string;
+    type: 'separator';
+    group?: string;
+};
+export type DropdownItemSub = DropdownItemBase & {
+    type: 'sub';
+    children: DropdownItem[];
+};
+export type DropdownItem = DropdownItemAction | DropdownItemLink | DropdownItemSeparator | DropdownItemSub;
+export type DropdownSelectableItem<TItem extends DropdownItem = DropdownItem> = Exclude<TItem, DropdownItemSeparator>;
+export type DropdownGroup = {
+    key: string;
+    label?: string;
+    order?: number;
+};
+export type DropdownProps<TItem extends DropdownItem = DropdownItem> = DropdownRootProps & {
+    items?: TItem[];
+    groups?: DropdownGroup[];
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | string;
+    item?: Snippet<[{
+        item: DropdownSelectableItem<TItem>;
+        props: Record<string, unknown>;
+    }]>;
+    contentProps?: Omit<DropdownContentProps, 'class' | 'children' | 'child'>;
+    contentClass?: string;
+};

package/dist/composed/dropdown/types.js

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

package/dist/composed/field/basic/basic.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import * as Primitive from '../../../primitives/field/components/index.js';
+
+  import type { FieldProps } from '../types.js';
+
+  let {
+    label,
+    error,
+    description,
+    ref = $bindable(null),
+    children: childrenSnippet,
+    ...restProps
+  }: FieldProps = $props();
+</script>
+
+<Primitive.Root bind:ref {...restProps}>
+  {#if typeof label === 'string'}
+    <Primitive.Label>{label}</Primitive.Label>
+  {:else}
+    {@render label?.()}
+  {/if}
+
+  <Primitive.Control>
+    {#snippet children({ props })}
+      {@render childrenSnippet?.({ props })}
+    {/snippet}
+  </Primitive.Control>
+
+  {#if typeof description === 'string'}
+    <Primitive.Description>{description}</Primitive.Description>
+  {:else}
+    {@render description?.()}
+  {/if}
+
+  {#if typeof error === 'string'}
+    <Primitive.Error>{error}</Primitive.Error>
+  {:else}
+    {@render error?.()}
+  {/if}
+</Primitive.Root>

package/dist/composed/field/basic/basic.svelte.d.ts

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

package/dist/composed/field/basic/index.d.ts

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

package/dist/composed/field/basic/index.js

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

package/dist/composed/field/index.d.ts

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

package/dist/composed/field/index.js

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

package/dist/composed/field/types.d.ts

@@ -0,0 +1,11 @@
+import type { FieldRootProps } from '../../primitives/field/types.js';
+import type { Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
+export type FieldProps = WithoutChildrenOrChild<FieldRootProps> & {
+    label?: string | Snippet;
+    error?: string | Snippet;
+    description?: string | Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};

package/dist/composed/field/types.js

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

package/dist/composed/file-upload/index.d.ts

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

package/dist/composed/file-upload/index.js

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

package/dist/composed/file-upload/root/file-upload.root.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import * as FileUploadPrimitive from '../../../primitives/file-upload/components/index.js';
+  import type { FileUploadRootProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    acceptedFiles = $bindable([]),
+    rejectedFiles = $bindable([]),
+    accept,
+    maxFiles = 1,
+    maxFileSize = Infinity,
+    disabled = false,
+    invalid = false,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadRootProps = $props();
+</script>
+
+<FileUploadPrimitive.Root
+  bind:ref
+  bind:acceptedFiles
+  bind:rejectedFiles
+  {accept}
+  {maxFiles}
+  {maxFileSize}
+  {disabled}
+  {invalid}
+  {onFileAccept}
+  {onFileReject}
+  {onFileChange}
+  class={className}
+  {...restProps}
+>
+  <FileUploadPrimitive.HiddenInput />
+  {@render children?.()}
+</FileUploadPrimitive.Root>

package/dist/composed/file-upload/root/file-upload.root.svelte.d.ts

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

package/dist/composed/file-upload/root/index.d.ts

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

package/dist/composed/file-upload/root/index.js

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

package/dist/composed/file-upload/types.d.ts

@@ -0,0 +1 @@
+export type { FileUploadRootProps } from '../../primitives/file-upload/types.js';

package/dist/composed/file-upload/types.js

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

package/dist/composed/index.d.ts

@@ -0,0 +1,19 @@
+export * from './breadcrumb/index.js';
+export * from './collapsible/index.js';
+export * from './combobox/index.js';
+export * from './command/index.js';
+export * from './data-table/index.js';
+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 './navigation/index.js';
+export * from './pagination/index.js';
+export * from './pill/index.js';
+export * from './popover/index.js';
+export * from './segment/index.js';
+export * from './select/index.js';
+export * from './slider/index.js';
+export * from './switch/index.js';
+export * from './toast/index.js';

package/dist/composed/index.js

@@ -0,0 +1,19 @@
+export * from './breadcrumb/index.js';
+export * from './collapsible/index.js';
+export * from './combobox/index.js';
+export * from './command/index.js';
+export * from './data-table/index.js';
+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 './navigation/index.js';
+export * from './pagination/index.js';
+export * from './pill/index.js';
+export * from './popover/index.js';
+export * from './segment/index.js';
+export * from './select/index.js';
+export * from './slider/index.js';
+export * from './switch/index.js';
+export * from './toast/index.js';

package/dist/composed/navigation/index.d.ts

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

package/dist/composed/navigation/index.js

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

package/dist/composed/navigation/root/index.d.ts

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

package/dist/composed/navigation/root/index.js

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

package/dist/composed/navigation/root/root.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" module>
+  import type {
+    NavigationItemAction,
+    NavigationItemLink,
+    NavigationItemSub,
+    NavigationSelectableItem,
+  } from '../types.js';
+
+  function isLink<TItem extends NavigationSelectableItem>(item: TItem): item is Extract<TItem, NavigationItemLink> {
+    return item.type === 'link';
+  }
+
+  function isSub<TItem extends NavigationSelectableItem>(item: TItem): item is Extract<TItem, NavigationItemSub> {
+    return item.type === 'sub';
+  }
+
+  function isAction<TItem extends NavigationSelectableItem>(item: TItem): item is Extract<TItem, NavigationItemAction> {
+    return item.type === 'action';
+  }
+</script>
+
+<script lang="ts" generics="TItem extends NavigationSelectableItem">
+  import * as Primitive from '../../../primitives/navigation/components/index.js';
+  import type { NavigationProps } from '../types.js';
+
+  let {
+    items = [],
+    ref = $bindable(null),
+    compact = $bindable(false),
+    contentClass,
+    item: itemSnippet,
+    activeKey,
+    ...restProps
+  }: NavigationProps<TItem> = $props();
+</script>
+
+{#snippet defaultSubRenderer(item: NavigationItemSub)}
+  <Primitive.Sub>
+    <Primitive.SubTrigger
+      label={item.label}
+      disabled={item.disabled}
+      active={item.children.some((child) => child.key === activeKey)}
+    >
+      {#snippet icon()}
+        {#if item.icon}
+          <item.icon width={24} height={24} />
+        {/if}
+      {/snippet}
+    </Primitive.SubTrigger>
+
+    <Primitive.SubContent>
+      {#each item.children as child (child.key)}
+        {@render renderItem(child as NavigationSelectableItem<TItem>)}
+      {/each}
+    </Primitive.SubContent>
+  </Primitive.Sub>
+{/snippet}
+
+{#snippet defaultLinkRenderer(item: NavigationItemLink)}
+  <Primitive.Item>
+    <Primitive.Trigger label={item.label} href={item.href} disabled={item.disabled} active={item.key === activeKey}>
+      {#snippet icon()}
+        {#if item.icon}
+          <item.icon width={24} height={24} />
+        {/if}
+      {/snippet}
+    </Primitive.Trigger>
+  </Primitive.Item>
+{/snippet}
+
+{#snippet defaultActionRenderer(item: NavigationItemAction)}
+  <Primitive.Item>
+    <Primitive.Trigger label={item.label} disabled={item.disabled} active={item.key === activeKey}>
+      {#snippet icon()}
+        {#if item.icon}
+          <item.icon width={24} height={24} />
+        {/if}
+      {/snippet}
+    </Primitive.Trigger>
+  </Primitive.Item>
+{/snippet}
+
+{#snippet renderItem(item: NavigationSelectableItem<TItem>)}
+  {#if itemSnippet}
+    <Primitive.Item>
+      {#snippet child({ props })}
+        {@render itemSnippet({ item, props })}
+      {/snippet}
+    </Primitive.Item>
+  {:else if isSub(item)}
+    {@render defaultSubRenderer(item)}
+  {:else if isLink(item)}
+    {@render defaultLinkRenderer(item)}
+  {:else if isAction(item)}
+    {@render defaultActionRenderer(item)}
+  {/if}
+{/snippet}
+
+<Primitive.Root bind:ref bind:compact {...restProps}>
+  <Primitive.Content class={contentClass}>
+    {#each items as item (item.key)}
+      {@render renderItem(item)}
+    {/each}
+  </Primitive.Content>
+</Primitive.Root>

package/dist/composed/navigation/root/root.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { NavigationSelectableItem } from '../types.js';
+import type { NavigationProps } from '../types.js';
+declare function $$render<TItem extends NavigationSelectableItem>(): {
+    props: NavigationProps<TItem>;
+    exports: {};
+    bindings: "ref" | "compact";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends NavigationSelectableItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "ref" | "compact";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends NavigationSelectableItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends NavigationSelectableItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Root: $$IsomorphicComponent;
+type Root<TItem extends NavigationSelectableItem> = InstanceType<typeof Root<TItem>>;
+export default Root;