@websline/system-components 0.0.4 → 0.0.6

package/dist/components/atoms/icon/index.js

@@ -1,35 +1,65 @@
 import Academy from "./components/Academy.svelte";
 import Add from "./components/Add.svelte";
+import Attach from "./components/Attach.svelte";
+import Block from "./components/Block.svelte";
 import Bold from "./components/Bold.svelte";
 import Check from "./components/Check.svelte";
 import ChevronDown from "./components/ChevronDown.svelte";
 import Close from "./components/Close.svelte";
 import CloseSmall from "./components/CloseSmall.svelte";
+import Cogs from "./components/Cogs.svelte";
+import Controlling from "./components/Controlling.svelte";
+import Dashboard from "./components/Dashboard.svelte";
+import Database from "./components/Database.svelte";
+import Dragger from "./components/Dragger.svelte";
+import Globe from "./components/Globe.svelte";
 import Italic from "./components/Italic.svelte";
+import Layout from "./components/Layout.svelte";
 import Link from "./components/Link.svelte";
 import ListOrdered from "./components/ListOrdered.svelte";
 import ListUnordered from "./components/ListUnordered.svelte";
+import Menu from "./components/Menu.svelte";
+import Notifications from "./components/Notifications.svelte";
 import Page from "./components/Page.svelte";
+import Picture from "./components/Picture.svelte";
 import Redo from "./components/Redo.svelte";
 import Refresh from "./components/Refresh.svelte";
+import Search from "./components/Search.svelte";
+import Settings from "./components/Settings.svelte";
+import Trash from "./components/Trash.svelte";
 import Underline from "./components/Underline.svelte";
 import Undo from "./components/Undo.svelte";
 
 export const registry = {
 	academy: Academy,
 	add: Add,
+	attach: Attach,
+	block: Block,
 	bold: Bold,
 	check: Check,
 	chevronDown: ChevronDown,
 	close: Close,
 	closeSmall: CloseSmall,
+	cogs: Cogs,
+	controlling: Controlling,
+	dashboard: Dashboard,
+	database: Database,
+	dragger: Dragger,
+	globe: Globe,
 	italic: Italic,
+	layout: Layout,
 	link: Link,
 	listOrdered: ListOrdered,
 	listUnordered: ListUnordered,
+	menu: Menu,
+	notifications: Notifications,
 	page: Page,
+	picture: Picture,
 	redo: Redo,
 	refresh: Refresh,
+	search: Search,
+	settings: Settings,
+	trash: Trash,
 	underline: Underline,
 	undo: Undo,
 };

package/dist/components/molecules/formActions/formActions.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { formActionsVariants } from "./formActions.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} [customLayout=false] If true, the default layout is disabled
+	 * @property {boolean} [fullWidth=false] If true, the form actions will take the full width of its container
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		customLayout = false,
+		fullWidth = false,
+	} = $props();
+</script>
+
+<div
+	class={formActionsVariants({ class: className, customLayout, fullWidth })}
+	data-form-actions>
+	{@render children?.()}
+</div>

package/dist/components/molecules/formActions/formActions.svelte.d.ts

@@ -0,0 +1,41 @@
+export default FormActions;
+type FormActions = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FormActions: 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, the default layout is disabled
+     */
+    customLayout?: boolean;
+    /**
+     * If true, the form actions will take the full width of its container
+     */
+    fullWidth?: 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, the default layout is disabled
+     */
+    customLayout?: boolean;
+    /**
+     * If true, the form actions will take the full width of its container
+     */
+    fullWidth?: boolean;
+};

package/dist/components/molecules/formActions/formActions.variants.d.ts

@@ -0,0 +1,22 @@
+export const formActionsVariants: import("tailwind-variants").TVReturnType<{
+    customLayout: {
+        false: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "flex items-center justify-end gap-2", {
+    customLayout: {
+        false: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    customLayout: {
+        false: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "flex items-center justify-end gap-2", unknown, unknown, undefined>>;

package/dist/components/molecules/formActions/formActions.variants.js

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+
+const formActionsVariants = tv({
+	base: "flex items-center justify-end gap-2",
+	variants: {
+		customLayout: {
+			false:
+				"[&:has(>button:nth-of-type(3):last-of-type)>button:first-of-type]:mr-auto",
+		},
+		fullWidth: {
+			true: "[&>*]:w-full [&>*]:justify-center",
+		},
+	},
+});
+
+export { formActionsVariants };

package/dist/components/{atoms/form → molecules}/formField/FormField.svelte

@@ -1,12 +1,12 @@
 <script>
 	import { setContext } from "svelte";
 	import { formFieldVariants } from "./formField.variants.js";
-	import { HelperText, Label } from "../../../../index.js";
+	import { HelperText, Label } from "../../../index.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 for the form field
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {boolean} [error=false] Whether the form field has an error
 	 * @property {string} [errorText=""] The error text for the form field
 	 * @property {string} [helperText=""] The helper text for the form field

package/dist/components/{atoms/form → molecules}/formField/FormField.svelte.d.ts

@@ -9,7 +9,7 @@ declare const FormField: import("svelte").Component<{
      */
     children?: import("svelte").Snippet;
     /**
-     * Additional CSS classes for the form field
+     * Additional CSS classes to apply to the component
      */
     class?: string;
     /**
@@ -47,7 +47,7 @@ type Props = {
      */
     children?: import("svelte").Snippet;
     /**
-     * Additional CSS classes for the form field
+     * Additional CSS classes to apply to the component
      */
     class?: string;
     /**

package/dist/components/molecules/formLayout/FormLayout.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { formLayoutVariants } from "./formLayout.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 {0|1|2|3|4|6|8} [gap=2] Gap between form elements (in Tailwind spacing scale)
+	 */
+
+	/** @type {Props} */
+	let { children, class: className, gap = 2 } = $props();
+</script>
+
+<div class={formLayoutVariants({ class: className, gap })}>
+	{@render children?.()}
+</div>

package/dist/components/molecules/formLayout/FormLayout.svelte.d.ts

@@ -0,0 +1,33 @@
+export default FormLayout;
+type FormLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FormLayout: 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;
+    /**
+     * Gap between form elements (in Tailwind spacing scale)
+     */
+    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+}, {}, "">;
+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;
+    /**
+     * Gap between form elements (in Tailwind spacing scale)
+     */
+    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+};

package/dist/components/molecules/formLayout/formLayout.variants.d.ts

@@ -0,0 +1,31 @@
+export const formLayoutVariants: import("tailwind-variants").TVReturnType<{
+    gap: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+}, undefined, "grid gap-2 [&>[data-form-actions]]:mt-4", {
+    gap: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    gap: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+}, undefined, "grid gap-2 [&>[data-form-actions]]:mt-4", unknown, unknown, undefined>>;

package/dist/components/molecules/formLayout/formLayout.variants.js

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+
+const formLayoutVariants = tv({
+	base: "grid gap-2 [&>[data-form-actions]]:mt-4",
+	variants: {
+		gap: {
+			0: "gap-0",
+			1: "gap-1",
+			2: "gap-2",
+			3: "gap-3",
+			4: "gap-4",
+			6: "gap-6",
+			8: "gap-8",
+		},
+	},
+});
+
+export { formLayoutVariants };

package/dist/components/organisms/dialog/Dialog.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 dialog changes
+	 * @property {boolean} [open=false] Wether this dialog 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/dialog/Dialog.svelte.d.ts

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

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

@@ -0,0 +1,72 @@
+<script>
+	import { Dialog } from "bits-ui";
+	import { Button } from "../../../index.js";
+
+	/**
+	 * Defines the semantic role of the button within a dialog.
+	 *
+	 * - "cta": The primary call-to-action. Represents the main decision the dialog is asking for.
+	 *   This can be constructive (e.g. "Save") or destructive (e.g. "Delete").
+	 *   There should be only one CTA per dialog.
+	 *
+	 * - "secondary": An alternative but relevant option besides the main action.
+	 *   Example: "Don't save" in a save confirmation dialog.
+	 *   Use only when the dialog provides more than two choices.
+	 *
+	 * - "dismiss": A cancel/close action that simply exits the dialog without
+	 *   committing to any of the main or secondary actions. Typically labeled
+	 *   "Cancel" or "Close". Should always be visually de-emphasized.
+	 *
+	 * Default: "cta"
+	 */
+
+	/**
+	 * @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 {"cta" | "secondary" | "dismiss"} [role="cta"] Semantic role of the button within a dialog
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className = "",
+		color = "secondary",
+		role = "cta",
+		...rest
+	} = $props();
+
+	let buttonProps = $derived.by(
+		() =>
+			({
+				cta: {
+					color,
+					tabIndex: 3,
+					variant: "filled",
+				},
+				secondary: {
+					tabIndex: 2,
+					variant: "outlined",
+				},
+				dismiss: {
+					tabIndex: 1,
+					variant: "text",
+				},
+			})[role] || {
+				variant: "filled",
+			},
+	);
+</script>
+
+<Dialog.Close
+	class={className}
+	color="secondary"
+	data-role={role}
+	size="large"
+	{...rest}>
+	{#snippet child({ props })}
+		<Button {...props} {...buttonProps}>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Dialog.Close>

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

@@ -0,0 +1,33 @@
+export default DialogAction;
+type DialogAction = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogAction: 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;
+    /**
+     * Semantic role of the button within a dialog
+     */
+    role?: "cta" | "secondary" | "dismiss";
+}, {}, "">;
+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;
+    /**
+     * Semantic role of the button within a dialog
+     */
+    role?: "cta" | "secondary" | "dismiss";
+};

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

@@ -0,0 +1,19 @@
+<script>
+	import { FormActions } from "../../../index.js";
+	import { dialogVariants } from "./dialog.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
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "" } = $props();
+
+	let styles = $derived(dialogVariants());
+</script>
+
+<FormActions class={styles.formActions({ class: className })} customLayout>
+	{@render children?.()}
+</FormActions>

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

@@ -0,0 +1,25 @@
+export default DialogActions;
+type DialogActions = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogActions: 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/DialogBody.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { dialogVariants } from "./dialog.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
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", ...rest } = $props();
+
+	let styles = $derived(dialogVariants());
+</script>
+
+<div class={styles.body({ class: className })} {...rest}>
+	{@render children?.()}
+</div>

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";
+};