@websline/system-components 0.0.2 → 0.0.4

package/dist/components/atoms/icon/components/Undo.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="M5.63605 18.364C7.2647 19.9927 9.5147 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02945 16.9706 3 12 3C9.5147 3 7.2647 4.00736 5.63605 5.63605C4.80704 6.46505 3 8.5 3 8.5M3 8.5V4.5M3 8.5H7"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

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

@@ -1,20 +1,34 @@
 export namespace registry {
     export { Academy as academy };
+    export { Add as add };
     export { Bold as bold };
+    export { Check as check };
+    export { ChevronDown as chevronDown };
     export { Close as close };
+    export { CloseSmall as closeSmall };
     export { Italic as italic };
     export { Link as link };
     export { ListOrdered as listOrdered };
     export { ListUnordered as listUnordered };
+    export { Page as page };
+    export { Redo as redo };
     export { Refresh as refresh };
     export { Underline as underline };
+    export { Undo as undo };
 }
 import Academy from "./components/Academy.svelte";
+import Add from "./components/Add.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 Italic from "./components/Italic.svelte";
 import Link from "./components/Link.svelte";
 import ListOrdered from "./components/ListOrdered.svelte";
 import ListUnordered from "./components/ListUnordered.svelte";
+import Page from "./components/Page.svelte";
+import Redo from "./components/Redo.svelte";
 import Refresh from "./components/Refresh.svelte";
 import Underline from "./components/Underline.svelte";
+import Undo from "./components/Undo.svelte";

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

@@ -1,21 +1,35 @@
 import Academy from "./components/Academy.svelte";
+import Add from "./components/Add.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 Italic from "./components/Italic.svelte";
 import Link from "./components/Link.svelte";
 import ListOrdered from "./components/ListOrdered.svelte";
 import ListUnordered from "./components/ListUnordered.svelte";
+import Page from "./components/Page.svelte";
+import Redo from "./components/Redo.svelte";
 import Refresh from "./components/Refresh.svelte";
 import Underline from "./components/Underline.svelte";
+import Undo from "./components/Undo.svelte";
 
 export const registry = {
 	academy: Academy,
+	add: Add,
 	bold: Bold,
+	check: Check,
+	chevronDown: ChevronDown,
 	close: Close,
+	closeSmall: CloseSmall,
 	italic: Italic,
 	link: Link,
 	listOrdered: ListOrdered,
 	listUnordered: ListUnordered,
+	page: Page,
+	redo: Redo,
 	refresh: Refresh,
 	underline: Underline,
+	undo: Undo,
 };

package/dist/components/molecules/navigationItem/NavigationItem.svelte

@@ -0,0 +1,80 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { fly } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import { navigationItemVariants } from "./navigationItem.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [as="a"] The HTML element to use for the navigation item
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the navigation item is disabled
+	 * @property {boolean} [hasAlert=false] Whether the navigation item has an alert
+	 * @property {string} [href=""] The URL the navigation item links to
+	 * @property {string} [icon=""] The name of the icon to display
+	 * @property {string} [label=""] The label of the navigation item
+	 * @property {boolean} [selected=false] Whether the navigation item is selected
+	 * @property {"_self" | "_blank" | "_parent" | "_top"} [target="_self"] The target attribute for the link
+	 */
+
+	/** @type {Props} */
+	let {
+		as = "a",
+		class: className = "",
+		disabled = false,
+		hasAlert = false,
+		href = "",
+		icon = "",
+		label = "",
+		selected = false,
+		target = "_self",
+		...rest
+	} = $props();
+
+	let styles = $derived(navigationItemVariants({ disabled }));
+	let hideTimer;
+
+	let showLabel = $state(false);
+
+	function enter() {
+		clearTimeout(hideTimer);
+		showLabel = true;
+	}
+
+	function leave() {
+		clearTimeout(hideTimer);
+		hideTimer = setTimeout(() => (showLabel = false), 50);
+	}
+</script>
+
+<svelte:element
+	this={as}
+	class={styles.base({ class: className })}
+	{href}
+	onmouseenter={enter}
+	onmouseleave={leave}
+	{target}
+	{...rest}>
+	{#if icon}
+		<div class={styles.icon({ hasAlert, selected })}>
+			<Icon name={icon} />
+		</div>
+	{/if}
+	{#if label && showLabel}
+		<span
+			class={styles.label()}
+			in:fly={{
+				x: -32,
+				y: 0,
+				duration: 300,
+				delay: 0,
+				easing: cubicOut,
+			}}
+			out:fly={{
+				x: -32,
+				y: 0,
+				duration: 300,
+				delay: 0,
+			}}>{label}</span>
+	{/if}
+</svelte:element>

package/dist/components/molecules/navigationItem/NavigationItem.svelte.d.ts

@@ -0,0 +1,81 @@
+export default NavigationItem;
+type NavigationItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const NavigationItem: import("svelte").Component<{
+    /**
+     * The HTML element to use for the navigation item
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the navigation item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the navigation item has an alert
+     */
+    hasAlert?: boolean;
+    /**
+     * The URL the navigation item links to
+     */
+    href?: string;
+    /**
+     * The name of the icon to display
+     */
+    icon?: string;
+    /**
+     * The label of the navigation item
+     */
+    label?: string;
+    /**
+     * Whether the navigation item is selected
+     */
+    selected?: boolean;
+    /**
+     * The target attribute for the link
+     */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+}, {}, "">;
+type Props = {
+    /**
+     * The HTML element to use for the navigation item
+     */
+    as?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the navigation item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the navigation item has an alert
+     */
+    hasAlert?: boolean;
+    /**
+     * The URL the navigation item links to
+     */
+    href?: string;
+    /**
+     * The name of the icon to display
+     */
+    icon?: string;
+    /**
+     * The label of the navigation item
+     */
+    label?: string;
+    /**
+     * Whether the navigation item is selected
+     */
+    selected?: boolean;
+    /**
+     * The target attribute for the link
+     */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+};

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

@@ -0,0 +1,61 @@
+export const navigationItemVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    hasAlert: {
+        true: {
+            icon: string;
+        };
+    };
+    selected: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    label: string;
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    hasAlert: {
+        true: {
+            icon: string;
+        };
+    };
+    selected: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    hasAlert: {
+        true: {
+            icon: string;
+        };
+    };
+    selected: {
+        true: {
+            icon: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+
+const navigationItemVariants = tv({
+	slots: {
+		base: "inline-flex relative cursor-pointer select-none hover:pr-2 hover:[&>div]:bg-neutral-100 dark:hover:[&>div]:bg-neutral-700 dark:text-white",
+		icon: "bg-white dark:bg-neutral-900 p-2.5 rounded-sm transition duration-200 relative z-2",
+		label:
+			"body-small shadow-[0_2px_16px_0_rgba(0,_0,_0,_0.08)] px-2.5 flex items-center rounded-sm left-12 h-full absolute z-1",
+	},
+	variants: {
+		disabled: {
+			true: {
+				base: "opacity-40 pointer-events-none",
+			},
+		},
+		hasAlert: {
+			true: {
+				icon: "after:content-[''] after:absolute after:top-1 after:right-1 after:w-2 after:h-2 after:rounded-full after:bg-blue-500 dark:after:bg-blue-400",
+			},
+		},
+		selected: {
+			true: {
+				icon: "bg-neutral-300 dark:bg-neutral-700",
+			},
+		},
+	},
+});
+
+export { navigationItemVariants };

package/dist/components/molecules/notification/Notification.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <div class={styles.base({ class: className })}>
-	<div class={styles.icon({ variant })}>
+	<div class={styles.icon()}>
 		<Icon name={icon} />
 	</div>
 	<div class={styles.content()}>

package/dist/components/molecules/pickers/colorSwatch/ColorSwatch.svelte

@@ -0,0 +1,99 @@
+<script>
+	import { Icon, Popover, utils } from "../../../../index.js";
+	import { colorSwatchVariants } from "./colorSwatch.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [children] The color items
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {string} [selectedColor=""] Selected color value (hex, rgb, etc.)
+	 * @property {"small" | "medium" | "large"} [size="medium"] ColorSwatch size
+	 * @property {"text" | "background"} [type="text"] letter "A" for text -> "B" for background
+	 * @property {"filled" | "transparent"} [variant="transparent"] ColorSwatch style
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		isOpen = $bindable(false),
+		selectedColor = "#ffffff",
+		size = "medium",
+		type = "text",
+		variant = "transparent",
+	} = $props();
+
+	let styles = $derived(colorSwatchVariants({ isOpen, size, variant }));
+
+	let calculatedColors = $derived.by(() => {
+		let contrast = utils.getContrastColor(selectedColor);
+
+		return {
+			foreground: contrast,
+			background: selectedColor,
+		};
+	});
+
+	let style = $derived(() => {
+		let showBorder = utils.shouldShowBorder(
+			calculatedColors.background,
+			utils.theme.background,
+		);
+
+		return `
+			background-color: ${calculatedColors.background};
+			border: 1px solid ${showBorder ? "#000" : calculatedColors.background};
+			color: ${calculatedColors.foreground};
+		`;
+	});
+
+	let contentEl;
+</script>
+
+{#snippet content()}
+	{#if type === "text"}
+		<svg
+			width="8"
+			height="8"
+			viewBox="0 0 8 8"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M0.544922 7.85039V7.74039L3.25092 0.150391H4.75792L7.45292 7.74039V7.85039H6.56192L5.92392 6.04639H2.06292L1.43592 7.85039H0.544922ZM2.35992 5.22139H5.63792L4.10892 0.876391H3.87792L2.35992 5.22139Z"
+				fill="currentColor" />
+		</svg>
+	{/if}
+{/snippet}
+
+<Popover.Root open={isOpen} onOpenChange={(open) => (isOpen = open)}>
+	<Popover.Trigger>
+		<button class={styles.base({ class: className })}>
+			<div class={styles.iconText()} style={style()}>
+				{@render content()}
+			</div>
+			<div class={styles.iconArrow()}>
+				<Icon name="chevronDown" size={16} />
+			</div>
+		</button>
+	</Popover.Trigger>
+	<Popover.Content
+		onOpenAutoFocus={(e) => {
+			e.preventDefault();
+
+			if (contentEl) {
+				let targetEl = contentEl.querySelectorAll(
+					`button[data-color="${selectedColor}"]`,
+				)[0];
+
+				if (targetEl) {
+					targetEl.focus();
+				} else {
+					contentEl.querySelector("button")?.focus();
+				}
+			}
+		}}>
+		<div class="grid grid-cols-5 gap-1" bind:this={contentEl}>
+			{@render children()}
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/molecules/pickers/colorSwatch/ColorSwatch.svelte.d.ts

@@ -0,0 +1,57 @@
+export default ColorSwatch;
+type ColorSwatch = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ColorSwatch: import("svelte").Component<{
+    /**
+     * The color items
+     */
+    children?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Selected color value (hex, rgb, etc.)
+     */
+    selectedColor?: string;
+    /**
+     * ColorSwatch size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * letter "A" for text -> "B" for background
+     */
+    type?: "text" | "background";
+    /**
+     * ColorSwatch style
+     */
+    variant?: "filled" | "transparent";
+}, {}, "isOpen">;
+type Props = {
+    /**
+     * The color items
+     */
+    children?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Selected color value (hex, rgb, etc.)
+     */
+    selectedColor?: string;
+    /**
+     * ColorSwatch size
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * letter "A" for text -> "B" for background
+     */
+    type?: "text" | "background";
+    /**
+     * ColorSwatch style
+     */
+    variant?: "filled" | "transparent";
+};

package/dist/components/molecules/pickers/colorSwatch/ColorSwatchColor.svelte

@@ -0,0 +1,13 @@
+<script>
+	import { ColorChip, utils } from "../../../../index.js";
+
+	let { color, ...rest } = $props();
+
+	let showBorder = $derived(utils.shouldShowBorder(color, utils.theme.background));
+</script>
+
+<ColorChip
+	borderColor={showBorder ? "#dadad8" : null}
+	{color}
+	data-color={color}
+	{...rest} />

package/dist/components/molecules/pickers/colorSwatch/ColorSwatchColor.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ColorSwatchColor;
+type ColorSwatchColor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ColorSwatchColor: import("svelte").Component<{
+    color: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    color: any;
+} & Record<string, any>;

package/dist/components/molecules/pickers/colorSwatch/colorSwatch.variants.d.ts

@@ -0,0 +1,49 @@
+export const colorSwatchVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    iconText: string;
+    iconArrow: string;
+}, undefined, {
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    iconText: string;
+    iconArrow: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    iconText: string;
+    iconArrow: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/pickers/colorSwatch/colorSwatch.variants.js

@@ -0,0 +1,46 @@
+import { tv } from "tailwind-variants";
+
+const colorSwatchVariants = tv({
+	slots: {
+		base: "hover:bg-neutral-300 dark:hover:bg-neutral-700 flex items-center justify-center rounded cursor-pointer gap-1 transition duration-200 select-none cursor-pointer",
+		iconText: "flex items-center justify-center h-4 w-4 rounded",
+		iconArrow: "dark:text-white",
+	},
+	variants: {
+		size: {
+			small: {
+				base: "p-1",
+			},
+			medium: {
+				base: "p-2",
+			},
+			large: {
+				base: "p-4",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			variant: "filled",
+			class: {
+				base: "bg-neutral-100 dark:bg-neutral-900",
+			},
+		},
+		{
+			variant: "transparent",
+			isOpen: true,
+			class: {
+				base: "bg-transparent",
+			},
+		},
+		{
+			variant: "transparent",
+			isOpen: true,
+			class: {
+				base: "bg-neutral-100 dark:bg-neutral-800",
+			},
+		},
+	],
+});
+
+export { colorSwatchVariants };

package/dist/components/molecules/pickers/colorSwatch/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./ColorSwatch.svelte";
+import Color from "./ColorSwatchColor.svelte";
+export { Root, Color };

package/dist/components/molecules/pickers/colorSwatch/index.js

@@ -0,0 +1,4 @@
+import Root from "./ColorSwatch.svelte";
+import Color from "./ColorSwatchColor.svelte";
+
+export { Root, Color };