@x33025/sveltely 0.0.58 → 0.1.0

package/dist/actions/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { type Anchor } from '../utils/positioning';
+export type TooltipOptions = string | {
+    label: string;
+    disabled?: boolean;
+    placement?: Anchor;
+};
+export declare function tooltip(node: HTMLElement, initialOptions?: TooltipOptions | null): {
+    update(nextOptions?: TooltipOptions | null): void;
+    destroy(): void;
+};

package/dist/actions/tooltip.js

@@ -0,0 +1,255 @@
+import { computePosition, getPlacement, getViewportRect, oppositeAnchor } from '../utils/positioning';
+const TOOLTIP_STYLE_ID = 'sveltely-tooltip-action-styles';
+const VIEWPORT_MARGIN = 8;
+const parseOptions = (value) => {
+    if (typeof value === 'string') {
+        return {
+            label: value,
+            disabled: false,
+            placement: 'top'
+        };
+    }
+    return {
+        label: value?.label ?? '',
+        disabled: value?.disabled ?? false,
+        placement: value?.placement ?? 'top'
+    };
+};
+const parsePx = (value) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+};
+const getTriggerOffset = (element, currentAnchor) => {
+    const styles = getComputedStyle(element);
+    if (currentAnchor === 'top' || currentAnchor === 'bottom') {
+        return Math.max(parsePx(styles.paddingTop), parsePx(styles.paddingBottom));
+    }
+    return Math.max(parsePx(styles.paddingLeft), parsePx(styles.paddingRight));
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const ensureStyles = () => {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(TOOLTIP_STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = TOOLTIP_STYLE_ID;
+    style.textContent = `
+		.sveltely-tooltip {
+			--tooltip-font-size: calc(var(--sveltely-font-size) * 0.857);
+			--tooltip-scale: calc(var(--tooltip-font-size) / 0.75rem);
+			--tooltip-arrow-size: calc(var(--tooltip-font-size) * 0.667);
+			position: fixed;
+			z-index: 50;
+			pointer-events: none;
+			border-radius: var(--sveltely-border-radius);
+			background: black;
+			color: white;
+			padding:
+				calc(var(--sveltely-padding-y) * 0.33 * var(--tooltip-scale))
+				calc(var(--sveltely-padding-x) * 0.67 * var(--tooltip-scale));
+			font-size: var(--tooltip-font-size);
+			line-height: calc(var(--tooltip-font-size) * 1.333);
+			white-space: nowrap;
+		}
+
+		.sveltely-tooltip-arrow {
+			position: absolute;
+			width: var(--tooltip-arrow-size);
+			height: var(--tooltip-arrow-size);
+			background: black;
+			transform: rotate(45deg);
+			z-index: -1;
+		}
+
+		.sveltely-tooltip[data-anchor='top'] .sveltely-tooltip-arrow {
+			bottom: calc(var(--tooltip-arrow-size) * -0.5);
+			left: var(--tooltip-arrow-left, 50%);
+			top: auto;
+			transform: translateX(-50%) rotate(45deg);
+		}
+
+		.sveltely-tooltip[data-anchor='bottom'] .sveltely-tooltip-arrow {
+			top: calc(var(--tooltip-arrow-size) * -0.5);
+			left: var(--tooltip-arrow-left, 50%);
+			transform: translateX(-50%) rotate(45deg);
+		}
+
+		.sveltely-tooltip[data-anchor='left'] .sveltely-tooltip-arrow {
+			right: calc(var(--tooltip-arrow-size) * -0.5);
+			left: auto;
+			top: var(--tooltip-arrow-top, 50%);
+			transform: translate(50%, -50%) rotate(45deg);
+		}
+
+		.sveltely-tooltip[data-anchor='right'] .sveltely-tooltip-arrow {
+			left: calc(var(--tooltip-arrow-size) * -0.5);
+			top: var(--tooltip-arrow-top, 50%);
+			transform: translate(-50%, -50%) rotate(45deg);
+		}
+	`;
+    document.head.appendChild(style);
+};
+export function tooltip(node, initialOptions) {
+    if (typeof document === 'undefined') {
+        return {
+            update() { },
+            destroy() { }
+        };
+    }
+    ensureStyles();
+    let options = parseOptions(initialOptions);
+    let tooltipEl = null;
+    let labelEl = null;
+    let rafId = 0;
+    const cleanupTooltip = () => {
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = 0;
+        }
+        if (!tooltipEl)
+            return;
+        tooltipEl.remove();
+        tooltipEl = null;
+        labelEl = null;
+    };
+    const positionTooltip = () => {
+        if (!tooltipEl)
+            return;
+        const triggerRect = node.getBoundingClientRect();
+        const preferredAnchor = (() => {
+            const triggerOffset = getTriggerOffset(node, options.placement);
+            const requiredVerticalSpace = tooltipEl.offsetHeight + triggerOffset + VIEWPORT_MARGIN;
+            const requiredHorizontalSpace = tooltipEl.offsetWidth + triggerOffset + VIEWPORT_MARGIN;
+            if (options.placement === 'top' && triggerRect.top < requiredVerticalSpace) {
+                return oppositeAnchor(options.placement);
+            }
+            if (options.placement === 'bottom' &&
+                window.innerHeight - triggerRect.bottom < requiredVerticalSpace) {
+                return oppositeAnchor(options.placement);
+            }
+            if (options.placement === 'left' && triggerRect.left < requiredHorizontalSpace) {
+                return oppositeAnchor(options.placement);
+            }
+            if (options.placement === 'right' &&
+                window.innerWidth - triggerRect.right < requiredHorizontalSpace) {
+                return oppositeAnchor(options.placement);
+            }
+            return options.placement;
+        })();
+        const preferredAlign = (() => {
+            if (preferredAnchor !== 'top' && preferredAnchor !== 'bottom') {
+                return 'center';
+            }
+            const centeredPlacement = getPlacement(triggerRect, preferredAnchor, 'center');
+            const centeredRect = getViewportRect(centeredPlacement, tooltipEl.offsetWidth, tooltipEl.offsetHeight);
+            if (centeredRect.left >= VIEWPORT_MARGIN &&
+                centeredRect.right <= window.innerWidth - VIEWPORT_MARGIN) {
+                return 'center';
+            }
+            if (centeredRect.left < VIEWPORT_MARGIN && centeredRect.right > window.innerWidth - VIEWPORT_MARGIN) {
+                return 'center';
+            }
+            const triggerCenter = triggerRect.left + triggerRect.width / 2;
+            return triggerCenter <= window.innerWidth / 2 ? 'left' : 'right';
+        })();
+        const result = computePosition(triggerRect, tooltipEl.offsetWidth, tooltipEl.offsetHeight, preferredAnchor, preferredAlign);
+        const triggerOffset = getTriggerOffset(node, result.anchor);
+        const coords = result.anchor === 'top'
+            ? { top: result.top - triggerOffset, left: result.left }
+            : result.anchor === 'bottom'
+                ? { top: result.top + triggerOffset, left: result.left }
+                : result.anchor === 'left'
+                    ? { top: result.top, left: result.left - triggerOffset }
+                    : { top: result.top, left: result.left + triggerOffset };
+        const viewportRect = getViewportRect({
+            top: coords.top,
+            left: coords.left,
+            transform: result.transform
+        }, tooltipEl.offsetWidth, tooltipEl.offsetHeight);
+        const shiftX = viewportRect.left < VIEWPORT_MARGIN
+            ? VIEWPORT_MARGIN - viewportRect.left
+            : viewportRect.right > window.innerWidth - VIEWPORT_MARGIN
+                ? window.innerWidth - VIEWPORT_MARGIN - viewportRect.right
+                : 0;
+        const shiftY = viewportRect.top < VIEWPORT_MARGIN
+            ? VIEWPORT_MARGIN - viewportRect.top
+            : viewportRect.bottom > window.innerHeight - VIEWPORT_MARGIN
+                ? window.innerHeight - VIEWPORT_MARGIN - viewportRect.bottom
+                : 0;
+        const finalLeft = coords.left + shiftX;
+        const finalTop = coords.top + shiftY;
+        const finalRect = getViewportRect({
+            top: finalTop,
+            left: finalLeft,
+            transform: result.transform
+        }, tooltipEl.offsetWidth, tooltipEl.offsetHeight);
+        const arrowInset = parsePx(getComputedStyle(tooltipEl).getPropertyValue('--tooltip-arrow-size'));
+        const arrowPadding = arrowInset;
+        tooltipEl.dataset.anchor = result.anchor;
+        tooltipEl.style.top = `${finalTop}px`;
+        tooltipEl.style.left = `${finalLeft}px`;
+        tooltipEl.style.transform = result.transform;
+        if (result.anchor === 'top' || result.anchor === 'bottom') {
+            const arrowLeft = clamp(triggerRect.left + triggerRect.width / 2 - finalRect.left, arrowPadding, tooltipEl.offsetWidth - arrowPadding);
+            tooltipEl.style.setProperty('--tooltip-arrow-left', `${arrowLeft}px`);
+            tooltipEl.style.removeProperty('--tooltip-arrow-top');
+            return;
+        }
+        const arrowTop = clamp(triggerRect.top + triggerRect.height / 2 - finalRect.top, arrowPadding, tooltipEl.offsetHeight - arrowPadding);
+        tooltipEl.style.setProperty('--tooltip-arrow-top', `${arrowTop}px`);
+        tooltipEl.style.removeProperty('--tooltip-arrow-left');
+    };
+    const show = () => {
+        if (options.disabled || !options.label.trim())
+            return;
+        if (!tooltipEl) {
+            tooltipEl = document.createElement('div');
+            tooltipEl.className = 'sveltely-tooltip';
+            labelEl = document.createElement('span');
+            const arrowEl = document.createElement('div');
+            arrowEl.className = 'sveltely-tooltip-arrow';
+            tooltipEl.append(labelEl, arrowEl);
+            document.body.appendChild(tooltipEl);
+        }
+        if (labelEl) {
+            labelEl.textContent = options.label;
+        }
+        rafId = requestAnimationFrame(() => {
+            rafId = 0;
+            positionTooltip();
+        });
+    };
+    const hide = () => {
+        cleanupTooltip();
+    };
+    const handleWindowChange = () => hide();
+    node.addEventListener('mouseenter', show);
+    node.addEventListener('mouseleave', hide);
+    node.addEventListener('focusin', show);
+    node.addEventListener('focusout', hide);
+    window.addEventListener('scroll', handleWindowChange, true);
+    window.addEventListener('resize', handleWindowChange);
+    return {
+        update(nextOptions) {
+            options = parseOptions(nextOptions);
+            if (options.disabled || !options.label.trim()) {
+                hide();
+                return;
+            }
+            if (labelEl) {
+                labelEl.textContent = options.label;
+                positionTooltip();
+            }
+        },
+        destroy() {
+            node.removeEventListener('mouseenter', show);
+            node.removeEventListener('mouseleave', hide);
+            node.removeEventListener('focusin', show);
+            node.removeEventListener('focusout', hide);
+            window.removeEventListener('scroll', handleWindowChange, true);
+            window.removeEventListener('resize', handleWindowChange);
+            hide();
+        }
+    };
+}

package/dist/components/{AnimatedNumber.demo.svelte → Library/AnimatedNumber/AnimatedNumber.demo.svelte}

@@ -1,13 +1,13 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'AnimatedNumber',
-		description: 'Spring-driven numeric transitions.',
-		isProminent: false
+		description: 'Spring-driven numeric transitions.'
 	};
 </script>
 
 <script lang="ts">
 	import AnimatedNumber from './AnimatedNumber.svelte';
+	import Button from '../Button/Button.svelte';
 
 	let value = $state(1234);
 
@@ -17,12 +17,8 @@
 </script>
 
 <div class="vstack center gap-3">
-	<AnimatedNumber {value} class="text-3xl font-semibold text-zinc-900" />
-	<button
-		type="button"
-		class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
-		onclick={bump}
-	>
-		Change number
-	</button>
+	<div class="text-3xl font-semibold text-zinc-900">
+		<AnimatedNumber {value} />
+	</div>
+	<Button label="Change number" variant="solid" onclick={bump} />
 </div>

package/dist/components/{AnimatedNumber.demo.svelte.d.ts → Library/AnimatedNumber/AnimatedNumber.demo.svelte.d.ts}

@@ -1,7 +1,6 @@
 export declare const demo: {
     name: string;
     description: string;
-    isProminent: boolean;
 };
 import AnimatedNumber from './AnimatedNumber.svelte';
 declare const AnimatedNumber: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/Library/AnimatedNumber/AnimatedNumber.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Spring } from 'svelte/motion';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	interface Props {
+		value: number;
+		as?: keyof HTMLElementTagNameMap;
+	}
+
+	let { value, as = 'span', ...restProps }: Props & StyleProps & Record<string, unknown> = $props();
+
+	const spring = Spring.of(() => value);
+	const display = $derived(Math.round(spring.current).toLocaleString());
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'animated-number'));
+</script>
+
+<svelte:element this={as} class="animated-number tabular-nums" style={rootStyle} {...props}>
+	{display}
+</svelte:element>
+
+<style>
+	.animated-number {
+		font-size: var(--animated-number-font-size, var(--sveltely-font-size));
+		line-height: 1;
+	}
+</style>

package/dist/components/Library/AnimatedNumber/AnimatedNumber.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type StyleProps } from '../../../style/surface';
+interface Props {
+    value: number;
+    as?: keyof HTMLElementTagNameMap;
+}
+type $$ComponentProps = Props & StyleProps & Record<string, unknown>;
+declare const AnimatedNumber: import("svelte").Component<$$ComponentProps, {}, "">;
+type AnimatedNumber = ReturnType<typeof AnimatedNumber>;
+export default AnimatedNumber;

package/dist/components/Library/AnimatedNumber/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AnimatedNumber.svelte';

package/dist/components/Library/AnimatedNumber/index.js

@@ -0,0 +1 @@
+export { default } from './AnimatedNumber.svelte';

package/dist/components/{AsyncButton.demo.svelte → Library/AsyncButton/AsyncButton.demo.svelte}

@@ -20,5 +20,4 @@
 	icon={SaveIcon}
 	label="Run async action"
 	action={runDemo}
-	class="rounded-full bg-zinc-900 px-3 py-2 text-sm text-white"
 />

package/dist/components/Library/AsyncButton/AsyncButton.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import { CircleAlertIcon } from '@lucide/svelte';
+	import type { Component } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { tooltip } from '../../../actions/tooltip';
+	import Spinner from '../Spinner';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		icon?: Component<{ class?: string; size?: number | string }>;
+		label: string;
+		action: () => void | Promise<void>;
+		error?: unknown | null;
+		loading?: boolean;
+		disableWhileLoading?: boolean;
+		variant?: 'iconAndLabel' | 'iconOnly';
+		iconColor?: string;
+		iconSize?: number | string;
+		labelColor?: string;
+	} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
+
+	let {
+		icon,
+		label,
+		action,
+		error = $bindable<unknown | null>(null),
+		loading = undefined,
+		disableWhileLoading = true,
+		variant = 'iconAndLabel',
+		iconColor,
+		iconSize,
+		labelColor,
+		disabled = false,
+		type = 'button',
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+
+	let internalLoading = $state(false);
+
+	const isControlledLoading = $derived(loading !== undefined);
+	const effectiveLoading = $derived(isControlledLoading ? loading : internalLoading);
+	const effectiveDisabled = $derived(disabled || (disableWhileLoading && effectiveLoading));
+
+	const handleClick = async () => {
+		if (effectiveDisabled) return;
+		error = null;
+		if (isControlledLoading) {
+			try {
+				await action();
+			} catch (caught) {
+				error = caught;
+			}
+			return;
+		}
+
+		internalLoading = true;
+		try {
+			await action();
+		} catch (caught) {
+			error = caught;
+		} finally {
+			internalLoading = false;
+		}
+	};
+
+	const errorLabel = $derived.by(() => {
+		if (!error) return null;
+		if (typeof error === 'string' && error.trim().length > 0) return error;
+		if (error instanceof Error && error.message.trim().length > 0) return error.message;
+		return 'Something went wrong';
+	});
+
+	const toRem = (value: number | string | undefined) =>
+		value === undefined ? undefined : typeof value === 'number' ? `${value}rem` : value;
+
+	const triggerStyle = $derived.by(() => surfaceStyle(styleProps, 'async-button'));
+
+	const iconStyle = $derived.by(() => {
+		const declarations: string[] = [];
+
+		if (iconColor !== undefined) {
+			declarations.push(`color: ${iconColor};`);
+		}
+
+		if (iconSize !== undefined) {
+			const size = toRem(iconSize);
+			declarations.push(`width: ${size};`, `height: ${size};`);
+		}
+
+		return declarations.join(' ');
+	});
+
+	const labelStyle = $derived.by(() => {
+		if (labelColor === undefined) return '';
+		return `color: ${labelColor};`;
+	});
+</script>
+
+<button
+	{type}
+	use:tooltip={{ label: errorLabel ?? '', disabled: !errorLabel }}
+	class="async-button inline-flex items-center disabled:cursor-not-allowed disabled:opacity-50 {variant ===
+	'iconOnly'
+		? 'async-button-icon-only'
+		: ''}"
+	style={triggerStyle}
+	disabled={effectiveDisabled}
+	aria-busy={effectiveLoading}
+	aria-label={variant === 'iconOnly' ? label : undefined}
+	data-error={error ? 'true' : 'false'}
+	{...props}
+	onclick={handleClick}
+>
+	<span class="async-button-icon-frame inline-grid shrink-0 place-items-center" style={iconStyle}>
+		{#if effectiveLoading}
+			<Spinner size={iconSize !== undefined ? toRem(iconSize) : 'var(--async-button-icon-size)'} />
+		{:else if error}
+			<CircleAlertIcon class="async-button-icon text-red-600" />
+		{:else if icon}
+			{@const Icon = icon}
+			<Icon class="async-button-icon" />
+		{/if}
+	</span>
+	{#if variant === 'iconAndLabel'}
+		<span class="async-button-text" style={labelStyle}>{label}</span>
+	{/if}
+</button>
+
+<style>
+	.async-button {
+		--async-button-font-size: var(--sveltely-font-size);
+		--async-button-scale: calc(var(--async-button-font-size) / 1rem);
+		--async-button-icon-size: calc(var(--async-button-font-size) * 1.143);
+		border: 1px solid var(--async-button-border-color, var(--sveltely-primary-color));
+		border-radius: var(--async-button-border-radius, var(--sveltely-border-radius));
+		background: var(--async-button-background, var(--sveltely-primary-color));
+		color: var(--async-button-color, white);
+		gap: var(--async-button-gap, var(--sveltely-gap));
+		font-size: var(--async-button-font-size);
+		line-height: 1.25;
+		padding:
+			var(--async-button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale)))
+			var(--async-button-padding-x, calc(var(--sveltely-padding-x) * var(--async-button-scale)));
+		transition: color 150ms, border-color 150ms, background-color 150ms;
+	}
+
+	.async-button:hover {
+		background: var(
+			--async-button-hover-background,
+			var(--sveltely-active-hover-color)
+		);
+	}
+
+	.async-button-icon-only {
+		padding:
+			var(--async-button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale)))
+			var(--async-button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale)));
+		min-width: calc((var(--async-button-padding-x, calc(var(--sveltely-padding-x) * 0.67 * var(--async-button-scale))) * 2) + 1rem);
+		min-height: calc((var(--async-button-padding-y, calc(var(--sveltely-padding-y) * 0.67 * var(--async-button-scale))) * 2) + 1rem);
+	}
+
+	.async-button-icon-frame {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--async-button-icon-size);
+		height: var(--async-button-icon-size);
+	}
+
+	.async-button-icon {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/{AsyncButton.svelte.d.ts → Library/AsyncButton/AsyncButton.svelte.d.ts}

@@ -1,16 +1,21 @@
 import type { Component } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
 type Props = {
     icon?: Component<{
         class?: string;
+        size?: number | string;
     }>;
     label: string;
     action: () => void | Promise<void>;
     error?: unknown | null;
     loading?: boolean;
     disableWhileLoading?: boolean;
-    style?: 'iconAndLabel' | 'iconOnly';
-} & Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
+    variant?: 'iconAndLabel' | 'iconOnly';
+    iconColor?: string;
+    iconSize?: number | string;
+    labelColor?: string;
+} & StyleProps & Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'class' | 'style'>;
 declare const AsyncButton: Component<Props, {}, "error">;
 type AsyncButton = ReturnType<typeof AsyncButton>;
 export default AsyncButton;

package/dist/components/Library/AsyncButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AsyncButton.svelte';

package/dist/components/Library/AsyncButton/index.js

@@ -0,0 +1 @@
+export { default } from './AsyncButton.svelte';

package/dist/components/Library/Button/Button.demo.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Button',
+		description: 'Token-aware button primitive with optional icon support.'
+	};
+</script>
+
+<script lang="ts">
+	import { SaveIcon } from '@lucide/svelte';
+	import Button from './Button.svelte';
+</script>
+
+<div class="hstack items-center gap-3">
+	<Button label="Default" />
+	<Button label="Solid" variant="solid" />
+	<Button icon={SaveIcon} label="With icon" />
+</div>

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

@@ -0,0 +1,23 @@
+export declare const demo: {
+    name: string;
+    description: string;
+};
+import Button from './Button.svelte';
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;