fluid-ui-svelte 0.0.7 → 0.0.8

package/dist/primitives/TableData.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { type HTMLTdAttributes } from "svelte/elements";
+	const {
+		class: className,
+		overrideDefaultStyling = false,
+		children,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} & HTMLTdAttributes = $props();
+</script>
+
+<td {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table-data") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	{@render children()}
+</td>

package/dist/primitives/TableData.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import { type HTMLTdAttributes } from "svelte/elements";
+declare const TableData: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+} & HTMLTdAttributes, {}, "">;
+export default TableData;

package/dist/primitives/TableFooter.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	const {
+		class: className,
+		overrideDefaultStyling = false,
+		children,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<tfoot {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table-footer") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	{@render children()}
+</tfoot>

package/dist/primitives/TableFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+declare const TableFooter: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+}, {}, "">;
+export default TableFooter;

package/dist/primitives/TableHead.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { type HTMLThAttributes } from "svelte/elements";
+	const {
+		class: className,
+		overrideDefaultStyling = false,
+		children,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} & HTMLThAttributes = $props();
+</script>
+
+<th {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table-head") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	{@render children()}
+</th>

package/dist/primitives/TableHead.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import { type HTMLThAttributes } from "svelte/elements";
+declare const TableHead: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+} & HTMLThAttributes, {}, "">;
+export default TableHead;

package/dist/primitives/TableHeader.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	const {
+		class: className,
+		overrideDefaultStyling = false,
+		children,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<thead {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table-header") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	{@render children()}
+</thead>

package/dist/primitives/TableHeader.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+declare const TableHeader: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+}, {}, "">;
+export default TableHeader;

package/dist/primitives/TableRow.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { type HTMLAttributes } from "svelte/elements";
+	const {
+		class: className,
+		overrideDefaultStyling = false,
+		children,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		children: Snippet;
+	} & HTMLAttributes<HTMLTableRowElement> = $props();
+</script>
+
+<tr {...restProps} class={(overrideDefaultStyling ? "" : "fluid-table-row") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+	{@render children()}
+</tr>

package/dist/primitives/TableRow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import { type HTMLAttributes } from "svelte/elements";
+declare const TableRow: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    children: Snippet;
+} & HTMLAttributes<HTMLTableRowElement>, {}, "">;
+export default TableRow;

package/dist/primitives/Text.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { type HTMLAttributes } from "svelte/elements";
+
+	const {
+		textType = "p",
+		class: className = "",
+		overrideDefaultStyling = false,
+		textValue,
+		...restProps
+	}: {
+		textType?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+		textValue: string;
+		overrideDefaultStyling?: boolean;
+		class?: string;
+	} & HTMLAttributes<HTMLElement> = $props();
+</script>
+
+{#if textType == "p"}
+	<p {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-p") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</p>
+{:else if textType == "h1"}
+	<h1 {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-h1") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</h1>
+{:else if textType == "h2"}
+	<h2 {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-h2") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</h2>
+{:else if textType == "h3"}
+	<h3 {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-h3") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</h3>
+{:else if textType == "h4"}
+	<h4 {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-h4") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</h4>
+{:else if textType == "h5"}
+	<h5 {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-h5") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</h5>
+{:else if textType == "h6"}
+	<h6 {...restProps} class={(overrideDefaultStyling ? "" : "fluid-text fluid-h6") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}>
+		{textValue}
+	</h6>
+{/if}

package/dist/primitives/Text.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from "svelte/elements";
+declare const Text: import("svelte").Component<{
+    textType?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    textValue: string;
+    overrideDefaultStyling?: boolean;
+    class?: string;
+} & HTMLAttributes<HTMLElement>, {}, "">;
+export default Text;

package/dist/primitives/TextArea.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type HTMLTextareaAttributes } from "svelte/elements";
+	let {
+		class: className,
+		value = $bindable(),
+		overrideDefaultStyling = false,
+		...restProps
+	}: {
+		class?: string;
+		overrideDefaultStyling?: boolean;
+		value: any;
+	} & Omit<HTMLTextareaAttributes, "value"> = $props();
+</script>
+
+<textarea {...restProps} bind:value class={(overrideDefaultStyling ? "" : "fluid-text-area") + (className ? (overrideDefaultStyling ? `${className}` : ` ${className}`) : "")}></textarea>

package/dist/primitives/TextArea.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLTextareaAttributes } from "svelte/elements";
+declare const TextArea: import("svelte").Component<{
+    class?: string;
+    overrideDefaultStyling?: boolean;
+    value: any;
+} & Omit<HTMLTextareaAttributes, "value">, {}, "value">;
+export default TextArea;

package/package.json

@@ -1,63 +1,64 @@
 {
 	"name": "fluid-ui-svelte",
-	"version": "0.0.7",
-	"description": "Unopinionated UI library for Svelte.",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/ayazemre/fluid-ui-svelte.git"
-	},
+	"version": "0.0.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
-		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
 	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		}
 	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
+		"@iconify/svelte": "^4.0.2",
+		"@playwright/test": "^1.45.3",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^2.0.0",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"autoprefixer": "^10.4.16",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"postcss": "^8.4.31",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.1.9",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tailwindcss": "^3.3.5",
-		"tslib": "^2.4.1",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"publint": "^0.2.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.32.2"
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.0.11",
+		"vitest": "^2.0.4"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
+	"dependencies": {
+		"@tailwindcss/vite": "^4.0.0-alpha.31",
+		"tailwindcss": "^4.0.0-alpha.31"
+	}
 }

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,12 +0,0 @@
-<script>import Container from "../../primitives/Container/Container.svelte";
-export let accordionContentClass = "m-2 p-2";
-export let isVisible;
-</script>
-
-<Container
-	containerType="div"
-	overrideClass={true}
-	containerClass={(isVisible ? 'visible ' : 'hidden ') + accordionContentClass}
->
-	<slot />
-</Container>

package/dist/components/Accordion/AccordionContent.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        accordionContentClass?: string | undefined;
-        isVisible: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AccordionContentProps = typeof __propDef.props;
-export type AccordionContentEvents = typeof __propDef.events;
-export type AccordionContentSlots = typeof __propDef.slots;
-export default class AccordionContent extends SvelteComponent<AccordionContentProps, AccordionContentEvents, AccordionContentSlots> {
-}
-export {};

package/dist/components/Accordion/AccordionHeader.svelte

@@ -1,11 +0,0 @@
-<script>import Container from "../../primitives/Container/Container.svelte";
-import Button from "../../primitives/Button/Button.svelte";
-export let accordionHeaderClass = "flex justify-between bg-blue m-2 p-2";
-export let accordionButtonClass = "w-full";
-</script>
-
-<Button on:click buttonType="button" buttonClass={accordionButtonClass} overrideClass={true}>
-	<Container containerType="div" overrideClass={true} containerClass={accordionHeaderClass}>
-		<slot />
-	</Container>
-</Button>

package/dist/components/Accordion/AccordionHeader.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        accordionHeaderClass?: string | undefined;
-        accordionButtonClass?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AccordionHeaderProps = typeof __propDef.props;
-export type AccordionHeaderEvents = typeof __propDef.events;
-export type AccordionHeaderSlots = typeof __propDef.slots;
-export default class AccordionHeader extends SvelteComponent<AccordionHeaderProps, AccordionHeaderEvents, AccordionHeaderSlots> {
-}
-export {};

package/dist/components/Accordion/AccordionWrapper.svelte

@@ -1,7 +0,0 @@
-<script>import Container from "../../primitives/Container/Container.svelte";
-export let accordionClass = "flex flex-col bg-green";
-</script>
-
-<Container containerType="div" overrideClass={true} containerClass={accordionClass}>
-	<slot />
-</Container>

package/dist/components/Accordion/AccordionWrapper.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        accordionClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AccordionWrapperProps = typeof __propDef.props;
-export type AccordionWrapperEvents = typeof __propDef.events;
-export type AccordionWrapperSlots = typeof __propDef.slots;
-export default class AccordionWrapper extends SvelteComponent<AccordionWrapperProps, AccordionWrapperEvents, AccordionWrapperSlots> {
-}
-export {};

package/dist/components/Avatar/Avatar.svelte

@@ -1,12 +0,0 @@
-<script>import Image from "../../primitives/Image/Image.svelte";
-export let avatarClass = "";
-export let defaultClass = "fluid-avatar";
-export let overrideClass = false;
-export let avatarUrl;
-</script>
-
-<Image
-	imageSource={avatarUrl}
-	overrideClass={true}
-	imageClass={overrideClass ? avatarClass : defaultClass + ' ' + avatarClass}
-/>

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        avatarClass?: string | undefined;
-        defaultClass?: string | undefined;
-        overrideClass?: boolean | undefined;
-        avatarUrl: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AvatarProps = typeof __propDef.props;
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
-}
-export {};

package/dist/components/FileDropzone/FileDrop.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileDropProps */
-/** @typedef {typeof __propDef.events}  FileDropEvents */
-/** @typedef {typeof __propDef.slots}  FileDropSlots */
-export default class FileDrop extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileDropProps = typeof __propDef.props;
-export type FileDropEvents = typeof __propDef.events;
-export type FileDropSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/components/Modal/ModalContainer.svelte

@@ -1,25 +0,0 @@
-<script>import Container from "../../primitives/Container/Container.svelte";
-export let modalClass = "absolute w-screen h-screen left-0 bottom-0 bg-gray flex flex-col bg-opacity-50 justify-center items-center z-0";
-export let isVisible = true;
-const closeOnEscape = (event) => {
-  if (event.key == "Escape") {
-    isVisible = false;
-  }
-};
-</script>
-
-{#if isVisible}
-	<Container
-		containerType="div"
-		overrideClass={true}
-		containerClass={modalClass}
-		registerMount={() => {
-			document.addEventListener('keydown', closeOnEscape);
-		}}
-		registerDestroy={() => {
-			document.removeEventListener('keydown', closeOnEscape);
-		}}
-	>
-		<slot />
-	</Container>
-{/if}

package/dist/components/Modal/ModalContainer.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        modalClass?: string | undefined;
-        isVisible?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ModalContainerProps = typeof __propDef.props;
-export type ModalContainerEvents = typeof __propDef.events;
-export type ModalContainerSlots = typeof __propDef.slots;
-export default class ModalContainer extends SvelteComponent<ModalContainerProps, ModalContainerEvents, ModalContainerSlots> {
-}
-export {};

package/dist/primitives/Audio/Audio.svelte

@@ -1,22 +0,0 @@
-<script>export let audioClass = "";
-export let defaultClass = "fluid-audio";
-export let overrideClass = false;
-export let src = "";
-export let isAutoPlay = false;
-export let isControls = false;
-export let isLoop = false;
-export let isMuted = false;
-export let preload = "auto";
-</script>
-
-<audio
-	on:play
-	class={overrideClass ? audioClass : defaultClass + ' ' + audioClass}
-	{src}
-	autoplay={isAutoPlay}
-	controls={isControls}
-	loop={isLoop}
-	muted={isMuted}
-	{preload}
-	{...$$restProps}
-/>

package/dist/primitives/Audio/Audio.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        audioClass?: string | undefined;
-        defaultClass?: string | undefined;
-        overrideClass?: boolean | undefined;
-        src?: string | undefined;
-        isAutoPlay?: boolean | undefined;
-        isControls?: boolean | undefined;
-        isLoop?: boolean | undefined;
-        isMuted?: boolean | undefined;
-        preload?: "auto" | "metadata" | "none" | undefined;
-    };
-    events: {
-        play: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AudioProps = typeof __propDef.props;
-export type AudioEvents = typeof __propDef.events;
-export type AudioSlots = typeof __propDef.slots;
-export default class Audio extends SvelteComponent<AudioProps, AudioEvents, AudioSlots> {
-}
-export {};

package/dist/primitives/Button/Button.svelte

@@ -1,33 +0,0 @@
-<script>export let buttonClass = "";
-export let defaultClass = "fluid-button";
-export let overrideClass = false;
-export let buttonType = "button";
-export let isDisabled = false;
-export let buttonName = "";
-export let buttonValue = "";
-export let registerMount = () => {
-};
-export let registerDestroy = () => {
-};
-function registerAction(node) {
-  registerMount(node);
-  return {
-    destroy() {
-      registerDestroy(node);
-    }
-  };
-}
-</script>
-
-<button
-	use:registerAction
-	on:click
-	type={buttonType}
-	class={overrideClass ? buttonClass : defaultClass + ' ' + buttonClass}
-	disabled={isDisabled}
-	name={buttonName}
-	value={buttonValue}
-	{...$$restProps}
->
-	<slot />
-</button>

package/dist/primitives/Button/Button.svelte.d.ts

@@ -1,29 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        buttonClass?: string | undefined;
-        defaultClass?: string | undefined;
-        overrideClass?: boolean | undefined;
-        buttonType?: "reset" | "submit" | "button" | undefined;
-        isDisabled?: boolean | undefined;
-        buttonName?: string | undefined;
-        buttonValue?: string | undefined;
-        registerMount?: ((node: Node) => void) | undefined;
-        registerDestroy?: ((node: Node) => void) | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};