@websline/system-components 0.0.2 → 0.0.4

package/dist/components/molecules/selectorCard/SelectorCard.svelte.d.ts

@@ -0,0 +1,105 @@
+export default SelectorCard;
+type SelectorCard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const SelectorCard: import("svelte").Component<{
+    /**
+     * Wether this card is checked or not, bound to the component
+     */
+    checked?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the card is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the form field has an error
+     */
+    error?: boolean;
+    /**
+     * The error text for the form field
+     */
+    errorText?: string;
+    /**
+     * The helper text for the card
+     */
+    helperText?: string;
+    /**
+     * The ID of the card element
+     */
+    id?: string;
+    /**
+     * Label to display in the card
+     */
+    label?: string;
+    /**
+     * The name of the card, used for form submission
+     */
+    name?: string;
+    /**
+     * Whether the card is required
+     */
+    required?: boolean;
+    /**
+     * The type of card
+     */
+    type?: "radio" | "switch";
+    /**
+     * The value of the card
+     */
+    value?: string;
+}, {}, "checked">;
+type Props = {
+    /**
+     * Wether this card is checked or not, bound to the component
+     */
+    checked?: boolean;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the card is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the form field has an error
+     */
+    error?: boolean;
+    /**
+     * The error text for the form field
+     */
+    errorText?: string;
+    /**
+     * The helper text for the card
+     */
+    helperText?: string;
+    /**
+     * The ID of the card element
+     */
+    id?: string;
+    /**
+     * Label to display in the card
+     */
+    label?: string;
+    /**
+     * The name of the card, used for form submission
+     */
+    name?: string;
+    /**
+     * Whether the card is required
+     */
+    required?: boolean;
+    /**
+     * The type of card
+     */
+    type?: "radio" | "switch";
+    /**
+     * The value of the card
+     */
+    value?: string;
+};

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

@@ -0,0 +1,61 @@
+export const selectorCardVariants: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+        };
+    };
+    type: {
+        switch: string;
+    };
+}, {
+    base: string;
+    content: string;
+    helperText: string;
+    input: string;
+    label: string;
+}, undefined, {
+    disabled: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+        };
+    };
+    type: {
+        switch: string;
+    };
+}, {
+    base: string;
+    content: string;
+    helperText: string;
+    input: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: string;
+        false: string;
+    };
+    error: {
+        true: {
+            base: string;
+            label: string;
+        };
+    };
+    type: {
+        switch: string;
+    };
+}, {
+    base: string;
+    content: string;
+    helperText: string;
+    input: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+
+const selectorCardVariants = tv({
+	slots: {
+		base: "flex cursor-pointer gap-3 rounded-sm border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
+		content: "flex grow flex-col items-start gap-1",
+		helperText: "body-small text-neutral-500",
+		input: "shrink-0",
+		label: "cursor-[inherit] heading-h6 text-neutral-900 dark:text-neutral-200",
+	},
+	variants: {
+		disabled: {
+			true: "cursor-not-allowed opacity-40 dark:opacity-60",
+			false:
+				"transition-[border,outline] duration-300 hover:border-blue-500 hover:outline-1 hover:outline-blue-500 dark:hover:border-blue-400 dark:hover:outline-blue-400",
+		},
+		error: {
+			true: {
+				base: "!border-red-500 outline-1 !outline-red-500",
+				label: "text-red-500 dark:text-red-500",
+			},
+		},
+		type: {
+			switch: "items-center",
+		},
+	},
+	compoundVariants: [
+		{ type: "radio", checked: true, class: "bg-neutral-100 dark:bg-neutral-700" },
+	],
+});
+
+export { selectorCardVariants };

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte

@@ -10,6 +10,7 @@
 	/**
 	 * @typedef {Object} Props
 	 * @property {"default" | "raised"} [appearance="default"] The appearance variant of the component
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {"small" | "medium"} [size="medium"] The size variant of the component
 	 * @property {string} [value=""] The value of the toggle group

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte.d.ts

@@ -8,6 +8,10 @@ declare const ToggleGroup: import("svelte").Component<{
      * The appearance variant of the component
      */
     appearance?: "default" | "raised";
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * Additional CSS classes to apply to the component
      */
@@ -30,6 +34,10 @@ type Props = {
      * The appearance variant of the component
      */
     appearance?: "default" | "raised";
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * Additional CSS classes to apply to the component
      */

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -7,6 +7,7 @@
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {string} [value=""] The value of the toggle group item
 	 */

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte.d.ts

@@ -4,6 +4,10 @@ type ToggleGroupItem = {
     $set?(props: Partial<Props>): void;
 };
 declare const ToggleGroupItem: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * Additional CSS classes to apply to the component
      */
@@ -14,6 +18,10 @@ declare const ToggleGroupItem: import("svelte").Component<{
     value?: string;
 }, {}, "">;
 type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
     /**
      * Additional CSS classes to apply to the component
      */

package/dist/components/organisms/notificationGroup/NotificationGroup.svelte

@@ -26,7 +26,7 @@
 	let dataBottomLeft = $state([]);
 	let dataBottomRight = $state([]);
 
-	let { bottomLeft, bottomRight } = notificationGroupVariants();
+	let { bottomLeft, bottomRight } = $derived(notificationGroupVariants());
 
 	const MOVE_MS = 400;
 	const IN_MS = 220;

package/dist/components/organisms/popover/Popover.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { Popover } from "bits-ui";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 */
+
+	/** @type {Props} */
+	let { children, ...rest } = $props();
+</script>
+
+<Popover.Root {...rest}>
+	{@render children()}
+</Popover.Root>

package/dist/components/organisms/popover/Popover.svelte.d.ts

@@ -0,0 +1,18 @@
+export default Popover;
+type Popover = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Popover: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+}, {}, "">;
+import { Popover } from "bits-ui";
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+};

package/dist/components/organisms/popover/PopoverContent.svelte

@@ -0,0 +1,84 @@
+<script>
+	import { Popover } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { quintOut } from "svelte/easing";
+	import { CloseButton } from "../../../index.js";
+	import { popoverVariants } from "./popover.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {"start" | "center" | "end"} [align="center"] The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.
+	 * @property {number} [alignOffset=0] The distance in pixels from the anchor to the floating element.
+	 * @property {boolean} [preventScroll=false] When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.
+	 * @property {boolean} [portalDisabled=false] Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
+	 * @property {string} [portalTarget='body'] Where to render the content when it is open. Defaults to the body.
+	 * @property {boolean} [showClose=false] Whether to show a close button in the popover header.
+	 * @property {"top" | "right" | "bottom" | "left"} [side="bottom"] The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
+	 * @property {number} [sideOffset=8] The distance in pixels from the anchor to the floating element.
+	 * @property {string} [title=''] The title text to display in the popover header.
+	 */
+
+	/** @type {Props} */
+	let {
+		align = "center",
+		alignOffset = 0,
+		children,
+		preventScroll = false,
+		portalDisabled = false,
+		portalTarget = "body",
+		showClose = false,
+		side = "bottom",
+		sideOffset = 8,
+		title = "",
+		...rest
+	} = $props();
+
+	let styles = $derived(popoverVariants());
+
+	let showHeader = $derived(showClose === true || title !== "");
+</script>
+
+{#snippet header()}
+	{#if showHeader}
+		<header class={styles.header()}>
+			{title}
+			{@render close()}
+		</header>
+	{/if}
+{/snippet}
+
+{#snippet close()}
+	{#if showClose}
+		<Popover.Close>
+			{#snippet child({ props })}
+				<CloseButton class={styles.close()} {...props} />
+			{/snippet}
+		</Popover.Close>
+	{/if}
+{/snippet}
+
+<Popover.Portal disabled={portalDisabled} to={portalTarget}>
+	<Popover.Content
+		{align}
+		{alignOffset}
+		class={styles.content()}
+		forceMount
+		{preventScroll}
+		{side}
+		{sideOffset}
+		{...rest}>
+		{#snippet child({ wrapperProps, props, open })}
+			{#if open}
+				<div {...wrapperProps}>
+					<div {...props} in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
+						<div class={styles.body()}>
+							{@render children()}
+						</div>
+						{@render header()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</Popover.Content>
+</Popover.Portal>

package/dist/components/organisms/popover/PopoverContent.svelte.d.ts

@@ -0,0 +1,89 @@
+export default PopoverContent;
+type PopoverContent = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const PopoverContent: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * The distance in pixels from the anchor to the floating element.
+     */
+    alignOffset?: number;
+    /**
+     * When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.
+     */
+    preventScroll?: boolean;
+    /**
+     * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
+     */
+    portalDisabled?: boolean;
+    /**
+     * Where to render the content when it is open. Defaults to the body.
+     */
+    portalTarget?: string;
+    /**
+     * Whether to show a close button in the popover header.
+     */
+    showClose?: boolean;
+    /**
+     * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The distance in pixels from the anchor to the floating element.
+     */
+    sideOffset?: number;
+    /**
+     * The title text to display in the popover header.
+     */
+    title?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * The distance in pixels from the anchor to the floating element.
+     */
+    alignOffset?: number;
+    /**
+     * When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.
+     */
+    preventScroll?: boolean;
+    /**
+     * Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
+     */
+    portalDisabled?: boolean;
+    /**
+     * Where to render the content when it is open. Defaults to the body.
+     */
+    portalTarget?: string;
+    /**
+     * Whether to show a close button in the popover header.
+     */
+    showClose?: boolean;
+    /**
+     * The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The distance in pixels from the anchor to the floating element.
+     */
+    sideOffset?: number;
+    /**
+     * The title text to display in the popover header.
+     */
+    title?: string;
+};

package/dist/components/organisms/popover/PopoverTrigger.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { Popover } from "bits-ui";
+	import { popoverVariants } from "./popover.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { class: className = "", ...rest } = $props();
+</script>
+
+<Popover.Trigger class={popoverVariants().trigger({ class: className })} {...rest} />

package/dist/components/{atoms/closeButton/CloseButton.svelte.d.ts → organisms/popover/PopoverTrigger.svelte.d.ts}

@@ -1,25 +1,17 @@
-export default CloseButton;
-type CloseButton = {
+export default PopoverTrigger;
+type PopoverTrigger = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const CloseButton: import("svelte").Component<{
+declare const PopoverTrigger: import("svelte").Component<{
     /**
      * Additional CSS classes to apply to the component
      */
     class?: string;
-    /**
-     * Button shape
-     */
-    shape?: "circle" | "square";
 }, {}, "">;
 type Props = {
     /**
      * Additional CSS classes to apply to the component
      */
     class?: string;
-    /**
-     * Button shape
-     */
-    shape?: "circle" | "square";
 };

package/dist/components/organisms/popover/index.d.ts

@@ -0,0 +1,4 @@
+import Root from "./Popover.svelte";
+import Trigger from "./PopoverTrigger.svelte";
+import Content from "./PopoverContent.svelte";
+export { Root, Trigger, Content };

package/dist/components/organisms/popover/index.js

@@ -0,0 +1,5 @@
+import Root from "./Popover.svelte";
+import Trigger from "./PopoverTrigger.svelte";
+import Content from "./PopoverContent.svelte";
+
+export { Root, Trigger, Content };

package/dist/components/organisms/popover/popover.variants.d.ts

@@ -0,0 +1,39 @@
+export const popoverVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    body: string;
+    close: string;
+    content: string;
+    header: string;
+    trigger: string;
+}, undefined, any, {
+    body: string;
+    close: string;
+    content: string;
+    header: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<any, {
+    body: string;
+    close: string;
+    content: string;
+    header: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/organisms/popover/popover.variants.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+
+const popoverVariants = tv({
+	slots: {
+		body: "p-3",
+		close: "ml-auto",
+		content:
+			"bg-white dark:bg-neutral-800 rounded-2xl flex flex-col-reverse shadow-sm",
+		header:
+			"p-3 border-b border-gray-300 heading-h6 flex items-center justify-between gap-3 dark:text-neutral-200",
+		trigger: "cursor-pointer",
+	},
+});
+
+export { popoverVariants };

package/dist/index.d.ts

@@ -1,17 +1,27 @@
 export * as utils from "./utils/index.js";
 export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
-export { default as Button } from "./components/atoms/form/button/Button.svelte";
-export { default as CloseButton } from "./components/atoms/closeButton/CloseButton.svelte";
+export { default as Badge } from "./components/atoms/badge/Badge.svelte";
+export { default as Button } from "./components/atoms/actions/button/Button.svelte";
+export { default as Chip } from "./components/atoms/chip/Chip.svelte";
+export { default as CloseButton } from "./components/atoms/actions/closeButton/CloseButton.svelte";
+export { default as ColorChip } from "./components/atoms/colorChip/ColorChip.svelte";
 export { default as FormField } from "./components/atoms/form/formField/FormField.svelte";
 export { default as HelperText } from "./components/atoms/form/helperText/HelperText.svelte";
 export { default as Icon } from "./components/atoms/icon/Icon.svelte";
-export { default as IconButton } from "./components/atoms/form/iconButton/IconButton.svelte";
+export { default as IconButton } from "./components/atoms/actions/iconButton/IconButton.svelte";
 export { default as Input } from "./components/atoms/form/input/Input.svelte";
 export { default as Label } from "./components/atoms/form/label/Label.svelte";
-export { default as Spinner } from "./components/atoms/loading/spinner/Spinner.svelte";
+export { default as Radio } from "./components/atoms/form/radio/Radio.svelte";
+export { default as Select } from "./components/atoms/form/select/Select.svelte";
+export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
+export { default as Switch } from "./components/atoms/form/switch/Switch.svelte";
 export { default as Textarea } from "./components/atoms/form/textarea/Textarea.svelte";
+export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
+export { default as NavigationItem } from "./components/molecules/navigationItem/NavigationItem.svelte";
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
+export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";
+export * as Popover from "./components/organisms/popover/index.js";

package/dist/index.js

@@ -5,23 +5,32 @@ export * as utils from "./utils/index.js";
  */
 
 export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
-export { default as Button } from "./components/atoms/form/button/Button.svelte";
-export { default as CloseButton } from "./components/atoms/closeButton/CloseButton.svelte";
+export { default as Badge } from "./components/atoms/badge/Badge.svelte";
+export { default as Button } from "./components/atoms/actions/button/Button.svelte";
+export { default as Chip } from "./components/atoms/chip/Chip.svelte";
+export { default as CloseButton } from "./components/atoms/actions/closeButton/CloseButton.svelte";
+export { default as ColorChip } from "./components/atoms/colorChip/ColorChip.svelte";
 export { default as FormField } from "./components/atoms/form/formField/FormField.svelte";
 export { default as HelperText } from "./components/atoms/form/helperText/HelperText.svelte";
 export { default as Icon } from "./components/atoms/icon/Icon.svelte";
-export { default as IconButton } from "./components/atoms/form/iconButton/IconButton.svelte";
+export { default as IconButton } from "./components/atoms/actions/iconButton/IconButton.svelte";
 export { default as Input } from "./components/atoms/form/input/Input.svelte";
 export { default as Label } from "./components/atoms/form/label/Label.svelte";
-export { default as Spinner } from "./components/atoms/loading/spinner/Spinner.svelte";
+export { default as Radio } from "./components/atoms/form/radio/Radio.svelte";
+export { default as Select } from "./components/atoms/form/select/Select.svelte";
+export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
+export { default as Switch } from "./components/atoms/form/switch/Switch.svelte";
 export { default as Textarea } from "./components/atoms/form/textarea/Textarea.svelte";
 
 /**
  * Molecules
  */
 
+export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
+export { default as NavigationItem } from "./components/molecules/navigationItem/NavigationItem.svelte";
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
+export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
 
@@ -30,3 +39,4 @@ export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/T
  */
 
 export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";
+export * as Popover from "./components/organisms/popover/index.js";