@casinogate/ui 1.11.14 → 2.0.0

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

@@ -0,0 +1,30 @@
+import type { WithVariants } from '../../internal/types/composition.js';
+import type { PrimitiveDivAttributes, PrimitiveLabelAttributes, PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
+import type { Snippet } from 'svelte';
+import type { WithChild, WithElementRef, Without } from 'svelte-toolbelt';
+import type { FieldDescriptionVariants, FieldErrorVariants, FieldLabelVariants, FieldRootVariants } from './styles.js';
+type FieldRootPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+}, {
+    invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+}>>, FieldRootVariants>;
+export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
+export type FieldControlProps = {
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    id?: string;
+};
+type FieldDescriptionPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldDescriptionVariants>;
+export type FieldDescriptionProps = FieldDescriptionPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldDescriptionPropsWithoutHTML>;
+type FieldErrorPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldErrorVariants>;
+export type FieldErrorProps = FieldErrorPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldErrorPropsWithoutHTML>;
+type FieldLabelPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldLabelVariants>;
+export type FieldLabelProps = FieldLabelPropsWithoutHTML & Without<PrimitiveLabelAttributes, FieldLabelPropsWithoutHTML>;
+export {};

package/dist/primitives/field/types.js

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

package/dist/primitives/file-upload/components/file-upload.clear-trigger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { fileUploadClearTriggerVariants } from '../styles.js';
+  import type { FileUploadClearTriggerProps } from '../types.js';
+  import { FileUploadClearTriggerState } from '../model/use-file-upload-state.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadClearTriggerProps = $props();
+
+  const state$ = FileUploadClearTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, state$.props));
+</script>
+
+<button bind:this={ref} type="button" class={cn(fileUploadClearTriggerVariants(), className)} {...mergedProps}>
+  {@render children?.()}
+</button>

package/dist/primitives/file-upload/components/file-upload.clear-trigger.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.context.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { FileUploadContextProps } from '../types.js';
+  import { FileUploadRootContext } from '../model/use-file-upload-state.svelte.js';
+
+  const { children }: FileUploadContextProps = $props();
+
+  const context$ = FileUploadRootContext.get();
+</script>
+
+{@render children?.({
+  acceptedFiles: () => context$.opts.acceptedFiles.current,
+  rejectedFiles: () => context$.opts.rejectedFiles.current,
+  dragging: () => context$.dragging,
+  addFiles: context$.addFiles,
+  removeFile: context$.removeFile,
+  clearFiles: context$.clearFiles,
+  openFilePicker: context$.openFilePicker,
+})}

package/dist/primitives/file-upload/components/file-upload.context.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.dropzone.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { fileUploadDropzoneVariants } from '../styles.js';
+  import type { FileUploadDropzoneProps } from '../types.js';
+  import { FileUploadDropzoneState } from '../model/use-file-upload-state.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    disableClick = false,
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadDropzoneProps = $props();
+
+  const state$ = FileUploadDropzoneState.create({
+    disabledClick: boxWith(() => disableClick),
+    id: boxWith(() => id),
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, state$.props));
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(
+    fileUploadDropzoneVariants({
+      dragging: state$.root$.dragging,
+      invalid: state$.root$.opts.invalid.current,
+      disabled: state$.root$.opts.disabled.current,
+    }),
+    className
+  )}
+  {...mergedProps}
+>
+  {@render children?.()}
+</div>

package/dist/primitives/file-upload/components/file-upload.dropzone.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.hidden-input.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Attachment } from 'svelte/attachments';
+  import type { FileUploadHiddenInputProps } from '../types.js';
+  import { FileUploadRootContext } from '../model/use-file-upload-state.svelte.js';
+
+  let { ref = $bindable(null), ...restProps }: FileUploadHiddenInputProps = $props();
+
+  const root$ = FileUploadRootContext.get();
+
+  const attachEl: Attachment<HTMLInputElement> = (el) => {
+    root$.setHiddenInput(el);
+
+    return () => {
+      root$.setHiddenInput(null);
+    };
+  };
+
+  function handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files) {
+      root$.addFiles(input.files);
+      input.value = '';
+    }
+  }
+</script>
+
+<input
+  bind:this={ref}
+  {@attach attachEl}
+  type="file"
+  tabindex={-1}
+  style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;"
+  data-slot="file-upload-hidden-input"
+  accept={root$.opts.accept.current}
+  multiple={root$.opts.maxFiles.current > 1}
+  disabled={root$.opts.disabled.current}
+  onchange={handleChange}
+  {...restProps}
+/>

package/dist/primitives/file-upload/components/file-upload.hidden-input.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item-delete-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { fileUploadItemDeleteTriggerVariants } from '../styles.js';
+  import type { FileUploadItemDeleteTriggerProps } from '../types.js';
+  import { FileUploadDeleteTriggerState } from '../model/use-file-upload-state.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadItemDeleteTriggerProps = $props();
+
+  const state$ = FileUploadDeleteTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, state$.props));
+</script>
+
+<button bind:this={ref} type="button" class={cn(fileUploadItemDeleteTriggerVariants(), className)} {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <Icon.Cross />
+  {/if}
+</button>

package/dist/primitives/file-upload/components/file-upload.item-delete-trigger.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadItemGroupVariants } from '../styles.js';
+  import type { FileUploadItemGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), children, class: className, ...restProps }: FileUploadItemGroupProps = $props();
+</script>
+
+<ul
+  bind:this={ref}
+  class={cn(fileUploadItemGroupVariants(), className)}
+  data-slot="file-upload-item-group"
+  {...restProps}
+>
+  {@render children?.()}
+</ul>

package/dist/primitives/file-upload/components/file-upload.item-group.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item-name.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadItemNameVariants } from '../styles.js';
+  import type { FileUploadItemNameProps } from '../types.js';
+  import { FileUploadItemContext } from '../model/use-file-upload-state.svelte.js';
+
+  let { ref = $bindable(null), children, class: className, ...restProps }: FileUploadItemNameProps = $props();
+
+  const item$ = FileUploadItemContext.get();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fileUploadItemNameVariants(), className)}
+  data-slot="file-upload-item-name"
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {item$.opts.file.current.name}
+  {/if}
+</div>

package/dist/primitives/file-upload/components/file-upload.item-name.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item-preview-image.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadItemPreviewImageVariants } from '../styles.js';
+  import type { FileUploadItemPreviewImageProps } from '../types.js';
+  import { FileUploadPreviewImageState } from '../model/use-file-upload-state.svelte.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: FileUploadItemPreviewImageProps = $props();
+
+  const state$ = FileUploadPreviewImageState.create();
+</script>
+
+{#if state$.imageUrl}
+  <img
+    bind:this={ref}
+    src={state$.imageUrl}
+    alt={state$.item$.opts.file.current.name}
+    class={cn(fileUploadItemPreviewImageVariants(), className)}
+    data-slot="file-upload-item-preview-image"
+    {...restProps}
+  />
+{/if}

package/dist/primitives/file-upload/components/file-upload.item-preview-image.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item-preview.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadItemPreviewVariants } from '../styles.js';
+  import type { FileUploadItemPreviewProps } from '../types.js';
+  import { FileUploadItemContext } from '../model/use-file-upload-state.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    type = '.*',
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadItemPreviewProps = $props();
+
+  const item$ = FileUploadItemContext.get();
+
+  const isMatch = $derived(Boolean(item$.opts.file.current.type.match(type)));
+</script>
+
+{#if isMatch}
+  <div
+    bind:this={ref}
+    class={cn(fileUploadItemPreviewVariants(), className)}
+    data-slot="file-upload-item-preview"
+    {...restProps}
+  >
+    {#if children}
+      {@render children?.()}
+    {:else}
+      <Icon.File />
+    {/if}
+  </div>
+{/if}

package/dist/primitives/file-upload/components/file-upload.item-preview.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item-size-text.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadItemSizeTextVariants } from '../styles.js';
+  import type { FileUploadItemSizeTextProps } from '../types.js';
+  import { FileUploadItemContext, formatFileSize } from '../model/use-file-upload-state.svelte.js';
+
+  let { ref = $bindable(null), children, class: className, ...restProps }: FileUploadItemSizeTextProps = $props();
+
+  const item$ = FileUploadItemContext.get();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fileUploadItemSizeTextVariants(), className)}
+  data-slot="file-upload-item-size-text"
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {formatFileSize(item$.opts.file.current.size)}
+  {/if}
+</div>

package/dist/primitives/file-upload/components/file-upload.item-size-text.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.item.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { box } from 'svelte-toolbelt';
+  import { fileUploadItemVariants } from '../styles.js';
+  import type { FileUploadItemProps } from '../types.js';
+  import { FileUploadItemState } from '../model/use-file-upload-state.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    file,
+    children,
+    class: className,
+    variant = 'default',
+    ...restProps
+  }: FileUploadItemProps = $props();
+
+  FileUploadItemState.create({
+    file: box.with(() => file),
+  });
+</script>
+
+<li
+  bind:this={ref}
+  class={cn(fileUploadItemVariants({ variant }), className)}
+  data-slot="file-upload-item"
+  {...restProps}
+>
+  {@render children?.()}
+</li>

package/dist/primitives/file-upload/components/file-upload.item.svelte.d.ts

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

package/dist/primitives/file-upload/components/file-upload.root.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn, noop } from '../../../internal/utils/common.js';
+  import { boxWith } from 'svelte-toolbelt';
+  import { fileUploadRootVariants } from '../styles.js';
+  import type { FileUploadRootProps } from '../types.js';
+  import { FileUploadRootState } from '../model/use-file-upload-state.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    acceptedFiles = $bindable([]),
+    rejectedFiles = $bindable([]),
+    accept,
+    maxFiles = 1,
+    maxFileSize = Infinity,
+    disabled = false,
+    invalid = false,
+    onFileAccept = noop,
+    onFileReject = noop,
+    onFileChange = noop,
+    children,
+    class: className,
+    ...restProps
+  }: FileUploadRootProps = $props();
+
+  const state$ = FileUploadRootState.create({
+    acceptedFiles: boxWith(
+      () => acceptedFiles,
+      (v) => {
+        acceptedFiles = v;
+      }
+    ),
+    rejectedFiles: boxWith(
+      () => rejectedFiles,
+      (v) => {
+        rejectedFiles = v;
+      }
+    ),
+    accept: boxWith(() => accept),
+    maxFiles: boxWith(() => maxFiles),
+    maxFileSize: boxWith(() => maxFileSize),
+    disabled: boxWith(() => disabled),
+    invalid: boxWith(() => invalid),
+    onFileAccept: boxWith(() => onFileAccept),
+    onFileReject: boxWith(() => onFileReject),
+    onFileChange: boxWith(() => onFileChange),
+  });
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fileUploadRootVariants({ disabled }), className)}
+  data-slot="file-upload-root"
+  data-disabled={boolAttr(disabled)}
+  data-dragging={boolAttr(state$.dragging)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/primitives/file-upload/components/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/primitives/file-upload/components/file-upload.trigger.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { fileUploadTriggerVariants } from '../styles.js';
+  import type { FileUploadTriggerProps } from '../types.js';
+  import { FileUploadRootContext } from '../model/use-file-upload-state.svelte.js';
+
+  let { ref = $bindable(null), children, class: className, ...restProps }: FileUploadTriggerProps = $props();
+
+  const rootState = FileUploadRootContext.get();
+
+  function handleClick(e: MouseEvent) {
+    e.stopPropagation();
+    rootState.openFilePicker();
+  }
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  class={cn(fileUploadTriggerVariants(), className)}
+  data-slot="file-upload-trigger"
+  onclick={handleClick}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

package/dist/primitives/file-upload/components/file-upload.trigger.svelte.d.ts

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

package/dist/primitives/file-upload/components/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Root } from './file-upload.root.svelte';
+export { default as Context } from './file-upload.context.svelte';
+export { default as Dropzone } from './file-upload.dropzone.svelte';
+export { default as Trigger } from './file-upload.trigger.svelte';
+export { default as HiddenInput } from './file-upload.hidden-input.svelte';
+export { default as ItemGroup } from './file-upload.item-group.svelte';
+export { default as Item } from './file-upload.item.svelte';
+export { default as ItemPreview } from './file-upload.item-preview.svelte';
+export { default as ItemPreviewImage } from './file-upload.item-preview-image.svelte';
+export { default as ItemName } from './file-upload.item-name.svelte';
+export { default as ItemSizeText } from './file-upload.item-size-text.svelte';
+export { default as ItemDeleteTrigger } from './file-upload.item-delete-trigger.svelte';
+export { default as ClearTrigger } from './file-upload.clear-trigger.svelte';

package/dist/primitives/file-upload/components/index.js

@@ -0,0 +1,13 @@
+export { default as Root } from './file-upload.root.svelte';
+export { default as Context } from './file-upload.context.svelte';
+export { default as Dropzone } from './file-upload.dropzone.svelte';
+export { default as Trigger } from './file-upload.trigger.svelte';
+export { default as HiddenInput } from './file-upload.hidden-input.svelte';
+export { default as ItemGroup } from './file-upload.item-group.svelte';
+export { default as Item } from './file-upload.item.svelte';
+export { default as ItemPreview } from './file-upload.item-preview.svelte';
+export { default as ItemPreviewImage } from './file-upload.item-preview-image.svelte';
+export { default as ItemName } from './file-upload.item-name.svelte';
+export { default as ItemSizeText } from './file-upload.item-size-text.svelte';
+export { default as ItemDeleteTrigger } from './file-upload.item-delete-trigger.svelte';
+export { default as ClearTrigger } from './file-upload.clear-trigger.svelte';

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

@@ -0,0 +1,3 @@
+export * as FileUpload from './components/index.js';
+export type * from './types.js';
+export * from './model/index.js';

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

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

package/dist/primitives/file-upload/model/index.d.ts

@@ -0,0 +1 @@
+export { FileUploadClearTriggerState, FileUploadDeleteTriggerState, FileUploadDropzoneState, FileUploadItemContext, FileUploadItemState, FileUploadPreviewImageState, FileUploadRootContext, FileUploadRootState, formatFileSize, } from './use-file-upload-state.svelte.js';

package/dist/primitives/file-upload/model/index.js

@@ -0,0 +1 @@
+export { FileUploadClearTriggerState, FileUploadDeleteTriggerState, FileUploadDropzoneState, FileUploadItemContext, FileUploadItemState, FileUploadPreviewImageState, FileUploadRootContext, FileUploadRootState, formatFileSize, } from './use-file-upload-state.svelte.js';