@websline/system-components 0.0.2 → 0.0.3

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

@@ -0,0 +1,66 @@
+import { tv } from "tailwind-variants";
+
+const selectVariants = tv({
+	slots: {
+		select: `
+			rounded px-4 pr-2 body-default bg-transparent min-h-10 w-full flex items-center
+			text-neutral-900 dark:text-neutral-200
+			outline-transparent transition-[border, outline, color] duration-300
+			
+			border border-neutral-500 bg-none
+			[&::picker(select)]:rounded
+			[&::picker(select)]:border-0
+			[&::picker(select)]:p-1
+			[&::picker(select)]:my-1
+			[&::picker(select)]:shadow-sm
+			[&::picker-icon]:hidden
+			dark:[&::picker(select)]:bg-neutral-800
+			[&::picker(select)]:bg-white
+			[&::after]:shrink-0
+			[&::after]:ml-auto
+			[&::after]:bg-no-repeat
+			[&::after]:bg-center
+			[&::after]:bg-size-[100%]
+			[&::after]:size-5
+			[&::after]:bg-current
+			[&::after]:content-[""]
+			[&:open::after]:rotate-180
+		`,
+		option: `
+			body-small p-2 rounded flex
+			[&::checkmark]:order-1
+			[&::checkmark]:shrink-0
+			[&::checkmark]:ml-auto
+			[&::checkmark]:content-[""]
+			[&::checkmark]:bg-no-repeat
+			[&::checkmark]:bg-center
+			[&::checkmark]:bg-size-[100%]
+			[&::checkmark]:size-4
+			[&::checkmark]:bg-current
+			bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-200
+			bg-linear-to-r to-transparent
+		`,
+	},
+	variants: {
+		disabled: {
+			true: {
+				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
+				select: "opacity-25",
+			},
+			false: {
+				option:
+					"cursor-pointer hover:from-neutral-1000/30 dark:hover:from-neutral-50/30",
+				select: `
+					hover:ring-current hover:border-current focus:ring-current focus:border-current 
+					focus:ring-1 hover:ring-1 focus:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 dark:focus:text-blue-400`,
+			},
+		},
+		error: {
+			true: {
+				select: "text-red-500 border-red-500 dark:text-red-500 dark:border-red-500",
+			},
+		},
+	},
+});
+
+export { selectVariants };

package/dist/components/atoms/form/switch/Switch.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { getContext } from "svelte";
+	import { switchVariants } from "./switch.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [checked=false] Wether this switch 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 switch is disabled
+	 * @property {string} [id=""] The ID of the switch element
+	 * @property {string} [name] The name of the switch, used for form submission
+	 * @property {boolean} [required=false] Whether the switch is required
+	 * @property {string} [value=""] The value of the switch
+	 */
+
+	/** @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
+	bind:checked
+	class={switchVariants({
+		checked,
+		class: className,
+		disabled,
+	})}
+	{disabled}
+	id={localValues.id}
+	{name}
+	required={localValues.required}
+	type="checkbox"
+	{value}
+	{...rest} />

package/dist/components/atoms/form/switch/Switch.svelte.d.ts

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

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

@@ -0,0 +1,22 @@
+export const switchVariants: import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "relative h-4 w-7 cursor-pointer appearance-none rounded-full border-0 bg-neutral-300 ring-inherit ring-offset-transparent outline-transparent transition-[outline] after:absolute after:top-0 after:left-0 after:m-0.25 after:h-3.5 after:w-3.5 after:translate-x-0 after:rounded-full after:bg-neutral-200 after:shadow-toggle after:transition-transform after:duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-500 dark:bg-neutral-300 dark:after:bg-neutral-300 dark:focus:outline-blue-300", {
+    checked: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "relative h-4 w-7 cursor-pointer appearance-none rounded-full border-0 bg-neutral-300 ring-inherit ring-offset-transparent outline-transparent transition-[outline] after:absolute after:top-0 after:left-0 after:m-0.25 after:h-3.5 after:w-3.5 after:translate-x-0 after:rounded-full after:bg-neutral-200 after:shadow-toggle after:transition-transform after:duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-500 dark:bg-neutral-300 dark:after:bg-neutral-300 dark:focus:outline-blue-300", unknown, unknown, undefined>>;

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

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+
+const switchVariants = tv({
+	base: "relative h-4 w-7 cursor-pointer appearance-none rounded-full border-0 bg-neutral-300 ring-inherit ring-offset-transparent outline-transparent transition-[outline] after:absolute after:top-0 after:left-0 after:m-0.25 after:h-3.5 after:w-3.5 after:translate-x-0 after:rounded-full after:bg-neutral-200 after:shadow-toggle after:transition-transform after:duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-500 dark:bg-neutral-300 dark:after:bg-neutral-300 dark:focus:outline-blue-300",
+	variants: {
+		checked: {
+			true: "bg-blue-500 after:translate-x-3 dark:bg-blue-400",
+		},
+		disabled: {
+			true: "cursor-not-allowed bg-neutral-300",
+		},
+	},
+});
+
+export { switchVariants };

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

@@ -27,15 +27,22 @@
 {#if !Comp}
 	<span
 		aria-hidden="true"
+		class={`cms-icon cms-icon--missing ${className}`}
 		style={`display: inline-block; height: ${wh}; width: ${wh};`}></span>
 {:else}
 	<Comp
 		aria-hidden={title ? undefined : "true"}
 		aria-label={title || undefined}
-		class={className}
+		class={`cms-icon ${className}`}
 		{color}
 		height={wh}
 		role={title ? "img" : undefined}
 		{strokeWidth}
 		width={wh} />
 {/if}
+
+<style>
+	:global(.cms-icon path) {
+		vector-effect: non-scaling-stroke;
+	}
+</style>

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

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

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

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

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

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

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

package/dist/components/atoms/icon/components/ChevronDown.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="M18 9L12 15L6 9"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default ChevronDown;
+type ChevronDown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ChevronDown: 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/CloseSmall.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="M7 7L17 17M7 17L17 7"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default CloseSmall;
+type CloseSmall = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const CloseSmall: 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/Page.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="M8 10H16M8 14H16M4 3C4 2.44771 4.44771 2 5 2H15L20 7V21C20 21.5523 19.5523 22 19 22H5C4.44771 22 4 21.5523 4 21V3Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default Page;
+type Page = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Page: 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/Redo.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="M18.364 18.364C16.7353 19.9927 14.4853 21 12 21C7.02945 21 3 16.9706 3 12C3 7.02945 7.02945 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63605C19.193 6.46505 21 8.5 21 8.5M21 8.5V4M21 8.5H16.5"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

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