noph-ui 0.4.0 → 0.4.1

package/README.md

@@ -56,21 +56,22 @@ Beta (No breaking changes expected)
 
 - Buttons
 - Cards
+- Checkbox
+- Divider
 - Icon buttons
 - Progress indicators
 - Ripple
 - Segmented buttons
 - Snackbar
+- Radio
+- Text fields
 
 In progress (Breaking changes expected)
 
-- Checkbox
 - Chips
 - Lists
 - Menus
-- Radio
 - Tooltips
-- Text fields
 
 Pending
 

package/dist/button/Button.svelte

@@ -2,23 +2,9 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import { generateUUIDv4 } from '../utils.js'
-	import type { Snippet } from 'svelte'
-	import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { ButtonProps } from './types.ts'
 
-	interface ButtonProps extends HTMLButtonAttributes {
-		variant?: 'text' | 'filled' | 'outlined' | 'elevated' | 'tonal'
-		start?: Snippet | undefined
-		end?: Snippet | undefined
-		element?: HTMLElement
-		disabled?: boolean
-	}
-	interface AnchorProps extends HTMLAnchorAttributes {
-		variant?: 'text' | 'filled' | 'outlined' | 'elevated' | 'tonal'
-		start?: Snippet
-		end?: Snippet
-		element?: HTMLElement
-		disabled?: boolean
-	}
 	let {
 		variant = 'outlined',
 		children,
@@ -28,18 +14,14 @@
 		element = $bindable(),
 		disabled = false,
 		...attributes
-	}: ButtonProps | AnchorProps = $props()
+	}: ButtonProps = $props()
 
 	let tooltipId = $state(title ? generateUUIDv4() : '')
 
-	const isButton = (
-		obj: HTMLAnchorAttributes | HTMLButtonAttributes | HTMLAttributes<HTMLDivElement>,
-	): obj is HTMLButtonAttributes => {
+	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
 		return (obj as HTMLAnchorAttributes).href === undefined
 	}
-	const isLink = (
-		obj: HTMLAnchorAttributes | HTMLButtonAttributes | HTMLAttributes<HTMLDivElement>,
-	): obj is HTMLAnchorAttributes => {
+	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
 		return (obj as HTMLAnchorAttributes).href !== undefined
 	}
 </script>
@@ -78,7 +60,7 @@
 	</button>
 {:else if isLink(attributes)}
 	<a
-		{...attributes as HTMLAnchorAttributes}
+		{...attributes}
 		aria-describedby={title ? tooltipId : attributes['aria-describedby']}
 		aria-label={title || attributes['aria-label']}
 		bind:this={element}

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

@@ -1,17 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-declare const Button: import("svelte").Component<(HTMLButtonAttributes & {
-    variant?: "text" | "filled" | "outlined" | "elevated" | "tonal";
-    start?: Snippet | undefined;
-    end?: Snippet | undefined;
-    element?: HTMLElement;
-    disabled?: boolean;
-}) | (HTMLAnchorAttributes & {
-    variant?: "text" | "filled" | "outlined" | "elevated" | "tonal";
-    start?: Snippet;
-    end?: Snippet;
-    element?: HTMLElement;
-    disabled?: boolean;
-}), {}, "element">;
+import type { ButtonProps } from './types.ts';
+declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/button/IconButton.svelte

@@ -2,24 +2,9 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import { generateUUIDv4 } from '../utils.js'
-	import { type Snippet } from 'svelte'
+	import type { IconButtonProps } from './types.ts'
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
 
-	interface ButtonProps extends HTMLButtonAttributes {
-		variant?: 'text' | 'filled' | 'outlined' | 'tonal'
-		element?: HTMLElement
-		toggle?: boolean
-		selected?: boolean
-		selectedIcon?: Snippet
-	}
-	interface AnchorProps extends HTMLAnchorAttributes {
-		variant?: 'text' | 'filled' | 'outlined' | 'tonal'
-		element?: HTMLElement
-		disabled?: boolean
-		toggle?: boolean
-		selected?: boolean
-		selectedIcon?: Snippet
-	}
 	let {
 		variant = 'text',
 		toggle = false,
@@ -30,20 +15,16 @@
 		selected = false,
 		selectedIcon,
 		...attributes
-	}: ButtonProps | AnchorProps = $props()
+	}: IconButtonProps = $props()
 
 	let tooltipId = $state(title ? generateUUIDv4() : '')
 	let selectedState = $state(!toggle || selected)
 	let touchEl: HTMLSpanElement | undefined = $state()
 
-	const isButton = (
-		obj: HTMLAnchorAttributes | HTMLButtonAttributes,
-	): obj is HTMLButtonAttributes => {
+	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
 		return (obj as HTMLAnchorAttributes).href === undefined
 	}
-	const isLink = (
-		obj: HTMLAnchorAttributes | HTMLButtonAttributes,
-	): obj is HTMLAnchorAttributes => {
+	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
 		return (obj as HTMLAnchorAttributes).href !== undefined
 	}
 

package/dist/button/IconButton.svelte.d.ts

@@ -1,18 +1,4 @@
-import { type Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-declare const IconButton: import("svelte").Component<(HTMLButtonAttributes & {
-    variant?: "text" | "filled" | "outlined" | "tonal";
-    element?: HTMLElement;
-    toggle?: boolean;
-    selected?: boolean;
-    selectedIcon?: Snippet;
-}) | (HTMLAnchorAttributes & {
-    variant?: "text" | "filled" | "outlined" | "tonal";
-    element?: HTMLElement;
-    disabled?: boolean;
-    toggle?: boolean;
-    selected?: boolean;
-    selectedIcon?: Snippet;
-}), {}, "element">;
+import type { IconButtonProps } from './types.ts';
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "element">;
 type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;

package/dist/button/SegmentedButton.svelte

@@ -1,21 +1,7 @@
 <script lang="ts">
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { Snippet } from 'svelte'
-	import type { HTMLAttributes } from 'svelte/elements'
-
-	interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
-		name: string
-		multiSelect?: boolean
-		options: {
-			label: string | Snippet
-			selected?: boolean
-			disabled?: boolean
-			icon?: Snippet
-			onclick?: (event: Event) => void
-		}[]
-		element?: HTMLElement
-	}
+	import type { SegmentedButtonProps } from './types.ts'
 
 	let {
 		name,
@@ -28,6 +14,7 @@
 </script>
 
 <div
+	{...attributes}
 	class="np-segmented-buttons {attributes.class}"
 	bind:this={element}
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"

package/dist/button/SegmentedButton.svelte.d.ts

@@ -1,16 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const SegmentedButton: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
-    name: string;
-    multiSelect?: boolean;
-    options: {
-        label: string | Snippet;
-        selected?: boolean;
-        disabled?: boolean;
-        icon?: Snippet;
-        onclick?: (event: Event) => void;
-    }[];
-    element?: HTMLElement;
-}, {}, "element">;
+import type { SegmentedButtonProps } from './types.ts';
+declare const SegmentedButton: import("svelte").Component<SegmentedButtonProps, {}, "element">;
 type SegmentedButton = ReturnType<typeof SegmentedButton>;
 export default SegmentedButton;

package/dist/button/types.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface ButtonButtonProps extends HTMLButtonAttributes {
+    variant?: 'text' | 'filled' | 'outlined' | 'elevated' | 'tonal';
+    start?: Snippet | undefined;
+    end?: Snippet | undefined;
+    element?: HTMLElement;
+    disabled?: boolean;
+}
+interface ButtonAnchorProps extends HTMLAnchorAttributes {
+    variant?: 'text' | 'filled' | 'outlined' | 'elevated' | 'tonal';
+    start?: Snippet;
+    end?: Snippet;
+    element?: HTMLElement;
+    disabled?: boolean;
+}
+interface IconButtonButtonProps extends HTMLButtonAttributes {
+    variant?: 'text' | 'filled' | 'outlined' | 'tonal';
+    element?: HTMLElement;
+    toggle?: boolean;
+    selected?: boolean;
+    selectedIcon?: Snippet;
+}
+interface IconButtonAnchorProps extends HTMLAnchorAttributes {
+    variant?: 'text' | 'filled' | 'outlined' | 'tonal';
+    element?: HTMLElement;
+    disabled?: boolean;
+    toggle?: boolean;
+    selected?: boolean;
+    selectedIcon?: Snippet;
+}
+export type IconButtonProps = IconButtonButtonProps | IconButtonAnchorProps;
+export type ButtonProps = ButtonButtonProps | ButtonAnchorProps;
+export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
+    name: string;
+    multiSelect?: boolean;
+    options: {
+        label: string | Snippet;
+        selected?: boolean;
+        disabled?: boolean;
+        icon?: Snippet;
+        onclick?: (event: Event) => void;
+    }[];
+    element?: HTMLElement;
+}
+export {};

package/dist/button/types.js

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

package/dist/card/Card.svelte

@@ -1,41 +1,8 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { Snippet } from 'svelte'
-	import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { CardProps } from './types.ts'
+	import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'
 
-	interface TextProps extends HTMLAttributes<HTMLDivElement> {
-		variant?: 'elevated' | 'filled' | 'outlined'
-		disabled?: boolean
-		image?: string | undefined
-		element?: HTMLElement
-		headline?: string | undefined
-		subhead?: string
-		supportingText?: string
-		action?: Snippet
-		type: 'text'
-	}
-	interface ButtonProps extends HTMLButtonAttributes {
-		variant?: 'elevated' | 'filled' | 'outlined'
-		disabled?: boolean
-		image?: string | undefined
-		element?: HTMLElement
-		headline?: string | undefined
-		subhead?: string
-		supportingText?: string
-		action?: Snippet
-		type: 'button'
-	}
-	interface AnchorProps extends HTMLAnchorAttributes {
-		variant?: 'elevated' | 'filled' | 'outlined'
-		disabled?: boolean
-		image?: string | undefined
-		element?: HTMLElement
-		headline?: string | undefined
-		subhead?: string
-		supportingText?: string
-		action?: Snippet
-		type: 'link'
-	}
 	let {
 		image,
 		variant = 'outlined',
@@ -46,7 +13,7 @@
 		supportingText,
 		action,
 		...attributes
-	}: TextProps | AnchorProps | ButtonProps = $props()
+	}: CardProps = $props()
 
 	let focused = $state(false)
 
@@ -97,7 +64,9 @@
 		{...attributes as HTMLAttributes<HTMLDivElement>}
 		bind:this={element}
 		aria-disabled={disabled}
-		class="np-card-container np-card-{variant}{disabled ? ' np-card-disabled' : ''}"
+		class="np-card-container np-card-{variant}{disabled
+			? ' np-card-disabled'
+			: ''} {attributes.class}"
 	>
 		{@render content()}
 	</div>
@@ -105,14 +74,16 @@
 	<button
 		{...attributes as HTMLButtonAttributes}
 		bind:this={element}
-		onfocus={() => {
+		onfocusin={() => {
 			focused = true
 		}}
 		onfocusout={() => {
 			focused = false
 		}}
 		{disabled}
-		class="np-card-container np-card-{variant}{disabled ? ' np-card-disabled' : ''}"
+		class="np-card-container np-card-{variant}{disabled
+			? ' np-card-disabled'
+			: ''} {attributes.class}"
 	>
 		{@render content()}
 	</button>
@@ -120,13 +91,15 @@
 	<a
 		{...attributes}
 		bind:this={element}
-		onfocus={() => {
+		onfocusin={() => {
 			focused = true
 		}}
 		onfocusout={() => {
 			focused = false
 		}}
-		class="np-card-container np-card-{variant}{disabled ? ' np-card-disabled' : ''}"
+		class="np-card-container np-card-{variant}{disabled
+			? ' np-card-disabled'
+			: ''} {attributes.class}"
 	>
 		{@render content()}
 	</a>

package/dist/card/Card.svelte.d.ts

@@ -1,35 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-declare const Card: import("svelte").Component<(HTMLAttributes<HTMLDivElement> & {
-    variant?: "elevated" | "filled" | "outlined";
-    disabled?: boolean;
-    image?: string | undefined;
-    element?: HTMLElement;
-    headline?: string | undefined;
-    subhead?: string;
-    supportingText?: string;
-    action?: Snippet;
-    type: "text";
-}) | (HTMLButtonAttributes & {
-    variant?: "elevated" | "filled" | "outlined";
-    disabled?: boolean;
-    image?: string | undefined;
-    element?: HTMLElement;
-    headline?: string | undefined;
-    subhead?: string;
-    supportingText?: string;
-    action?: Snippet;
-    type: "button";
-}) | (HTMLAnchorAttributes & {
-    variant?: "elevated" | "filled" | "outlined";
-    disabled?: boolean;
-    image?: string | undefined;
-    element?: HTMLElement;
-    headline?: string | undefined;
-    subhead?: string;
-    supportingText?: string;
-    action?: Snippet;
-    type: "link";
-}), {}, "element">;
+import type { CardProps } from './types.ts';
+declare const Card: import("svelte").Component<CardProps, {}, "element">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/card/types.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface TextProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'elevated' | 'filled' | 'outlined';
+    disabled?: boolean;
+    image?: string | undefined;
+    element?: HTMLElement;
+    headline?: string | undefined;
+    subhead?: string;
+    supportingText?: string;
+    action?: Snippet;
+    type: 'text';
+}
+interface ButtonProps extends HTMLButtonAttributes {
+    variant?: 'elevated' | 'filled' | 'outlined';
+    disabled?: boolean;
+    image?: string | undefined;
+    element?: HTMLElement;
+    headline?: string | undefined;
+    subhead?: string;
+    supportingText?: string;
+    action?: Snippet;
+    type: 'button';
+}
+interface AnchorProps extends HTMLAnchorAttributes {
+    variant?: 'elevated' | 'filled' | 'outlined';
+    disabled?: boolean;
+    image?: string | undefined;
+    element?: HTMLElement;
+    headline?: string | undefined;
+    subhead?: string;
+    supportingText?: string;
+    action?: Snippet;
+    type: 'link';
+}
+export type CardProps = TextProps | ButtonProps | AnchorProps;
+export {};

package/dist/card/types.js

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

package/dist/chip/types.d.ts

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

package/dist/chip/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/divider/Divider.svelte

@@ -1,14 +1,34 @@
 <script lang="ts">
-	let { ...attributes } = $props()
+	import type { DividerProps } from './types.ts'
+
+	let { variant = 'full', ...attributes }: DividerProps = $props()
 </script>
 
-<template class="divider {attributes.class}"></template>
+<template
+	class:full={variant === 'full'}
+	class:inset={variant === 'inset'}
+	class:inset-middle={variant === 'inset-middle'}
+	role="separator"
+	{...attributes}
+	class="divider {attributes.class}"
+></template>
 
 <style>
+	.inset {
+		width: calc(100% - 1rem);
+		margin-left: 1rem;
+	}
+	.inset-middle {
+		width: calc(100% - 2rem);
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+	.full {
+		width: 100%;
+	}
 	.divider {
 		height: 1px;
-		width: 100%;
 		display: flex;
-		background-color: var(--np-color-outline-variant);
+		background-color: var(--np-divider-color, var(--np-color-outline-variant));
 	}
 </style>

package/dist/divider/Divider.svelte.d.ts

@@ -1,3 +1,4 @@
-declare const Divider: import("svelte").Component<Record<string, any>, {}, "">;
+import type { DividerProps } from './types.ts';
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
 type Divider = ReturnType<typeof Divider>;
 export default Divider;

package/dist/divider/types.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface DividerProps extends Omit<HTMLAttributes<HTMLElement>, 'role'> {
+    variant?: 'full' | 'inset' | 'inset-middle';
+}

package/dist/divider/types.js

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

package/dist/index.js

@@ -1,4 +1,3 @@
-// Reexport your entry components here
 export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';

package/dist/list/Item.svelte

@@ -1,31 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	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
-	}
+	import type { ItemProps } from './types.ts'
 
 	let {
 		selected = false,
@@ -35,7 +10,7 @@
 		supportingText,
 		disabled = false,
 		...attributes
-	}: ButtonProps | AnchorProps | TextProps = $props()
+	}: ItemProps = $props()
 
 	let focused = $state(false)
 </script>

package/dist/list/Item.svelte.d.ts

@@ -1,29 +1,4 @@
-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;
-}
-type $$ComponentProps = ButtonProps | AnchorProps | TextProps;
-declare const Item: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { ItemProps } from './types.ts';
+declare const Item: import("svelte").Component<ItemProps, {}, "">;
 type Item = ReturnType<typeof Item>;
 export default Item;

package/dist/list/ListItem.svelte

@@ -1,33 +1,8 @@
 <script lang="ts">
 	import Item from './Item.svelte'
-	import type { Snippet } from 'svelte'
-	import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { ListItemProps } from './types.ts'
 
-	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
-	}
-
-	let { ...attributes }: ButtonProps | AnchorProps | TextProps = $props()
+	let { ...attributes }: ListItemProps = $props()
 </script>
 
 <li>

package/dist/list/ListItem.svelte.d.ts

@@ -1,29 +1,4 @@
-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;
-}
-type $$ComponentProps = ButtonProps | AnchorProps | TextProps;
-declare const ListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { ListItemProps } from './types.ts';
+declare const ListItem: import("svelte").Component<ListItemProps, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;