@hyvor/design 0.0.68 → 1.0.5

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

@@ -1,39 +1,17 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [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" | "invisible" | "outline-fill" | undefined;
-        align?: "start" | "center" | undefined;
-        button?: HTMLButtonElement | HTMLAnchorElement | 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: {};
-        action: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+interface Props {
+    as?: 'button' | 'a';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    color?: 'accent' | 'gray' | 'green' | 'red' | 'blue' | 'orange' | 'input';
+    block?: boolean;
+    variant?: 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill';
+    align?: 'start' | 'center';
+    button?: any;
+    start?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    action?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const Button: import("svelte").Component<Props, {}, "button">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Button/ButtonGroup.svelte

@@ -1,5 +1,13 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="button-group">
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

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

@@ -1,27 +1,6 @@
-/** @typedef {typeof __propDef.props}  ButtonGroupProps */
-/** @typedef {typeof __propDef.events}  ButtonGroupEvents */
-/** @typedef {typeof __propDef.slots}  ButtonGroupSlots */
-export default class ButtonGroup extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
 }
-export type ButtonGroupProps = typeof __propDef.props;
-export type ButtonGroupEvents = typeof __propDef.events;
-export type ButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/Callout/Callout.svelte

@@ -1,39 +1,60 @@
-<script>export let type = "soft";
-export let title = void 0;
-</script>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 
-<div class={'callout ' + type} {...$$restProps}>
-	{#if $$slots.title}
-		<div class="title-wrap">
-			{#if $$slots.icon}
-				<span class="title-icon"><slot name="icon" /></span>
-			{/if}
+	const {
+		type = 'soft',
+		title = undefined,
+		children = undefined,
+		text = undefined,
+		icon = undefined,
+		...rest
+	}: {
+		type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
+		title?: string | Snippet;
+		icon?: Snippet;
+		text?: string | Snippet;
+		children?: Snippet;
+		[key: string]: any;
+	} = $props();
+</script>
 
-			<div class="title"><slot name="title" /></div>
-		</div>
-	{:else if title}
+<div class={'callout ' + type} {...rest}>
+	{#if typeof title === 'string'}
 		<div class="title-wrap">
-			{#if $$slots.icon}
+			{#if icon}
 				<span
 					class="title-icon
-        "><slot name="icon" /></span
+		"
 				>
+					{@render icon()}
+				</span>
 			{/if}
-
 			<div class="title">{title}</div>
 		</div>
+	{:else if title !== undefined}
+		<div class="title-wrap">
+			{#if icon}
+				<span class="title-icon">{@render icon()}</span>
+			{/if}
+
+			<div class="title">{@render title?.()}</div>
+		</div>
 	{/if}
 
 	<div class="text-wrap">
-		{#if $$slots.icon && !$$slots.title && !title}
-			<span class="icon"><slot name="icon" /></span>
+		{#if icon && !title}
+			<span class="icon">{@render icon()}</span>
 		{/if}
 
 		<div class="text">
-			{#if $$slots.default}
-				<slot />
+			{#if children}
+				{@render children()}
+			{/if}
+			{#if typeof text === 'string'}
+				{text}
+			{:else}
+				{@render text?.()}
 			{/if}
-			<slot name="text" />
 		</div>
 	</div>
 </div>

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

@@ -1,23 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: "danger" | "success" | "warning" | "info" | "soft" | undefined;
-        title?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        title: {};
-        default: {};
-        text: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
+    title?: string | Snippet;
+    icon?: Snippet;
+    text?: string | Snippet;
+    children?: Snippet;
+    [key: string]: any;
 };
-export type CalloutProps = typeof __propDef.props;
-export type CalloutEvents = typeof __propDef.events;
-export type CalloutSlots = typeof __propDef.slots;
-export default class Callout extends SvelteComponent<CalloutProps, CalloutEvents, CalloutSlots> {
-}
-export {};
+declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,26 +1,47 @@
-<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;
-  if (checked) {
-    if (index < 0) {
-      group.push(value);
-      group = group;
-    }
-  } else {
-    if (index >= 0) {
-      group.splice(index, 1);
-      group = group;
-    }
-  }
-}
+<script lang="ts">
+	import { createBubbler, handlers } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		checked?: boolean | undefined;
+		group?: (number | string)[];
+		value?: string | number;
+		disabled?: boolean;
+		input?: HTMLInputElement;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		checked = $bindable(undefined),
+		group = $bindable([]),
+		value = 'on',
+		disabled = false,
+		input = $bindable({} as HTMLInputElement),
+		children,
+		...rest
+	}: Props = $props();
+
+	/*
+	 * From https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/forms/Checkbox.svelte
+	 */
+	function handleChange() {
+		if (disabled) return;
+		const index = group.indexOf(value);
+		if (checked === undefined) checked = index >= 0;
+		if (checked) {
+			if (index < 0) {
+				group.push(value);
+				group = group;
+			}
+		} else {
+			if (index >= 0) {
+				group.splice(index, 1);
+				group = group;
+			}
+		}
+	}
 </script>
 
 <span class="checkbox-wrap">
@@ -30,23 +51,22 @@ function handleChange() {
 			bind:checked
 			bind:this={input}
 			{disabled}
-			on:keyup
-			on:keydown
-			on:keypress
-			on:focus
-			on:blur
-			on:click
-			on:mouseover
-			on:mouseenter
-			on:mouseleave
-			on:change
-			{...$$restProps}
-			on:change={handleChange}
+			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={handlers(bubble('change'), handleChange)}
+			{...rest}
 		/>
-		<span class="placeholder" />
-		{#if $$slots.default}
+		<span class="placeholder"></span>
+		{#if children}
 			<span class="label">
-				<slot />
+				{@render children?.()}
 			</span>
 		{/if}
 	</label>

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

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

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -1,12 +1,22 @@
-<script>import "./hljs.scss";
-export let code;
-export let language = "html";
-const languagesMap = {
-  svelte: "html",
-  jsx: "js"
-};
-const languageCode = languagesMap[language] || language;
-import getCode, {} from "./getCode.js";
+<script lang="ts">
+	//import './prism.scss';
+	import './hljs.scss';
+
+	type InputLanguage = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php';
+
+	const languagesMap: Partial<Record<InputLanguage, Language>> = {
+		svelte: 'html',
+		jsx: 'js'
+	};
+
+	import getCode, { type Language } from './getCode.js';
+	interface Props {
+		code: string;
+		language?: InputLanguage;
+	}
+
+	let { code, language = 'html' }: Props = $props();
+	const languageCode = (languagesMap[language] || language) as Language;
 </script>
 
 <pre class="language-{languageCode} hljs"><code>{@html getCode(code, languageCode)}</code></pre>
@@ -22,7 +32,7 @@ import getCode, {} from "./getCode.js";
 		overflow: auto;
 		border-radius: 20px;
 		padding: 20px;
-		line-height: 1.1;
+		line-height: 1.2;
 	}
 	pre code {
 		all: unset;
@@ -33,7 +43,7 @@ import getCode, {} from "./getCode.js";
 			Ubuntu Mono,
 			monospace;
 		font-size: 14px;
-		line-height: 1.5;
+		line-height: 1.5 !important;
 		tab-size: 4;
 		hyphens: none;
 	}

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

@@ -1,18 +1,9 @@
-import { SvelteComponent } from "svelte";
 import './hljs.scss';
-declare const __propDef: {
-    props: {
-        code: string;
-        language?: ("css" | "ts" | "yaml" | "json" | "html" | "js" | "svelte" | "jsx") | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CodeBlockProps = typeof __propDef.props;
-export type CodeBlockEvents = typeof __propDef.events;
-export type CodeBlockSlots = typeof __propDef.slots;
-export default class CodeBlock extends SvelteComponent<CodeBlockProps, CodeBlockEvents, CodeBlockSlots> {
+type InputLanguage = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php';
+interface Props {
+    code: string;
+    language?: InputLanguage;
 }
-export {};
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/CodeBlock/getCode.js

@@ -5,12 +5,14 @@ import css from 'highlight.js/lib/languages/css';
 import ts from 'highlight.js/lib/languages/typescript';
 import yaml from 'highlight.js/lib/languages/yaml';
 import json from 'highlight.js/lib/languages/json';
+import php from 'highlight.js/lib/languages/php';
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml);
 hljs.registerLanguage('css', css);
 hljs.registerLanguage('ts', ts);
 hljs.registerLanguage('yaml', yaml);
 hljs.registerLanguage('json', json);
+hljs.registerLanguage('php', php);
 export default function getCode(code, language) {
     let ret = code;
     // remove the first empty line

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -1,17 +1,35 @@
-<script>import ColorPicker from "svelte-awesome-color-picker";
-import { clickOutside } from "../index.js";
-import { createEventDispatcher } from "svelte";
-export let color = "#000000";
-export let size = 30;
-export let show = false;
-const dispatch = createEventDispatcher();
-function handleInput() {
-  dispatch("input", color);
-}
-function handleClose() {
-  dispatch("change", color);
-  show = false;
-}
+<script lang="ts">
+	import ColorPicker from 'svelte-awesome-color-picker';
+	import { clickOutside } from '../index.js';
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		color?: string;
+		size?: number;
+		show?: boolean;
+		'aria-label'?: string;
+	}
+
+	let {
+		color = $bindable('#000000'),
+		size = 30,
+		show = $bindable(false),
+		'aria-label': ariaLabel = ''
+	}: Props = $props();
+
+	const dispatch = createEventDispatcher<{
+		input: string;
+		change: string;
+	}>();
+
+	function handleInput() {
+		dispatch('input', color);
+	}
+
+	function handleClose() {
+		dispatch('change', color);
+		show = false;
+	}
 </script>
 
 <span class="color-picker">
@@ -19,13 +37,14 @@ function handleClose() {
 		style:width="{size}px"
 		style:height="{size}px"
 		style:background-color={color}
-		on:click={() => {
+		onclick={() => {
 			if (show) {
 				handleClose();
 			} else {
 				show = true;
 			}
 		}}
+		aria-label={ariaLabel}
 	></button>
 
 	{#if show}

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

@@ -1,21 +1,28 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        color?: string | undefined;
-        size?: number | undefined;
-        show?: boolean | undefined;
-    };
-    events: {
-        input: CustomEvent<string>;
-        change: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+import ColorPicker from 'svelte-awesome-color-picker';
+interface Props {
+    color?: string;
+    size?: number;
+    show?: boolean;
+    'aria-label'?: string;
+}
+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;
     };
-    slots: {};
-};
-export type ColorPickerProps = typeof __propDef.props;
-export type ColorPickerEvents = typeof __propDef.events;
-export type ColorPickerSlots = typeof __propDef.slots;
-export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<Props, {
+    input: CustomEvent<string>;
+    change: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "color" | "show">;
+type ColorPicker = InstanceType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/Dark/DarkProvider.svelte

@@ -1,8 +1,10 @@
-<script>import { onMount } from "svelte";
-import { setInitialState } from "../../stores/dark.js";
-onMount(() => {
-  setInitialState();
-});
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { setInitialState } from '../../stores/dark.js';
+
+	onMount(() => {
+		setInitialState();
+	});
 </script>
 
 <svelte:head>

package/dist/components/Dark/DarkProvider.svelte.d.ts

@@ -1,14 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-};
-export type DarkProviderProps = typeof __propDef.props;
-export type DarkProviderEvents = typeof __propDef.events;
-export type DarkProviderSlots = typeof __propDef.slots;
-export default class DarkProvider extends SvelteComponent<DarkProviderProps, DarkProviderEvents, DarkProviderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const DarkProvider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DarkProvider = InstanceType<typeof DarkProvider>;
+export default DarkProvider;

package/dist/components/Dark/DarkToggle.svelte

@@ -1,9 +1,11 @@
-<script>import { IconMoonStarsFill, IconSunFill } from "@hyvor/icons";
-import IconButton from "../IconButton/IconButton.svelte";
-import { dark } from "./../../stores/dark.js";
-function handleClick() {
-  dark.update((value) => !value);
-}
+<script lang="ts">
+	import { IconMoonStarsFill, IconSunFill } from '@hyvor/icons';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import { dark } from './../../stores/dark.js';
+
+	function handleClick() {
+		dark.update((value) => !value);
+	}
 </script>
 
 <IconButton on:click={handleClick} variant="invisible">