@bouko/react 0.1.9 → 0.2.0

package/dist/components/attachment.d.ts

@@ -0,0 +1,11 @@
+import { type Dispatch, type SetStateAction } from "react";
+type Props = {
+    label?: string;
+    style?: string;
+    value?: File[];
+    required?: boolean;
+    update: Dispatch<SetStateAction<File[]>>;
+    note?: string;
+};
+export default function Attachment({ style, update, label, required, value, note }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/attachment.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import PaperClip from "../assets/icons/paperclip.svg";
+import { cn } from "@bouko/style";
+export default function Attachment({ style, update, label, required = true, value, note }) {
+    const ref = useRef(null);
+    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)" }) : ""] }), _jsxs("div", { onClick: () => ref.current?.click(), className: "flex flex-col justify-center items-center py-3 gap-1 w-full cursor-pointer duration-200 hover:bg-slate-200/40 rounded border-2 border-slate-300 border-dashed", children: [_jsxs("span", { className: "flex gap-2 items-center font-semibold text-sm", children: [_jsx(PaperClip, {}), "Drag and drop files, paste screenshots, or"] }), _jsx("span", { className: "text-xs text-slate-500", children: "browse" }), _jsx("input", { type: "file", className: "hidden", ref: ref })] }), note && _jsx("span", { className: styles.note, children: note })] }));
+}
+const styles = {
+    container: "flex flex-col gap-2 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/button.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+type Props = {
+    style?: string;
+    onClick?: () => void;
+    children: ReactNode;
+};
+export default function Button({ style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function Button({ style, ...props }) {
+    return (_jsx("button", { className: cn("px-4 py-2 duration-200 cursor-pointer", "bg-accent hover:bg-accent-dark border border-accent-dark rounded", "font-semibold text-slate-100", style), ...props }));
+}

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/flex.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function ColumnBox({ style, children }: {
+    style?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RowBox({ style, children }: {
+    style?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/flex.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export function ColumnBox({ style, children }) {
+    return (_jsx("div", { className: cn(style, "flex flex-col"), children: children }));
+}
+export function RowBox({ style, children }) {
+    return (_jsx("div", { className: cn(style, "flex"), children: children }));
+}

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) }), x.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/components/select.d.ts

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

package/dist/components/select.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import Chevron from "../assets/icons/chevron.svg";
+import { cn } from "@bouko/style";
+export default function Select({ style, label, required = true, value, options, update, note }) {
+    const [isOpen, setOpen] = useState(false);
+    const active = options.find(x => x.id === value);
+    const select = (x) => {
+        update(x);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: cn(styles.container, style), children: [_jsxs("div", { className: styles.subcontainer, children: [label && _jsxs("span", { className: styles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), _jsxs("div", { className: cn(styles.trigger, !active?.label && "capitalize"), onClick: () => setOpen(x => !x), children: [active ? active.label ?? active.id : "None", _jsx(Chevron, { className: cn("text-xs text-slate-400 duration-200", isOpen && "rotate-180") })] }), note && !isOpen && _jsx("span", { className: styles.note, children: note })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: styles.dropdown, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn("w-full p-2 border-l-3 border-transparent hover:text-blue-600 duration-200 cursor-pointer", active?.id === id && "border-blue-600 bg-blue-500/10", !label && "capitalize"), onClick: () => select(id), children: label ?? id }, id))) }, "dropdown")) })] }));
+}
+const styles = {
+    container: "relative",
+    subcontainer: "flex flex-col gap-1 w-full",
+    label: "text-xs text-slate-600",
+    trigger: "flex justify-between items-center px-3 py-2 bg-slate-200/50 hover:bg-slate-200/80 border border-slate-300 outline-blue-500 rounded text-sm duration-200 cursor-pointer",
+    dropdown: "absolute mt-2 z-50 flex flex-col gap-1 w-full bg-slate-100 rounded border border-slate-300 py-1 text-xs max-h-46 overflow-y-auto",
+    note: "mt-1 text-xs text-slate-500"
+};

package/dist/components/textarea.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, TextareaHTMLAttributes } from "react";
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    style?: string;
+    note?: ReactNode;
+};
+export default function TextArea({ style, label, required, note, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/textarea.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@bouko/style";
+export default function TextArea({ style, label, required = true, note, ...props }) {
+    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)" }) : ""] }), _jsx("textarea", { className: styles.textarea, ...props }), note && _jsx("span", { className: styles.note, children: note })] }));
+}
+const styles = {
+    container: "flex flex-col gap-1 overflow-hidden",
+    label: "text-xs text-slate-600",
+    textarea: "px-3 py-2 bg-slate-200/50 border border-slate-300 outline-blue-500 rounded text-sm resize-none",
+    note: "mt-1 text-xs text-slate-500"
+};

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

@@ -0,0 +1,8 @@
+export { default as Input } from "./components/input";
+export { default as TextArea } from "./components/textarea";
+export { default as Select } from "./components/select";
+export { default as MultipleChoice } from "./components/mcq";
+export { default as Attachment } from "./components/attachment";
+export { default as Button } from "./components/button";
+export * from "./components/flex";
+export * from "./core/types";

package/dist/index.js

@@ -0,0 +1,8 @@
+export { default as Input } from "./components/input";
+export { default as TextArea } from "./components/textarea";
+export { default as Select } from "./components/select";
+export { default as MultipleChoice } from "./components/mcq";
+export { default as Attachment } from "./components/attachment";
+export { default as Button } from "./components/button";
+export * from "./components/flex";
+export * from "./core/types";

package/package.json

@@ -2,7 +2,7 @@
 
   "name": "@bouko/react",
 
-  "version": "0.1.9",
+  "version": "0.2.0",
 
   "main": "./dist/index.js",