@tialro2/rnbokit 1.0.0

package/dist/UIcomponents/RadioItem.svelte

@@ -0,0 +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>

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

@@ -0,0 +1,21 @@
+export default RadioItem;
+type RadioItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const RadioItem: import("svelte").Component<{
+    group: any;
+    name: any;
+    value: any;
+    title?: string;
+    label?: string;
+    children?: import("svelte").Snippet;
+}, {}, "group">;
+type Props = {
+    group: any;
+    name: any;
+    value: any;
+    title?: string;
+    label?: string;
+    children?: import("svelte").Snippet;
+};

package/dist/UIcomponents/RangeSlider.svelte

@@ -0,0 +1,38 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} name
+	 * @property {number} [value]
+	 * @property {number} [min]
+	 * @property {number} [max]
+	 * @property {number} [step]
+	 * @property {string} [label]
+	 */
+
+	/** @type {Props} */
+	let {
+		name,
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 0.01,
+		label = '',
+		onclick,
+		onchange,
+		onblur
+	} = $props();
+</script>
+
+<input
+	type="range"
+	{name}
+	class="RNBOslider"
+	aria-label={label}
+	{min}
+	{max}
+	{step}
+	bind:value
+	{onclick}
+	{onchange}
+	{onblur}
+/>

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

@@ -0,0 +1,21 @@
+export default RangeSlider;
+type RangeSlider = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const RangeSlider: import("svelte").Component<{
+    name: any;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+}, {}, "value">;
+type Props = {
+    name: any;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+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 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 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/dist/index.js

@@ -0,0 +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';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@tialro2/rnbokit",
+  "version": "1.0.0",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.56.0",
+    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/kit": "^2.46.4",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.12.4",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.14",
+    "svelte": "^5.39.11",
+    "svelte-check": "^4.3.3",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@rnbo/js": "^1.4.1",
+    "@types/path-browserify": "^1.0.3",
+    "path-browserify": "^1.0.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TiAlRo/RNBOKit.git"
+  },
+  "license": "MIT",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "svelte-kit",
+    "Max",
+    "Cycling74",
+    "RNBO",
+    "RNBO~",
+    "RNBOkit"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "test": "playwright test",
+    "test:unit": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  }
+}