@hyvor/design 0.0.67 → 1.0.3

package/dist/components/NavLink/NavLink.svelte

@@ -1,95 +1,100 @@
-<script>export let href;
-export let active = false;
-export let disabled = false;
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	type Props = {
+		href: string;
+		active?: boolean;
+		disabled?: boolean;
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	};
+
+	let { href, active = false, disabled = false, start, children, end }: Props = $props();
 </script>
 
-<a 
-    {href}
-    class:active={active}
-    class:disabled={disabled}
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
+<a
+	{href}
+	class:active
+	class:disabled
+	onkeyup={bubble('keyup')}
+	onkeydown={bubble('keydown')}
+	onkeypress={bubble('keypress')}
+	onfocus={bubble('focus')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	onmouseover={bubble('mouseover')}
+	onmouseenter={bubble('mouseenter')}
+	onmouseleave={bubble('mouseleave')}
+	onchange={bubble('change')}
 >
-
-
-
-    {#if $$slots.start}
-        <span class="start">
-            <slot name="start" />
-        </span>
-    {/if}
-
-    <span class="middle">
-        <slot />
-    </span>
-    
-    {#if $$slots.end}
-        <span class="end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if start}
+		<span class="start">
+			{@render start?.()}
+		</span>
+	{/if}
+
+	<span class="middle">
+		{@render children?.()}
+	</span>
+
+	{#if end}
+		<span class="end">
+			{@render end?.()}
+		</span>
+	{/if}
 </a>
 
-
 <style>
-
-    a {
-        display: flex;
-        padding: 12px 29px;
-        font-size: 14px;
-        letter-spacing: .3px;
-        border-left: 3px solid transparent;
-        cursor: pointer;
-        align-items: center; 
-    }
-
-    a:hover {
-        background-color: var(--hover);
-    
-    }
-
-    a.active {
-        background-color: var(--accent-lightest);
-        border-left: 3px solid var(--accent);
-    }
-
-    a.disabled {
-        cursor: not-allowed;
-        opacity: .5;
-
-        /* hover */
-        background-color: transparent;
-        
-    }
-
-    .start, .middle, .end {
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .middle {
-        flex: 1;
-         /* display: flex;  */
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    
-    .start {
-        margin-right: 8px;
-        
-    }
-
-    .end {
-        margin-left: 8px;
-    }
-
-
-</style>
+	a {
+		display: flex;
+		padding: 12px 29px;
+		font-size: 14px;
+		letter-spacing: 0.3px;
+		border-left: 3px solid transparent;
+		cursor: pointer;
+		align-items: center;
+	}
+
+	a:hover {
+		background-color: var(--hover);
+	}
+
+	a.active {
+		background-color: var(--accent-lightest);
+		border-left: 3px solid var(--accent);
+	}
+
+	a.disabled {
+		cursor: not-allowed;
+		pointer-events: none;
+		opacity: 0.5;
+		/* hover */
+		background-color: transparent;
+	}
+
+	.start,
+	.middle,
+	.end {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.middle {
+		flex: 1;
+		/* display: flex;  */
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.start {
+		margin-right: 8px;
+	}
+
+	.end {
+		margin-left: 8px;
+	}
+</style>

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

@@ -1,33 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        href: string;
-        active?: boolean | undefined;
-        disabled?: boolean | 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: {
-        start: {};
-        default: {};
-        end: {};
-    };
-};
-export type NavLinkProps = typeof __propDef.props;
-export type NavLinkEvents = typeof __propDef.events;
-export type NavLinkSlots = typeof __propDef.slots;
-export default class NavLink extends SvelteComponent<NavLinkProps, NavLinkEvents, NavLinkSlots> {
-}
-export {};
+declare const NavLink: import("svelte").Component<{
+    [key: string]: any;
+    href: string;
+    active?: boolean;
+    disabled?: boolean;
+    start?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "">;
+type NavLink = ReturnType<typeof NavLink>;
+export default NavLink;

package/dist/components/Radio/Radio.svelte

@@ -1,42 +1,53 @@
-<script>export let value = "";
-export let group = "";
-export let disabled = false;
-export let input = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		/* for whatever reason simply passing value with rest props doesn't work */
+		value?: number | string;
+		group?: number | string;
+		disabled?: boolean;
+		input?: any;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		value = '',
+		group = $bindable(''),
+		disabled = false,
+		input = $bindable({} as HTMLInputElement),
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<label
-    class:disabled={disabled}
->
-
-    <input
-        type="radio"
-        disabled={disabled}
-        bind:group
-        bind:this={input}
-        {value}
-
-
-        on:keyup
-        on:keydown
-        on:keypress
-        on:focus
-        on:blur
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        on:change
-
-        {...$$restProps}
-    />
-
-    <span class="checkmark"></span>
-
-    <slot />
-
+<label class:disabled>
+	<input
+		type="radio"
+		{disabled}
+		bind:group
+		bind:this={input}
+		{value}
+		onkeyup={bubble('keyup')}
+		onkeydown={bubble('keydown')}
+		onkeypress={bubble('keypress')}
+		onfocus={bubble('focus')}
+		onblur={bubble('blur')}
+		onclick={bubble('click')}
+		onmouseover={bubble('mouseover')}
+		onmouseenter={bubble('mouseenter')}
+		onmouseleave={bubble('mouseleave')}
+		onchange={bubble('change')}
+		{...rest}
+	/>
+
+	<span class="checkmark"></span>
+
+	{@render children?.()}
 </label>
 
-
 <style>label {
   position: relative;
   padding-left: 30px;

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

@@ -1,33 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | number | undefined;
-        group?: string | number | undefined;
-        disabled?: boolean | undefined;
-        input?: HTMLInputElement | 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: {
-        default: {};
-    };
-};
-export type RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = typeof __propDef.slots;
-export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
-}
-export {};
+declare const Radio: import("svelte").Component<{
+    [key: string]: any;
+    value?: number | string;
+    group?: number | string;
+    disabled?: boolean;
+    input?: any;
+    children?: import("svelte").Snippet;
+}, {}, "group" | "input">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Slider/Slider.svelte

@@ -1,127 +1,136 @@
-<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 lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		min: number;
+		max: number;
+		value: number;
+		step?: number;
+		// export let disabled = false;
+		dots?: boolean;
+	}
+
+	let { min, max, value = $bindable(), step = 1, dots = false }: Props = $props();
+
+	const dispatch = createEventDispatcher<{
+		change: number;
+	}>();
+
+	function toStep(value: number) {
+		return Math.max(min, Math.min(max, Math.round(value / step) * step));
+	}
+
+	let progress = $derived(((value - min) / (max - min)) * 100);
+
+	let dragging = $state(false);
+	let trackEl: HTMLDivElement | undefined = $state();
+
+	function handleMousedown(event: MouseEvent) {
+		dragging = true;
+		handleMousemove(event);
+
+		window.addEventListener('mousemove', handleMousemove);
+		window.addEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMouseup() {
+		dragging = false;
+		window.removeEventListener('mousemove', handleMousemove);
+	}
+
+	function handleMousemove(event: MouseEvent) {
+		if (!trackEl) return;
+		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>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="track" bind:this={trackEl} class:dragging onmousedown={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);
-    }
+	.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

@@ -1,22 +1,26 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        min: number;
-        max: number;
-        value: number;
-        step?: number | undefined;
-        dots?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Slider: $$__sveltets_2_IsomorphicComponent<{
+    min: number;
+    max: number;
+    value: number;
+    step?: number;
+    dots?: boolean;
+}, {
+    change: CustomEvent<number>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type Slider = InstanceType<typeof Slider>;
+export default Slider;