@hyvor/design 0.0.64 → 0.0.67

package/dist/components/IconMessage/IconMessage.svelte

@@ -18,21 +18,13 @@ if (error) {
 iconColor = iconColor || "var(--gray-dark)";
 </script>
 
-<div 
-    class="icon-message"
-    style:padding={padding + 'px'} 
->
-
-    <div 
-        class="icon" 
-        style:color={iconColor}
-        {...$$restProps}
-        >
-            {#if $$slots.icon}
-                <slot name="icon" />
-            {:else if icon}
-                <svelte:component this={icon} size={iconSize + 'px' } />
-            {/if}
+<div class="icon-message" style:padding={padding + "px"}>
+    <div class="icon" style:color={iconColor} {...$$restProps}>
+        {#if $$slots.icon}
+            <slot name="icon" />
+        {:else if icon}
+            <svelte:component this={icon} size={iconSize + "px"} />
+        {/if}
     </div>
 
     <div class="message">
@@ -42,11 +34,9 @@ iconColor = iconColor || "var(--gray-dark)";
             {message}
         {/if}
     </div>
-
 </div>
 
 <style>
-
     .icon-message {
         width: 100%;
         height: 100%;
@@ -64,8 +54,4 @@ iconColor = iconColor || "var(--gray-dark)";
         color: var(--text-light);
         margin-top: 15px;
     }
-
-    .icon {
-    }
-
-</style> 
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ComponentType } from 'svelte';
+import type { ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,127 @@
+<script>import { createEventDispatcher } from "svelte";
+export let min;
+export let max;
+export let value;
+export let step = 1;
+export let dots = false;
+const dispatch = createEventDispatcher();
+function toStep(value2) {
+  return Math.max(min, Math.min(max, Math.round(value2 / step) * step));
+}
+$:
+  progress = (value - min) / (max - min) * 100;
+let dragging = false;
+let trackEl;
+function handleMousedown(event) {
+  dragging = true;
+  handleMousemove(event);
+  window.addEventListener("mousemove", handleMousemove);
+  window.addEventListener("mouseup", handleMouseup);
+}
+function handleMouseup() {
+  dragging = false;
+  window.removeEventListener("mousemove", handleMousemove);
+}
+function handleMousemove(event) {
+  if (dragging) {
+    const rect = trackEl.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const width = rect.width;
+    const newValue = min + x / width * (max - min);
+    value = toStep(newValue);
+    dispatch("change", value);
+  }
+}
+</script>
+
+<div class="slider">
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+        class="track"
+        bind:this={trackEl}
+        class:dragging
+        on:mousedown={handleMousedown}
+    >
+        <div class="progress" style="width: {progress}%"></div>
+        <button class="handle" style="left: {progress}%">
+            <span class="tip">
+                {value}
+            </span>
+        </button>
+
+        {#if dots}
+            {#each Array.from({ length: (max - min) / step + 1 }, (_, i) => i) as i}
+                <div
+                    class="dot"
+                    style="left: {(i * 100) / ((max - min) / step)}%"
+                ></div>
+            {/each}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .track {
+        background-color: var(--input);
+        height: 10px;
+        border-radius: 20px;
+        position: relative;
+    }
+    .handle {
+        background-color: var(--accent);
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        cursor: grab;
+        z-index: 1;
+        transition: 0.2s box-shadow;
+    }
+    .handle:hover {
+        box-shadow: 0 0 0 2px var(--accent-light);
+    }
+    .tip {
+        position: absolute;
+        bottom: 100%;
+        margin-bottom: 3px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 3px 6px;
+        border-radius: 5px;
+
+        /* from Tooltip */
+        --local-bg: #24292f;
+        --local-color: #fff;
+
+        background-color: var(--local-bg);
+        color: var(--local-color);
+        display: none;
+    }
+
+    .dot {
+        background-color: var(--accent-light);
+        z-index: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .handle:hover .tip,
+    .track.dragging .tip {
+        display: block;
+    }
+
+    .track.dragging,
+    .track.dragging .handle {
+        cursor: grabbing;
+    }
+
+    .track.dragging .handle {
+        box-shadow: 0 0 0 3px var(--accent-light);
+    }
+</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        min: number;
+        max: number;
+        value: number;
+        step?: number | undefined;
+        dots?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<number>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};

package/dist/components/Textarea/Textarea.svelte

@@ -6,32 +6,27 @@ export let state = "default";
 export let textarea = {};
 </script>
 
-
-<span class="input-wrap state-{state}" 
+<span
+    class="input-wrap state-{state}"
     class:block
     on:click={() => textarea.focus()}
     on:keydown={(e) => {
-        if (e.key === 'Enter') {
+        if (e.key === "Enter") {
             textarea.focus();
         }
     }}
     role="textbox"
-    tabindex="0"   
+    tabindex="0"
 >
-
     {#if $$slots.start}
-        <span class="slot start" 
-            
-        >
+        <span class="slot start">
             <slot name="start" />
         </span>
     {/if}
 
-    <textarea 
-        bind:value={value}
+    <textarea
+        bind:value
         bind:this={textarea}
-        
-
         on:keyup
         on:keydown
         on:keypress
@@ -43,12 +38,9 @@ export let textarea = {};
         on:mouseleave
         on:change
         on:input
-
         {rows}
         {cols}
-
         {...$$restProps}
-    
     ></textarea>
 
     {#if $$slots.end}
@@ -137,4 +129,4 @@ export let textarea = {};
 }
 .input-wrap textarea:focus {
   outline: none;
-}</style>
+}</style>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | undefined;
+        value?: any;
         block?: boolean | undefined;
         rows?: number | undefined;
         cols?: number | undefined;

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ 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 Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';

package/dist/components/index.js

@@ -27,6 +27,7 @@ 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 Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';

package/dist/marketing/Document/Document.svelte

@@ -0,0 +1,59 @@
+<script>import FeatureSectionTitle from "./DocumentTitle.svelte";
+export let title;
+export let subtitle;
+</script>
+
+<section>
+    <div class="hds-container container">
+        <FeatureSectionTitle {title} />
+        <div class="date">{subtitle}</div>
+        <content><slot /></content>
+    </div>
+</section>
+
+<style>* {
+  line-height: 30px;
+}
+
+.container {
+  margin: 0 auto 20px auto;
+  padding: 30px 15px 20px 15px;
+}
+.container :global(.wrap) {
+  margin-top: 0 !important;
+}
+.container .date {
+  text-align: center;
+  margin: 15px 0 60px 0;
+  color: var(--text-light);
+}
+.container content :global(h2) {
+  font-size: 32px !important;
+  font-weight: 600;
+  margin-top: 40px;
+  position: relative;
+}
+.container content :global(h3) {
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+.container content :global(p) {
+  margin-top: 20px;
+}
+.container content :global(ul) {
+  margin-top: 20px;
+}
+.container content :global(ol) {
+  margin-top: 20px;
+}
+.container content :global(hr) {
+  margin: 40px 0;
+  border: none;
+  height: 1px;
+  background-color: var(--border);
+}
+.container content :global(a) {
+  color: var(--link);
+  text-decoration: underline;
+}</style>

package/dist/marketing/Document/Document.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        subtitle: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DocumentProps = typeof __propDef.props;
+export type DocumentEvents = typeof __propDef.events;
+export type DocumentSlots = typeof __propDef.slots;
+export default class Document extends SvelteComponent<DocumentProps, DocumentEvents, DocumentSlots> {
+}
+export {};

package/dist/marketing/Document/DocumentTitle.svelte

@@ -0,0 +1,63 @@
+<script>export let title;
+export let subtitle = void 0;
+export let icon = null;
+export let h2Style = void 0;
+export let wrapStyle = void 0;
+</script>
+
+<div class="wrap document-title" style={wrapStyle}>
+    <h2 style={h2Style}>
+        {title}
+        {#if icon}
+            <div class="img-wrap">
+                <img src={icon} alt={title} />
+            </div>
+        {/if}
+    </h2>
+
+    {#if subtitle}
+        <h3>{@html subtitle}</h3>
+    {/if}
+</div>
+
+<style>
+    .wrap {
+        margin-top: 100px;
+    }
+    h2 {
+        font-size: 38px;
+        font-weight: 700;
+        margin-bottom: 10px;
+        margin-top: 20px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    h3 {
+        font-size: 20px;
+        width: 650px;
+        max-width: 100%;
+        margin: 0 auto;
+        font-weight: normal;
+        line-height: 1.4;
+        text-align: center;
+    }
+    .img-wrap {
+        text-align: center;
+        margin-left: 20px;
+        display: inline-flex;
+        align-items: center;
+    }
+    img {
+        width: 85px;
+        height: 85px;
+    }
+
+    @media (max-width: 992px) {
+        h2 {
+            flex-direction: column-reverse;
+            gap: 15px;
+        }
+    }
+</style>

package/dist/marketing/Document/DocumentTitle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        subtitle?: string | undefined;
+        icon?: string | null | undefined;
+        h2Style?: string | undefined;
+        wrapStyle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocumentTitleProps = typeof __propDef.props;
+export type DocumentTitleEvents = typeof __propDef.events;
+export type DocumentTitleSlots = typeof __propDef.slots;
+export default class DocumentTitle extends SvelteComponent<DocumentTitleProps, DocumentTitleEvents, DocumentTitleSlots> {
+}
+export {};

package/dist/marketing/index.d.ts

@@ -8,3 +8,4 @@ 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';
+export { default as Document } from './Document/Document.svelte';

package/dist/marketing/index.js

@@ -8,3 +8,4 @@ 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';
+export { default as Document } from './Document/Document.svelte';

package/package.json

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