@bouku/core 0.0.1 → 0.0.3

package/dist/components/text/badge.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+const tailwind_variants_1 = require("tailwind-variants");
+/**
+ * Color-themed badge component.
+ *
+ * To use a CSS variable it must exist and be passed in the
+ * form `--variable-name`. Any other format may cause unexpected
+ * results. CSS variables use 'color-mix' which is not supported in
+ * some old browsers such as Safari 15.3 and Internet Explorer.
+ *
+ * @param {string} color - Color of badge. (optional, default = accent)
+**/
+function Badge({ style, color = "--color-accent", size = "md", icon, children }) {
+    if (!children)
+        return null;
+    if (color === "future")
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 test-badge", children: [icon && (0, jsx_runtime_1.jsx)("div", { className: "text-primary-dark", children: icon }), (0, jsx_runtime_1.jsx)("span", { children: children })] }));
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, style_1.cn)(base({ size }), style), style: styles(color), children: children }));
+}
+const styles = (color) => ({
+    background: (0, style_1.opacitize)(color),
+    border: `1px solid var(${color})`,
+    borderRadius: "calc(infinity * 1px)",
+    textAlign: "center",
+    fontWeight: "600",
+    color: "var(--color-primary)"
+});
+const base = (0, tailwind_variants_1.tv)({
+    base: "w-min",
+    variants: {
+        size: {
+            xs: "px-1 py-px text-[0.5rem]",
+            sm: "px-1 py-px text-xs",
+            md: "px-2 py-1 text-sm"
+        }
+    }
+});
+exports.default = Badge;

package/dist/components/text/input.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+type FieldProps<T> = {
+    id?: string;
+    label?: string;
+    style?: string;
+    value?: T;
+    update?: (x: T) => void;
+    updateForm?: (id: string, x: T) => void;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+type Variant = "normal" | "ghost";
+type Props<T> = FieldProps<T> & {
+    type?: "text" | "number" | "email" | "password";
+    variant?: Variant;
+    style?: string;
+    placeholder?: string;
+    onEnter?: (x: string) => void;
+};
+/**
+ * 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)
+**/
+export default function Input<T>({ id, type, variant, style, value, update, updateForm, onEnter, disabled, placeholder, ...props }: Props<T>): import("react").JSX.Element;
+export {};

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,2 @@
-export * from "./ui";
+export * from "./components";
 export * from "./utils";

package/dist/index.js

@@ -14,5 +14,5 @@ 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);
+__exportStar(require("./components"), exports);
 __exportStar(require("./utils"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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",