@websline/system-components 0.0.1

package/dist/components/atoms/form/formField/FormField.svelte

@@ -0,0 +1,69 @@
+<script>
+	import { setContext } from "svelte";
+	import { tv } from "tailwind-variants";
+	import { HelperText, Label } from "../../../../index.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes for the form field
+	 * @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
+	 * @property {string} [id=""] The id attribute for the form field
+	 * @property {string} [label=""] The label text for the form field
+	 * @property {"stacked" | "inline"} [layout="stacked"] The layout of the input and label
+	 * @property {boolean} [required=false] Whether the form field is required
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		error = false,
+		errorText,
+		helperText,
+		id,
+		label,
+		layout = "stacked",
+		required = false,
+	} = $props();
+
+	const formFieldVariants = tv({
+		base: "grid gap-2",
+		variants: {
+			layout: {
+				inline: "sm:grid-cols-[minmax(120px,auto)_1fr] items-center",
+			},
+		},
+	});
+
+	setContext("form-field-store", () => {
+		return {
+			error,
+			id,
+			required,
+		};
+	});
+
+	let localHelperText = $derived.by(() => {
+		if (error && errorText) {
+			return errorText;
+		}
+
+		return helperText;
+	});
+</script>
+
+<div class={formFieldVariants({ class: className, layout })}>
+	{#if label}
+		<Label for={id} {error}>{label}{required ? " *" : ""}</Label>
+	{/if}
+
+	{@render children?.()}
+
+	{#if localHelperText}
+		<HelperText class={layout === "inline" ? "sm:col-[2]" : ""} {error}>
+			{localHelperText}
+		</HelperText>
+	{/if}
+</div>

package/dist/components/atoms/form/formField/FormField.svelte.d.ts

@@ -0,0 +1,73 @@
+export default FormField;
+type FormField = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FormField: import("svelte").Component<{
+    /**
+     * Additional CSS classes for the form field
+     */
+    class?: string;
+    /**
+     * Whether the form field has an error
+     */
+    error?: boolean;
+    /**
+     * The error text for the form field
+     */
+    errorText?: string;
+    /**
+     * The helper text for the form field
+     */
+    helperText?: string;
+    /**
+     * The id attribute for the form field
+     */
+    id?: string;
+    /**
+     * The label text for the form field
+     */
+    label?: string;
+    /**
+     * The layout of the input and label
+     */
+    layout?: "stacked" | "inline";
+    /**
+     * Whether the form field is required
+     */
+    required?: boolean;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes for the form field
+     */
+    class?: string;
+    /**
+     * Whether the form field has an error
+     */
+    error?: boolean;
+    /**
+     * The error text for the form field
+     */
+    errorText?: string;
+    /**
+     * The helper text for the form field
+     */
+    helperText?: string;
+    /**
+     * The id attribute for the form field
+     */
+    id?: string;
+    /**
+     * The label text for the form field
+     */
+    label?: string;
+    /**
+     * The layout of the input and label
+     */
+    layout?: "stacked" | "inline";
+    /**
+     * Whether the form field is required
+     */
+    required?: boolean;
+};

package/dist/components/atoms/form/helperText/HelperText.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { tv } from "tailwind-variants";
+
+	let { children, class: className = "", error = false } = $props();
+
+	const helperTextVariants = tv({
+		base: "body-extra-small text-neutral-500",
+		variants: {
+			error: {
+				true: "text-red-500",
+			},
+		},
+	});
+</script>
+
+<p class={helperTextVariants({ class: className, error })}>
+	{@render children?.()}
+</p>

package/dist/components/atoms/form/helperText/HelperText.svelte.d.ts

@@ -0,0 +1,15 @@
+export default HelperText;
+type HelperText = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const HelperText: import("svelte").Component<{
+    children: any;
+    class?: string;
+    error?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    children: any;
+    class?: string;
+    error?: boolean;
+};

package/dist/components/atoms/form/iconButton/IconButton.svelte

@@ -0,0 +1,69 @@
+<script>
+	import { Icon, Spinner } from "../../../../index.js";
+	import { iconButtonVariants } from "./iconButton.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [as="button"] The HTML element to use for the button
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {"primary" | "secondary" | "success" | "danger"} [color="primary"] Button color
+	 * @property {boolean} [disabled=false] Whether the button is disabled
+	 * @property {boolean} [loading=false] Whether the button is in a loading state, for example after a form submission
+	 * @property {string} [icon=""] Icon name
+	 * @property {"circle" | "square"} [shape="round"] Button shape
+	 * @property {"small" | "medium" | "large"} [size="medium"] Button size
+	 * @property {string} [type="button"] Button type, e.g. "button", "submit", "reset"
+	 * @property {"filled" | "outlined" | "transparent"} [variant="filled"] Button style
+	 */
+
+	/** @type {Props} */
+	let {
+		as = "button",
+		class: className = "",
+		color = "primary",
+		disabled = false,
+		icon = "",
+		loading = false,
+		shape = "circle",
+		size = "medium",
+		type = "button",
+		variant = "filled",
+		...rest
+	} = $props();
+
+	let isButton = $derived(as === "button");
+
+	let tagSpecificProps = $derived.by(() => {
+		if (isButton) {
+			return {
+				disabled: disabled || loading,
+				type,
+			};
+		}
+
+		return {
+			"aria-disabled": disabled || loading ? "true" : undefined,
+		};
+	});
+</script>
+
+<svelte:element
+	this={as}
+	aria-busy={loading}
+	class={iconButtonVariants({
+		color,
+		class: className,
+		disabled,
+		loading,
+		shape,
+		size,
+		variant,
+	})}
+	{...tagSpecificProps}
+	{...rest}>
+	{#if loading}
+		<Spinner size="small" />
+	{:else}
+		<Icon name={icon} size={size === "large" ? 24 : 16} />
+	{/if}
+</svelte:element>

package/dist/components/atoms/form/iconButton/IconButton.svelte.d.ts

@@ -0,0 +1,89 @@
+export default IconButton;
+type IconButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const IconButton: import("svelte").Component<{
+    /**
+     * The HTML element to use for the button
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Button color
+     */
+    color?: "primary" | "secondary" | "success" | "danger";
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in a loading state, for example after a form submission
+     */
+    loading?: boolean;
+    /**
+     * Icon name
+     */
+    icon?: string;
+    /**
+     * Button shape
+     */
+    shape?: "circle" | "square";
+    /**
+     * Button size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button type, e.g. "button", "submit", "reset"
+     */
+    type?: string;
+    /**
+     * Button style
+     */
+    variant?: "filled" | "outlined" | "transparent";
+}, {}, "">;
+type Props = {
+    /**
+     * The HTML element to use for the button
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Button color
+     */
+    color?: "primary" | "secondary" | "success" | "danger";
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is in a loading state, for example after a form submission
+     */
+    loading?: boolean;
+    /**
+     * Icon name
+     */
+    icon?: string;
+    /**
+     * Button shape
+     */
+    shape?: "circle" | "square";
+    /**
+     * Button size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button type, e.g. "button", "submit", "reset"
+     */
+    type?: string;
+    /**
+     * Button style
+     */
+    variant?: "filled" | "outlined" | "transparent";
+};

package/dist/components/atoms/form/iconButton/iconButton.variants.d.ts

@@ -0,0 +1,64 @@
+export const iconButtonVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        filled: string;
+        outlined: string;
+        transparent: string;
+    };
+}, undefined, "inline-flex cursor-pointer transition duration-200 select-none", {
+    disabled: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        filled: string;
+        outlined: string;
+        transparent: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    variant: {
+        filled: string;
+        outlined: string;
+        transparent: string;
+    };
+}, undefined, "inline-flex cursor-pointer transition duration-200 select-none", unknown, unknown, undefined>>;

package/dist/components/atoms/form/iconButton/iconButton.variants.js

@@ -0,0 +1,91 @@
+import { tv } from "tailwind-variants";
+
+const iconButtonVariants = tv({
+	base: "inline-flex cursor-pointer transition duration-200 select-none",
+	variants: {
+		disabled: {
+			true: "opacity-40 pointer-events-none",
+		},
+		loading: {
+			true: "pointer-events-none",
+		},
+		shape: {
+			circle: "rounded-full",
+			square: "rounded-sm",
+		},
+		size: {
+			small: "p-0.75",
+			medium: "p-1.75",
+			large: "p-2.75",
+		},
+		variant: {
+			filled: "border-transparent border-1",
+			outlined: "border-1",
+			transparent: "border-transparent border-1",
+		},
+	},
+	compoundVariants: [
+		{
+			color: "primary",
+			variant: "filled",
+			class:
+				"bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-400 dark:hover:bg-blue-500",
+		},
+		{
+			color: "primary",
+			variant: "outlined",
+			class:
+				"text-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 hover:text-white dark:text-blue-400 dark:border-blue-400 dark:hover:bg-blue-500 dark:hover:border-blue-500",
+		},
+		{
+			color: "secondary",
+			variant: "filled",
+			class:
+				"bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-500 dark:hover:text-white",
+		},
+		{
+			color: "secondary",
+			variant: "outlined",
+			class:
+				"text-neutral-900 hover:bg-neutral-900 hover:text-white hover:border-neutral-900 dark:border-white dark:text-white dark:hover:bg-neutral-200 dark:hover:border-neutral-200 dark:hover:text-inherit",
+		},
+		{
+			color: "success",
+			variant: "filled",
+			class:
+				"bg-green-500 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-700",
+		},
+		{
+			color: "success",
+			variant: "outlined",
+			class:
+				"text-green-500 border-green-500 hover:bg-green-700 hover:border-green-700 hover:text-white dark:text-green-500 dark:border-green-500 dark:hover:bg-green-700 dark:hover:border-green-700",
+		},
+		{
+			color: "danger",
+			variant: "filled",
+			class:
+				"bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700",
+		},
+		{
+			color: "danger",
+			variant: "outlined",
+			class:
+				"text-red-500 border-red-500 hover:bg-red-700 hover:border-red-700 hover:text-white dark:text-red-500 dark:border-red-500 dark:hover:bg-red-700 dark:hover:border-red-700",
+		},
+		{
+			shape: "square",
+			variant: "transparent",
+			class:
+				"bg-transparent hover:bg-neutral-300 dark:text-white dark:hover:bg-neutral-700",
+		},
+		{
+			shape: "square",
+			variant: "filled",
+			class:
+				"bg-neutral-100 hover:bg-neutral-300 text-neutral-900 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700",
+		},
+	],
+});
+
+export { iconButtonVariants };

package/dist/components/atoms/form/input/Input.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { getContext } from "svelte";
+	import { inputVariants } from "./input.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the input is disabled
+	 * @property {boolean} [error=false] Whether the input has an error state
+	 * @property {string} [id=""] The ID of the input element
+	 * @property {string} [name] The name of the input, used for form submission
+	 * @property {string} [placeholder=""] Placeholder text for the input
+	 * @property {boolean} [readonly=false] Whether the input is read-only
+	 * @property {boolean} [required=false] Whether the input is required
+	 * @property {string} [type="text"] The type of the input, e.g. "text", "password", "email"
+	 * @property {string} [value=""] The value of the input, bound to the component
+	 */
+
+	/** @type {Props} */
+	let {
+		class: className = "",
+		disabled = false,
+		error = false,
+		id = "",
+		name,
+		placeholder = "",
+		readonly = false,
+		required = false,
+		type = "text",
+		value = $bindable(),
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store");
+
+	let localValues = $derived.by(() => {
+		if (store) {
+			return {
+				...store(),
+			};
+		}
+
+		return {
+			id,
+			error,
+			required,
+		};
+	});
+</script>
+
+<input
+	class={inputVariants({
+		class: className,
+		disabled,
+		error: localValues.error,
+	})}
+	{disabled}
+	id={localValues.id}
+	{name}
+	{placeholder}
+	{readonly}
+	required={localValues.required}
+	{type}
+	{...rest}
+	bind:value />

package/dist/components/atoms/form/input/Input.svelte.d.ts

@@ -0,0 +1,89 @@
+export default Input;
+type Input = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Input: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input has an error state
+     */
+    error?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is read-only
+     */
+    readonly?: boolean;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * The type of the input, e.g. "text", "password", "email"
+     */
+    type?: string;
+    /**
+     * The value of the input, bound to the component
+     */
+    value?: string;
+}, {}, "value">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input has an error state
+     */
+    error?: boolean;
+    /**
+     * The ID of the input element
+     */
+    id?: string;
+    /**
+     * The name of the input, used for form submission
+     */
+    name?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is read-only
+     */
+    readonly?: boolean;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * The type of the input, e.g. "text", "password", "email"
+     */
+    type?: string;
+    /**
+     * The value of the input, bound to the component
+     */
+    value?: string;
+};

package/dist/components/atoms/form/input/input.variants.d.ts

@@ -0,0 +1,22 @@
+export const inputVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+}, undefined, "rounded px-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 h-10 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white", {
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+}, undefined, "rounded px-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 h-10 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white", unknown, unknown, undefined>>;

package/dist/components/atoms/form/input/input.variants.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+
+const inputVariants = tv({
+	base: "rounded px-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 h-10 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white",
+	variants: {
+		disabled: {
+			true: "cursor-not-allowed opacity-50",
+		},
+		error: {
+			true: "border border-red-500 outline focus:ring-red-500 focus:border-red-500 outline-red-500 text-red-500",
+		},
+	},
+});
+
+export { inputVariants };