noph-ui 0.4.0 → 0.4.1

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(),
@@ -17,7 +17,7 @@
 		variant = 'filled',
 		placeholder = ' ',
 		...attributes
-	}: TextFieldProps | TextAreaFieldProps = $props()
+	}: TextFieldProps = $props()
 
 	let contentEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 	let errorTextRaw = $state(errorText)

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, {}, "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;
@@ -26,3 +26,4 @@ export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'
     end?: Snippet;
     noAsterisk?: boolean;
 }
+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';

package/package.json

@@ -1,92 +1,93 @@
 {
-  "name": "noph-ui",
-  "version": "0.4.0",
-  "license": "MIT",
-  "homepage": "https://noph.dev",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cnolte/noph-ui"
-  },
-  "author": {
-    "name": "cnolte"
-  },
-  "keywords": [
-    "svelte",
-    "svelte 5",
-    "material",
-    "material 3",
-    "material you",
-    "m3",
-    "ui",
-    "frontend",
-    "design-system",
-    "ui-library",
-    "theming"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./icons": {
-      "types": "./dist/icons/index.d.ts",
-      "svelte": "./dist/icons/index.js"
-    },
-    "./types": {
-      "types": "./dist/types.d.ts"
-    },
-    "./defaultTheme": {
-      "import": "./dist/themes/defaultTheme.css",
-      "require": "./dist/themes/defaultTheme.css"
-    }
-  },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-vercel": "^5.5.2",
-    "@sveltejs/kit": "^2.12.1",
-    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.2",
-    "@types/eslint": "^9.6.1",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.13.0",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
-    "publint": "^0.2.12",
-    "svelte": "^5.14.1",
-    "svelte-check": "^4.1.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3",
-    "vitest": "^2.1.8"
-  },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "test": "npm run test:integration && npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "test:integration": "playwright test",
-    "test:unit": "vitest"
-  }
-}
+	"name": "noph-ui",
+	"version": "0.4.1",
+	"license": "MIT",
+	"homepage": "https://noph.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/cnolte/noph-ui"
+	},
+	"author": {
+		"name": "cnolte"
+	},
+	"keywords": [
+		"svelte",
+		"svelte 5",
+		"material",
+		"material 3",
+		"material you",
+		"m3",
+		"ui",
+		"frontend",
+		"design-system",
+		"ui-library",
+		"theming"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"test": "npm run test:integration && npm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./icons": {
+			"types": "./dist/icons/index.d.ts",
+			"svelte": "./dist/icons/index.js"
+		},
+		"./types": {
+			"types": "./dist/types.d.ts"
+		},
+		"./defaultTheme": {
+			"import": "./dist/themes/defaultTheme.css",
+			"require": "./dist/themes/defaultTheme.css"
+		}
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@material/material-color-utilities": "^0.3.0",
+		"@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-vercel": "^5.5.2",
+		"@sveltejs/kit": "^2.12.1",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
+		"@types/eslint": "^9.6.1",
+		"eslint": "^9.17.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.13.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"publint": "^0.2.12",
+		"svelte": "^5.14.1",
+		"svelte-check": "^4.1.1",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.18.1",
+		"vite": "^6.0.3",
+		"vitest": "^2.1.8"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}

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

@@ -1,10 +0,0 @@
-declare const CircularProgress: import("svelte").Component<{
-    value?: number;
-    max?: number;
-    indeterminate?: boolean;
-    fourColor?: boolean;
-    'aria-label'?: string | undefined | null;
-    element?: HTMLDivElement;
-}, {}, "element">;
-type CircularProgress = ReturnType<typeof CircularProgress>;
-export default CircularProgress;