@websline/system-components 0.0.3 → 0.0.5

package/dist/components/organisms/dialog/DialogBody.svelte.d.ts

@@ -0,0 +1,25 @@
+export default DialogBody;
+type DialogBody = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogBody: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/organisms/dialog/DialogContent.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { dialogVariants } from "./dialog.variants.js";
+	import { Dialog } from "bits-ui";
+	import { fade, scale } from "svelte/transition";
+	import { quintOut } from "svelte/easing";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [closeOnEscape=false] Whether the dialog should close when the Escape key is pressed
+	 * @property {boolean} [closeOnOutsideClick=false] Whether the dialog should close when clicking outside of it
+	 * @property {string} [overlayClass=""] Additional CSS classes to apply to the overlay
+	 * @property {"sm" | "md" | "lg"} [size="sm"] The maximum size of the dialog content.
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className = "",
+		closeOnEscape = false,
+		closeOnOutsideClick = false,
+		overlayClass = "",
+		size = "sm",
+		...rest
+	} = $props();
+
+	let styles = $derived(dialogVariants({ size }));
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay class={styles.overlay({ class: overlayClass })}>
+		{#snippet child({ props, open })}
+			{#if open}
+				<div {...props} in:fade={{ duration: 150 }}></div>
+			{/if}
+		{/snippet}
+	</Dialog.Overlay>
+	<Dialog.Content
+		class={styles.container({ class: className })}
+		escapeKeydownBehavior={closeOnEscape ? "close" : "ignore"}
+		forceMount
+		interactOutsideBehavior={closeOnOutsideClick ? "close" : "ignore"}
+		{...rest}>
+		{#snippet child({ props, open })}
+			{#if open}
+				<div class={styles.positioner()}>
+					<section
+						{...props}
+						in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
+						{@render children?.()}
+					</section>
+				</div>
+			{/if}
+		{/snippet}
+	</Dialog.Content>
+</Dialog.Portal>

package/dist/components/organisms/dialog/DialogContent.svelte.d.ts

@@ -0,0 +1,57 @@
+export default DialogContent;
+type DialogContent = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogContent: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the dialog should close when the Escape key is pressed
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the dialog should close when clicking outside of it
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Additional CSS classes to apply to the overlay
+     */
+    overlayClass?: string;
+    /**
+     * The maximum size of the dialog content.
+     */
+    size?: "sm" | "md" | "lg";
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the dialog should close when the Escape key is pressed
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the dialog should close when clicking outside of it
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Additional CSS classes to apply to the overlay
+     */
+    overlayClass?: string;
+    /**
+     * The maximum size of the dialog content.
+     */
+    size?: "sm" | "md" | "lg";
+};

package/dist/components/organisms/dialog/DialogTrigger.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { Dialog } from "bits-ui";
+	import { dialogVariants } from "./dialog.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { class: className = "", ...rest } = $props();
+</script>
+
+<Dialog.Trigger class={dialogVariants().trigger({ class: className })} {...rest} />

package/dist/components/organisms/dialog/DialogTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+export default DialogTrigger;
+type DialogTrigger = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogTrigger: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/organisms/dialog/dialog.variants.d.ts

@@ -0,0 +1,85 @@
+export const dialogVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+        "2xl": {
+            container: string;
+        };
+        full: {
+            container: string;
+        };
+    };
+}, {
+    body: string;
+    container: string;
+    overlay: string;
+    positioner: string;
+    trigger: string;
+    formActions: string;
+}, undefined, {
+    size: {
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+        "2xl": {
+            container: string;
+        };
+        full: {
+            container: string;
+        };
+    };
+}, {
+    body: string;
+    container: string;
+    overlay: string;
+    positioner: string;
+    trigger: string;
+    formActions: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+        "2xl": {
+            container: string;
+        };
+        full: {
+            container: string;
+        };
+    };
+}, {
+    body: string;
+    container: string;
+    overlay: string;
+    positioner: string;
+    trigger: string;
+    formActions: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/organisms/dialog/dialog.variants.js

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+
+const dialogVariants = tv({
+	slots: {
+		body: "relative h-full overflow-auto",
+		container:
+			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[1fr_auto] gap-4 overflow-hidden rounded-lg bg-white px-4 py-3 leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
+		overlay: "fixed inset-0 bg-black/25",
+		positioner:
+			"fixed inset-0 z-1 grid items-center justify-items-center overflow-auto",
+		trigger: "cursor-pointer",
+		formActions: `
+      [&>[data-role=dismiss]]:order-1 [&>[data-role=dismiss]]:mr-auto
+      [&>[data-role=secondary]]:order-2
+      [&>[data-role=cta]]:order-3
+    `,
+	},
+	variants: {
+		size: {
+			sm: { container: "max-w-[480px]" },
+			md: { container: "max-w-[640px]" },
+			lg: { container: "max-w-[960px]" },
+			xl: { container: "max-w-[1280px]" },
+			"2xl": { container: "max-w-[1920px]" },
+			full: { container: "max-w-none" },
+		},
+	},
+});
+
+export { dialogVariants };

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

@@ -0,0 +1,7 @@
+import Root from "./Dialog.svelte";
+import Body from "./DialogBody.svelte";
+import Content from "./DialogContent.svelte";
+import Actions from "./DialogActions.svelte";
+import Action from "./DialogAction.svelte";
+import Trigger from "./DialogTrigger.svelte";
+export { Root, Body, Content, Actions, Action, Trigger };

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

@@ -0,0 +1,8 @@
+import Root from "./Dialog.svelte";
+import Body from "./DialogBody.svelte";
+import Content from "./DialogContent.svelte";
+import Actions from "./DialogActions.svelte";
+import Action from "./DialogAction.svelte";
+import Trigger from "./DialogTrigger.svelte";
+
+export { Root, Body, Content, Actions, Action, Trigger };

package/dist/components/organisms/modal/Modal.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { Dialog } from "bits-ui";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {(open: boolean) => void} [onOpenChange] Callback fired when the open state of the modal changes
+	 * @property {boolean} [open=false] Wether this modal is open or not, bound to the component
+	 */
+
+	/** @type {Props} */
+	let { children, onOpenChange, open = $bindable(false), ...rest } = $props();
+</script>
+
+<Dialog.Root bind:open {onOpenChange} {...rest}>
+	{@render children?.()}
+</Dialog.Root>

package/dist/components/organisms/modal/Modal.svelte.d.ts

@@ -0,0 +1,33 @@
+export default Modal;
+type Modal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Modal: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Callback fired when the open state of the modal changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Wether this modal is open or not, bound to the component
+     */
+    open?: boolean;
+}, {}, "open">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Callback fired when the open state of the modal changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Wether this modal is open or not, bound to the component
+     */
+    open?: boolean;
+};

package/dist/components/organisms/modal/ModalBody.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { modalVariants } from "./modal.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [noPadding=false] If true, removes the default padding from the modal body
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", noPadding = false, ...rest } = $props();
+
+	let styles = $derived(modalVariants());
+</script>
+
+<div class={styles.body({ class: className, noPadding })} {...rest}>
+	{@render children?.()}
+</div>

package/dist/components/organisms/modal/ModalBody.svelte.d.ts

@@ -0,0 +1,33 @@
+export default ModalBody;
+type ModalBody = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ModalBody: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * If true, removes the default padding from the modal body
+     */
+    noPadding?: boolean;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * If true, removes the default padding from the modal body
+     */
+    noPadding?: boolean;
+};

package/dist/components/organisms/modal/ModalContent.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { modalVariants } from "./modal.variants.js";
+	import { Dialog } from "bits-ui";
+	import { fade, scale } from "svelte/transition";
+	import { quintOut } from "svelte/easing";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [closeOnEscape=true] Whether the modal should close when the Escape key is pressed
+	 * @property {boolean} [closeOnOutsideClick=true] Whether the modal should close when clicking outside of it
+	 * @property {string} [overlayClass=""] Additional CSS classes to apply to the overlay
+	 * @property {"sm" | "md" | "lg" | "xl" | "2xl" | "full"} [size="md"] The maximum size of the modal content.
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className = "",
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		overlayClass = "",
+		size = "md",
+		...rest
+	} = $props();
+
+	let styles = $derived(modalVariants({ size }));
+	let ref = $state(null);
+
+	const handleAutoFocus = (e) => {
+		e.preventDefault();
+
+		// Focus the content element when the modal opens
+		const first = ref?.querySelector(
+			"input, select, textarea, button:not([data-dialog-close])",
+		);
+
+		if (first) first.focus();
+	};
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay class={styles.overlay({ class: overlayClass })}>
+		{#snippet child({ props, open })}
+			{#if open}
+				<div {...props} in:fade={{ duration: 150 }}></div>
+			{/if}
+		{/snippet}
+	</Dialog.Overlay>
+	<Dialog.Content
+		class={styles.container({ class: className })}
+		escapeKeydownBehavior={closeOnEscape ? "close" : "ignore"}
+		forceMount
+		interactOutsideBehavior={closeOnOutsideClick ? "close" : "ignore"}
+		onOpenAutoFocus={handleAutoFocus}
+		{...rest}>
+		{#snippet child({ props, open })}
+			{#if open}
+				<div class={styles.positioner()} bind:this={ref}>
+					<section
+						{...props}
+						in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
+						{@render children?.()}
+					</section>
+				</div>
+			{/if}
+		{/snippet}
+	</Dialog.Content>
+</Dialog.Portal>

package/dist/components/organisms/modal/ModalContent.svelte.d.ts

@@ -0,0 +1,57 @@
+export default ModalContent;
+type ModalContent = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ModalContent: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the modal should close when the Escape key is pressed
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the modal should close when clicking outside of it
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Additional CSS classes to apply to the overlay
+     */
+    overlayClass?: string;
+    /**
+     * The maximum size of the modal content.
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the modal should close when the Escape key is pressed
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the modal should close when clicking outside of it
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Additional CSS classes to apply to the overlay
+     */
+    overlayClass?: string;
+    /**
+     * The maximum size of the modal content.
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+};

package/dist/components/organisms/modal/ModalHeader.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { Dialog } from "bits-ui";
+	import { CloseButton } from "../../../index.js";
+	import { modalVariants } from "./modal.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [showClose=false] Whether to show a close icon in the header
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", showClose = true, ...rest } = $props();
+
+	let styles = $derived(modalVariants());
+</script>
+
+<header class={styles.header({ class: className })} {...rest}>
+	{@render children?.()}
+	{#if showClose}
+		<Dialog.Close class={styles.close()}>
+			{#snippet child({ props })}
+				<CloseButton {...props} />
+			{/snippet}
+		</Dialog.Close>
+	{/if}
+</header>

package/dist/components/organisms/modal/ModalHeader.svelte.d.ts

@@ -0,0 +1,33 @@
+export default ModalHeader;
+type ModalHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ModalHeader: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether to show a close icon in the header
+     */
+    showClose?: boolean;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether to show a close icon in the header
+     */
+    showClose?: boolean;
+};

package/dist/components/organisms/modal/ModalTrigger.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { Dialog } from "bits-ui";
+	import { modalVariants } from "./modal.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { class: className = "", ...rest } = $props();
+</script>
+
+<Dialog.Trigger class={modalVariants().trigger({ class: className })} {...rest} />

package/dist/components/organisms/modal/ModalTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+export default ModalTrigger;
+type ModalTrigger = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ModalTrigger: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/organisms/modal/index.d.ts

@@ -0,0 +1,6 @@
+import Root from "./Modal.svelte";
+import Body from "./ModalBody.svelte";
+import Header from "./ModalHeader.svelte";
+import Content from "./ModalContent.svelte";
+import Trigger from "./ModalTrigger.svelte";
+export { Root, Body, Header, Content, Trigger };

package/dist/components/organisms/modal/index.js

@@ -0,0 +1,7 @@
+import Root from "./Modal.svelte";
+import Body from "./ModalBody.svelte";
+import Header from "./ModalHeader.svelte";
+import Content from "./ModalContent.svelte";
+import Trigger from "./ModalTrigger.svelte";
+
+export { Root, Body, Header, Content, Trigger };