@casinogate/ui 1.11.14 → 2.0.0

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

@@ -0,0 +1,71 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const commandRootVariants: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        none: string[];
+    };
+    border: {
+        true: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    defaultVariants: {
+        rounded: string;
+        shadow: boolean;
+    };
+}, undefined, string[], {
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        none: string[];
+    };
+    border: {
+        true: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    defaultVariants: {
+        rounded: string;
+        shadow: boolean;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        none: string[];
+    };
+    border: {
+        true: string[];
+    };
+    shadow: {
+        true: string[];
+    };
+    defaultVariants: {
+        rounded: string;
+        shadow: boolean;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandInputWrapperVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandInputIconVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandInputVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandListVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandGroupHeadingVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandItemVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const commandEmptyVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type CommandRootVariantProps = VariantProps<typeof commandRootVariants>;
+export type CommandInputVariantProps = VariantProps<typeof commandInputVariants>;
+export type CommandListVariantProps = VariantProps<typeof commandListVariants>;
+export type CommandGroupVariantProps = VariantProps<typeof commandGroupVariants>;
+export type CommandGroupHeadingVariantProps = VariantProps<typeof commandGroupHeadingVariants>;
+export type CommandItemVariantProps = VariantProps<typeof commandItemVariants>;
+export type CommandEmptyVariantProps = VariantProps<typeof commandEmptyVariants>;

package/dist/primitives/command/styles.js

@@ -0,0 +1,69 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const commandRootVariants = tv({
+    base: ['cgui:text-fg-dark cgui:bg-surface-white cgui:flex cgui:size-full cgui:flex-col cgui:overflow-hidden'],
+    variants: {
+        rounded: {
+            default: ['cgui:rounded-md'],
+            sm: ['cgui:rounded-sm'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            none: [''],
+        },
+        border: {
+            true: ['cgui:border cgui:border-stroke-default'],
+        },
+        shadow: {
+            true: ['cgui:shadow-popover'],
+        },
+        defaultVariants: {
+            rounded: 'default',
+            shadow: true,
+        },
+    },
+});
+export const commandInputWrapperVariants = tv({
+    base: [
+        'cgui:flex cgui:h-9 cgui:items-center cgui:gap-2 cgui:pe-8 cgui:ps-3',
+        'cgui:border-b cgui:border-stroke-divider cgui:rounded-inherit',
+    ],
+});
+export const commandInputIconVariants = tv({
+    base: ['cgui:shrink-0 cgui:size-4 cgui:flex cgui:items-center cgui:opacity-50 cgui:justify-center cgui:select-none'],
+});
+export const commandInputVariants = tv({
+    base: [
+        'cgui:flex cgui:h-10 cgui:items-center cgui:rounded-inherit cgui:py-2 cgui:px-0',
+        'cgui:outline-none cgui:bg-transparent cgui:shadow-none cgui:text-fg-dark cgui:border-none cgui:text-body',
+        'cgui:placeholder:text-fg-regular/70',
+        'cgui:focus-visible:ring-0 cgui:focus-visible:ring-offset-0',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+    ],
+});
+export const commandListVariants = tv({
+    base: [
+        'cgui:scrollbar-thin cgui:scrollbar-thumb-surface-regular cgui:scrollbar-track-surface-lightest cgui:scrollbar-thumb-rounded-full cgui:scrollbar-track-rounded-full',
+        'cgui:max-h-75 cgui:scroll-py-1 cgui:overflow-y-auto cgui:overflow-x-hidden',
+    ],
+});
+export const commandGroupVariants = tv({
+    base: ['cgui:text-fg-dark cgui:p-1 cgui:overflow-hidden'],
+});
+export const commandGroupHeadingVariants = tv({
+    base: ['cgui:text-fg-semilight cgui:px-2 cgui:py-1.5 cgui:text-caption cgui:font-medium'],
+});
+export const commandItemVariants = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:gap-2 cgui:px-2 cgui:py-1.5',
+        'cgui:aria-selected:bg-surface-lightest cgui:aria-selected:text-fg-primary',
+        'cgui:data-selected:text-fg-primary',
+        'cgui:cursor-default  cgui:text-body cgui:select-none cgui:outline-hidden cgui:rounded-xs',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:[&_svg:not([class*="text-"])]:text-muted-foreground cgui:relative',
+        'cgui:[&_kbd]:ml-auto',
+        'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:shrink-0 cgui:[&_svg:not([class*="size-"])]:size-4',
+    ],
+});
+export const commandEmptyVariants = tv({
+    base: ['cgui:py-6 cgui:text-center cgui:text-body'],
+});

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

@@ -0,0 +1,18 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+import type { Without } from 'svelte-toolbelt';
+import type { SeparatorProps } from '../separator/index.js';
+import type { CommandEmptyVariantProps, CommandGroupHeadingVariantProps, CommandGroupVariantProps, CommandInputVariantProps, CommandItemVariantProps, CommandListVariantProps, CommandRootVariantProps } from './styles.js';
+export type CommandRootApi = CommandPrimitive.Root;
+export type CommandRootProps = CommandPrimitive.RootProps & CommandRootVariantProps & {
+    api?: CommandRootApi | null;
+};
+export type CommandInputProps = CommandPrimitive.InputProps & CommandInputVariantProps;
+export type CommandListProps = CommandListVariantProps & Without<CommandPrimitive.ListProps, CommandListVariantProps>;
+export type CommandGroupProps = CommandPrimitive.GroupProps & CommandGroupVariantProps;
+export type CommandGroupHeadingProps = CommandPrimitive.GroupHeadingProps & CommandGroupHeadingVariantProps;
+export type CommandGroupItemsProps = CommandPrimitive.GroupItemsProps;
+export type CommandItemProps = CommandPrimitive.ItemProps & CommandItemVariantProps;
+export type CommandEmptyProps = CommandPrimitive.EmptyProps & CommandEmptyVariantProps;
+export type CommandSeparatorProps = SeparatorProps;
+export type CommandViewportProps = CommandPrimitive.ViewportProps;
+export type CommandLoadingProps = CommandPrimitive.LoadingProps;

package/dist/primitives/command/types.js

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

package/dist/primitives/dialog/components/dialog.close.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { dialogCloseStyles } from '../styles.js';
+  import type { DialogCloseProps } from '../types.js';
+
+  let { class: className, children, ...rest }: DialogCloseProps = $props();
+</script>
+
+<DialogPrimitive.Close class={cn(dialogCloseStyles(), className)} {...rest}>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <Icon.Cross width={24} height={24} class="cgui:size-6" />
+  {/if}
+</DialogPrimitive.Close>

package/dist/primitives/dialog/components/dialog.close.svelte.d.ts

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

package/dist/primitives/dialog/components/dialog.content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { dialogContentStyles } from '../styles.js';
+  import type { DialogContentProps } from '../types.js';
+  import { DialogContentState } from './dialog.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    id = useId(uid),
+    ref = $bindable(null),
+    class: className,
+    variant = 'default',
+    rounded = 'default',
+    ...restProps
+  }: DialogContentProps = $props();
+
+  const contentState = DialogContentState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, contentState.props, { class: cn(dialogContentStyles({ variant, rounded }), className) })
+  );
+</script>
+
+<DialogPrimitive.Content {...mergedProps}>
+  {@render children?.()}
+</DialogPrimitive.Content>

package/dist/primitives/dialog/components/dialog.content.svelte.d.ts

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

package/dist/primitives/dialog/components/dialog.overlay.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { dialogOverlayStyles } from '../styles.js';
+  import type { DialogOverlayProps } from '../types.js';
+  import { DialogOverlayState } from './dialog.svelte.js';
+
+  const uid = $props.id();
+
+  let { id = useId(uid), ref = $bindable(null), class: className, ...restProps }: DialogOverlayProps = $props();
+
+  const overlayState = DialogOverlayState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, overlayState.props, { class: cn(dialogOverlayStyles(), className) })
+  );
+</script>
+
+<DialogPrimitive.Overlay {...mergedProps} />

package/dist/primitives/dialog/components/dialog.overlay.svelte.d.ts

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

package/dist/primitives/dialog/components/dialog.portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { DialogPortalProps } from '../types.js';
+
+  let { children, ...restProps }: DialogPortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps}>
+  {@render children?.()}
+</DialogPrimitive.Portal>

package/dist/primitives/dialog/components/dialog.portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Dialog: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/primitives/dialog/components/dialog.positioner.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { dialogPositionerStyles } from '../styles.js';
+  import type { DialogPositionerProps } from '../types.js';
+  import { DialogPositionerState } from './dialog.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    id = useId(uid),
+    ref = $bindable(null),
+    class: className,
+    align = 'center',
+    ...restProps
+  }: DialogPositionerProps = $props();
+
+  const positionerState = DialogPositionerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, positionerState.props, { class: cn(dialogPositionerStyles({ align }), className) })
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/primitives/dialog/components/dialog.positioner.svelte.d.ts

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { boxWith } from 'svelte-toolbelt';
+  import type { DialogRootProps } from '../types.js';
+  import { DialogRootState } from './dialog.svelte.js';
+
+  let { open = $bindable(false), children, ...restProps }: DialogRootProps = $props();
+
+  const rootState = DialogRootState.create({
+    open: boxWith(
+      () => open,
+      (v) => {
+        open = v;
+      }
+    ),
+  });
+</script>
+
+<DialogPrimitive.Root bind:open={rootState.opts.open.current} {...restProps}>
+  {@render children?.()}
+</DialogPrimitive.Root>

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

@@ -0,0 +1,3 @@
+declare const Dialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/primitives/dialog/components/dialog.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { RefAttachment } from '../../../internal/types/common.js';
+import { type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
+type DialogRootStateOpts = WritableBoxedValues<{
+    open: boolean;
+}>;
+export declare class DialogRootState {
+    static create(opts: DialogRootStateOpts): DialogRootState;
+    readonly opts: DialogRootStateOpts;
+    constructor(opts: DialogRootStateOpts);
+}
+type DialogContentStateOpts = WithRefProps<{}>;
+export declare class DialogContentState {
+    static create(opts: DialogContentStateOpts): DialogContentState;
+    readonly opts: DialogContentStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: DialogContentStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "content";
+    };
+}
+type DialogOverlayStateOpts = WithRefProps<{}>;
+export declare class DialogOverlayState {
+    static create(opts: DialogOverlayStateOpts): DialogOverlayState;
+    readonly opts: DialogOverlayStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: DialogOverlayStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "overlay";
+    };
+}
+type DialogPositionerStateOpts = WithRefProps<{}>;
+export declare class DialogPositionerState {
+    static create(opts: DialogPositionerStateOpts): DialogPositionerState;
+    readonly opts: DialogPositionerStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: DialogRootState;
+    constructor(opts: DialogPositionerStateOpts, root: DialogRootState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "positioner";
+        readonly 'data-state': string;
+    };
+}
+export {};

package/dist/primitives/dialog/components/dialog.svelte.js

@@ -0,0 +1,72 @@
+import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+import { getDataOpenState } from '../../../internal/utils/attrs.js';
+import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { Context } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const DialogRootContext = new Context(keyWithPrefix('dialog-root'));
+const SLOT_ATTR_VALUES = {
+    content: 'content',
+    overlay: 'overlay',
+    positioner: 'positioner',
+    close: 'close',
+};
+export class DialogRootState {
+    static create(opts) {
+        return DialogRootContext.set(new DialogRootState(opts));
+    }
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+    }
+}
+export class DialogContentState {
+    static create(opts) {
+        return new DialogContentState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.content,
+        ...this.attachment,
+    }));
+}
+export class DialogOverlayState {
+    static create(opts) {
+        return new DialogOverlayState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.overlay,
+        ...this.attachment,
+    }));
+}
+export class DialogPositionerState {
+    static create(opts) {
+        return new DialogPositionerState(opts, DialogRootContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+        this.root = root;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.positioner,
+        'data-state': getDataOpenState(this.root.opts.open.current),
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,6 @@
+export { default as Close } from './dialog.close.svelte';
+export { default as Content } from './dialog.content.svelte';
+export { default as Overlay } from './dialog.overlay.svelte';
+export { default as Portal } from './dialog.portal.svelte';
+export { default as Positioner } from './dialog.positioner.svelte';
+export { default as Root } from './dialog.root.svelte';

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

@@ -0,0 +1,6 @@
+export { default as Close } from './dialog.close.svelte';
+export { default as Content } from './dialog.content.svelte';
+export { default as Overlay } from './dialog.overlay.svelte';
+export { default as Portal } from './dialog.portal.svelte';
+export { default as Positioner } from './dialog.positioner.svelte';
+export { default as Root } from './dialog.root.svelte';

package/dist/primitives/dialog/index.d.ts

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

package/dist/primitives/dialog/index.js

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

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

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const dialogPositionerStyles: import("tailwind-variants").TVReturnType<{
+    align: {
+        center: string[];
+    };
+}, undefined, string[], {
+    align: {
+        center: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        center: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dialogOverlayStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const dialogContentStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+        none: never[];
+    };
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        none: never[];
+    };
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+        none: never[];
+    };
+    rounded: {
+        default: string[];
+        sm: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const dialogCloseStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type DialogPositionerVariants = VariantProps<typeof dialogPositionerStyles>;
+export type DialogOverlayVariants = VariantProps<typeof dialogOverlayStyles>;
+export type DialogContentVariants = VariantProps<typeof dialogContentStyles>;
+export type DialogCloseVariants = VariantProps<typeof dialogCloseStyles>;

package/dist/primitives/dialog/styles.js

@@ -0,0 +1,54 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const dialogPositionerStyles = tv({
+    base: [
+        'cgui:pointer-events-none cgui:fixed cgui:top-0 cgui:left-0 cgui:z-(--cg-ui-z-index-dialog) cgui:overflow-hidden',
+        'cgui:flex cgui:flex-col cgui:size-full',
+    ],
+    variants: {
+        align: {
+            center: ['cgui:items-center cgui:justify-center'],
+        },
+    },
+    defaultVariants: {
+        align: 'center',
+    },
+});
+export const dialogOverlayStyles = tv({
+    base: [
+        'cgui:pointer-events-none cgui:fixed cgui:top-0 cgui:left-0 cgui:z-(--cg-ui-z-index-dialog) cgui:overflow-hidden',
+        'cgui:size-full',
+        'cgui:bg-neutral-100/50',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0',
+    ],
+});
+export const dialogContentStyles = tv({
+    base: [
+        'cgui:relative cgui:z-(--cg-ui-z-index-dialog) cgui:outline-none cgui:overflow-hidden',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0 cgui:data-[state=open]:slide-in-from-bottom-20',
+        'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:slide-out-to-bottom-20',
+    ],
+    variants: {
+        variant: {
+            default: ['cgui:shadow-dialog cgui:bg-surface-white'],
+            none: [],
+        },
+        rounded: {
+            default: ['cgui:rounded-md'],
+            sm: ['cgui:rounded-sm'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        rounded: 'default',
+    },
+});
+export const dialogCloseStyles = tv({
+    base: [
+        'cgui:flex cgui:cursor-pointer cgui:items-center cgui:justify-center',
+        'cgui:text-icon-regular cgui:disabled:cursor-not-allowed cgui:disabled:opacity-50',
+    ],
+});

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

@@ -0,0 +1,12 @@
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { DialogCloseProps as DialogClosePropsPrimitive, DialogContentProps as DialogContentPropsPrimitive, DialogOverlayProps as DialogOverlayPropsPrimitive, DialogPortalProps as DialogPortalPropsPrimitive, DialogRootProps as DialogRootPropsPrimitive } from 'bits-ui';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { DialogCloseVariants, DialogContentVariants, DialogOverlayVariants, DialogPositionerVariants } from './styles.js';
+export type DialogRootProps = DialogRootPropsPrimitive;
+export type DialogPortalProps = DialogPortalPropsPrimitive;
+export type DialogContentProps = DialogContentPropsPrimitive & DialogContentVariants;
+export type DialogOverlayProps = DialogOverlayPropsPrimitive & DialogOverlayVariants;
+type DialogPositionerPropsWithoutHTML = WithElementRef<WithChildren<{}>> & DialogPositionerVariants;
+export type DialogPositionerProps = DialogPositionerPropsWithoutHTML & Without<PrimitiveDivAttributes, DialogPositionerPropsWithoutHTML>;
+export type DialogCloseProps = DialogClosePropsPrimitive & DialogCloseVariants;
+export {};

package/dist/primitives/dialog/types.js

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

package/dist/primitives/drawer/components/drawer.close.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Drawer } from 'vaul-svelte';
+  import type { DrawerCloseProps } from '../types.js';
+
+  let { class: className, children, ref = $bindable(null), ...restProps }: DrawerCloseProps = $props();
+</script>
+
+<Drawer.Close
+  bind:ref
+  class={cn(
+    'cgui:flex cgui:cursor-pointer cgui:items-center cgui:justify-center cgui:text-icon-regular cgui:disabled:cursor-not-allowed cgui:disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <Icon.Cross width={24} height={24} class="cgui:size-6" />
+  {/if}
+</Drawer.Close>

package/dist/primitives/drawer/components/drawer.close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer } from 'vaul-svelte';
+declare const Drawer: import("svelte").Component<Drawer.TriggerProps, {}, "ref">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;