@websline/system-components 0.0.1

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

@@ -0,0 +1,36 @@
+<script>
+	import { tv } from "tailwind-variants";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [children] The content of the label
+	 * @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
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className = "",
+		hidden = false,
+		error = 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?.()}
+</label>

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

@@ -0,0 +1,41 @@
+export default Label;
+type Label = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Label: import("svelte").Component<{
+    /**
+     * The content of the label
+     */
+    children?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the label is in an error state
+     */
+    error?: boolean;
+    /**
+     * Whether the label should be visually hidden
+     */
+    hidden?: boolean;
+}, {}, "">;
+type Props = {
+    /**
+     * The content of the label
+     */
+    children?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the label is in an error state
+     */
+    error?: boolean;
+    /**
+     * Whether the label should be visually hidden
+     */
+    hidden?: boolean;
+};

package/dist/components/atoms/form/textarea/Textarea.svelte

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

package/dist/components/atoms/form/textarea/Textarea.svelte.d.ts

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

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

@@ -0,0 +1,37 @@
+export const textareaVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "rounded p-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 resize-none dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white", {
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "rounded p-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 resize-none dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white", unknown, unknown, undefined>>;

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

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants";
+
+const textareaVariants = tv({
+	base: "rounded p-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 resize-none 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",
+		},
+		size: {
+			small: "h-30",
+			medium: "h-42",
+			large: "h-80",
+		},
+	},
+});
+
+export { textareaVariants };

package/dist/components/atoms/icon/Icon.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { registry } from "./index.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [color=""] Icon color
+	 * @property {string} [name=""] Icon name
+	 * @property {number} [size=24] Icon size
+	 * @property {number} [strokeWidth=1.5] Icon stroke width
+	 * @property {string} [title=""] Icon title
+	 */
+
+	let {
+		class: className = "",
+		color = "currentColor",
+		name = "",
+		size = 24,
+		strokeWidth = 1.5,
+		title = "",
+	} = $props();
+
+	let Comp = $derived(registry[name]);
+	let wh = $derived(typeof size === "number" ? `${size}px` : size);
+</script>
+
+{#if !Comp}
+	<span
+		aria-hidden="true"
+		style={`display: inline-block; height: ${wh}; width: ${wh};`}></span>
+{:else}
+	<Comp
+		aria-hidden={title ? undefined : "true"}
+		aria-label={title || undefined}
+		class={className}
+		{color}
+		height={wh}
+		role={title ? "img" : undefined}
+		{strokeWidth}
+		width={wh} />
+{/if}

package/dist/components/atoms/icon/Icon.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Icon;
+type Icon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Icon: import("svelte").Component<{
+    class?: string;
+    color?: string;
+    name?: string;
+    size?: number;
+    strokeWidth?: number;
+    title?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    color?: string;
+    name?: string;
+    size?: number;
+    strokeWidth?: number;
+    title?: string;
+};

package/dist/components/atoms/icon/components/Academy.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M23 8.53868V13.4577M6.00008 10.8401V17.4756C6.00008 17.4756 8.517 20 12.0001 20C15.4832 20 18.0001 17.4756 18.0001 17.4756V10.8401M1 8.48001L12 4L23 8.48001L12 12.96L1 8.48001Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Academy.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Academy;
+type Academy = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Academy: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Bold.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M6 12V3H12.2258C14.8625 3 17 5.01472 17 7.5C17 9.98526 14.8625 12 12.2258 12H6ZM6 12H14.2002C16.8511 12 19 14.0147 19 16.5C19 18.9853 16.8511 21 14.2002 21H6V12Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Bold.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Bold;
+type Bold = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Bold: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Close.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M4 4L20 20M4 20L20 4"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Close.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Close;
+type Close = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Close: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Italic.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, strokeWidth, width, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M10 4H18M6 20H14M15 4L10 20"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Italic.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Italic;
+type Italic = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Italic: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Link.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M15 10H10C7.79085 10 6 11.7908 6 14C6 16.2092 7.79085 18 10 18H18C20.2092 18 22 16.2092 22 14C22 12.9856 21.6223 12.0593 21 11.3542M3 12.6458C2.37764 11.9407 2 11.0144 2 10C2 7.79085 3.79086 6 6 6H14C16.2092 6 18 7.79085 18 10C18 12.2092 16.2092 14 14 14H9"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>