@hyvor/design 0.0.25 → 0.0.27

package/dist/components/TabNav/TabNav.svelte

@@ -0,0 +1,22 @@
+<script>import { setContext } from "svelte";
+import { writable } from "svelte/store";
+export let active;
+const activeStore = writable(active);
+setContext("tab-nav-active", activeStore);
+$:
+  active = $activeStore;
+</script>
+
+<div 
+    class="tab-nav"
+    {...$$restProps}
+>
+    <slot />
+</div>
+
+
+<style>
+    div {
+        display: flex;
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        active: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TabNavProps = typeof __propDef.props;
+export type TabNavEvents = typeof __propDef.events;
+export type TabNavSlots = typeof __propDef.slots;
+export default class TabNav extends SvelteComponent<TabNavProps, TabNavEvents, TabNavSlots> {
+}
+export {};

package/dist/components/TabNav/TabNavItem.svelte

@@ -0,0 +1,55 @@
+<script>import { getContext } from "svelte";
+export let active = false;
+export let name;
+const activeStore = getContext("tab-nav-active");
+$:
+  isActive = $activeStore === name || active;
+function handleClick() {
+  activeStore.set(name);
+}
+</script>
+
+<button 
+    class="tab"
+    class:active={isActive}
+    on:click={handleClick}
+    {...$$restProps}
+>
+    {#if $$slots.start}
+        <span class="start">
+            <slot name="start" />
+        </span>
+    {/if}
+    <slot />
+    {#if $$slots.end}
+        <span class="end">
+            <slot name="end" />
+        </span>
+    {/if}
+</button>
+
+<style>
+    .tab {
+        position: relative;
+        padding: 10px 15px;
+        border-bottom: 3px solid #f1f1f1;
+        cursor: pointer;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+    }
+    .tab.active {
+        border-bottom-color: var(--accent);
+        color: var(--accent);
+    }
+    .start {
+        display: inline-flex;
+        margin-right: 7px;
+        align-items: center;
+    }
+    .end {
+        display: inline-flex;
+        margin-left: 4px;
+        align-items: center;
+    }
+</style>

package/dist/components/TabNav/TabNavItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        active?: boolean | undefined;
+        name: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        start: {};
+        default: {};
+        end: {};
+    };
+};
+export type TabNavItemProps = typeof __propDef.props;
+export type TabNavItemEvents = typeof __propDef.events;
+export type TabNavItemSlots = typeof __propDef.slots;
+export default class TabNavItem extends SvelteComponent<TabNavItemProps, TabNavItemEvents, TabNavItemSlots> {
+}
+export {};

package/dist/components/TextInput/TextInput.svelte

@@ -40,6 +40,7 @@ let input;
         on:mouseenter
         on:mouseleave
         on:change
+        on:input
     />
 
     {#if $$slots.end}

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

@@ -18,6 +18,7 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         change: Event;
+        input: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Textarea/Textarea.svelte

@@ -18,6 +18,7 @@ export let state = "default";
     on:mouseenter
     on:mouseleave
     on:change
+    on:input
 
     {rows}
     {cols}

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

@@ -19,6 +19,7 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         change: Event;
+        input: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/index.d.ts

@@ -28,6 +28,8 @@ export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableRow } from './Table/TableRow.svelte';
+export { default as TabNav } from './TabNav/TabNav.svelte';
+export { default as TabNavItem } from './TabNav/TabNavItem.svelte';
 export { default as Tag } from './Tag/Tag.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';

package/dist/components/index.js

@@ -28,6 +28,8 @@ export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableRow } from './Table/TableRow.svelte';
+export { default as TabNav } from './TabNav/TabNav.svelte';
+export { default as TabNavItem } from './TabNav/TabNavItem.svelte';
 export { default as Tag } from './Tag/Tag.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';

package/dist/index.css

@@ -25,6 +25,8 @@ button, a {
     padding: 0;
     text-decoration: none;
     cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
 }
 
 :focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.25",
+	"version": "0.0.27",
 	"license": "MIT",
 	"private": false,
 	"scripts": {