@hyvor/design 0.0.34 → 0.0.36

package/dist/components/ActionList/ActionListItem.svelte

@@ -25,6 +25,8 @@ function handleClick() {
         }
     }}
     {...$$restProps}
+
+    on:click
 >
 
     {#if selection !== 'none'}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         type?: "default" | "danger" | undefined;
     };
     events: {
+        click: MouseEvent;
         select: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/Base/Base.svelte

@@ -1,4 +1,5 @@
-<script>import DarkProvider from "./../Dark/DarkProvider.svelte";
+<script>import ConfirmModalProvider from "./../Modal/ConfirmModalProvider.svelte";
+import DarkProvider from "./../Dark/DarkProvider.svelte";
 import "../../index.js";
 import ToastProvider from "../Toast/ToastProvider.svelte";
 </script>
@@ -6,6 +7,8 @@ import ToastProvider from "../Toast/ToastProvider.svelte";
 <DarkProvider />
 <ToastProvider />
 
+<ConfirmModalProvider />
+
 <div id="base">
     <slot />
 </div>

package/dist/components/Button/Button.svelte

@@ -149,13 +149,6 @@ export let button = {};
   --local-hover-shadow-size: 5px;
 }
 
-/* styles */
-/* .button.accent {
-    background-color: var(--accent);
-    color: var(--accent-text);
-    transition: .2s box-shadow;
-    --local-hover-shadow-color: var(--accent-light);
-} */
 .button.fill.accent {
   background-color: var(--accent);
   color: var(--accent-text);
@@ -163,30 +156,72 @@ export let button = {};
   --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.input {
+  background-color: var(--input);
+  color: var(--text);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--input-hover);
+}
+.button.fill-light.accent {
+  background-color: var(--accent-light);
+  color: var(--accent);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--accent-lightest);
+}
+.button.fill-light.gray {
   background-color: var(--gray-light);
   color: var(--gray-dark);
   transition: 0.2s box-shadow;
   --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);
   transition: 0.2s box-shadow;
   --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);
   transition: 0.2s box-shadow;
   --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);
   transition: 0.2s box-shadow;
   --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);
   transition: 0.2s box-shadow;
@@ -316,19 +351,10 @@ export let button = {};
   box-shadow: none !important;
   color: var(--orange-dark);
 }
-
-.button.soft {
-  background-color: var(--accent-light);
-  color: var(--accent);
-  transition: 0.2s box-shadow;
-  --local-hover-shadow-color: #eee;
-}
-
-.button.light {
-  background-color: #f5f5f5;
+.button.invisible.input:hover {
+  background-color: var(--input);
+  box-shadow: none !important;
   color: var(--text);
-  transition: 0.2s box-shadow;
-  --local-hover-shadow-color: var(--accent-light);
 }
 
 :global(:root.dark) .button.light {
@@ -345,13 +371,6 @@ export let button = {};
   box-shadow: none !important;
 }
 
-.button.danger {
-  background-color: var(--red-dark);
-  color: var(--text-white);
-  transition: 0.2s box-shadow;
-  --local-hover-shadow-color: var(--red-light);
-}
-
 /*Styles for button disabled state*/
 .button[disabled] {
   cursor: not-allowed;

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

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

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" | "invisible" | "outline-fill" | undefined;
+        variant?: "fill" | "outline" | "outline-fill" | "invisible" | undefined;
         as?: "button" | "a" | undefined;
     };
     events: {

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -0,0 +1,52 @@
+<script>import Modal from "./Modal.svelte";
+import { confirmStore } from "./confirm.js";
+import Button from "./../Button/Button.svelte";
+import ButtonGroup from "./../Button/ButtonGroup.svelte";
+let show = true;
+function handleCancel() {
+  $confirmStore.onCancel();
+}
+function handleConfirm() {
+  $confirmStore.onConfirm();
+}
+$: {
+  if (!show) {
+    handleCancel();
+  }
+}
+</script>
+
+{#if $confirmStore}
+
+    <Modal
+        title={$confirmStore.title}
+        show={true}
+        size="small"
+    >
+
+        {#if typeof $confirmStore.content === "string"}
+            {$confirmStore.content}
+        {:else}
+            <svelte:component this={$confirmStore.content} />
+        {/if}
+
+        <svelte:fragment slot="footer">
+            <ButtonGroup>
+                <Button
+                    variant="invisible"
+                    on:click={handleCancel}
+                >
+                    {$confirmStore.cancelText || "Cancel"}
+                </Button>
+                <Button 
+                    color={$confirmStore.danger ? "red" : "accent"}
+                    on:click={handleConfirm}
+                >
+                    {$confirmStore.confirmText || "Confirm"}
+                </Button>
+            </ButtonGroup>
+        </svelte:fragment>
+
+    </Modal>
+
+{/if}

package/dist/components/Modal/ConfirmModalProvider.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConfirmModalProviderProps = typeof __propDef.props;
+export type ConfirmModalProviderEvents = typeof __propDef.events;
+export type ConfirmModalProviderSlots = typeof __propDef.slots;
+export default class ConfirmModalProvider extends SvelteComponent<ConfirmModalProviderProps, ConfirmModalProviderEvents, ConfirmModalProviderSlots> {
+}
+export {};

package/dist/components/Modal/Modal.svelte

@@ -2,11 +2,27 @@
 import { IconX } from "@hyvor/icons";
 import IconButton from "./../IconButton/IconButton.svelte";
 import { scale } from "svelte/transition";
+import { onMount, tick } from "svelte";
 export let show = false;
 export let title = "";
 export let size = "medium";
 export let closeOnOutsideClick = true;
 export let closeOnEscape = true;
+let wrapEl;
+let innerEl;
+async function setFlex() {
+  await tick();
+  if (!wrapEl || !innerEl)
+    return;
+  if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
+    wrapEl.style.alignItems = "flex-start";
+  } else {
+    wrapEl.style.alignItems = "center";
+  }
+}
+onMount(setFlex);
+$:
+  show, setFlex();
 </script>
 
 <svelte:window on:keyup={e => {
@@ -17,7 +33,10 @@ export let closeOnEscape = true;
 
 
 {#if show}
-    <div class="wrap">
+    <div 
+        class="wrap"
+        bind:this={wrapEl}
+    >
 
         <div 
             class="inner {size}"
@@ -26,6 +45,7 @@ export let closeOnEscape = true;
                 callback: () => show = false
             }}
             in:scale={{duration: 100, start: 0.9, opacity: 0.9}}
+            bind:this={innerEl}
         >
 
             <div class="header">
@@ -77,6 +97,8 @@ export let closeOnEscape = true;
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 30px;
+        overflow: auto;
     }
 
     .inner {
@@ -85,8 +107,6 @@ export let closeOnEscape = true;
         box-shadow: var(--box-shadow);
         width: 650px;
         max-width: 100%;
-        max-height: 100%;
-        overflow: auto;
         position: relative;
     }
 
@@ -99,7 +119,6 @@ export let closeOnEscape = true;
 
     .header {
         padding: 20px 25px;
-        border-bottom: 1px solid var(--box-border);
         display: flex;
         align-items: center;
     }

package/dist/components/Modal/confirm.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentType } from "svelte";
+interface ConfirmConfig {
+    title: string;
+    content: string | ComponentType;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+}
+interface ConfirmStore extends ConfirmConfig {
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare const confirmStore: import("svelte/store").Writable<ConfirmStore | null>;
+export declare function confirm(config: ConfirmConfig): Promise<boolean>;
+export {};

package/dist/components/Modal/confirm.js

@@ -0,0 +1,18 @@
+import {} from "svelte";
+import { writable } from "svelte/store";
+export const confirmStore = writable(null);
+export function confirm(config) {
+    return new Promise((resolve, reject) => {
+        confirmStore.set({
+            ...config,
+            onConfirm: () => {
+                resolve(true);
+                confirmStore.set(null);
+            },
+            onCancel: () => {
+                resolve(false);
+                confirmStore.set(null);
+            }
+        });
+    });
+}

package/dist/components/Tag/Tag.svelte

@@ -1,4 +1,5 @@
-<script>export let size = "medium";
+<script>export let as = "span";
+export let size = "medium";
 export let color = "default";
 export let interactive = false;
 export let outline = false;
@@ -9,15 +10,31 @@ let styleClass = "default";
 if (outline) {
   styleClass = fill ? "outline-fill" : "outline";
 }
+let tabindex = interactive ? 0 : void 0;
 </script>
 
-<span
-    class="color-{color} style-{styleClass} size-{size}"
+
+<svelte:element
+    this={as}
+    role={interactive ? 'button' : undefined}
+    tabindex={tabindex}
+    class="button color-{color} style-{styleClass} size-{size}"
     class:interactive
     class:has-start={$$slots.start}
     class:has-end={$$slots.end}
     {...$$restProps}
 
+    on:keyup
+    on:keydown
+    on:keypress
+    on:focus
+    on:blur
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:change
+    
     style:background-color={bg}
     style:color={fg}
 >
@@ -32,7 +49,10 @@ if (outline) {
         <slot name="end" />
     {/if}
 
-</span>
+</svelte:element>
+
+
+
 
 <style>span {
   vertical-align: middle;
@@ -157,4 +177,10 @@ span.style-outline-fill.color-orange {
   background-color: var(--orange-light);
   color: var(--orange-dark);
   border: 1px solid var(--orange-dark);
+}
+
+.button[disabled] {
+  opacity: 0.5 !important;
+  cursor: not-allowed;
+  box-shadow: none !important;
 }</style>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        as?: "span" | "button" | "a" | undefined;
         size?: "small" | "medium" | "large" | "x-small" | undefined;
         color?: "default" | "accent" | "green" | "red" | "blue" | "orange" | undefined;
         interactive?: boolean | undefined;
@@ -11,6 +12,17 @@ declare const __propDef: {
         fg?: string | undefined;
     };
     events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ 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 Modal } from './Modal/Modal.svelte';
+export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';

package/dist/components/index.js

@@ -23,6 +23,7 @@ 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 Modal } from './Modal/Modal.svelte';
+export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';

package/package.json

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