noph-ui 0.4.0 → 0.4.2

package/dist/list/types.d.ts

@@ -1 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface ButtonProps extends HTMLButtonAttributes {
+    selected?: boolean;
+    start?: Snippet;
+    end?: Snippet;
+    variant: 'button';
+    supportingText?: Snippet;
+}
+interface AnchorProps extends HTMLAnchorAttributes {
+    selected?: boolean;
+    start?: Snippet;
+    end?: Snippet;
+    disabled?: boolean;
+    variant: 'link';
+    supportingText?: Snippet;
+}
+interface TextProps extends HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    start?: Snippet;
+    end?: Snippet;
+    disabled?: boolean;
+    variant?: 'text';
+    supportingText?: Snippet;
+}
+export type ItemProps = ButtonProps | AnchorProps | TextProps;
+export type ListItemProps = ButtonProps | AnchorProps | TextProps;
 export {};

package/dist/list/types.js

@@ -1 +1 @@
-"use strict";
+export {};

package/dist/menu/Menu.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
 	import { generateUUIDv4 } from '../utils.js'
-	import type { Snippet } from 'svelte'
-	import type { HTMLAttributes } from 'svelte/elements'
-
-	interface MenuProps extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet
-		anchor?: HTMLElement | undefined
-	}
+	import type { MenuProps } from './types.ts'
 
 	let { anchor, children, ...attributes }: MenuProps = $props()
 

package/dist/menu/Menu.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const Menu: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    children: Snippet;
-    anchor?: HTMLElement | undefined;
-}, {}, "">;
+import type { MenuProps } from './types.ts';
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/menu/MenuItem.svelte

@@ -1,27 +1,11 @@
 <script lang="ts">
 	import Item from '../list/Item.svelte'
-	import type { Snippet } from 'svelte'
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { MenuItemProps } from './types.ts'
 
-	interface ButtonProps extends HTMLButtonAttributes {
-		selected?: boolean
-		start?: Snippet
-		end?: Snippet
-		supportingText?: Snippet
-	}
-	interface AnchorProps extends HTMLAnchorAttributes {
-		selected?: boolean
-		start?: Snippet
-		end?: Snippet
-		disabled?: boolean
-		supportingText?: Snippet
-	}
-
-	let { ...attributes }: ButtonProps | AnchorProps = $props()
+	let { ...attributes }: MenuItemProps = $props()
 
-	const isButton = (
-		obj: HTMLAnchorAttributes | HTMLButtonAttributes,
-	): obj is HTMLButtonAttributes => {
+	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
 		return (obj as HTMLAnchorAttributes).href === undefined
 	}
 </script>

package/dist/menu/MenuItem.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-interface ButtonProps extends HTMLButtonAttributes {
-    selected?: boolean;
-    start?: Snippet;
-    end?: Snippet;
-    supportingText?: Snippet;
-}
-interface AnchorProps extends HTMLAnchorAttributes {
-    selected?: boolean;
-    start?: Snippet;
-    end?: Snippet;
-    disabled?: boolean;
-    supportingText?: Snippet;
-}
-type $$ComponentProps = ButtonProps | AnchorProps;
-declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { MenuItemProps } from './types.ts';
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
 type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

package/dist/menu/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    anchor?: HTMLElement | undefined;
+}
+interface ButtonProps extends HTMLButtonAttributes {
+    selected?: boolean;
+    start?: Snippet;
+    end?: Snippet;
+    supportingText?: Snippet;
+}
+interface AnchorProps extends HTMLAnchorAttributes {
+    selected?: boolean;
+    start?: Snippet;
+    end?: Snippet;
+    disabled?: boolean;
+    supportingText?: Snippet;
+}
+export type MenuItemProps = ButtonProps | AnchorProps;
+export {};

package/dist/menu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/progress/CircularProgress.svelte

@@ -1,12 +1,6 @@
 <script lang="ts">
-	interface ProgressProps {
-		value?: number
-		max?: number
-		indeterminate?: boolean
-		fourColor?: boolean
-		'aria-label'?: string | undefined | null
-		element?: HTMLDivElement
-	}
+	import type { CircularProgressProps } from './types.ts'
+
 	let {
 		value = 0,
 		max = 1,
@@ -14,7 +8,7 @@
 		fourColor = false,
 		element = $bindable(),
 		...attributes
-	}: ProgressProps = $props()
+	}: CircularProgressProps = $props()
 
 	let dashOffset = $derived((1 - value / max) * 100)
 </script>

package/dist/progress/LinearProgress.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
-	interface ProgressProps {
-		value?: number
-		max?: number
-		indeterminate?: boolean
-		fourColor?: boolean
-		buffer?: number
-		'aria-label'?: string | undefined | null
-		element?: HTMLDivElement
-	}
+	import type { LinearProgressProps } from './types.ts'
+
 	let {
 		value = 0,
 		max = 1,
@@ -16,7 +9,7 @@
 		buffer = 0,
 		element = $bindable(),
 		...attributes
-	}: ProgressProps = $props()
+	}: LinearProgressProps = $props()
 
 	let progressStyles = $derived(`transform: scaleX(${(indeterminate ? 1 : value / max) * 100}%)`)
 

package/dist/progress/LinearProgress.svelte.d.ts

@@ -1,11 +1,4 @@
-declare const LinearProgress: import("svelte").Component<{
-    value?: number;
-    max?: number;
-    indeterminate?: boolean;
-    fourColor?: boolean;
-    buffer?: number;
-    'aria-label'?: string | undefined | null;
-    element?: HTMLDivElement;
-}, {}, "element">;
+import type { LinearProgressProps } from './types.ts';
+declare const LinearProgress: import("svelte").Component<LinearProgressProps, {}, "element">;
 type LinearProgress = ReturnType<typeof LinearProgress>;
 export default LinearProgress;

package/dist/progress/types.d.ts

@@ -0,0 +1,13 @@
+interface ProgressProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    fourColor?: boolean;
+    'aria-label'?: string | undefined | null;
+    element?: HTMLDivElement;
+}
+export interface LinearProgressProps extends ProgressProps {
+    buffer?: number;
+}
+export type CircularProgressProps = ProgressProps;
+export {};

package/dist/progress/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ripple/Ripple.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements'
+	import type { RippleProps } from './types.ts'
 
-	interface RippleProps extends HTMLAttributes<HTMLDivElement> {
-		forceHover?: boolean
-		element?: HTMLDivElement
-		forElement?: HTMLElement
-	}
 	let {
 		forceHover = false,
 		element = $bindable(),

package/dist/ripple/Ripple.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-declare const Ripple: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    forceHover?: boolean;
-    element?: HTMLDivElement;
-    forElement?: HTMLElement;
-}, {}, "element">;
+import type { RippleProps } from './types.ts';
+declare const Ripple: import("svelte").Component<RippleProps, {}, "element">;
 type Ripple = ReturnType<typeof Ripple>;
 export default Ripple;

package/dist/ripple/types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface RippleProps extends HTMLAttributes<HTMLDivElement> {
+    forceHover?: boolean;
+    element?: HTMLDivElement;
+    forElement?: HTMLElement;
+}

package/dist/ripple/types.js

@@ -0,0 +1 @@
+export {};

package/dist/snackbar/Snackbar.svelte

@@ -1,22 +1,7 @@
 <script lang="ts">
 	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
-	import type { Snippet } from 'svelte'
-	import type { HTMLAttributes } from 'svelte/elements'
-
-	interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
-		label: string
-		supportingText?: string | undefined
-		actionLabel?: string | undefined
-		onActionClick?: (event: Event) => void
-		icon?: Snippet | undefined
-		onIconClick?: (event: Event) => void
-		showPopover?: () => void
-		hidePopover?: () => void
-		timeout?: number
-		element?: HTMLElement
-		popover?: 'auto' | 'manual'
-	}
+	import type { SnackbarProps } from './types.ts'
 
 	let {
 		label,
@@ -61,7 +46,7 @@
 <div
 	{...attributes}
 	{popover}
-	class="np-snackbar"
+	class="np-snackbar {attributes.class}"
 	onbeforetoggle={toggleHandler}
 	bind:this={element}
 >

package/dist/snackbar/Snackbar.svelte.d.ts

@@ -1,17 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const Snackbar: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    label: string;
-    supportingText?: string | undefined;
-    actionLabel?: string | undefined;
-    onActionClick?: (event: Event) => void;
-    icon?: Snippet | undefined;
-    onIconClick?: (event: Event) => void;
-    showPopover?: () => void;
-    hidePopover?: () => void;
-    timeout?: number;
-    element?: HTMLElement;
-    popover?: "auto" | "manual";
-}, {}, "element" | "showPopover" | "hidePopover">;
+import type { SnackbarProps } from './types.ts';
+declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "element" | "showPopover" | "hidePopover">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/dist/snackbar/types.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    supportingText?: string | undefined;
+    actionLabel?: string | undefined;
+    onActionClick?: (event: Event) => void;
+    icon?: Snippet | undefined;
+    onIconClick?: (event: Event) => void;
+    showPopover?: () => void;
+    hidePopover?: () => void;
+    timeout?: number;
+    element?: HTMLElement;
+    popover?: 'auto' | 'manual';
+}

package/dist/snackbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/text-field/TextField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isFirstInvalidControlInForm } from './report-validity.js'
-	import type { TextFieldProps, TextAreaFieldProps } from './types.ts'
+	import type { TextFieldProps } from './types.ts'
 
 	let {
 		value = $bindable(),
@@ -16,19 +16,19 @@
 		noAsterisk = false,
 		variant = 'filled',
 		placeholder = ' ',
+		element = $bindable(),
 		...attributes
-	}: TextFieldProps | TextAreaFieldProps = $props()
+	}: TextFieldProps = $props()
 
-	let contentEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 	let errorTextRaw = $state(errorText)
 
 	$effect(() => {
-		if (contentEl) {
-			contentEl.form?.addEventListener('reset', () => {
+		if (element) {
+			element.form?.addEventListener('reset', () => {
 				error = false
 				value = ''
 			})
-			contentEl.addEventListener('invalid', (event) => {
+			element.addEventListener('invalid', (event) => {
 				event.preventDefault()
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
@@ -42,7 +42,7 @@
 				}
 			})
 
-			contentEl.addEventListener('change', (event) => {
+			element.addEventListener('change', (event) => {
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
 				}
@@ -68,7 +68,7 @@
 		if (attributes.disabled) {
 			return
 		}
-		contentEl?.focus()
+		element?.focus()
 	}}
 >
 	<div
@@ -117,7 +117,7 @@
 							<textarea
 								{...attributes}
 								bind:value
-								bind:this={contentEl}
+								bind:this={element}
 								class="input"
 								aria-label={label}
 								{placeholder}
@@ -133,7 +133,7 @@
 								<input
 									{...attributes}
 									bind:value
-									bind:this={contentEl}
+									bind:this={element}
 									class="input"
 									{placeholder}
 									aria-label={label}

package/dist/text-field/TextField.svelte.d.ts

@@ -1,5 +1,4 @@
-import type { TextFieldProps, TextAreaFieldProps } from './types.ts';
-type $$ComponentProps = TextFieldProps | TextAreaFieldProps;
-declare const TextField: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { TextFieldProps } from './types.ts';
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/text-field/types.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
-export interface TextFieldProps extends Omit<HTMLInputAttributes, 'class'> {
+export interface InputFieldProps extends Omit<HTMLInputAttributes, 'class'> {
     label?: string;
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
     supportingText?: string;
@@ -12,6 +12,7 @@ export interface TextFieldProps extends Omit<HTMLInputAttributes, 'class'> {
     start?: Snippet;
     end?: Snippet;
     noAsterisk?: boolean;
+    element?: HTMLInputElement;
 }
 export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'> {
     label?: string;
@@ -25,4 +26,6 @@ export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'
     start?: Snippet;
     end?: Snippet;
     noAsterisk?: boolean;
+    element?: HTMLTextAreaElement;
 }
+export type TextFieldProps = InputFieldProps | TextAreaFieldProps;

package/dist/tooltip/Tooltip.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements'
-
-	interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
-		anchor: HTMLElement
-	}
+	import type { TooltipProps } from './types.ts'
 
 	let { children, anchor, ...attributes }: TooltipProps = $props()
 	let clientWidth = $state(0)

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -1,6 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-declare const Tooltip: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    anchor: HTMLElement;
-}, {}, "">;
+import type { TooltipProps } from './types.ts';
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/tooltip/types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    anchor: HTMLElement;
+}

package/dist/tooltip/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -1,3 +1,13 @@
-export type { RadioProps } from './radio/types.ts';
-export type { CheckboxProps } from './checkbox/types.ts';
-export type { TextAreaFieldProps, TextFieldProps } from './text-field/types.ts';
+export * from './button/types.ts';
+export * from './card/types.ts';
+export * from './checkbox/types.ts';
+export * from './chip/types.ts';
+export * from './divider/types.js';
+export * from './list/types.ts';
+export * from './menu/types.ts';
+export * from './progress/types.js';
+export * from './radio/types.ts';
+export * from './ripple/types.ts';
+export * from './snackbar/types.ts';
+export * from './text-field/types.ts';
+export * from './tooltip/types.ts';

package/dist/types.js

@@ -1 +1,13 @@
-export {};
+export * from './button/types.ts';
+export * from './card/types.ts';
+export * from './checkbox/types.ts';
+export * from './chip/types.ts';
+export * from './divider/types.js';
+export * from './list/types.ts';
+export * from './menu/types.ts';
+export * from './progress/types.js';
+export * from './radio/types.ts';
+export * from './ripple/types.ts';
+export * from './snackbar/types.ts';
+export * from './text-field/types.ts';
+export * from './tooltip/types.ts';