@bouku/core 0.0.1 → 0.0.2

package/dist/components/text/input.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Input;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+const tailwind_variants_1 = require("tailwind-variants");
+function Field({ style, label, required = true, note, children }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(fieldStyles.container, style), children: [label && (0, jsx_runtime_1.jsxs)("span", { className: fieldStyles.label, children: [label, " ", !required ? (0, jsx_runtime_1.jsx)("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && (0, jsx_runtime_1.jsx)("span", { className: fieldStyles.note, children: note })] }));
+}
+const fieldStyles = {
+    container: "flex flex-col shrink-0 gap-1 overflow-hidden",
+    label: "text-xs text-primary-dark",
+    note: "mt-1 text-xs text-slate-500 whitespace-pre-line"
+};
+/**
+ * Text field component.
+ *
+ * Wraps the native `input` element with custom styling and validation.
+ * It displays an optional label and note, and can be marked as required.
+ * Optional callback for when the user presses `Enter` key.
+ * The value is controlled externally via props, usually `useState`.
+ *
+ * Variants:
+ *  - `normal`: Standard input with primary color scheme.
+ *  - `ghost`: Transparent for injecting input inside other component.
+ *
+ * @param {Variant} variant - Visual style variant. (optional, default = normal)
+ * @param {string} style - Additional class names for styling. (optional)
+ * @param {string} placeholder - Placeholder text for the input. (optional)
+ * @param {Function} onEnter - Callback when `Enter` key is pressed. (optional)
+**/
+function Input({ id, type = "text", variant, style, value, update, updateForm, onEnter, disabled, placeholder, ...props }) {
+    const handleUpdate = (value) => {
+        if (id && updateForm)
+            updateForm(id, value);
+        else if (update)
+            update(value);
+    };
+    return ((0, jsx_runtime_1.jsx)(Field, { ...props, children: (0, jsx_runtime_1.jsx)("input", { type: type, className: (0, style_1.cn)(styles({ variant }), style), placeholder: placeholder || `Enter ${id}`, value: value, onChange: ({ target: { value } }) => handleUpdate(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
+}
+const styles = (0, tailwind_variants_1.tv)({
+    base: "px-3 py-2 duration-200 rounded text-xs sm:text-sm placeholder:text-primary-darker text-primary disabled:brightness-90 disabled:cursor-not-allowed",
+    defaultVariants: { variant: "normal" },
+    variants: {
+        variant: {
+            normal: "bg-input border border-outline focus:border-outline-light outline-none",
+            ghost: "p-0 bg-transparent border-none outline-none"
+        }
+    }
+});

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * from "./ui";
+export * from "./components";
 export * from "./utils";
+export declare function mountApp(app: React.ReactNode): void;

package/dist/index.js

@@ -14,5 +14,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ui"), exports);
+exports.mountApp = mountApp;
+const client_1 = require("react-dom/client");
+__exportStar(require("./components"), exports);
 __exportStar(require("./utils"), exports);
+function mountApp(app) {
+    const element = document.getElementById("root");
+    const root = (0, client_1.createRoot)(element);
+    root.render(app);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@types/node": "^24.3.1",
     "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.2.3",
     "dependency-cruiser": "^17.0.1",
     "react": "^19.1.1",
     "react-router-dom": "^7.12.0",