@tialro2/rnbokit 1.0.14 → 1.0.17

package/dist/UIcomponents/ProgressBar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script>
 	/**
 	 * @typedef {Object} Props
 	 * @property {any} [value]
@@ -14,37 +14,37 @@
 		max = 100,
 		labelledby = ''
 	} = $props();
-	let fillPercent = $derived(value ? (100 * (value - min)) / (max - min) : 0);
-</script>
-
-<!-- Track -->
-<div
-	class="RNBOprogress-bar"
-	data-testid="progress-bar"
-	role="progressbar"
-	aria-labelledby={labelledby}
-	aria-valuenow={value}
-	aria-valuemin={min}
-	aria-valuemax={max - min}
->
-	<!-- Meter -->
-	<div class="RNBOprogress-bar-meter" style:width="{fillPercent}%"></div>
-</div>
-
-<style>
-	.RNBOprogress-bar {
-		overflow: hidden;
-		width: 100%;
-		height: 6px;
-		border-radius: var(--local-rounded-base);
-		border-style: solid;
-		border-color: rgba(var(--local-surface-color), 0.5);
-		border-width: 0.5px;
-		background-color: white;
-	}
-	.RNBOprogress-bar-meter {
-		height: 100%;
-		border-radius: var(--local-rounded-base);
-		background-color: rgb(var(--local-accent-color));
-	}
-</style>
+	let fillPercent = $derived(value ? (100 * (value - min)) / (max - min) : 0);
+</script>
+
+<!-- Track -->
+<div
+	class="RNBOprogress-bar"
+	data-testid="progress-bar"
+	role="progressbar"
+	aria-labelledby={labelledby}
+	aria-valuenow={value}
+	aria-valuemin={min}
+	aria-valuemax={max - min}
+>
+	<!-- Meter -->
+	<div class="RNBOprogress-bar-meter" style:width="{fillPercent}%"></div>
+</div>
+
+<style>
+	.RNBOprogress-bar {
+		overflow: hidden;
+		width: 100%;
+		height: 6px;
+		border-radius: var(--local-rounded-base);
+		border-style: solid;
+		border-color: rgba(var(--local-surface-color), 0.5);
+		border-width: 0.5px;
+		background-color: white;
+	}
+	.RNBOprogress-bar-meter {
+		height: 100%;
+		border-radius: var(--local-rounded-base);
+		background-color: rgb(var(--local-accent-color));
+	}
+</style>

package/dist/UIcomponents/ProgressBar.svelte.d.ts

@@ -5,13 +5,13 @@ type ProgressBar = {
 };
 declare const ProgressBar: import("svelte").Component<{
     value?: any;
-    min?: number;
-    max?: number;
-    labelledby?: string;
+    min?: number | undefined;
+    max?: number | undefined;
+    labelledby?: string | undefined;
 }, {}, "">;
 type Props = {
     value?: any;
-    min?: number;
-    max?: number;
-    labelledby?: string;
+    min?: number | undefined;
+    max?: number | undefined;
+    labelledby?: string | undefined;
 };

package/dist/UIcomponents/RadioGroup.svelte

@@ -1,4 +1,4 @@
-<script>
+<script>
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [labelledby]
@@ -7,29 +7,29 @@
 
 	/** @type {Props} */
 	let { labelledby = '', children } = $props();
-</script>
-
-<div
-	class="RNBOradio-group"
-	data-testid="radio-group"
-	role="radiogroup"
-	aria-labelledby={labelledby}
->
-	{@render children?.()}
-</div>
-
-<style>
-	.RNBOradio-group {
-		display: inline-flex;
-		flex-wrap: wrap;
-		margin-left: 0.25rem;
-		background-color: rgba(var(--local-surface-color), 0);
-		border-width: var(--local-border-base);
-		border-color: rgb(var(--local-surface-color));
-		border-style: solid;
-		border-radius: var(--local-rounded-base);
-	}
-	/* .RNBOradio-group:hover { */
-	/* 	background-color: rgba(var(--local-surface-color), 0.2); */
-	/* } */
-</style>
+</script>
+
+<div
+	class="RNBOradio-group"
+	data-testid="radio-group"
+	role="radiogroup"
+	aria-labelledby={labelledby}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	.RNBOradio-group {
+		display: inline-flex;
+		flex-wrap: wrap;
+		margin-left: 0.25rem;
+		background-color: rgba(var(--local-surface-color), 0);
+		border-width: var(--local-border-base);
+		border-color: rgb(var(--local-surface-color));
+		border-style: solid;
+		border-radius: var(--local-rounded-base);
+	}
+	/* .RNBOradio-group:hover { */
+	/* 	background-color: rgba(var(--local-surface-color), 0.2); */
+	/* } */
+</style>

package/dist/UIcomponents/RadioGroup.svelte.d.ts

@@ -4,10 +4,10 @@ type RadioGroup = {
     $set?(props: Partial<Props>): void;
 };
 declare const RadioGroup: import("svelte").Component<{
-    labelledby?: string;
-    children?: import("svelte").Snippet;
+    labelledby?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
 }, {}, "">;
 type Props = {
-    labelledby?: string;
-    children?: import("svelte").Snippet;
+    labelledby?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
 };

package/dist/UIcomponents/RadioItem.svelte

@@ -1,96 +1,96 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {any} group
-	 * @property {any} name
-	 * @property {any} value
-	 * @property {string} [title]
-	 * @property {string} [label]
-	 * @property {import('svelte').Snippet} [children]
-	 */
-
-	/** @type {Props} */
-	let {
-		group = $bindable(),
-		name,
-		value,
-		title = '',
-		label = '',
-		onkeydown,
-		onkeyup,
-		onkeypress,
-		onclick,
-		onchange,
-		children
-	} = $props();
-	let elemInput = $state();
-	function onKeyDown(event) {
-		if (['Enter', 'Space'].includes(event.code)) {
-			event.preventDefault();
-			elemInput.click();
-		}
-		onkeydown();
-	}
-	let checked = $derived(value === group);
-</script>
-
-<label>
-	<!-- A11y attributes are not allowed on <label> -->
-	<div
-		class="RNBOradio-item {checked ? 'RNBOchecked' : 'RNBOhover'}"
-		data-testid="radio-item"
-		role="radio"
-		aria-checked={checked}
-		aria-label={label}
-		tabindex="0"
-		{title}
-		onkeydown={onKeyDown}
-		{onkeyup}
-		{onkeypress}
-	>
-		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
-		<div class="RNBOradio-input">
-			<input
-				bind:this={elemInput}
-				type="radio"
-				bind:group
-				{name}
-				{value}
-				tabindex="-1"
-				{onclick}
-				{onchange}
-				id="test"
-			/>
-		</div>
-		{@render children?.()}
-	</div>
-</label>
-
-<style>
-	.RNBOradio-item {
-		font-size: 1rem;
-		line-height: 1.5rem;
-		text-align: center;
-		flex: 1 1 auto;
-		cursor: pointer;
-		padding: 0.2rem;
-		padding-left: 0.75rem;
-		padding-right: 0.75rem;
-		margin: 0.25rem;
-		background-color: rgba(var(--local-accent-color), 0);
-		border-radius: var(--local-rounded-base);
-	}
-	.RNBOhover:hover {
-		background-color: rgba(var(--local-accent-color), 0.2);
-		transition: var(--local-animation) var(--local-animation-duration);
-	}
-	.RNBOchecked {
-		background-color: rgba(var(--local-accent-color), 1);
-		transition: var(--local-animation) var(--local-animation-duration);
-	}
-	.RNBOradio-input {
-		overflow: hidden;
-		width: 0;
-		height: 0;
-	}
-</style>
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} group
+	 * @property {any} name
+	 * @property {any} value
+	 * @property {string} [title]
+	 * @property {string} [label]
+	 * @property {import('svelte').Snippet} [children]
+	 */
+
+	/** @type {Props} */
+	let {
+		group = $bindable(),
+		name,
+		value,
+		title = '',
+		label = '',
+		onkeydown,
+		onkeyup,
+		onkeypress,
+		onclick,
+		onchange,
+		children
+	} = $props();
+	let elemInput = $state();
+	function onKeyDown(event) {
+		if (['Enter', 'Space'].includes(event.code)) {
+			event.preventDefault();
+			elemInput.click();
+		}
+		onkeydown();
+	}
+	let checked = $derived(value === group);
+</script>
+
+<label>
+	<!-- A11y attributes are not allowed on <label> -->
+	<div
+		class="RNBOradio-item {checked ? 'RNBOchecked' : 'RNBOhover'}"
+		data-testid="radio-item"
+		role="radio"
+		aria-checked={checked}
+		aria-label={label}
+		tabindex="0"
+		{title}
+		onkeydown={onKeyDown}
+		{onkeyup}
+		{onkeypress}
+	>
+		<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
+		<div class="RNBOradio-input">
+			<input
+				bind:this={elemInput}
+				type="radio"
+				bind:group
+				{name}
+				{value}
+				tabindex="-1"
+				{onclick}
+				{onchange}
+				id="test"
+			/>
+		</div>
+		{@render children?.()}
+	</div>
+</label>
+
+<style>
+	.RNBOradio-item {
+		font-size: 1rem;
+		line-height: 1.5rem;
+		text-align: center;
+		flex: 1 1 auto;
+		cursor: pointer;
+		padding: 0.2rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		margin: 0.25rem;
+		background-color: rgba(var(--local-accent-color), 0);
+		border-radius: var(--local-rounded-base);
+	}
+	.RNBOhover:hover {
+		background-color: rgba(var(--local-accent-color), 0.2);
+		transition: var(--local-animation) var(--local-animation-duration);
+	}
+	.RNBOchecked {
+		background-color: rgba(var(--local-accent-color), 1);
+		transition: var(--local-animation) var(--local-animation-duration);
+	}
+	.RNBOradio-input {
+		overflow: hidden;
+		width: 0;
+		height: 0;
+	}
+</style>

package/dist/UIcomponents/RadioItem.svelte.d.ts

@@ -7,15 +7,15 @@ declare const RadioItem: import("svelte").Component<{
     group: any;
     name: any;
     value: any;
-    title?: string;
-    label?: string;
-    children?: import("svelte").Snippet;
+    title?: string | undefined;
+    label?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
 }, {}, "group">;
 type Props = {
     group: any;
     name: any;
     value: any;
-    title?: string;
-    label?: string;
-    children?: import("svelte").Snippet;
+    title?: string | undefined;
+    label?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
 };

package/dist/UIcomponents/RangeSlider.svelte.d.ts

@@ -5,17 +5,17 @@ type RangeSlider = {
 };
 declare const RangeSlider: import("svelte").Component<{
     name: any;
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    label?: string;
+    value?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    label?: string | undefined;
 }, {}, "value">;
 type Props = {
     name: any;
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    label?: string;
+    value?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    label?: string | undefined;
 };

package/dist/index.js

@@ -1,20 +1,20 @@
-// Reexport your entry components here
-export { default as RNBO } from './RNBO.svelte';
-export { default as RNBOParam } from './RNBOcomponents/RNBOParam.svelte';
-export { default as RNBOMidiIn } from './RNBOcomponents/RNBOMidiIn.svelte';
-// export { default as RNBOMidiOut } from './RNBOcomponents/RNBOMidiOut.svelte';
-export { default as RNBOInlet } from './RNBOcomponents/RNBOInlet.svelte';
-export { default as RNBOInport } from './RNBOcomponents/RNBOInport.svelte';
-export { default as RNBOOutport } from './RNBOcomponents/RNBOOutport.svelte';
-
-export { default as XYMidiIn } from './RNBOcomponents/XYMidiIn.svelte';
-export { default as ExtMidiIn } from './RNBOcomponents/ExtMidiIn.svelte';
-// export { default as ExtMidiOut } from './RNBOcomponents/ExtMidiOut.svelte';
-export { default as MicIn } from './RNBOcomponents/MicIn.svelte';
-export { default as AudioDropIn } from './RNBOcomponents/AudioDropIn.svelte';
-
-export { default as FileDropZone } from './UIcomponents/FileDropZone.svelte';
-export { default as ProgressBar } from './UIcomponents/ProgressBar.svelte';
-export { default as RadioGroup } from './UIcomponents/RadioGroup.svelte';
-export { default as RadioItem } from './UIcomponents/RadioItem.svelte';
-export { default as RangeSlider } from './UIcomponents/RangeSlider.svelte';
+// Reexport your entry components here
+export { default as RNBO } from './RNBO.svelte';
+export { default as RNBOParam } from './RNBOcomponents/RNBOParam.svelte';
+export { default as RNBOMidiIn } from './RNBOcomponents/RNBOMidiIn.svelte';
+// export { default as RNBOMidiOut } from './RNBOcomponents/RNBOMidiOut.svelte';
+export { default as RNBOInlet } from './RNBOcomponents/RNBOInlet.svelte';
+export { default as RNBOInport } from './RNBOcomponents/RNBOInport.svelte';
+export { default as RNBOOutport } from './RNBOcomponents/RNBOOutport.svelte';
+
+export { default as XYMidiIn } from './RNBOcomponents/XYMidiIn.svelte';
+export { default as ExtMidiIn } from './RNBOcomponents/ExtMidiIn.svelte';
+// export { default as ExtMidiOut } from './RNBOcomponents/ExtMidiOut.svelte';
+export { default as MicIn } from './RNBOcomponents/MicIn.svelte';
+export { default as AudioDropIn } from './RNBOcomponents/AudioDropIn.svelte';
+
+export { default as FileDropZone } from './UIcomponents/FileDropZone.svelte';
+export { default as ProgressBar } from './UIcomponents/ProgressBar.svelte';
+export { default as RadioGroup } from './UIcomponents/RadioGroup.svelte';
+export { default as RadioItem } from './UIcomponents/RadioItem.svelte';
+export { default as RangeSlider } from './UIcomponents/RangeSlider.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tialro2/rnbokit",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -18,21 +18,21 @@
   "devDependencies": {
     "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.60.1",
+    "@sveltejs/kit": "^2.61.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.17.1",
+    "eslint-plugin-svelte": "^3.18.0",
     "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-svelte": "^4.0.1",
     "publint": "^0.3.21",
-    "svelte": "^5.55.5",
+    "svelte": "^5.55.10",
     "svelte-check": "^4.4.8",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.13",
-    "vitest": "^4.1.6"
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",