@hyvor/design 1.1.2 → 1.1.4

package/dist/components/Button/Button.svelte

@@ -16,6 +16,17 @@
 		end?: import('svelte').Snippet;
 		action?: import('svelte').Snippet;
 		[key: string]: any;
+
+		onkeyup?: (event: KeyboardEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		onkeypress?: (event: KeyboardEvent) => void;
+		onfocus?: (event: FocusEvent) => void;
+		onblur?: (event: FocusEvent) => void;
+		onclick?: (event: MouseEvent) => void;
+		onmouseover?: (event: MouseEvent) => void;
+		onmouseenter?: (event: MouseEvent) => void;
+		onmouseleave?: (event: MouseEvent) => void;
+		onchange?: (event: Event) => void;
 	}
 
 	let {
@@ -30,6 +41,18 @@
 		children,
 		end,
 		action,
+
+		onkeyup,
+		onkeydown,
+		onkeypress,
+		onfocus,
+		onblur,
+		onclick,
+		onmouseover,
+		onmouseenter,
+		onmouseleave,
+		onchange,
+
 		...rest
 	}: Props = $props();
 </script>
@@ -38,16 +61,18 @@
 	this={as}
 	class="button {size} {color} {variant} {align}"
 	class:block
-	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')}
+
+	onkeyup={(e: KeyboardEvent) => { bubble('keyup'); onkeyup?.(e); }}
+	onkeydown={(e: KeyboardEvent) => { bubble('keydown'); onkeydown?.(e); }}
+	onkeypress={(e: KeyboardEvent) => { bubble('keypress'); onkeypress?.(e); }}
+	onfocus={(e: FocusEvent) => { bubble('focus'); onfocus?.(e); }}
+	onblur={(e: FocusEvent) => { bubble('blur'); onblur?.(e); }}
+	onclick={(e: MouseEvent) => { bubble('click'); onclick?.(e); }}
+	onmouseover={(e: MouseEvent) => { bubble('mouseover'); onmouseover?.(e); }}
+	onmouseenter={(e: MouseEvent) => { bubble('mouseenter'); onmouseenter?.(e); }}
+	onmouseleave={(e: MouseEvent) => { bubble('mouseleave'); onmouseleave?.(e); }}
+	onchange={(e: Event) => { bubble('change'); onchange?.(e); }}
+
 	role="button"
 	tabindex="0"
 	bind:this={button}

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

@@ -11,6 +11,16 @@ interface Props {
     end?: import('svelte').Snippet;
     action?: import('svelte').Snippet;
     [key: string]: any;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeypress?: (event: KeyboardEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+    onclick?: (event: MouseEvent) => void;
+    onmouseover?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onchange?: (event: Event) => void;
 }
 declare const Button: import("svelte").Component<Props, {}, "button">;
 type Button = ReturnType<typeof Button>;

package/dist/components/CodeBlock/TabbedCodeBlock.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Button from "../Button/Button.svelte";
+
+    interface Props {
+        children: Snippet;
+        tabs: string[];
+    }
+
+    let { children, tabs }: Props = $props();
+    let activeTab = $state(tabs[0]);
+
+    function activateTab(tab: string) {
+        activeTab = tab;
+
+        const pres = blocksEl.querySelectorAll("pre");
+        const tabIndex = tabs.indexOf(tab);
+
+        pres.forEach((pre, index) => {
+            if (index === tabIndex) {
+                pre.style.display = "block";
+            } else {
+                pre.style.display = "none";
+            }
+        });
+    }
+
+    let blocksEl: HTMLDivElement;
+</script>
+
+<div class="tabbed">
+
+    <div class="selectors">
+        {#each tabs as tab}
+            <Button 
+                size="x-small" 
+                color={activeTab === tab ? 'accent' : 'input'}
+                onclick={() => activateTab(tab)}
+            >{tab}</Button>
+        {/each}
+    </div>
+
+    <div class="blocks" bind:this={blocksEl}>
+        {@render children()}
+    </div>
+
+</div>
+
+<style>
+
+    .tabbed {
+        margin: 1.5rem 0 1rem 0;
+        position: relative
+    }
+
+    .selectors {
+        display: inline-flex;
+        position: absolute;
+        top: 0;
+        left: 20px;
+        z-index: 1;
+        transform: translateY(-50%);
+        gap: 3px;
+    }
+
+    .selectors > :global(button) {
+        border: 1px solid var(--border);
+    }
+
+    .blocks > :global(pre:not(:first-child)) {
+        display: none;
+    }
+
+    .blocks > :global(pre) {
+        margin: 0
+    }
+
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    children: Snippet;
+    tabs: string[];
+}
+declare const TabbedCodeBlock: import("svelte").Component<Props, {}, "">;
+type TabbedCodeBlock = ReturnType<typeof TabbedCodeBlock>;
+export default TabbedCodeBlock;

package/dist/components/Internationalization/T.svelte

@@ -26,10 +26,18 @@
 
 	let hasComponentParams = false;
 
-	function getElementFunc(el: string) {
+	function getElementFunc(el: string, props: Record<string, any> = {}) {
 		return (chunks: string | string[]) => {
 			const children = typeof chunks === 'string' ? chunks : chunks.join('');
-			return `<${el}>${children}</${el}>`;
+			let propsStr = '';
+			for (let [propKey, propValue] of Object.entries(props)) {
+				if (typeof propValue === 'string' || typeof propValue === 'number') {
+					propsStr += ` ${propKey}="${propValue}"`;
+				} else if (typeof propValue === 'boolean' && propValue) {
+					propsStr += ` ${propKey}`;
+				}
+			}
+			return `<${el}${propsStr}>${children}</${el}>`;
 		};
 	}
 
@@ -52,7 +60,10 @@
 					};
 					hasComponentParams = true;
 				} else if (value.hasOwnProperty('element')) {
-					newValue = getElementFunc((value as any).element as string);
+					newValue = getElementFunc(
+						(value as any).element as string,
+						(value as any).props || {}
+					);
 				}
 			} else {
 				newValue = value as PrimitiveType;
@@ -98,7 +109,7 @@
 						return '<span id="' + id + '">' + children + '</span>';
 					};
 				} else if (value.hasOwnProperty('element')) {
-					newValue = getElementFunc((value as any).element as string);
+					newValue = getElementFunc((value as any).element as string, (value as any).props || {});
 				}
 			} else {
 				newValue = value as PrimitiveType;

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.sv
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';

package/dist/components/index.js

@@ -11,6 +11,7 @@ export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.sv
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';

package/dist/index.css

@@ -49,3 +49,8 @@ a {
 	padding: 0 15px;
 	margin: auto;
 }
+
+.hds-link {
+	color: var(--link);
+	text-decoration: underline;
+}

package/package.json

@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.2"
+	"version": "1.1.4"
 }