@hyvor/design 0.0.37 → 0.0.39

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         size?: "small" | "medium" | "large" | "x-small" | undefined;
         color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
         block?: boolean | undefined;
-        variant?: "fill" | "outline" | "outline-fill" | "invisible" | "fill-light" | undefined;
+        variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible" | undefined;
         align?: "start" | "center" | undefined;
         button?: HTMLButtonElement | HTMLAnchorElement | undefined;
     };

package/dist/components/IconButton/IconButton.svelte

@@ -64,29 +64,65 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
 .button.fill.accent {
   background-color: var(--accent);
   color: var(--accent-text);
+  transition: 0.2s box-shadow;
   --local-hover-shadow-color: var(--accent-light);
 }
 .button.fill.gray {
+  background-color: var(--gray-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--gray-light);
+}
+.button.fill.green {
+  background-color: var(--green-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--green-light);
+}
+.button.fill.red {
+  background-color: var(--red-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--red-light);
+}
+.button.fill.blue {
+  background-color: var(--blue-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--blue-light);
+}
+.button.fill.orange {
+  background-color: var(--orange-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--orange-light);
+}
+.button.fill-light.accent {
+  background-color: var(--accent);
+  color: var(--accent-text);
+  --local-hover-shadow-color: var(--accent-light);
+}
+.button.fill-light.gray {
   background-color: var(--gray-light);
   color: var(--gray-dark);
   --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
 }
-.button.fill.green {
+.button.fill-light.green {
   background-color: var(--green-light);
   color: var(--green-dark);
   --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
 }
-.button.fill.red {
+.button.fill-light.red {
   background-color: var(--red-light);
   color: var(--red-dark);
   --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
 }
-.button.fill.blue {
+.button.fill-light.blue {
   background-color: var(--blue-light);
   color: var(--blue-dark);
   --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
 }
-.button.fill.orange {
+.button.fill-light.orange {
   background-color: var(--orange-light);
   color: var(--orange-dark);
   --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
@@ -201,4 +237,10 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
   background-color: var(--orange-light);
   box-shadow: none !important;
   color: var(--orange-dark);
+}
+
+.button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.2;
+  box-shadow: none !important;
 }</style>

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         size?: number | "small" | "medium" | "large" | undefined;
         color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-        variant?: "fill" | "outline" | "outline-fill" | "invisible" | undefined;
+        variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible" | undefined;
         as?: "button" | "a" | undefined;
     };
     events: {

package/dist/components/IconMessage/IconMessage.svelte

@@ -0,0 +1,74 @@
+<script>import { IconBug, IconInbox, IconPatchExclamation } from "@hyvor/icons";
+export let icon = null;
+export let message = null;
+export let iconSize = 100;
+export let padding = 0;
+export let empty = false;
+export let error = false;
+export let iconColor = null;
+if (empty) {
+  message = message || "No results found";
+  icon = IconInbox;
+}
+if (error) {
+  message = message || "Something went wrong";
+  icon = IconPatchExclamation;
+  iconColor = iconColor || "var(--red)";
+}
+iconColor = iconColor || "var(--gray-dark)";
+</script>
+
+<div 
+    class="icon-message"
+    style:padding={padding + 'px'} 
+>
+
+    <div 
+        class="icon" 
+        style:color={iconColor}
+        style:font-size={iconSize + 'px'}
+        {...$$restProps}
+        >
+            {#if $$slots.icon}
+                <slot name="icon" />
+            {:else if icon}
+                <svelte:component this={icon} size={iconSize + 'px' } />
+            {/if}
+    </div>
+
+    <p class="message">
+        {#if $$slots.message}
+            <slot name="message" />
+        {:else if message}
+            {message}
+        {/if}
+    </p>
+
+</div>
+
+<style>
+
+    .icon-message {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        flex-direction: column; /* Change to column direction */
+        text-align: center;
+    }
+
+    .message {
+        /* Add message styles here */
+        color: var(--text-light);
+        margin-top: -10px;
+    }
+
+    .icon {
+        font-size: 100px;/* Add icon styles here */
+       
+    }
+
+</style> 

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentType } from 'svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: ComponentType | null | undefined;
+        message?: string | null | undefined;
+        iconSize?: number | undefined;
+        padding?: number | undefined;
+        empty?: boolean | undefined;
+        error?: boolean | undefined;
+        iconColor?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        message: {};
+    };
+};
+export type IconMessageProps = typeof __propDef.props;
+export type IconMessageEvents = typeof __propDef.events;
+export type IconMessageSlots = typeof __propDef.slots;
+export default class IconMessage extends SvelteComponent<IconMessageProps, IconMessageEvents, IconMessageSlots> {
+}
+export {};

package/dist/components/Loader/LoadButton.svelte

@@ -0,0 +1,44 @@
+<script>import Button from "../Button/Button.svelte";
+import Loader from "./Loader.svelte";
+export let text;
+export let show;
+export let loading;
+export let height = 50;
+export let divProps = {};
+export let loaderProps = {};
+export let buttonProps = {};
+</script>
+
+{#if show}
+
+    <div 
+        class="load-button"
+        style:height="{height}px"
+        {...divProps}
+    >
+
+        {#if loading}
+            <Loader {...loaderProps} />
+        {:else}
+
+            <Button 
+                size="small"
+                on:click
+                {...buttonProps}
+            >
+                {text}
+            </Button>
+
+        {/if}
+
+    </div>
+
+{/if}
+
+<style>
+    .load-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

package/dist/components/Loader/LoadButton.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+        show: boolean;
+        loading: boolean;
+        height?: number | undefined;
+        divProps?: Record<string, any> | undefined;
+        loaderProps?: {
+            [x: string]: any;
+            block?: boolean | undefined;
+            full?: boolean | undefined;
+            padding?: number | "none" | "small" | "medium" | "large" | undefined;
+            size?: number | "small" | "medium" | "large" | undefined;
+            state?: "none" | "error" | "success" | "loading" | undefined;
+            duration?: number | null | undefined;
+            color?: string | undefined;
+            colorTrack?: string | undefined;
+            invert?: boolean | undefined;
+        } | undefined;
+        buttonProps?: {
+            [x: string]: any;
+            as?: "button" | "a" | undefined;
+            size?: "small" | "medium" | "large" | "x-small" | undefined;
+            color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
+            block?: boolean | undefined;
+            variant?: "fill" | "fill-light" | "outline" | "outline-fill" | "invisible" | undefined;
+            align?: "start" | "center" | undefined;
+            button?: HTMLButtonElement | HTMLAnchorElement | undefined;
+        } | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoadButtonProps = typeof __propDef.props;
+export type LoadButtonEvents = typeof __propDef.events;
+export type LoadButtonSlots = typeof __propDef.slots;
+export default class LoadButton extends SvelteComponent<LoadButtonProps, LoadButtonEvents, LoadButtonSlots> {
+}
+export {};

package/dist/components/SplitControl/SplitControl.svelte

@@ -2,12 +2,16 @@
 import Label from "../FormControl/Label.svelte";
 export let label = "";
 export let caption = "";
+export let flex = [1, 2];
 </script>
 
 
 <div class="split-control" class:has-nested={$$slots.nested}>
 
-    <div class="left">
+    <div 
+        class="left"
+        style:flex={flex[0]}
+    >
 
         <div class="label-wrap">
             {#if $$slots.label}
@@ -29,7 +33,10 @@ export let caption = "";
     </div>
 
     {#if $$slots.default}
-        <div class="right">
+        <div 
+            class="right"
+            style:flex={flex[1]}
+        >
             <slot></slot>
         </div>
     {/if}
@@ -62,12 +69,10 @@ export let caption = "";
 
 .left {
   padding: 15px;
-  flex: 1;
 }
 
 .right {
   padding: 15px;
-  flex: 3;
   min-width: 0;
 }
 

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         label?: string | undefined;
         caption?: string | undefined;
+        flex?: number[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/TabNav/TabNav.svelte

@@ -1,10 +1,16 @@
-<script>import { setContext } from "svelte";
+<script>import { onMount, setContext } from "svelte";
 import { writable } from "svelte/store";
 export let active;
 const activeStore = writable(active);
 setContext("tab-nav-active", activeStore);
 $:
-  active = $activeStore;
+  active, activeStore.set(active);
+onMount(() => {
+  const unsubscribe = activeStore.subscribe((value) => {
+    active = value;
+  });
+  return unsubscribe;
+});
 </script>
 
 <div 

package/dist/components/Tooltip/Tooltip.svelte

@@ -4,6 +4,7 @@ export let position = "top";
 export let color = "black";
 export let show = false;
 export let maxWidth = 300;
+export let disabled = false;
 let wrap;
 let tooltip;
 function positionTooltip() {
@@ -28,9 +29,11 @@ function positionTooltip() {
   }
 }
 async function handleMouseEnter() {
-  show = true;
-  await tick();
-  positionTooltip();
+  if (!disabled) {
+    show = true;
+    await tick();
+    positionTooltip();
+  }
 }
 function handleMouseLeave() {
   show = false;
@@ -61,7 +64,7 @@ onMount(() => {
 >
     <slot />
 
-    {#if show}
+    {#if !disabled && show}
         <div 
             class="tooltip {position}" 
             style:max-width={maxWidth + 'px'}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         color?: "danger" | "accent" | "soft" | "black" | undefined;
         show?: boolean | undefined;
         maxWidth?: number | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { default as Validation } from './FormControl/Validation.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
+export { default as LoadButton } from './Loader/LoadButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
@@ -38,3 +39,4 @@ export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';
 export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as IconMessage } from './IconMessage/IconMessage.svelte';

package/dist/components/index.js

@@ -22,6 +22,7 @@ export { default as Validation } from './FormControl/Validation.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';
+export { default as LoadButton } from './Loader/LoadButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
@@ -38,3 +39,4 @@ export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';
 export { default as toast } from './Toast/toast.js';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as IconMessage } from './IconMessage/IconMessage.svelte';

package/package.json

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