@casinogate/ui 0.0.3

package/dist/components/toast/toast.component.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+  import ErrorIcon from '../../assets/icons/error.svg?component';
+  import InfoIcon from '../../assets/icons/info.svg?component';
+  import SuccessIcon from '../../assets/icons/success.svg?component';
+  import WarningIcon from '../../assets/icons/warning.svg?component';
+  import type { Without } from '../../internal/types/common.js';
+  import type { WithElementRef, WithVariants } from '../../internal/types/composition.js';
+  import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+  import { cn } from '../../internal/utils/common.js';
+  import { tv } from '../../internal/utils/tailwindcss.js';
+  import type { Snippet } from 'svelte';
+
+  const toastStyles = tv({
+    slots: {
+      root: [
+        'cgui:overflow-hidden cgui:relative cgui:min-w-42 cgui:max-w-80',
+        'cgui:flex cgui:items-center cgui:gap-2 cgui:p-3',
+        'cgui:shadow-toast cgui:bg-surface-white',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:before:content-[""] cgui:before:pointer-events-none cgui:before:absolute cgui:before:top-0 cgui:before:inset-x-0 cgui:before:h-1.5 cgui:before:block',
+      ],
+      iconWrapper: ['cgui:shrink-0 cgui:size-6 cgui:flex cgui:items-center cgui:justify-center cgui:select-none'],
+      innerIcon: [],
+      body: ['cgui:flex cgui:flex-col cgui:gap-1  cgui:flex-1 cgui:text-left'],
+      title: ['cgui:text-body-2 cgui:text-fg-darkest'],
+      description: ['cgui:text-caption-2 cgui:text-fg-darkest'],
+    },
+    variants: {
+      variant: {
+        error: {
+          root: 'cgui:before:bg-state-error',
+          innerIcon: 'cgui:text-state-error',
+        },
+
+        warning: {
+          root: 'cgui:before:bg-state-warning',
+          innerIcon: 'cgui:text-state-warning',
+        },
+
+        success: {
+          root: 'cgui:before:bg-state-success',
+          innerIcon: 'cgui:text-state-success',
+        },
+
+        info: {
+          root: 'cgui:before:bg-state-info',
+          innerIcon: 'cgui:text-state-info',
+        },
+      },
+
+      rounded: {
+        xs: {
+          root: 'cgui:rounded-xs',
+        },
+
+        sm: {
+          root: 'cgui:rounded-sm',
+        },
+
+        md: {
+          root: 'cgui:rounded-md',
+        },
+
+        lg: {
+          root: 'cgui:rounded-lg',
+        },
+
+        xl: {
+          root: 'cgui:rounded-xl',
+        },
+      },
+
+      hasIcon: {
+        false: {
+          iconWrapper: 'cgui:hidden',
+        },
+      },
+    },
+  });
+
+  type ToastPropsWithoutHTML = WithElementRef<
+    WithVariants<
+      {
+        title?: Snippet | string;
+
+        description?: Snippet | string;
+
+        icon?: Snippet;
+      },
+      typeof toastStyles
+    >
+  >;
+
+  export type ToastProps = ToastPropsWithoutHTML & Without<PrimitiveDivAttributes, ToastPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  let {
+    variant = 'info',
+    rounded = 'xs',
+    hasIcon = true,
+    title,
+    description,
+    icon,
+    class: className,
+    ref = $bindable(null),
+    ...props
+  }: ToastProps = $props();
+
+  const styles = $derived(toastStyles({ variant, rounded, hasIcon }));
+
+  const InnerIcon = $derived.by(() => {
+    if (variant === 'error') return ErrorIcon;
+
+    if (variant === 'warning') return WarningIcon;
+
+    if (variant === 'success') return SuccessIcon;
+
+    return InfoIcon;
+  });
+</script>
+
+<div bind:this={ref} class={cn(styles.root(), className)} {...props}>
+  <div class={styles.iconWrapper()}>
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <InnerIcon class={styles.innerIcon()} />
+    {/if}
+  </div>
+
+  <div class={styles.body()}>
+    {#if typeof title === 'string'}
+      {#if title.trim().length}
+        <p class={styles.title()}>{title}</p>
+      {/if}
+    {:else}
+      {@render title?.()}
+    {/if}
+
+    {#if typeof description === 'string'}
+      {#if description.trim().length}
+        <p class={styles.description()}>{description}</p>
+      {/if}
+    {:else}
+      {@render description?.()}
+    {/if}
+  </div>
+</div>

package/dist/components/toast/toast.component.svelte.d.ts

@@ -0,0 +1,158 @@
+import type { Without } from '../../internal/types/common.js';
+import type { WithElementRef, WithVariants } from '../../internal/types/composition.js';
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { Snippet } from 'svelte';
+declare const toastStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        error: {
+            root: string;
+            innerIcon: string;
+        };
+        warning: {
+            root: string;
+            innerIcon: string;
+        };
+        success: {
+            root: string;
+            innerIcon: string;
+        };
+        info: {
+            root: string;
+            innerIcon: string;
+        };
+    };
+    rounded: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    hasIcon: {
+        false: {
+            iconWrapper: string;
+        };
+    };
+}, {
+    root: string[];
+    iconWrapper: string[];
+    innerIcon: never[];
+    body: string[];
+    title: string[];
+    description: string[];
+}, undefined, {
+    variant: {
+        error: {
+            root: string;
+            innerIcon: string;
+        };
+        warning: {
+            root: string;
+            innerIcon: string;
+        };
+        success: {
+            root: string;
+            innerIcon: string;
+        };
+        info: {
+            root: string;
+            innerIcon: string;
+        };
+    };
+    rounded: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    hasIcon: {
+        false: {
+            iconWrapper: string;
+        };
+    };
+}, {
+    root: string[];
+    iconWrapper: string[];
+    innerIcon: never[];
+    body: string[];
+    title: string[];
+    description: string[];
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        error: {
+            root: string;
+            innerIcon: string;
+        };
+        warning: {
+            root: string;
+            innerIcon: string;
+        };
+        success: {
+            root: string;
+            innerIcon: string;
+        };
+        info: {
+            root: string;
+            innerIcon: string;
+        };
+    };
+    rounded: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+    hasIcon: {
+        false: {
+            iconWrapper: string;
+        };
+    };
+}, {
+    root: string[];
+    iconWrapper: string[];
+    innerIcon: never[];
+    body: string[];
+    title: string[];
+    description: string[];
+}, undefined, unknown, unknown, undefined>>;
+type ToastPropsWithoutHTML = WithElementRef<WithVariants<{
+    title?: Snippet | string;
+    description?: Snippet | string;
+    icon?: Snippet;
+}, typeof toastStyles>>;
+export type ToastProps = ToastPropsWithoutHTML & Without<PrimitiveDivAttributes, ToastPropsWithoutHTML>;
+declare const Toast: import("svelte").Component<ToastProps, {}, "ref">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/toast/toast.stories.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  import { defineMeta } from '../../storybook/addon-svelte-csf';
+  import type { Meta, Parameters } from '../../storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import Toast from './toast.component.svelte';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['variant', 'title', 'description', 'rounded', 'hasIcon'],
+    },
+    layout: 'centered',
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Toast',
+    component: Toast,
+    tags: ['autodocs'],
+    argTypes: {
+      variant: {
+        control: 'radio',
+      },
+
+      title: {
+        control: 'text',
+      },
+
+      description: {
+        control: 'text',
+      },
+
+      rounded: {
+        control: 'radio',
+      },
+    },
+
+    parameters,
+  } satisfies Meta<typeof Toast>);
+
+  const args: ComponentProps<typeof Toast> = {
+    variant: 'info',
+    rounded: 'xs',
+    hasIcon: true,
+    title: 'System Update Available',
+    description: 'A new version is ready to install. Update now or schedule for later',
+  };
+</script>
+
+<script lang="ts"></script>
+
+<Story
+  name="Info"
+  args={{
+    ...args,
+    variant: 'info',
+  }}
+>
+  {#snippet template(args)}
+    <Toast {...args}></Toast>
+  {/snippet}
+</Story>
+
+<Story
+  name="Success"
+  args={{
+    ...args,
+    variant: 'success',
+    title: 'Changes Saved Successfully',
+    description: 'Your profile settings have been updated and are now active."',
+  }}
+>
+  Success
+</Story>
+
+<Story
+  name="Error"
+  args={{
+    ...args,
+    variant: 'error',
+    title: 'Failed to Save Changes',
+    description: 'An error occurred while saving your changes. Please try again.',
+  }}
+>
+  Error
+</Story>
+
+<Story
+  name="Warning"
+  args={{
+    ...args,
+    variant: 'warning',
+    title: 'System Update Available',
+    description: 'A new version is ready to install. Update now or schedule for later',
+  }}
+>
+  Warning
+</Story>

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

@@ -0,0 +1,19 @@
+import Toast from './toast.component.svelte';
+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 Toast: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toast = InstanceType<typeof Toast>;
+export default Toast;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as Button, type ButtonProps } from './components/button/button.component.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as Button } from './components/button/button.component.svelte';

package/dist/internal/types/attrs.d.ts

@@ -0,0 +1 @@
+export declare function getDataDisabled(condition: boolean): '' | undefined;

package/dist/internal/types/attrs.js

@@ -0,0 +1,3 @@
+export function getDataDisabled(condition) {
+    return condition ? '' : undefined;
+}

package/dist/internal/types/common.d.ts

@@ -0,0 +1,25 @@
+import type { attachRef } from 'svelte-toolbelt';
+export type Without<T extends object, U extends object> = Omit<T, keyof U>;
+export type Arrayable<T> = T[] | T;
+export type Fn = () => void;
+export type AnyFn = (...args: any[]) => any;
+interface DecrementMap {
+    10: 9;
+    9: 8;
+    8: 7;
+    7: 6;
+    6: 5;
+    5: 4;
+    4: 3;
+    3: 2;
+    2: 1;
+    1: 0;
+    0: never;
+}
+export type Path<ObjectType, CurrentPath extends string = '', Depth extends number = 10> = Depth extends 0 ? never : ObjectType extends Record<string, unknown> ? {
+    [PropertyKey in keyof ObjectType & string]: ObjectType[PropertyKey] extends Record<string, unknown> ? Path<ObjectType[PropertyKey], CurrentPath extends '' ? PropertyKey : `${CurrentPath}.${PropertyKey}`, DecrementMap[Depth & keyof DecrementMap]> : CurrentPath extends '' ? PropertyKey : `${CurrentPath}.${PropertyKey}`;
+}[keyof ObjectType & string] : never;
+export type ValueOf<T> = T[keyof T];
+export type RefAttachment<T extends HTMLElement = HTMLElement> = ReturnType<typeof attachRef<T>>;
+export type OnChangeFn<T> = (value: T) => void;
+export {};

package/dist/internal/types/common.js

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

package/dist/internal/types/composition.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export type WithChild<Props extends Record<PropertyKey, unknown> = {}, SnippetProps extends Record<PropertyKey, unknown> = {
+    _default: never;
+}, Ref = HTMLElement> = Omit<Props, 'child' | 'children'> & {
+    child?: SnippetProps extends {
+        _default: never;
+    } ? Snippet<[
+        {
+            props: Record<string, unknown>;
+        }
+    ]> : Snippet<[
+        SnippetProps & {
+            props: Record<string, unknown>;
+        }
+    ]>;
+    children?: SnippetProps extends {
+        _default: never;
+    } ? Snippet : Snippet<[SnippetProps]>;
+    style?: string | null | undefined;
+    ref?: Ref | null | undefined;
+};
+export type Polymorphic<Props extends Record<PropertyKey, unknown> = {}> = {
+    as?: keyof HTMLElementTagNameMap | null | undefined;
+} & Props;
+export type WithChildren<Props = {}> = Props & {
+    children?: Snippet | undefined;
+};
+export type WithRefProps<T = {}> = T & ReadableBoxedValues<{
+    id: string;
+}> & WritableBoxedValues<{
+    ref: HTMLElement | null;
+}>;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+export type WithVariants<TSource, TStyles extends (...args: any) => any, TOmit extends keyof VariantProps<TStyles> = never> = TSource & Omit<VariantProps<TStyles>, TOmit>;

package/dist/internal/types/composition.js

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

package/dist/internal/types/html-attributes.d.ts

@@ -0,0 +1,48 @@
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLTextareaAttributes, HTMLThAttributes, SVGAttributes } from 'svelte/elements';
+export type DivAttributes = HTMLAttributes<HTMLDivElement>;
+export type SpanAttributes = HTMLAttributes<HTMLSpanElement>;
+export type HeadingAttributes = HTMLAttributes<HTMLHeadingElement>;
+export type UListAttributes = HTMLAttributes<HTMLUListElement>;
+export type ElementAttributes = HTMLAttributes<HTMLElement>;
+export type TableSectionAttributes = HTMLAttributes<HTMLTableSectionElement>;
+export type TableRowAttributes = HTMLAttributes<HTMLTableRowElement>;
+export type SVGElementAttributes = SVGAttributes<SVGElement>;
+export type ParagraphAttributes = HTMLAttributes<HTMLParagraphElement>;
+export type FormAttributes = HTMLAttributes<HTMLFormElement>;
+/**
+ * We override the `id` prop type to not allow it to be `null`. We rely on the
+ * `id` heavily in the internals for node references. We also override
+ * children to allow for custom children snippet props. We extend `style` to allow
+ * for either a `StyleProperties` object or a string of CSS properties.
+ */
+type Primitive<T> = Omit<T, 'id' | 'children'> & {
+    id?: string;
+};
+export type PrimitiveButtonAttributes = Primitive<HTMLButtonAttributes>;
+export type PrimitiveDivAttributes = Primitive<DivAttributes>;
+export type PrimitiveInputAttributes = Primitive<HTMLInputAttributes>;
+export type PrimitiveTextareaAttributes = Primitive<HTMLTextareaAttributes>;
+export type PrimitiveSpanAttributes = Primitive<SpanAttributes>;
+export type PrimitiveImgAttributes = Primitive<HTMLImgAttributes>;
+export type PrimitiveHeadingAttributes = Primitive<HeadingAttributes>;
+export type PrimitiveLabelAttributes = Primitive<HTMLLabelAttributes>;
+export type PrimitiveSVGAttributes = Primitive<SVGElementAttributes>;
+export type PrimitiveAnchorAttributes = Primitive<HTMLAnchorAttributes>;
+export type PrimitiveLiAttributes = Primitive<HTMLLiAttributes>;
+export type PrimitiveElementAttributes = Primitive<ElementAttributes>;
+export type PrimitiveUListAttributes = Primitive<UListAttributes>;
+export type PrimitiveTdAttributes = Primitive<HTMLTdAttributes>;
+export type PrimitiveThAttributes = Primitive<HTMLThAttributes>;
+export type PrimitiveTableAttributes = Primitive<HTMLTableAttributes>;
+export type PrimitiveTbodyAttributes = Primitive<TableSectionAttributes>;
+export type PrimitiveTrAttributes = Primitive<TableRowAttributes>;
+export type PrimitiveTheadAttributes = Primitive<TableSectionAttributes>;
+export type PrimitiveHeaderAttributes = Primitive<ElementAttributes>;
+export type PrimitiveFormAttributes = Primitive<FormAttributes>;
+export type ExtractPrimitiveEvents<Type extends Record<string, any>> = {
+    [K in keyof Type as K extends `on${string}` ? K : never]: Type[K];
+};
+export type ExcludePrimitiveEvents<Type extends Record<string, any>> = {
+    [K in keyof Type as K extends `on${string}` ? never : K]: Type[K];
+};
+export {};

package/dist/internal/types/html-attributes.js

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

package/dist/internal/utils/arrays.d.ts

@@ -0,0 +1 @@
+export declare function arraysAreEqual<T extends Array<unknown>>(arr1: T, arr2: T): boolean;

package/dist/internal/utils/arrays.js

@@ -0,0 +1,30 @@
+export function arraysAreEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length)
+        return false;
+    return arr1.every((value, index) => isEqual(value, arr2[index]));
+}
+function isEqual(a, b) {
+    if (Number.isNaN(a) && Number.isNaN(b))
+        return true;
+    if (Array.isArray(a) && Array.isArray(b))
+        return arraysAreEqual(a, b);
+    if (typeof a === 'object' && typeof b === 'object')
+        return isDeepEqual(a, b);
+    return Object.is(a, b);
+}
+function isDeepEqual(a, b) {
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+        return false;
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (!bKeys.includes(key))
+            return false;
+        if (!isEqual(a[key], b[key])) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/internal/utils/common.d.ts

@@ -0,0 +1,6 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function noop(): void;
+export declare function noopPromise(): Promise<any>;
+export declare const atom: <T>(factory: () => T) => T;
+export declare const keyWithPrefix: <TKey extends string, TPrefix extends string = "cgui">(key: TKey, prefix?: TPrefix) => `${TPrefix}-${TKey}`;

package/dist/internal/utils/common.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+import { twMerge } from './tailwindcss.js';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function noop() { }
+export async function noopPromise() { }
+export const atom = (factory) => factory();
+export const keyWithPrefix = (key, prefix = 'cgui') => `${prefix}-${key}`;

package/dist/internal/utils/tailwindcss.d.ts

@@ -0,0 +1,3 @@
+declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+declare const tv: import("tailwind-variants").CreateTV;
+export { tv, twMerge };

package/dist/internal/utils/tailwindcss.js

@@ -0,0 +1,29 @@
+import { extendTailwindMerge, } from 'tailwind-merge';
+import { createTV } from 'tailwind-variants';
+const tailwindMergeConfig = {
+    extend: {
+        classGroups: {
+            'font-size': ['text-heading', 'text-heading-2', 'text-body', 'text-body-2', 'text-caption', 'text-caption-2'],
+            rounded: [
+                'rounded-null',
+                'rounded-xxs',
+                'rounded-xs',
+                'rounded-sm',
+                'rounded-md',
+                'rounded-lg',
+                'rounded-xl',
+                'rounded-2xl',
+                'rounded-xxl',
+                'rounded-2xxl',
+                'rounded-max',
+            ],
+            blur: ['blur-xxs', 'blur-xs', 'blur-sm', 'blur-md', 'blur-lg', 'blur-xl', 'blur-2xl'],
+        },
+    },
+};
+const twMerge = extendTailwindMerge(tailwindMergeConfig);
+const tv = createTV({
+    twMerge: true,
+    twMergeConfig: tailwindMergeConfig,
+});
+export { tv, twMerge };