@hyvor/design 0.0.24 → 0.0.26

package/dist/components/ActionList/ActionListItem.svelte

@@ -24,6 +24,7 @@ function handleClick() {
             handleClick();
         }
     }}
+    {...$$restProps}
 >
 
     {#if selection !== 'none'}

package/dist/components/ActionList/ActionListItem.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         selected?: boolean | undefined;
         disabled?: boolean | undefined;
         type?: "default" | "danger" | undefined;

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/Tag/Tag.svelte

@@ -3,6 +3,8 @@ export let color = "default";
 export let interactive = false;
 export let outline = false;
 export let fill = false;
+export let bg = void 0;
+export let fg = void 0;
 let styleClass = "default";
 if (outline) {
   styleClass = fill ? "outline-fill" : "outline";
@@ -15,6 +17,9 @@ if (outline) {
     class:has-start={$$slots.start}
     class:has-end={$$slots.end}
     {...$$restProps}
+
+    style:background-color={bg}
+    style:color={fg}
 >
 
     {#if $$slots.start}
@@ -77,6 +82,10 @@ span.style-default.color-default {
   background-color: var(--gray-light);
   color: var(--gray-dark);
 }
+span.style-default.color-accent {
+  background-color: var(--accent-light);
+  color: var(--accent);
+}
 span.style-default.color-green {
   background-color: var(--green-light);
   color: var(--green-dark);
@@ -98,6 +107,10 @@ span.style-outline.color-default {
   color: var(--gray-dark);
   border: 1px solid var(--gray-dark);
 }
+span.style-outline.color-accent {
+  color: var(--accent);
+  border: 1px solid var(--accent);
+}
 span.style-outline.color-green {
   color: var(--green-dark);
   border: 1px solid var(--green-dark);
@@ -120,6 +133,11 @@ span.style-outline-fill.color-default {
   color: var(--gray-dark);
   border: 1px solid var(--gray);
 }
+span.style-outline-fill.color-accent {
+  background-color: var(--accent-light);
+  color: var(--accent);
+  border: 1px solid var(--accent);
+}
 span.style-outline-fill.color-green {
   background-color: var(--green-light);
   color: var(--green-dark);

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

@@ -3,10 +3,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         size?: "small" | "medium" | "large" | "x-small" | undefined;
-        color?: "default" | "green" | "red" | "blue" | "orange" | undefined;
+        color?: "default" | "accent" | "green" | "red" | "blue" | "orange" | undefined;
         interactive?: boolean | undefined;
         outline?: boolean | undefined;
         fill?: boolean | undefined;
+        bg?: string | undefined;
+        fg?: string | undefined;
     };
     events: {
         [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.24",
+	"version": "0.0.26",
 	"license": "MIT",
 	"private": false,
 	"scripts": {