@hyvor/design 0.0.67 → 1.0.3

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

@@ -1,22 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: "danger" | "success" | "warning" | "info" | "soft" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        title: {};
-        default: {};
-        text: {};
-    };
-};
-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 {};
+import type { Snippet } from 'svelte';
+declare const Callout: import("svelte").Component<{
+    [key: string]: any;
+    type?: "info" | "success" | "warning" | "danger" | "soft";
+    title?: string | Snippet;
+    icon?: Snippet;
+    text?: string | Snippet;
+    children?: Snippet;
+}, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,149 +1,161 @@
-<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"
->
-    <label>
-        <input
-            type="checkbox"
-            bind:checked
-            bind:this={input}
-            disabled={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}
-
-        />
-        <span class="placeholder" />
-        {#if $$slots.default}
-            <span class="label">
-                <slot />
-            </span>
-        {/if}
-    </label>
+<span class="checkbox-wrap">
+	<label>
+		<input
+			type="checkbox"
+			bind:checked
+			bind:this={input}
+			{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={handlers(bubble('change'), handleChange)}
+			{...rest}
+		/>
+		<span class="placeholder"></span>
+		{#if children}
+			<span class="label">
+				{@render children?.()}
+			</span>
+		{/if}
+	</label>
 </span>
 
 <style>
-
-    .label {
-        margin-left: 8px;
-    }
-
-    .checkbox-wrap {
-        position: relative;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        vertical-align: middle;
-    }
-
-    .checkbox-wrap label {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    input {
-        position: absolute;
-        opacity: 0;
-        width:0;
-        height:0;
-    }
-
-    span.placeholder {
-        display: inline-block;
-        width:16px; 
-        height:16px;
-        background-color: var(--input);
-        border-radius: 2px;
-        outline: 1px solid var(--accent);
-        position: relative;
-    }
-
-    span.placeholder:focus-visible {
-        box-shadow: 0 0 0 4px var(--accent-light);
-    }
-
-    /* the check icon */
-    span.placeholder:after {
-        content: "";
-        position: absolute;
-        display: none;
-        
-        /* check icon */
-        left: 4.5px;
-        top: 1px;
-        width: 4px;
-        height: 9px;
-        border: solid var(--accent-text);
-        border-width: 0 3px 3px 0;
-        transform: rotate(45deg);
-        transition: .2s box-shadow;
-    }
-    
-    .checkbox-wrap:hover span.placeholder {
-        box-shadow: 0 0 0 3px var(--accent-light);
-    }
-    
-    input:checked ~ span.placeholder {
-        background-color: var(--accent)!important;
-    }
-
-    input:focus ~ span.placeholder {
-        box-shadow: 0 0 0 4px var(--accent-light);
-    }
-
-    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>
+	.label {
+		margin-left: 8px;
+	}
+
+	.checkbox-wrap {
+		position: relative;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		vertical-align: middle;
+	}
+
+	.checkbox-wrap label {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	span.placeholder {
+		display: inline-block;
+		width: 16px;
+		height: 16px;
+		background-color: var(--input);
+		border-radius: 2px;
+		outline: 1px solid var(--accent);
+		position: relative;
+	}
+
+	span.placeholder:focus-visible {
+		box-shadow: 0 0 0 4px var(--accent-light);
+	}
+
+	/* the check icon */
+	span.placeholder:after {
+		content: '';
+		position: absolute;
+		display: none;
+
+		/* check icon */
+		left: 4.5px;
+		top: 1px;
+		width: 4px;
+		height: 9px;
+		border: solid var(--accent-text);
+		border-width: 0 3px 3px 0;
+		transform: rotate(45deg);
+		transition: 0.2s box-shadow;
+	}
+
+	.checkbox-wrap:hover span.placeholder {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
+
+	input:checked ~ span.placeholder {
+		background-color: var(--accent) !important;
+	}
+
+	input:focus ~ span.placeholder {
+		box-shadow: 0 0 0 4px var(--accent-light);
+	}
+
+	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

@@ -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,37 +1,50 @@
-<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>
 
 <style>
-    /*styles for CodeBlock component */
-    pre {
-        text-align: left;
-        white-space: pre;
-        word-spacing: normal;
-        word-break: normal;
-        word-wrap: normal;
-        overflow: auto;
-        border-radius: 20px;
-        padding: 20px;
-        line-height: 1.1;
-    }
-    pre code {
-        all: unset;
-        font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        tab-size: 4;
-        hyphens: none;
-    }
-
-
-</style>
+	/*styles for CodeBlock component */
+	pre {
+		text-align: left;
+		white-space: pre;
+		word-spacing: normal;
+		word-break: normal;
+		word-wrap: normal;
+		overflow: auto;
+		border-radius: 20px;
+		padding: 20px;
+		line-height: 1.2;
+	}
+	pre code {
+		all: unset;
+		font-family:
+			Consolas,
+			Monaco,
+			Andale Mono,
+			Ubuntu Mono,
+			monospace;
+		font-size: 14px;
+		line-height: 1.5 !important;
+		tab-size: 4;
+		hyphens: none;
+	}
+</style>

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

@@ -1,18 +1,7 @@
-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> {
-}
-export {};
+declare const CodeBlock: import("svelte").Component<{
+    code: string;
+    language?: "css" | "ts" | "yaml" | "json" | "php" | "html" | "js" | "svelte" | "jsx";
+}, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/CodeBlock/getCode.js

@@ -5,33 +5,35 @@ 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
-    ret = ret.replace(/^[^\S\r\n]*\n/, "");
+    ret = ret.replace(/^[^\S\r\n]*\n/, '');
     // remove the last empty line
-    ret = ret.replace(/\n[^\S\r\n]*$/, "");
-    let lines = ret.split("\n");
+    ret = ret.replace(/\n[^\S\r\n]*$/, '');
+    let lines = ret.split('\n');
     let indent = null; // number of spaces to remove from each line
-    lines = lines.map(line => {
+    lines = lines.map((line) => {
         if (indent === null) {
             // find the indent
             const match = line.match(/^(\s*)/);
             indent = match ? match[1].length : 0;
         }
-        if (line.substring(0, indent).trim() !== "") {
+        if (line.substring(0, indent).trim() !== '') {
             return line;
         }
         // remove the indent
         line = line.substring(indent);
         return line;
     });
-    ret = lines.join("\n");
+    ret = lines.join('\n');
     return hljs.highlight(ret, { language }).value;
 }