@jointhedots/input 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Join.The.Dots contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# @jointhedots/input
+
+Champs de saisie Join.The.Dots : `InputData`, piloté par un schéma JSON
+(string, enum, textarea, nombre, booléen), et `TextInputSchema`, le
+constructeur du schéma d'un champ texte typé. Le tooling d'un champ suit le
+modèle d'items de @jointhedots/layout (`ToolingProps`), et le déroulant d'une
+énumération est un menu flottant de lignes d'items.
+
+## Installation
+
+```bash
+pnpm add @jointhedots/input
+```
+
+Peer dependency : `react` ≥ 18.2.0. Dépend de `@jointhedots/core` pour le
+type `JSONSchema`, de `@jointhedots/icon` pour les glyphes et de
+`@jointhedots/layout` pour le modèle d'items et les menus flottants.
+
+## Usage
+
+```tsx
+import { InputData, TextInputSchema } from "@jointhedots/input"
+
+<InputData
+   value={value}
+   schema={{ type: "string", enum: ["small", "medium"] }}
+   icon="utility:settings"
+   tooling={[{ name: "Reset", icon: "bi:arrow-clockwise", onActivate: reset }]}
+   onChange={setValue}
+/>
+
+<InputData
+   label="API token"
+   value={token}
+   schema={TextInputSchema("paste your token", "password")}
+   onChange={setToken}
+/>
+```
+
+Les styles du package (gabarits `jtd-field*`, `jtd-input`, `jtd-select`)
+sont injectés automatiquement au chargement du module — aucun stylesheet
+à gérer.

package/dist/InputData.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { IconSize } from '../../icon/src/index.ts';
+import { JSONSchema } from '@jointhedots/core';
+import { ToolingProps } from '../../layout/src/index.ts';
+type InputProps = {
+    label?: React.ReactNode;
+    icon?: string;
+    tooling?: ToolingProps[];
+    size?: keyof typeof IconSize;
+    value: any;
+    schema: JSONSchema;
+    onChange: (value: any) => void;
+};
+export declare const InputData: React.FC<InputProps>;
+export {};

package/dist/TextInputSchema.d.ts

@@ -0,0 +1,3 @@
+import { HTMLInputTypeAttribute } from 'react';
+import { JSONSchema } from '@jointhedots/core';
+export declare function TextInputSchema(placeholder: string | number, type: HTMLInputTypeAttribute): JSONSchema;

package/dist/generated/styles.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InputData';
+export * from './TextInputSchema';

package/dist/index.js

@@ -0,0 +1,99 @@
+import "react";
+import e from "@jointhedots/icon";
+import { DrawToolingWidgets as t, Menu as n, openContextualMenu as r } from "@jointhedots/layout";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/input/src/inject-styles.ts
+function s(e, t) {
+	if (typeof document > "u" || document.getElementById(t)) return;
+	let n = document.createElement("style");
+	n.id = t, n.textContent = e, document.head.appendChild(n);
+}
+//#endregion
+//#region packages/input/src/generated/styles.ts
+var c = ".jtd-field{display:flex;flex-direction:column;gap:4px;min-width:0}.jtd-field-label{color:var(--jtd-muted);font-size:12px}.jtd-field-control{display:flex;align-items:center;gap:6px;min-height:32px;padding:3px 10px;background-color:var(--jtd-surface);border:1px solid var(--jtd-border);border-radius:5px;transition:border-color 120ms ease}.jtd-field-control:focus-within{border-color:var(--jtd-primary)}.jtd-field-icon{display:flex;flex:none;color:var(--jtd-muted)}.jtd-input{flex:1;min-width:0;align-self:stretch;padding:0;border:none;background:none;outline:none;font:inherit;color:var(--jtd-foreground)}.jtd-input::placeholder{color:var(--jtd-muted)}.jtd-input:disabled{opacity:.45}textarea.jtd-input{align-self:auto;min-height:60px;padding:5px 0;resize:vertical}.jtd-checkbox{width:16px;height:16px;margin:8px 0;accent-color:var(--jtd-primary);cursor:pointer}.jtd-checkbox:focus-visible{outline:2px solid var(--jtd-primary);outline-offset:2px}.jtd-field-tooling{display:flex;flex:none;gap:2px}.jtd-select{display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;text-align:left}.jtd-select-caret{flex:none;color:var(--jtd-muted)}.jtd-field--xs{font-size:12px;gap:2px}.jtd-field--xs>.jtd-field-label{font-size:10px}.jtd-field--xs>.jtd-field-control{min-height:18px;padding:1px 6px;gap:3px;border-radius:4px}.jtd-field--xs .jtd-checkbox{width:12px;height:12px;margin:2px 0}.jtd-field--sm{font-size:13px}.jtd-field--sm>.jtd-field-control{min-height:24px;padding:2px 9px}.jtd-field--sm .jtd-checkbox{width:14px;height:14px;margin:4px 0}.jtd-field--lg{font-size:15px}.jtd-field--lg>.jtd-field-control{min-height:40px;padding:5px 12px}.jtd-field--lg .jtd-checkbox{width:18px;height:18px;margin:10px 0}", l = ({ value: s, onChange: c, schema: l, icon: u, label: d, tooling: f, size: p = "md" }) => {
+	let m = p === "md" ? "jtd-field" : `jtd-field jtd-field--${p}`, h = (e) => {
+		let t = l.type, n = e.target.value;
+		(t === "number" || t === "integer") && (n = Number(n)), c(n);
+	}, g = (e) => {
+		e.stopPropagation(), r(e, (e) => /* @__PURE__ */ a(i, { children: l.enum.map((t) => /* @__PURE__ */ a(n.Item, {
+			name: t,
+			icon: t === s ? "bi:check-lg" : "blank",
+			onClick: () => e(t)
+		}, t)) }), { position: "down-left" }).then((e) => {
+			e !== void 0 && c(e);
+		});
+	};
+	return l.type === "boolean" ? /* @__PURE__ */ o("div", {
+		className: m,
+		children: [d ? /* @__PURE__ */ a("span", {
+			className: "jtd-field-label",
+			children: d
+		}) : null, /* @__PURE__ */ a("input", {
+			type: "checkbox",
+			className: "jtd-checkbox",
+			checked: s,
+			onChange: (e) => c(e.target.checked)
+		})]
+	}) : /* @__PURE__ */ o("div", {
+		className: m,
+		children: [d ? /* @__PURE__ */ a("span", {
+			className: "jtd-field-label",
+			children: d
+		}) : null, /* @__PURE__ */ o("div", {
+			className: "jtd-field-control",
+			children: [
+				u ? /* @__PURE__ */ a(e, {
+					className: "jtd-field-icon",
+					name: u
+				}) : null,
+				(() => {
+					let t = l.type;
+					if (t === "string" && l.enum) return /* @__PURE__ */ o("button", {
+						type: "button",
+						className: "jtd-input jtd-select",
+						onClick: g,
+						children: [/* @__PURE__ */ a("span", {
+							className: "jtd-select-value",
+							children: s
+						}), /* @__PURE__ */ a(e, {
+							className: "jtd-select-caret",
+							name: "bi:chevron-down"
+						})]
+					});
+					if (t === "string" && l.format === "textarea") return /* @__PURE__ */ a("textarea", {
+						className: "jtd-input",
+						value: s,
+						placeholder: l.default,
+						onChange: h
+					});
+					let n = t === "number" || t === "integer" ? "number" : t === "string" && l.format ? l.format : "text";
+					return /* @__PURE__ */ a("input", {
+						className: "jtd-input",
+						type: n,
+						value: s,
+						placeholder: l.default,
+						onChange: h
+					});
+				})(),
+				f && f.length ? /* @__PURE__ */ a("div", {
+					className: "jtd-field-tooling",
+					children: t(f)
+				}) : null
+			]
+		})]
+	});
+};
+//#endregion
+//#region packages/input/src/TextInputSchema.ts
+function u(e, t) {
+	return {
+		type: "string",
+		format: t,
+		default: e
+	};
+}
+//#endregion
+//#region packages/input/src/index.ts
+s(c, "jtd-input-styles");
+//#endregion
+export { l as InputData, u as TextInputSchema };

package/dist/inject-styles.d.ts

@@ -0,0 +1 @@
+export declare function injectStyles(css: string, id: string): void;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@jointhedots/input",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Join.The.Dots inputs — schema-driven InputData and the TextInputSchema builder",
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@jointhedots/core": "^2.1.0",
+    "@jointhedots/icon": "^0.1.1",
+    "@jointhedots/layout": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "^19.2.0",
+    "typescript": "~5.9.3",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.0.3"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}