@bouko/react 0.1.2 → 0.1.4

package/dist/components/field.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    style?: string;
+    required?: boolean;
+    note?: string;
+    children: ReactNode;
+};
+export default function Field({ style, label, required, note, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/field.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function Field({ style, label, required = true, note, children }) {
+    return (_jsxs("div", { className: cn(styles.container, style), children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && _jsx("span", { className: styles.note, children: note })] }));
+}
+const styles = {
+    container: "flex flex-col gap-1 overflow-hidden",
+    label: "text-xs text-slate-600",
+    input: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/components/input.d.ts

@@ -0,0 +1,6 @@
+import type { Field as FieldProps } from "../core/types";
+type Props = FieldProps & {
+    placeholder?: string;
+};
+export default function Input({ style, label, required, note, update, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/input.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Field from "./field";
+export default function Input({ style, label, required = true, note, update, ...props }) {
+    return (_jsx(Field, { style: style, label: label, required: required, note: note, children: _jsx("input", { className: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm", onChange: ({ target: { value } }) => update(value), ...props }) }));
+}

package/dist/components/mcq.d.ts

@@ -0,0 +1,2 @@
+import type { OptionField } from "../core/types";
+export default function MultipleChoice({ label, options, style, value, update, required }: OptionField): import("react/jsx-runtime").JSX.Element;

package/dist/components/mcq.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Field from "./field";
+import { cn } from "@bouko/style";
+export default function MultipleChoice({ label, options, style, value, update, required = true }) {
+    return (_jsx(Field, { style: style, label: label, required: required, children: _jsx("div", { className: styles.options, children: options.map((x, i) => (_jsxs("div", { className: styles.item, children: [_jsx(Dot, { ...x, active: x.id === value, select: () => update(x.id) }), label] }, i))) }) }));
+}
+const Dot = ({ active, select }) => (_jsx("div", { className: cn(styles.dot, active && "bg-accent border-accent-dark"), onClick: select }));
+const styles = {
+    options: "flex flex-col gap-1 w-full",
+    item: "flex items-center gap-3 text-sm",
+    dot: "size-3 bg-background-dark/50 hover:bg-background-dark duration-200 cursor-pointer border border-background-dark rounded-full"
+};

package/dist/core/types.d.ts

@@ -0,0 +1,18 @@
+import type { Dispatch, SetStateAction } from "react";
+export type Field = {
+    label?: string;
+    style?: string;
+    value?: string;
+    update: Dispatch<SetStateAction<string>>;
+    required?: boolean;
+    note?: string;
+};
+export type Option = {
+    id: string;
+    label?: string;
+    active?: boolean;
+    select?: () => void;
+};
+export type OptionField = Field & {
+    options: Option[];
+};

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1 +1,4 @@
 export { default as Button } from "./components/button";
+export { default as Input } from "./components/input";
+export { default as MultipleChoice } from "./components/mcq";
+export * from "./core/types";

package/dist/index.js

@@ -1 +1,4 @@
 export { default as Button } from "./components/button";
+export { default as Input } from "./components/input";
+export { default as MultipleChoice } from "./components/mcq";
+export * from "./core/types";

package/package.json

@@ -1,7 +1,7 @@
 {
 
   "name": "@bouko/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",