hamzus-ui 0.0.42 → 0.0.44

package/index.d.ts

@@ -22,6 +22,9 @@ export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextAre
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"
 
+// navigation
+export * as Tabs from "./src/components/hamzus-ui/Tabs"
+
 // data
 export * as Table from "./src/components/hamzus-ui/Table"
 export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"
@@ -32,6 +35,7 @@ export * as Popover from "./src/components/hamzus-ui/Popover";
 export * as Tooltip from "./src/components/hamzus-ui/AdvancedTooltip";
 
 // layout
+export { default as ScrollArea } from "./src/components/hamzus-ui/ScrollArea/ScrollArea.svelte"
 export * as Sidebar from "./src/layout/Sidebar"
 
 // utils

package/index.js

@@ -17,6 +17,10 @@ export { default as DatePicker } from "./src/components/hamzus-ui/DatePicker/Dat
 export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextArea.svelte"
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"
+
+// navigation
+export * as Tabs from "./src/components/hamzus-ui/Tabs"
+
 // data
 export * as Table from "./src/components/hamzus-ui/Table"
 export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.42",
+	"version": "0.0.44",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/DropdownMenu/Content.svelte

@@ -13,7 +13,7 @@
         flex-direction: column;
         row-gap: var(--pad-m);
         padding: var(--pad-m) var(--pad-l);
-        background-color: var(--bg-2);
+        background-color: var(--bg-1);
         border-radius: var(--radius-l);
         border: 1px solid var(--bg-3);
         width: min(100vw, var(--width));

package/src/components/hamzus-ui/Tabs/Content.svelte

@@ -0,0 +1,11 @@
+<script>
+    import {activeTab} from "."
+
+    export let value = ""
+
+
+</script>
+
+{#if $activeTab === value}
+    <slot/>
+{/if}

package/src/components/hamzus-ui/Tabs/List.svelte

@@ -0,0 +1 @@
+<slot/>

package/src/components/hamzus-ui/Tabs/{Tabs.svelte → Root.svelte}

@@ -1,25 +1,31 @@
 <script>
-	export let links = [];
-
-	let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
-
 	import TinyScrollArea from '../TinyScrollArea/TinyScrollArea.svelte';
 	import Button from '../Button/Button.svelte';
 
 	import { page } from '$app/stores';
-	import TabButton from './TabButton.svelte';
+	import { activeTrigger, activeTab } from '.';
+	import { onMount } from 'svelte';
+
+	export let links = [];
+	export let value = '';
 
 	let activeButton = null;
 
 	let left = 0;
 	let width = 0;
 
-	$: if (activeButton) {
+	$: if ($activeTrigger) {
+        console.log($activeTrigger);
+        
 		// return
-		left = activeButton.offsetLeft;
-		width = activeButton.offsetWidth;
+		left = $activeTrigger.offsetLeft;
+		width = $activeTrigger.offsetWidth;
 	}
 
+	onMount(() => {
+		activeTab.set(value);
+	});
+
 	function handleClick(link) {
 		if (link.onClick != undefined) {
 			link.onClick(link);
@@ -29,44 +35,11 @@
 
 <TinyScrollArea style="display: flex;" proximity={0}>
 	<div class="tabs" style="--left:{left}px;--width:{width}px;">
-		{#each links as link}
-			{#if link.label}
-				<!-- {#if link.active}
-					<div bind:this={activeButton} class="active">
-						<Button
-							variant="ghost"
-							style="flex-shrink:0;{link.active ? activeStyle : ''}"
-							label={link.label}
-							onClick={() => {
-								handleClick(link);
-							}}
-						></Button>
-					</div>
-				{:else}
-					<Button
-						variant="ghost"
-						style="flex-shrink:0;{link.active ? activeStyle : ''}"
-						label={link.label}
-						onClick={() => {
-							handleClick(link);
-						}}
-					></Button>
-				{/if} -->
-				<TabButton
-					bind:activeButton
-                    link={link}
-					variant="ghost"
-					style="flex-shrink:0;{link.active ? activeStyle : ''}"
-					label={link.label}
-					onClick={() => {
-						handleClick(link);
-					}}
-				></TabButton>
-				<span class="active-line"></span>
-			{/if}
-		{/each}
+		<slot name="list"/>
+		<span class="active-line"></span>
 	</div>
 </TinyScrollArea>
+<slot/>
 
 <style>
 	.tabs {

package/src/components/hamzus-ui/Tabs/Trigger.svelte

@@ -0,0 +1,36 @@
+<script>
+	import Button from '../Button/Button.svelte';
+	import { onMount } from 'svelte';
+    import {activeTrigger, activeTab} from "."
+
+	export let value = "";
+	export let variant = 'ghost';
+	export let label = '';
+    
+	let activeStyle = 'color:var(--font-1);background-color:var(--bg-2);';
+	let el;
+
+	
+    
+    $: if ($activeTab === value) {
+        activeTrigger.set(el)
+        
+	}
+
+	function handleClick() {
+		activeTab.set(value)
+	}
+</script>
+
+<div bind:this={el} class="active">
+	<Button {variant} style={`flex-shrink:0;${$activeTab === value ? activeStyle : ''}`} {label} onClick={handleClick} {...$$restProps}>
+        <slot/>
+    </Button>
+</div>
+
+<style>
+	.active {
+		all: unset;
+		min-width: max-content;
+	}
+</style>

package/src/components/hamzus-ui/Tabs/index.js

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+export { default as Root } from './Root.svelte';
+export { default as List } from './List.svelte';
+export { default as Trigger } from './Trigger.svelte';
+export { default as Content } from './Content.svelte';
+
+export const activeTab = writable(null)
+export const activeTrigger = writable(null)

package/src/components/hamzus-ui/Tabs/TabButton.svelte

@@ -1,34 +0,0 @@
-<script>
-	import Button from '../Button/Button.svelte';
-	import { onMount } from 'svelte';
-	export let activeButton = null;
-	export let link = null;
-	export let variant = 'ghost';
-	export let style = "flex-shrink:0;{link.active ? activeStyle : ''}";
-	export let label = 'exemple';
-	export let onClick = (link) => {};
-
-	let el;
-
-	onMount(() => {
-		if (link.active) {
-            activeButton = el;
-		}
-	});
-
-	function handleClick() {
-		activeButton = el;
-		onClick(link);
-	}
-</script>
-
-<div bind:this={el} class="active">
-	<Button {variant} {style} {label} onClick={handleClick} />
-</div>
-
-<style>
-	.active {
-		all: unset;
-		min-width: max-content;
-	}
-</style>