ui-svelte 0.1.0

package/dist/display/Table.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { TableState } from '../hooks/use-table.svelte.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    table: TableState;
+    isStriped?: boolean;
+    isBordered?: boolean;
+    hasDividers?: boolean;
+    noDataTitle?: string;
+    noDataDescription?: string;
+    noDataType?: 'playlist' | 'result' | 'data' | 'template';
+    size?: 'sm' | 'md' | 'lg';
+    showPagination?: boolean;
+    paginationAlign?: 'start' | 'center' | 'end';
+    loadingRows?: number;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    showRowsPerPage?: boolean;
+    rowsPerPageOptions?: number[];
+    rowsPerPageLabel?: string;
+    showTotal?: boolean;
+    totalLabel?: string;
+    showToolbar?: boolean;
+    toolbarClass?: string;
+    showSelectionCount?: boolean;
+    selectionCountLabel?: string;
+    toolbarStart?: Snippet;
+    toolbarEnd?: Snippet;
+    selectionActions?: Snippet<[any[]]>;
+};
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/display/TypeWriter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	type Props = {
+		texts: string[];
+		typeSpeed?: number;
+		deleteSpeed?: number;
+		afterTyped?: number;
+		afterDeleted?: number;
+		repeat?: boolean;
+	};
+	let {
+		texts,
+		typeSpeed = 100,
+		deleteSpeed = 50,
+		afterTyped = 1000,
+		afterDeleted = 500,
+		repeat = true
+	}: Props = $props();
+
+	let caret: HTMLSpanElement;
+	let textDisplayed = $state(' ');
+</script>
+
+<span>{textDisplayed}<span bind:this={caret}>|</span></span>

package/dist/display/TypeWriter.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    texts: string[];
+    typeSpeed?: number;
+    deleteSpeed?: number;
+    afterTyped?: number;
+    afterDeleted?: number;
+    repeat?: boolean;
+};
+declare const TypeWriter: import("svelte").Component<Props, {}, "">;
+type TypeWriter = ReturnType<typeof TypeWriter>;
+export default TypeWriter;

package/dist/display/User.svelte.d.ts

@@ -0,0 +1,26 @@
+export default User;
+type User = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const User: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/display/css/accordion.css

@@ -0,0 +1,98 @@
+@layer components {
+	.accordion {
+		@apply flex flex-col gap-2 w-full;
+
+		&.is-primary {
+			.accordion-item {
+				@apply border border-primary/20 rounded-lg overflow-hidden;
+				.accordion-header {
+					@apply bg-primary/5 hover:bg-primary/10;
+					&.is-open {
+						@apply bg-primary/10 text-primary;
+					}
+				}
+			}
+		}
+
+		&.is-secondary {
+			.accordion-item {
+				@apply border border-secondary/20 rounded-lg overflow-hidden;
+				.accordion-header {
+					@apply bg-secondary/5 hover:bg-secondary/10;
+					&.is-open {
+						@apply bg-secondary/10 text-secondary;
+					}
+				}
+			}
+		}
+
+		&.is-muted {
+			.accordion-item {
+				@apply border border-muted rounded-lg overflow-hidden;
+				.accordion-header {
+					@apply bg-muted/30 hover:bg-muted/50;
+					&.is-open {
+						@apply bg-muted text-on-muted;
+					}
+				}
+			}
+		}
+
+		&.is-outline {
+			.accordion-item {
+				@apply border border-muted rounded-lg overflow-hidden;
+				.accordion-header {
+					@apply hover:bg-muted/30;
+					&.is-open {
+						@apply bg-muted/20;
+					}
+				}
+			}
+		}
+
+		.accordion-item {
+			@apply transition-all duration-200;
+
+			&.is-disabled {
+				@apply opacity-50 pointer-events-none;
+			}
+
+			.accordion-header {
+				@apply flex justify-between items-center gap-3 px-4 py-3 cursor-pointer select-none transition-all duration-200;
+
+				.accordion-start {
+					@apply flex items-center gap-3 flex-1;
+
+					.accordion-icon {
+						@apply h-5 w-auto shrink-0;
+					}
+
+					.accordion-label {
+						@apply font-medium text-sm;
+					}
+				}
+
+				.accordion-end {
+					@apply flex items-center;
+
+					.accordion-arrow {
+						@apply size-5 transition-transform duration-200 text-on-muted;
+						&.is-active {
+							@apply rotate-180;
+						}
+					}
+				}
+
+				&:hover:not(.is-disabled) {
+					.accordion-arrow {
+						@apply text-on-surface;
+					}
+				}
+			}
+
+			.accordion-content {
+				@apply px-4 py-3 text-sm text-on-surface/80;
+			}
+		}
+	}
+}

package/dist/display/css/alert.css

@@ -0,0 +1,51 @@
+@layer components {
+	.alert {
+		@apply flex rounded-ui text-sm w-full p-2 gap-2;
+
+		&.is-solid {
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-error {
+				@apply bg-danger text-on-danger;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+		}
+
+		&.is-success {
+			@apply bg-on-success text-success;
+		}
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+		}
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+		}
+		&.is-info {
+			@apply bg-on-info text-info;
+		}
+
+		.alert-start {
+			@apply flex items-center justify-start;
+
+			.alert-icon {
+				@apply h-6 md:h-8 w-auto;
+			}
+		}
+
+		.alert-content {
+			@apply flex-1 flex flex-col gap-1 justify-center;
+			.alert-title {
+				@apply text-sm font-semibold leading-tight;
+			}
+			.alert-description {
+				@apply text-sm leading-relaxed opacity-90;
+			}
+		}
+	}
+}

package/dist/display/css/avatar.css

@@ -0,0 +1,158 @@
+@layer components {
+	.avatar {
+		@apply relative flex items-center justify-center;
+		@apply rounded-ui;
+		@apply transition-all duration-200;
+	}
+
+	.avatar.is-primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.avatar.is-secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.avatar.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.avatar.is-success {
+		@apply bg-success text-on-success;
+	}
+
+	.avatar.is-warning {
+		@apply bg-warning text-on-warning;
+	}
+
+	.avatar.is-danger {
+		@apply bg-danger text-on-danger;
+	}
+
+	.avatar.is-info {
+		@apply bg-info text-on-info;
+	}
+
+	.avatar.is-bordered {
+		.avatar-image {
+			@apply ring-2 ring-muted;
+		}
+	}
+
+	.avatar.is-transparent {
+		@apply bg-transparent;
+	}
+
+	.avatar-status {
+		@apply absolute bottom-0 right-0 translate-x-[25%];
+	}
+
+	.avatar-indicator {
+		@apply ring ring-background rounded-full;
+	}
+
+	.avatar-indicator.is-online {
+		@apply bg-success;
+	}
+
+	.avatar-indicator.is-busy {
+		@apply bg-warning;
+	}
+
+	.avatar-indicator.is-away {
+		@apply bg-danger;
+	}
+
+	.avatar-indicator.is-offline {
+		@apply bg-muted;
+	}
+
+	.avatar.is-xs {
+		@apply size-5;
+
+		.avatar-image {
+			@apply size-5 object-cover rounded-ui;
+		}
+
+		.avatar-name {
+			@apply text-xs;
+		}
+
+		.avatar-indicator {
+			@apply size-1;
+		}
+	}
+
+	.avatar.is-sm {
+		@apply size-6;
+
+		.avatar-image {
+			@apply size-6 object-cover rounded-ui;
+		}
+
+		.avatar-name {
+			@apply text-base;
+		}
+
+		.avatar-indicator {
+			@apply size-2;
+		}
+	}
+
+	.avatar.is-md {
+		@apply size-7;
+
+		.avatar-image {
+			@apply size-7 object-cover rounded-ui;
+		}
+
+		.avatar-name {
+			@apply text-xl;
+		}
+
+		.avatar-indicator {
+			@apply size-2;
+		}
+	}
+
+	.avatar.is-lg {
+		@apply size-10;
+
+		.avatar-image {
+			@apply size-10 object-cover rounded-ui;
+		}
+
+		.avatar-name {
+			@apply text-3xl;
+		}
+
+		.avatar-indicator {
+			@apply size-3;
+		}
+	}
+
+	.avatar.is-xl {
+		@apply size-14;
+
+		.avatar-image {
+			@apply size-14 object-cover rounded-ui;
+		}
+
+		.avatar-name {
+			@apply text-5xl;
+		}
+
+		.avatar-indicator {
+			@apply size-3;
+		}
+	}
+
+	.avatar-group {
+		@apply inline-flex;
+		& > .avatar {
+			@apply -ml-2 first:ml-0;
+			@apply outline-2 outline-muted;
+			@apply transition-transform hover:z-10 hover:scale-110;
+		}
+	}
+}

package/dist/display/css/badge.css

@@ -0,0 +1,47 @@
+@layer components {
+	.badge {
+		@apply relative w-fit;
+	}
+	.badge-content {
+		@apply absolute flex items-center justify-center rounded-ui;
+		@apply inset-ring inset-ring-muted;
+		@apply h-5 min-w-5 px-1;
+	}
+	.badge-text {
+		@apply text-xs leading-none;
+	}
+	.is-top-left .badge-text {
+		@apply top-0 left-0 translate-x-[-50%] translate-y-[-50%];
+	}
+	.is-top-right .badge-text {
+		@apply top-0 right-0 translate-x-[50%] translate-y-[-50%];
+	}
+	.is-bottom-left .badge-text {
+		@apply bottom-0 left-0 translate-x-[-50%] translate-y-[50%];
+	}
+	.is-bottom-right .badge-text {
+		@apply bottom-0 right-0 translate-x-[50%] translate-y-[50%];
+	}
+
+	.is-primary .badge-text {
+		@apply bg-primary text-on-primary;
+	}
+	.is-secondary .badge-text {
+		@apply bg-secondary text-on-secondary;
+	}
+	.is-muted .badge-text {
+		@apply bg-muted text-on-muted;
+	}
+	.is-success .badge-text {
+		@apply bg-success text-on-success;
+	}
+	.is-warning .badge-text {
+		@apply bg-warning text-on-warning;
+	}
+	.is-danger .badge-text {
+		@apply bg-danger text-on-danger;
+	}
+	.is-info .badge-text {
+		@apply bg-info text-on-info;
+	}
+}

package/dist/display/css/card.css

@@ -0,0 +1,231 @@
+@layer components {
+	.card {
+		@apply relative flex flex-col rounded-ui overflow-hidden;
+		@apply transition-colors duration-300 ease-in-out;
+
+		&:has(> .card-cover) {
+			@apply bg-transparent! text-white! text-shadow-sm! z-0;
+		}
+	}
+
+	.card.has-divider {
+		.card-header {
+			@apply border-b;
+		}
+		.card-footer {
+			@apply border-t;
+		}
+	}
+
+	.card.has-shadow {
+		@apply shadow-sm shadow-muted;
+	}
+
+	.card.is-primary {
+		@apply bg-on-primary text-primary;
+	}
+
+	.card.is-primary.has-divider {
+		.card-header {
+			@apply border-primary;
+		}
+
+		.card-footer {
+			@apply border-primary;
+		}
+	}
+
+	.card.is-primary.is-solid {
+		@apply bg-primary text-on-primary;
+	}
+
+	.card.is-primary.is-solid.has-divider {
+		.card-header {
+			@apply border-on-primary;
+		}
+
+		.card-footer {
+			@apply border-on-primary;
+		}
+	}
+
+	.card.is-secondary {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.card.is-secondary.has-divider {
+		.card-header {
+			@apply border-secondary;
+		}
+
+		.card-footer {
+			@apply border-secondary;
+		}
+	}
+
+	.card.is-secondary.is-solid {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.card.is-secondary.is-solid.has-divider {
+		.card-header {
+			@apply border-on-secondary;
+		}
+
+		.card-footer {
+			@apply border-on-secondary;
+		}
+	}
+
+	.card.is-success {
+		@apply bg-on-success text-success;
+	}
+
+	.card.is-success.is-solid {
+		@apply bg-success text-on-success;
+	}
+
+	.card.is-success.is-solid.has-divider {
+		.card-header {
+			@apply border-on-success;
+		}
+
+		.card-footer {
+			@apply border-on-success;
+		}
+	}
+
+	.card.is-info {
+		@apply bg-on-info text-info;
+	}
+
+	.card.is-info.is-solid {
+		@apply bg-info text-on-info;
+	}
+
+	.card.is-info.is-solid.has-divider {
+		.card-header {
+			@apply border-on-info;
+		}
+
+		.card-footer {
+			@apply border-on-info;
+		}
+	}
+
+	.card.is-warning {
+		@apply bg-on-warning text-warning;
+	}
+
+	.card.is-warning.is-solid {
+		@apply bg-warning text-on-warning;
+	}
+
+	.card.is-warning.is-solid.has-divider {
+		.card-header {
+			@apply border-on-warning;
+		}
+
+		.card-footer {
+			@apply border-on-warning;
+		}
+	}
+
+	.card.is-danger {
+		@apply bg-on-danger text-danger;
+	}
+
+	.card.is-danger.is-solid {
+		@apply bg-danger text-on-danger;
+	}
+
+	.card.is-danger.is-solid.has-divider {
+		.card-header {
+			@apply border-on-danger;
+		}
+
+		.card-footer {
+			@apply border-on-danger;
+		}
+	}
+
+	.card.is-muted {
+		@apply bg-muted text-on-muted;
+	}
+
+	.card.is-muted.has-divider {
+		.card-header {
+			@apply border-on-muted;
+		}
+
+		.card-footer {
+			@apply border-on-muted;
+		}
+	}
+
+	.card.is-muted.is-solid {
+		@apply bg-on-muted text-muted;
+	}
+
+	.card.is-muted.is-solid.has-divider {
+		.card-header {
+			@apply border-muted;
+		}
+
+		.card-footer {
+			@apply border-muted;
+		}
+	}
+
+	.card.is-outlined {
+		@apply border border-muted;
+	}
+
+	.card.is-outlined.has-divider {
+		.card-header {
+			@apply border-muted;
+		}
+
+		.card-footer {
+			@apply border-muted;
+		}
+	}
+
+	.card.is-surface {
+		@apply bg-surface text-on-surface;
+	}
+
+	.card.is-surface.has-divider {
+		.card-header {
+			@apply border-on-surface;
+		}
+
+		.card-footer {
+			@apply border-on-surface;
+		}
+	}
+
+	.card.is-ghost {
+		@apply bg-transparent;
+	}
+
+	.card-cover {
+		@apply absolute inset-0 object-cover size-full rounded-ui -z-10;
+	}
+
+	.card-overlay {
+		@apply absolute inset-0 bg-overlay size-full -z-10;
+	}
+
+	.card-body {
+		@apply flex-1 w-full column p-3 gap-3;
+	}
+
+	.card-header {
+		@apply w-full flex justify-between items-center p-3 gap-3;
+	}
+
+	.card-footer {
+		@apply w-full flex justify-between items-center p-3 gap-3;
+	}
+}