ui-svelte 0.2.1 → 0.2.2

package/dist/navigation/SideNav.svelte

@@ -1,35 +1,36 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import type { IconData } from '../display/Icon.svelte';
-	import { ChevronRight24RegularIcon } from '../icons/index.js';
-	import { Icon } from '../index.js';
-	import { cn } from '../utils/class-names.js';
-	import type { Snippet } from 'svelte';
-	import { slide } from 'svelte/transition';
-
-	type SubmenuItem = {
+<script lang="ts" module>
+	export type SideNavSubItem = {
 		label: string;
 		href?: string;
-		onclick?: (item: SubmenuItem) => void;
+		onclick?: (item: SideNavSubItem) => void;
 		description?: string;
 		status?: string | Snippet;
 		icon?: IconData;
 	};
 
-	type NavItem = {
+	export type SideNavItem = {
 		type?: 'item' | 'divider' | 'header' | 'submenu';
 		label?: string;
 		description?: string;
 		href?: string;
-		onclick?: (item: NavItem) => void;
+		onclick?: (item: SideNavItem) => void;
 		status?: string | Snippet;
 		icon?: IconData;
-		subitems?: SubmenuItem[];
+		subitems?: SideNavSubItem[];
 		open?: boolean;
 	};
+</script>
+
+<script lang="ts">
+	import { page } from '$app/state';
+	import { ChevronRight24RegularIcon } from '../icons/index.js';
+	import { Icon, type IconData } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
 
 	type Props = {
-		items: NavItem[];
+		items: SideNavItem[];
 		variant?: 'primary' | 'secondary' | 'muted';
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
@@ -97,7 +98,7 @@
 	}
 </script>
 
-{#snippet navItemContent(item: NavItem | SubmenuItem, isSubitem = false)}
+{#snippet navItemContent(item: SideNavItem | SideNavSubItem, isSubitem = false)}
 	<div class="sidenav-content">
 		<div class="sidenav-label">{item.label}</div>
 		{#if item.description && (isExpanded || !isCollapsible)}

package/dist/navigation/SideNav.svelte.d.ts

@@ -0,0 +1,33 @@
+export type SideNavSubItem = {
+    label: string;
+    href?: string;
+    onclick?: (item: SideNavSubItem) => void;
+    description?: string;
+    status?: string | Snippet;
+    icon?: IconData;
+};
+export type SideNavItem = {
+    type?: 'item' | 'divider' | 'header' | 'submenu';
+    label?: string;
+    description?: string;
+    href?: string;
+    onclick?: (item: SideNavItem) => void;
+    status?: string | Snippet;
+    icon?: IconData;
+    subitems?: SideNavSubItem[];
+    open?: boolean;
+};
+import { type IconData } from '../index.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    items: SideNavItem[];
+    variant?: 'primary' | 'secondary' | 'muted';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    isWide?: boolean;
+    isCompact?: boolean;
+    isCollapsible?: boolean;
+};
+declare const SideNav: import("svelte").Component<Props, {}, "">;
+type SideNav = ReturnType<typeof SideNav>;
+export default SideNav;

package/dist/navigation/Tabs.svelte

@@ -12,13 +12,13 @@
 		position?: 'top' | 'bottom' | 'start' | 'end';
 		variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
 		pill?: boolean;
-		class?: string;
+		rootClass?: string;
 		tabListClass?: string;
 		tabClass?: string;
 		tabContentClass?: string;
 	};
 	const {
-		class: className,
+		rootClass,
 		tabClass,
 		tabListClass,
 		tabContentClass,
@@ -51,7 +51,7 @@
 	}
 </script>
 
-<div class={cn('tabs', positionClasses[position], className)}>
+<div class={cn('tabs', positionClasses[position], rootClass)}>
 	<div class={cn('tabs-list', variantClasses[variant], pill && 'is-pill', tabListClass)}>
 		{#each tabs as tab}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->

package/dist/navigation/Tabs.svelte.d.ts

@@ -9,7 +9,7 @@ type Props = {
     position?: 'top' | 'bottom' | 'start' | 'end';
     variant?: 'primary' | 'secondary' | 'muted' | 'outline' | 'line' | 'ghost';
     pill?: boolean;
-    class?: string;
+    rootClass?: string;
     tabListClass?: string;
     tabClass?: string;
     tabContentClass?: string;

package/dist/navigation/css/bottom-nav.css

@@ -0,0 +1,134 @@
+@layer components {
+    .bottomnav {
+        @apply fixed bottom-0 left-0 right-0 z-50;
+        @apply flex items-center justify-around;
+        @apply bg-background text-on-background;
+        @apply border-t border-muted;
+        @apply shadow-lg;
+        padding-bottom: env(safe-area-inset-bottom);
+
+        .bottomnav-item {
+            @apply flex flex-col items-center justify-center gap-1;
+            @apply flex-1 py-2 px-1;
+            @apply cursor-pointer select-none outline-none;
+            @apply transition-all duration-200;
+            @apply relative;
+
+            .bottomnav-icon {
+                @apply h-6 w-6 shrink-0;
+                @apply transition-all duration-200;
+            }
+
+            .bottomnav-label {
+                @apply text-xs font-medium whitespace-nowrap;
+                @apply transition-all duration-200;
+            }
+
+            &:hover {
+                @apply bg-muted/50;
+            }
+
+            &.is-active {
+                @apply text-primary;
+
+                .bottomnav-icon {
+                    @apply text-primary;
+                }
+            }
+        }
+
+        &.is-sm {
+            .bottomnav-item {
+                @apply gap-0.5 py-1.5;
+
+                .bottomnav-icon {
+                    @apply h-5 w-5;
+                }
+
+                .bottomnav-label {
+                    @apply text-[10px];
+                }
+            }
+        }
+
+        &.is-md {
+            .bottomnav-item {
+                @apply gap-1 py-2;
+
+                .bottomnav-icon {
+                    @apply h-6 w-6;
+                }
+
+                .bottomnav-label {
+                    @apply text-xs;
+                }
+            }
+        }
+
+        &.is-lg {
+            .bottomnav-item {
+                @apply gap-1.5 py-3;
+
+                .bottomnav-icon {
+                    @apply h-7 w-7;
+                }
+
+                .bottomnav-label {
+                    @apply text-sm;
+                }
+            }
+        }
+
+        &.is-icon-only {
+            .bottomnav-item {
+                @apply gap-0;
+
+                .bottomnav-icon {
+                    @apply h-7 w-7;
+                }
+            }
+        }
+
+        &.bottomnav-primary {
+            .bottomnav-item.is-active {
+                @apply text-primary;
+
+                .bottomnav-icon {
+                    @apply text-primary;
+                }
+
+                .bottomnav-label {
+                    @apply text-primary;
+                }
+            }
+        }
+
+        &.bottomnav-secondary {
+            .bottomnav-item.is-active {
+                @apply text-secondary;
+
+                .bottomnav-icon {
+                    @apply text-secondary;
+                }
+
+                .bottomnav-label {
+                    @apply text-secondary;
+                }
+            }
+        }
+
+        &.bottomnav-muted {
+            .bottomnav-item.is-active {
+                @apply bg-muted text-on-muted;
+
+                .bottomnav-icon {
+                    @apply text-on-muted;
+                }
+
+                .bottomnav-label {
+                    @apply text-on-muted;
+                }
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"
@@ -26,6 +26,7 @@
 		"vite": "^7.1.7"
 	},
 	"peerDependencies": {
+		"hls.js": "^1.6.15",
 		"shiki": "^3.14.0",
 		"svelte": "^5.0.0"
 	},
@@ -34,7 +35,6 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./types": "./dist/types.js",
 		"./css": "./dist/index.css"
 	},
 	"css": "./dist/index.css",

package/dist/navigation/BottomNav.svelte.d.ts

@@ -1,26 +0,0 @@
-export default BottomNav;
-type BottomNav = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const BottomNav: $$__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;
-}