@hyvor/design 0.0.44 → 0.0.47

package/dist/components/ActionList/ActionListItem.svelte

@@ -120,4 +120,15 @@ function handleClick() {
         color: var(--text-light);
     }
 
+    div.action-list-item.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    div.action-list-item.disabled:hover {
+        background-color: transparent;
+        pointer-events: none;
+    }
+
 </style>

package/dist/components/Button/Button.svelte

@@ -324,7 +324,6 @@ export let button = {};
 .button.invisible.accent:hover {
   background-color: var(--accent-light);
   box-shadow: none !important;
-  color: var(--text-light);
 }
 .button.invisible.gray:hover {
   background-color: var(--gray-light);

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,8 +1,11 @@
 <script>export let checked = void 0;
 export let group = [];
 export let value = "on";
+export let disabled = false;
 export let input = {};
 function handleChange() {
+  if (disabled)
+    return;
   const index = group.indexOf(value);
   if (checked === void 0)
     checked = index >= 0;
@@ -28,6 +31,7 @@ function handleChange() {
             type="checkbox"
             bind:checked
             bind:this={input}
+            disabled={disabled}
 
             on:keyup
             on:keydown
@@ -127,4 +131,19 @@ function handleChange() {
     input:checked ~ span.placeholder:after {
         display:block;
     }
+
+     /* disabled styles */
+     input:disabled ~ span.placeholder {
+        background-color: var(--accent-light);
+        border: none !important;
+        opacity: 0.2;
+        cursor: not-allowed;
+        box-shadow: none !important;
+
+    }
+
+    input:disabled:checked ~ span.placeholder:after {
+        display: none;
+        pointer-events: none;
+    }
 </style>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         checked?: boolean | undefined;
         group?: (string | number)[] | undefined;
         value?: string | number | undefined;
+        disabled?: boolean | undefined;
         input?: HTMLInputElement | undefined;
     };
     events: {

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,4 +1,4 @@
-<script>import { clickOutside } from "../../directives/clickOutside.js";
+<script>import { clickOutside } from "../directives/clickOutside.js";
 import Box from "./../Box/Box.svelte";
 export let show = false;
 export let width = 225;

package/dist/components/Modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script>import ModalFooter from "./ModalFooter.svelte";
-import { clickOutside } from "../../directives/clickOutside.js";
+import { clickOutside } from "../directives/clickOutside.js";
 import { IconX } from "@hyvor/icons";
 import IconButton from "./../IconButton/IconButton.svelte";
 import { fade, scale } from "svelte/transition";

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,4 +1,5 @@
 <script>import { tick, onMount, onDestroy } from "svelte";
+import { fade } from "svelte/transition";
 export let text = "";
 export let position = "top";
 export let color = "black";
@@ -69,6 +70,7 @@ onMount(() => {
             class="tooltip {position}" 
             style:max-width={maxWidth + 'px'}
             bind:this={tooltip}
+            transition:fade={{duration: 100}}
         >
             {#if $$slots.tooltip}
                 <slot name="tooltip" />
@@ -81,7 +83,8 @@ onMount(() => {
 
 <style>
     .tooltip-wrap {
-        display: inline;
+        display: inline-flex;
+        align-items: center;
         position: relative;
 
         --local-bg: #24292f;

package/dist/components/index.d.ts

@@ -40,3 +40,4 @@ 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';
+export { clickOutside } from './directives/clickOutside.js';

package/dist/components/index.js

@@ -40,3 +40,5 @@ 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';
+// directives
+export { clickOutside } from './directives/clickOutside.js';

package/dist/index.css

@@ -43,4 +43,11 @@ button, a {
     box-shadow: var(--box-shadow);
     border-radius: var(--box-radius);
     background-color: var(--box-background);
+}
+
+.hds-container {
+    width: 1000px;
+    max-width: 100%;
+    padding: 0 15px;
+    margin: auto;
 }

package/dist/marketing/Docs/Content/DocsImage.svelte

@@ -0,0 +1,78 @@
+<script>import { scale } from "svelte/transition";
+import { clickOutside } from "../../../components/index.js";
+export let src;
+export let alt;
+export let width = void 0;
+let open = false;
+</script>
+
+<div class="wrap">
+    <img 
+        {src} 
+        {alt} 
+        {...$$restProps} 
+        {width} 
+        on:click={() => open = true}
+        class="preview"
+    />
+</div>
+
+{#if open}
+    <div 
+        class="modal"
+    >
+        <img 
+            {src} 
+            {alt} 
+            {...$$restProps} 
+            {width} 
+            use:clickOutside={{
+                callback: () => open = false
+            }}
+            transition:scale={{ duration: 100, opacity: 0.5, start: 0.95 }}
+        />
+    </div>
+{/if}
+
+<style>
+    img.preview {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0 auto;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0,0,0,0.2);
+        cursor: pointer;
+        transition: .1s box-shadow;
+    }
+    img.preview:hover {
+        box-shadow: 0 0 15px rgba(0,0,0,0.3);
+    }
+
+    .modal {
+        position: fixed;
+        z-index: 1000000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        overflow: hidden;
+    }
+    .modal-content {
+        min-height: 0;
+    }
+    .modal img {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 5px;
+    }
+    .wrap {
+        padding: 25px 0;
+    }
+
+</style>

package/dist/marketing/Docs/Content/DocsImage.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        src: string;
+        alt: string;
+        width?: undefined | number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocsImageProps = typeof __propDef.props;
+export type DocsImageEvents = typeof __propDef.events;
+export type DocsImageSlots = typeof __propDef.slots;
+export default class DocsImage extends SvelteComponent<DocsImageProps, DocsImageEvents, DocsImageSlots> {
+}
+export {};

package/dist/marketing/index.d.ts

@@ -5,5 +5,6 @@ export { default as DocsNav } from './Docs/Nav/Nav.svelte';
 export { default as DocsNavItem } from './Docs/Nav/NavItem.svelte';
 export { default as DocsNavCategory } from './Docs/Nav/NavCategory.svelte';
 export { default as DocsContent } from './Docs/Content/Content.svelte';
+export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';

package/dist/marketing/index.js

@@ -5,5 +5,6 @@ export { default as DocsNav } from './Docs/Nav/Nav.svelte';
 export { default as DocsNavItem } from './Docs/Nav/NavItem.svelte';
 export { default as DocsNavCategory } from './Docs/Nav/NavCategory.svelte';
 export { default as DocsContent } from './Docs/Content/Content.svelte';
+export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';

package/package.json

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