hamzus-ui 0.0.106 → 0.0.108

package/index.d.ts

@@ -33,6 +33,7 @@ export * as Tabs from "./src/components/hamzus-ui/Tabs"
 
 // data
 export * as Table from "./src/components/hamzus-ui/Table"
+export * as DataList from "./src/components/hamzus-ui/DataList"
 export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
 export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
 export { default as ProgressCircle } from "./src/components/hamzus-ui/ProgressCircle/ProgressCircle.svelte"

package/index.js

@@ -30,6 +30,7 @@ export * as Tabs from "./src/components/hamzus-ui/Tabs"
 
 // data
 export * as Table from "./src/components/hamzus-ui/Table"
+export * as DataList from "./src/components/hamzus-ui/DataList"
 export { default as Skeleton } from "./src/components/hamzus-ui/Skeleton/Skeleton.svelte"
 export { default as LineLoader } from "./src/components/hamzus-ui/LineLoader/LineLoader.svelte"
 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.106",
+	"version": "0.0.108",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/Accordion copy/Button.svelte

@@ -0,0 +1,33 @@
+
+<script>
+	import IconButton from "../IconButton/IconButton.svelte";
+
+    export let isOpen
+</script>
+
+<div class="accordion-btn {$isOpen ? "open" : ""}">
+    <slot/>
+    <IconButton variant="ghost">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z" fill="#292D32"/>
+            </svg>            
+    </IconButton>
+</div>
+
+<style>
+    .accordion-btn{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: var(--pad-m) 0;
+        cursor: pointer;
+    }
+    .accordion-btn svg { 
+        transition: transform .1s ease-in-out;
+        transform: rotate(90deg);
+    }
+    .accordion-btn.open svg {
+        transform: rotate(0deg);
+    }
+</style>

package/src/components/hamzus-ui/Accordion copy/Content.svelte

@@ -0,0 +1,23 @@
+
+<script>
+	import { onMount } from "svelte";
+
+    export let isOpen
+
+    let element
+</script>
+
+<div bind:this={element} style="--height:{element?.scrollHeight ?? "0"}px;" class="content {$isOpen ? "open" : ""}">
+    <slot/>
+</div>
+
+<style>
+    .content {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height .2s ease-in;
+    }
+    .content.open {
+        max-height: var(--height);
+    }
+</style>

package/src/components/hamzus-ui/Accordion copy/Root.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Trigger from "./Trigger.svelte";
+	import { writable } from "svelte/store";
+
+    export let isOpen = false
+
+    const isOpenStore = writable(isOpen)
+</script>
+
+<div class="root">
+    <slot isOpen={isOpenStore}></slot>
+</div>
+
+
+<style>
+    .root {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+</style>

package/src/components/hamzus-ui/Accordion copy/Trigger.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { getContext } from "svelte";
+
+    export let isOpen // store
+
+    function handleClick() {
+        isOpen.update((value)=>!value)
+    }
+</script>
+
+<div class="trigger" onclick={handleClick}>
+    <slot/>
+</div>
+
+<style>
+    .trigger {
+        display: inline-block;
+    }
+</style>

package/src/components/hamzus-ui/Accordion copy/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './Root.svelte';
+export { default as Trigger } from './Trigger.svelte';
+export { default as Content } from './Content.svelte';
+export { default as Button } from './Button.svelte';

package/src/components/hamzus-ui/ButtonGroup/ButtonGroup.svelte

@@ -1,6 +1,8 @@
+<script>
+    export let style = ""
+</script>
 
-
-<div class="button-group">
+<div class="button-group" {style} {...$$restProps}>
     <slot></slot>
 </div>
 

package/src/components/hamzus-ui/DataList/Line.svelte

@@ -0,0 +1,11 @@
+<div class="line" {...$$restProps}>
+    <slot/>
+</div>
+
+<style>
+   .line {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+</style>

package/src/components/hamzus-ui/DataList/Root.svelte

@@ -0,0 +1,12 @@
+<div class="list" {...$$restProps}>
+    <slot/>
+</div>
+
+<style>
+    .list {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--pad-m);
+        width: 100%;
+    }
+</style>

package/src/components/hamzus-ui/DataList/Separator.svelte

@@ -0,0 +1,9 @@
+<div class="separator" {...$$restProps}></div>
+
+<style>
+   .separator {
+        width: 100%;
+        height: 1px;
+        background-color: var(--stroke);
+    }
+</style>

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

@@ -0,0 +1,3 @@
+export { default as Root } from './Root.svelte';
+export { default as Line } from './Line.svelte';
+export { default as Separator } from './Separator.svelte';

package/src/components/hamzus-ui/Slider copy/slider/+page.svelte

@@ -2,7 +2,7 @@
 <script>
 	import Slider from "@hamzus-ui/Slider/Slider.svelte";
     import Exemple from "../../../../components/docComponent/Exemple/Exemple.svelte";
-	import DataList from "@hamzus-ui/DataList/DataList.svelte";
+	import DataList from "@hamzus-ui/DataList/Root.svelte";
 	import CopyCode from "@hamzus-ui/CopyCode/CopyCode.svelte";
 </script>
 

package/src/components/hamzus-ui/DataList/DataList.svelte

@@ -1,82 +0,0 @@
-<script>
-    export let data = {}
-    export let titles = []
-</script>
-
-<div class="data-list-container">
-    {#if titles.length != 0}
-        <div class="title">
-            {#each titles as title}
-                <h5>{title}</h5>
-            {/each}
-        </div>
-    {/if}
-    <div class="data-list" {...$$restProps}>
-        {#each Object.entries(data) as [key , value]}
-            <div class="row">
-                <h4 class="key">{key}</h4>
-                {#if typeof value != 'object'}
-                    <h5 class="value">{value}</h5>
-                {:else}
-                    {#if value.text}
-                        <h5 class="value" style={value.style ? value.style : ""}>{value.text}</h5>
-                    {:else}
-                        <svelte:component this={value.component} {...value.props}></svelte:component>
-                    {/if}
-                {/if}
-            </div>
-        {/each}
-    </div>
-</div>
-
-<style>
-    .data-list-container{
-        border: 1px solid var(--stroke);
-        padding: var(--pad-m);
-        border-radius: var(--radius-m);
-        margin-bottom: 32px;
-    }
-    .data-list {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        row-gap: var(--pad-m);
-    }
-    .row{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--pad-xs) var(--pad-m);
-        border-radius: var(--radius-m);
-        cursor: pointer;
-        position: relative;
-        margin-bottom: var(--pad-m);
-    }
-    .title{
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--pad-xs) var(--pad-m);
-    }
-    .row:not(:last-child):after{
-        content: '';
-        position: absolute;
-        bottom: calc( 0px - var(--pad-m));
-        left: 0;
-        width: 100%;
-        height: 1px;
-        background-color: var(--stroke);
-    }
-    .row:nth-child(odd){
-        background-color: var(--bg-2);
-    }
-    .row:hover{
-        background-color: var(--bg-3);
-    }
-        .key{
-            color: var(--font-1);
-        }
-    .value{
-        text-align: right;
-    }
-</style>