@websline/system-components 0.0.2 → 0.0.3

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

@@ -1,10 +1,11 @@
 <script>
 	import { setContext } from "svelte";
-	import { tv } from "tailwind-variants";
+	import { formFieldVariants } from "./formField.variants.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 {boolean} [error=false] Whether the form field has an error
 	 * @property {string} [errorText=""] The error text for the form field
@@ -28,15 +29,6 @@
 		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,

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

@@ -4,6 +4,10 @@ type FormField = {
     $set?(props: Partial<Props>): void;
 };
 declare const FormField: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * Additional CSS classes for the form field
      */
@@ -38,6 +42,10 @@ declare const FormField: import("svelte").Component<{
     required?: boolean;
 }, {}, "">;
 type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * Additional CSS classes for the form field
      */

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

@@ -0,0 +1,13 @@
+export const formFieldVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        inline: string;
+    };
+}, undefined, "grid gap-2", {
+    layout: {
+        inline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    layout: {
+        inline: string;
+    };
+}, undefined, "grid gap-2", unknown, unknown, undefined>>;

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

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+
+const formFieldVariants = tv({
+	base: "grid gap-2",
+	variants: {
+		layout: {
+			inline: "sm:grid-cols-[minmax(120px,auto)_1fr] items-center",
+		},
+	},
+});
+
+export { formFieldVariants };

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

@@ -1,16 +1,15 @@
 <script>
-	import { tv } from "tailwind-variants";
+	import { helperTextVariants } from "./helperText.variants.js";
 
-	let { children, class: className = "", error = false } = $props();
+	/**
+	 * @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 {boolean} [error=false] Whether the helperText has an error
+	 */
 
-	const helperTextVariants = tv({
-		base: "body-extra-small text-neutral-500",
-		variants: {
-			error: {
-				true: "text-red-500",
-			},
-		},
-	});
+	/** @type {Props} */
+	let { children, class: className = "", error = false } = $props();
 </script>
 
 <p class={helperTextVariants({ class: className, error })}>

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

@@ -1,15 +1,33 @@
 export default HelperText;
 type HelperText = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
+    $set?(props: Partial<Props>): void;
 };
 declare const HelperText: import("svelte").Component<{
-    children: any;
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the form field
+     */
     class?: string;
+    /**
+     * Whether the helperText has an error
+     */
     error?: boolean;
 }, {}, "">;
-type $$ComponentProps = {
-    children: any;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the form field
+     */
     class?: string;
+    /**
+     * Whether the helperText has an error
+     */
     error?: boolean;
 };

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

@@ -0,0 +1,13 @@
+export const helperTextVariants: import("tailwind-variants").TVReturnType<{
+    error: {
+        true: string;
+    };
+}, undefined, "body-extra-small text-neutral-500", {
+    error: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: string;
+    };
+}, undefined, "body-extra-small text-neutral-500", unknown, unknown, undefined>>;

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

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+
+const helperTextVariants = tv({
+	base: "body-extra-small text-neutral-500",
+	variants: {
+		error: {
+			true: "text-red-500",
+		},
+	},
+});
+
+export { helperTextVariants };

package/dist/components/atoms/form/label/Label.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { tv } from "tailwind-variants";
+	import { labelVariants } from "./label.variants.js";
 
 	/**
 	 * @typedef {Object} Props
@@ -7,6 +7,7 @@
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {boolean} [error=false] Whether the label is in an error state
 	 * @property {boolean} [hidden=false] Whether the label should be visually hidden
+	 * @property {boolean} [required=false] Whether to show a required asterisk
 	 */
 
 	/** @type {Props} */
@@ -15,22 +16,13 @@
 		class: className = "",
 		hidden = false,
 		error = false,
+		required = false,
 		...rest
 	} = $props();
-
-	const labelVariants = tv({
-		base: "body-small text-neutral-500",
-		variants: {
-			error: {
-				true: "text-red-500",
-			},
-			hidden: {
-				true: "sr-only",
-			},
-		},
-	});
 </script>
 
 <label class={labelVariants({ class: className, hidden, error })} {...rest}>
-	{@render children?.()}
+	{@render children?.()}{#if required}<span aria-hidden="true" class="text-red-500"
+			>*</span
+		>{/if}
 </label>

package/dist/components/atoms/form/label/Label.svelte.d.ts

@@ -20,6 +20,10 @@ declare const Label: import("svelte").Component<{
      * Whether the label should be visually hidden
      */
     hidden?: boolean;
+    /**
+     * Whether to show a required asterisk
+     */
+    required?: boolean;
 }, {}, "">;
 type Props = {
     /**
@@ -38,4 +42,8 @@ type Props = {
      * Whether the label should be visually hidden
      */
     hidden?: boolean;
+    /**
+     * Whether to show a required asterisk
+     */
+    required?: boolean;
 };

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

@@ -0,0 +1,22 @@
+export const labelVariants: import("tailwind-variants").TVReturnType<{
+    error: {
+        true: string;
+    };
+    hidden: {
+        true: string;
+    };
+}, undefined, "body-small text-neutral-500", {
+    error: {
+        true: string;
+    };
+    hidden: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: string;
+    };
+    hidden: {
+        true: string;
+    };
+}, undefined, "body-small text-neutral-500", unknown, unknown, undefined>>;

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

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+
+const labelVariants = tv({
+	base: "body-small text-neutral-500",
+	variants: {
+		error: {
+			true: "text-red-500",
+		},
+		hidden: {
+			true: "sr-only",
+		},
+	},
+});
+
+export { labelVariants };

package/dist/components/atoms/form/radio/Radio.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { getContext } from "svelte";
+	import { radioVariants } from "./radio.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [checked=false] Wether this radio is checked or not, bound to the component
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the radio is disabled
+	 * @property {string} [id=""] The ID of the radio element
+	 * @property {string} [name] The name of the radio, used for form submission
+	 * @property {boolean} [required=false] Whether the radio is required
+	 * @property {string} [value=""] The value of the radio
+	 */
+
+	/** @type {Props} */
+	let {
+		checked = $bindable(),
+		class: className = "",
+		disabled = false,
+		id = "",
+		name,
+		required = false,
+		value = "",
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store");
+
+	let localValues = $derived.by(() => {
+		if (store) {
+			return {
+				...store(),
+			};
+		}
+
+		return {
+			id,
+			required,
+		};
+	});
+</script>
+
+<input
+	onchange={(e) => (checked = !checked ? e.target.checked : checked)}
+	{checked}
+	class={radioVariants({
+		checked,
+		class: className,
+		disabled,
+	})}
+	{disabled}
+	id={localValues.id}
+	{name}
+	required={localValues.required}
+	type="checkbox"
+	{value}
+	{...rest} />

package/dist/components/atoms/form/radio/Radio.svelte.d.ts

@@ -0,0 +1,65 @@
+export default Radio;
+type Radio = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Radio: import("svelte").Component<{
+    /**
+     * Wether this radio is checked or not, bound to the component
+     */
+    checked?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the radio element
+     */
+    id?: string;
+    /**
+     * The name of the radio, used for form submission
+     */
+    name?: string;
+    /**
+     * Whether the radio is required
+     */
+    required?: boolean;
+    /**
+     * The value of the radio
+     */
+    value?: string;
+}, {}, "checked">;
+type Props = {
+    /**
+     * Wether this radio is checked or not, bound to the component
+     */
+    checked?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the radio element
+     */
+    id?: string;
+    /**
+     * The name of the radio, used for form submission
+     */
+    name?: string;
+    /**
+     * Whether the radio is required
+     */
+    required?: boolean;
+    /**
+     * The value of the radio
+     */
+    value?: string;
+};

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

@@ -0,0 +1,22 @@
+export const radioVariants: import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "m-0.5 h-4 w-4 cursor-pointer appearance-none rounded-full border-0 bg-transparent ring-0 inset-ring-1 ring-transparent inset-ring-neutral-300 ring-offset-transparent outline-transparent duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:inset-ring-neutral-600", {
+    checked: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "m-0.5 h-4 w-4 cursor-pointer appearance-none rounded-full border-0 bg-transparent ring-0 inset-ring-1 ring-transparent inset-ring-neutral-300 ring-offset-transparent outline-transparent duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:inset-ring-neutral-600", unknown, unknown, undefined>>;

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

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+
+const radioVariants = tv({
+	base: "m-0.5 h-4 w-4 cursor-pointer appearance-none rounded-full border-0 bg-transparent ring-0 inset-ring-1 ring-transparent inset-ring-neutral-300 ring-offset-transparent outline-transparent duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:inset-ring-neutral-600",
+	variants: {
+		checked: {
+			true: "inset-ring-4 inset-ring-neutral-900 dark:inset-ring-neutral-600",
+		},
+		disabled: {
+			true: "cursor-not-allowed",
+		},
+	},
+});
+
+export { radioVariants };

package/dist/components/atoms/form/select/Select.svelte

@@ -0,0 +1,91 @@
+<script>
+	import { getContext } from "svelte";
+	import { selectVariants } from "./select.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes for the select
+	 * @property {boolean} [disabled=false] Whether the select field is disabled
+	 * @property {boolean} [error=false] Whether the select field has an error
+	 * @property {string} [id=""] The id attr of the select field
+	 * @property {{ disabled?: boolean, label: string, value: string }[]} [options=[]] required array of option objects for the select
+	 * @property {string} [placeholder=""] The placeholder text that shows when no option is preselected
+	 * @property {boolean} [required=false] Whether the select field is required
+	 * @property {string} [value=""] The value of the input, bound to the component
+	 */
+
+	/** @type {Props} */
+	let {
+		class: className = "",
+		disabled = false,
+		error = false,
+		id,
+		options = [],
+		placeholder = "",
+		required = false,
+		value = $bindable(),
+		...rest
+	} = $props();
+
+	let store = getContext("form-field-store");
+
+	let localValues = $derived.by(() => {
+		if (store) {
+			return {
+				...store(),
+			};
+		}
+
+		return {
+			id,
+			error,
+			required,
+		};
+	});
+
+	let styles = $derived(selectVariants());
+</script>
+
+<select
+	class={styles.select({
+		class: className,
+		disabled,
+		error: localValues.error,
+	})}
+	{disabled}
+	id={localValues.id}
+	required={localValues.required}
+	bind:value
+	{...rest}>
+	{#if placeholder}
+		<option class={styles.option({ disabled: true })} hidden readonly value=""
+			>{placeholder}</option>
+	{/if}
+	{#each options as { disabled, label, value: optValue } (optValue)}
+		<option
+			class={styles.option({ disabled })}
+			{disabled}
+			selected={value === optValue}
+			value={optValue}>{label}</option>
+	{/each}
+</select>
+
+<style>
+	select {
+		appearance: base-select;
+
+		&::picker(select) {
+			appearance: base-select;
+		}
+
+		&::after {
+			mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 25' fill='none'><path d='M18 9.5332L12 15.5332L6 9.5332' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+		}
+	}
+
+	option {
+		&::checkmark {
+			mask: url("data:image/svg+xml;utf8,<svg height='16' width='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20 6L9 19L4 13.0909' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /></svg>");
+		}
+	}
+</style>

package/dist/components/atoms/form/select/Select.svelte.d.ts

@@ -0,0 +1,81 @@
+export default Select;
+type Select = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Select: import("svelte").Component<{
+    /**
+     * Additional CSS classes for the select
+     */
+    class?: string;
+    /**
+     * Whether the select field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the select field has an error
+     */
+    error?: boolean;
+    /**
+     * The id attr of the select field
+     */
+    id?: string;
+    /**
+     * required array of option objects for the select
+     */
+    options?: {
+        disabled?: boolean;
+        label: string;
+        value: string;
+    }[];
+    /**
+     * The placeholder text that shows when no option is preselected
+     */
+    placeholder?: string;
+    /**
+     * Whether the select field is required
+     */
+    required?: boolean;
+    /**
+     * The value of the input, bound to the component
+     */
+    value?: string;
+}, {}, "value">;
+type Props = {
+    /**
+     * Additional CSS classes for the select
+     */
+    class?: string;
+    /**
+     * Whether the select field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the select field has an error
+     */
+    error?: boolean;
+    /**
+     * The id attr of the select field
+     */
+    id?: string;
+    /**
+     * required array of option objects for the select
+     */
+    options?: {
+        disabled?: boolean;
+        label: string;
+        value: string;
+    }[];
+    /**
+     * The placeholder text that shows when no option is preselected
+     */
+    placeholder?: string;
+    /**
+     * Whether the select field is required
+     */
+    required?: boolean;
+    /**
+     * The value of the input, bound to the component
+     */
+    value?: string;
+};

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

@@ -0,0 +1,58 @@
+export const selectVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            option: string;
+            select: string;
+        };
+        false: {
+            option: string;
+            select: string;
+        };
+    };
+    error: {
+        true: {
+            select: string;
+        };
+    };
+}, {
+    select: string;
+    option: string;
+}, undefined, {
+    disabled: {
+        true: {
+            option: string;
+            select: string;
+        };
+        false: {
+            option: string;
+            select: string;
+        };
+    };
+    error: {
+        true: {
+            select: string;
+        };
+    };
+}, {
+    select: string;
+    option: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            option: string;
+            select: string;
+        };
+        false: {
+            option: string;
+            select: string;
+        };
+    };
+    error: {
+        true: {
+            select: string;
+        };
+    };
+}, {
+    select: string;
+    option: string;
+}, undefined, unknown, unknown, undefined>>;