@bouko/react 2.5.2 → 2.5.4

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, center, centerX, centerY, children }) {
+    return (_jsx("div", { className: cn("flex flex-col", center && "items-center justify-center", centerX && "items-center", centerY && "justify-center", style), children: children }));
+}
+export function RowBox({ style, children }) {
+    return (_jsx("div", { className: cn("flex", style), children: children }));
+}

package/dist/components/form/fields.d.ts

@@ -0,0 +1,16 @@
+import { Field, Option } from "./types";
+export type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
+    id: string;
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+type Props<T> = {
+    id?: string;
+    fields: FormBuilderField<T>;
+    data: T;
+    setField: (x: string, y: unknown) => void;
+};
+export default function Fields<T>({ fields, data, setField }: Props<T>): Promise<import("react/jsx-runtime").JSX.Element[]>;
+export {};

package/dist/components/form/fields.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RowBox } from "../layout/flex";
+import Input from "../input";
+import Select from "../select";
+import TextArea from "../textarea";
+import MultipleChoice from "../multiple-choice";
+import Attachment from "../attachment";
+export default async function Fields({ fields, data, setField }) {
+    return fields.map((row, i) => (_jsx(RowBox, { style: "w-full gap-5 overflow-hidden", children: row.map(({ element, id, rows, label, placeholder, disabled, options, required, note }) => {
+            if (element === "input")
+                return (_jsx(Input, { id: id, styles: { container: "flex-1" }, label: label, placeholder: placeholder, value: data[id], update: x => setField(id, x), disabled: disabled, note: note, required: required }, id));
+            else if (element === "select")
+                return (_jsx(Select, { id: id, label: label, placeholder: placeholder, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+            else if (element === "textarea")
+                return (_jsx(TextArea, { id: id, label: label, placeholder: placeholder, rows: rows, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+            else if (element === "multiple-choice")
+                return (_jsx(MultipleChoice, { id: id, label: label, options: options || [], value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+            else if (element === "attachment")
+                return (_jsx(Attachment, { id: id, label: label, value: data[id], update: x => setField(id, x), note: note, required: required }, id));
+        }) }, i)));
+}

package/dist/components/form/footer.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button } from "../button";
 import { RowBox } from "../layout/flex";
-import CheckCircle from "./assets/check-circle.svg";
-import Spinner from "./assets/spinner.svg";
+import CheckCircle from "../../assets/icons/check-circle.svg";
+import Spinner from "../../assets/icons/spinner.svg";
 export default function FormFooter({ data, validator, submit, clear }) {
     const isValid = validator.safeParse(data).success;
     const [isLoading, setLoading] = useState(false);

package/dist/components/form/functions.d.ts

@@ -1 +1 @@
-export declare const parseData: <T extends Record<string, unknown>>(data: T) => T;
+export declare const parseData: <T extends Record<string, unknown>>(data: T) => T;

package/dist/components/form/functions.js

@@ -1,28 +1,28 @@
-export const parseData = (data) => {
-    const copy = JSON.parse(JSON.stringify(data));
-    for (const [key, value] of Object.entries(data)) {
-        if (key === "created_at")
-            copy[key] = new Date(value);
-        else if (key === "timestamp")
-            copy[key] = new Date(value.replaceAll("'", ""));
-        else if (parseAllowedDate(value))
-            copy[key] = new Date(value);
-    }
-    return copy;
-};
-function parseAllowedDate(input) {
-    // ISO 8601 strict (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss+hh:mm)
-    const isoStrictRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?(Z|[+-]\d{2}:\d{2}))?$/;
-    // MySQL/Postgres style with space + offset without colon (YYYY-MM-DD HH:mm:ss+hhmm)
-    const spaceOffsetRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}[+-]\d{4}$/;
-    let normalized = input;
-    if (spaceOffsetRegex.test(input)) {
-        // Convert to ISO by replacing space with T and adding colon in offset
-        normalized = input.replace(" ", "T").replace(/([+-]\d{2})(\d{2})$/, "$1:$2");
-    }
-    else if (!isoStrictRegex.test(input)) {
-        return null; // Not allowed format
-    }
-    const date = new Date(normalized);
-    return !isNaN(date.getTime()) ? date : null;
-}
+export const parseData = (data) => {
+    const copy = JSON.parse(JSON.stringify(data));
+    for (const [key, value] of Object.entries(data)) {
+        if (key === "created_at")
+            copy[key] = new Date(value);
+        else if (key === "timestamp")
+            copy[key] = new Date(value.replaceAll("'", ""));
+        else if (parseAllowedDate(value))
+            copy[key] = new Date(value);
+    }
+    return copy;
+};
+function parseAllowedDate(input) {
+    // ISO 8601 strict (YYYY-MM-DD or YYYY-MM-DDTHH:mm:ss+hh:mm)
+    const isoStrictRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?(Z|[+-]\d{2}:\d{2}))?$/;
+    // MySQL/Postgres style with space + offset without colon (YYYY-MM-DD HH:mm:ss+hhmm)
+    const spaceOffsetRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}[+-]\d{4}$/;
+    let normalized = input;
+    if (spaceOffsetRegex.test(input)) {
+        // Convert to ISO by replacing space with T and adding colon in offset
+        normalized = input.replace(" ", "T").replace(/([+-]\d{2})(\d{2})$/, "$1:$2");
+    }
+    else if (!isoStrictRegex.test(input)) {
+        return null; // Not allowed format
+    }
+    const date = new Date(normalized);
+    return !isNaN(date.getTime()) ? date : null;
+}

package/dist/components/form/loaders.d.ts

@@ -0,0 +1,3 @@
+import { FormBuilderField } from "./fields";
+export declare function loadJson<T>(name: string): Promise<T>;
+export declare function loadForm<T>(name?: string): Promise<FormBuilderField<T>>;

package/dist/components/form/loaders.js

@@ -0,0 +1,11 @@
+"use server";
+import { promises as fs } from "fs";
+export async function loadJson(name) {
+    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
+    return JSON.parse(file);
+}
+export async function loadForm(name) {
+    if (!name)
+        throw new Error("Form not found");
+    return loadJson(`forms/${name}`);
+}

package/dist/components/form/test-next.d.ts

@@ -0,0 +1 @@
+export declare function loadJson<T>(name: string): Promise<T>;

package/dist/components/form/test-next.js

@@ -0,0 +1,6 @@
+"use server";
+import { promises as fs } from "fs";
+export async function loadJson(name) {
+    const file = await fs.readFile(process.cwd() + "/assets/" + name + ".json", "utf-8");
+    return JSON.parse(file);
+}

package/dist/components/form/types.d.ts

@@ -1,38 +1,38 @@
-import type { ReactNode, Dispatch, SetStateAction } from "react";
-export declare type SetState<T> = Dispatch<SetStateAction<T>>;
-export declare type FormSection<T> = {
-    data: T;
-    update: SetState<T>;
-    setField: (x: string, value: unknown) => void;
-    clear: () => void;
-};
-export declare type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
-    id: string;
-    element: string;
-    rows?: number;
-    placeholder?: string;
-    options?: Option[];
-})[][];
-export declare type Field<T, K = string> = {
-    id?: string;
-    label?: string;
-    style?: string;
-    value?: K;
-    update: SetState<T>;
-    required?: boolean;
-    disabled?: boolean;
-    note?: ReactNode;
-};
-export declare type Option = {
-    id: string;
-    label?: string;
-    active?: boolean;
-    select?: () => void;
-};
-export declare type OptionField<T> = Field<T> & {
-    options: Option[];
-};
-export declare type Form<T> = {
-    data: T;
-};
-export declare type FormSubmit<T> = (data: T, clear?: () => void) => Promise<void>;
+import type { ReactNode, Dispatch, SetStateAction } from "react";
+export type SetState<T> = Dispatch<SetStateAction<T>>;
+export type FormSection<T> = {
+    data: T;
+    update: SetState<T>;
+    setField: (x: string, value: unknown) => void;
+    clear: () => void;
+};
+export type FormBuilderField<T = unknown> = (Omit<Field<T>, "value" | "update"> & {
+    id: string;
+    element: string;
+    rows?: number;
+    placeholder?: string;
+    options?: Option[];
+})[][];
+export type Field<T, K = string> = {
+    id?: string;
+    label?: string;
+    style?: string;
+    value?: K;
+    update: SetState<T>;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+export type Option = {
+    id: string;
+    label?: string;
+    active?: boolean;
+    select?: () => void;
+};
+export type OptionField<T> = Field<T> & {
+    options: Option[];
+};
+export type Form<T> = {
+    data: T;
+};
+export type FormSubmit<T> = (data: T, clear?: () => void) => Promise<void>;

package/dist/components/form/types.js

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

package/dist/components/heading/normal.d.ts

@@ -1,29 +1,29 @@
-import { ReactNode } from "react";
-declare type Props = {
-    badge?: string;
-    title: ReactNode;
-    subtitle?: ReactNode;
-    style?: Styles;
-};
-declare type Styles = {
-    container?: string;
-    badge?: string;
-    title?: string;
-    subtitle?: string;
-};
-/**
- * Text heading with badge, title, subtitle.
- *
- * @param {string} badge - Little note above the title (optional).
- * @param {ReactNode} title - Main title content.
- * @param {ReactNode} subtitle - Subtitle content (optional).
- * @param {Styles} style - Additional styles (optional).
-**/
-export default function Heading({ badge, title, subtitle, style }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-/**
- * Problems
- *
- * - Perfect `Badge`
- * - Long `subtitle` style
-**/ 
+import { ReactNode } from "react";
+type Props = {
+    badge?: string;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    style?: Styles;
+};
+type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+/**
+ * Problems
+ *
+ * - Perfect `Badge`
+ * - Long `subtitle` style
+**/ 

package/dist/components/heading/normal.js

@@ -1,22 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeStyles } from "@bouko/style";
-import { RowBox, ColumnBox } from "../layout/flex";
-import { Badge } from "../text/badge";
-/**
- * Text heading with badge, title, subtitle.
- *
- * @param {string} badge - Little note above the title (optional).
- * @param {ReactNode} title - Main title content.
- * @param {ReactNode} subtitle - Subtitle content (optional).
- * @param {Styles} style - Additional styles (optional).
-**/
-export default function Heading({ badge, title, subtitle, style = {} }) {
-    const styles = mergeStyles(base, style);
-    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }, void 0), _jsx(RowBox, { style: styles.title, children: title }, void 0), _jsx(RowBox, { style: styles.subtitle, children: subtitle }, void 0)] }, void 0));
-}
-const base = {
-    container: "items-center",
-    badge: "mb-2",
-    title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
-    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "../layout/flex";
+import { Badge } from "../text/badge";
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {string} badge - Little note above the title (optional).
+ * @param {ReactNode} title - Main title content.
+ * @param {ReactNode} subtitle - Subtitle content (optional).
+ * @param {Styles} style - Additional styles (optional).
+**/
+export default function Heading({ badge, title, subtitle, style = {} }) {
+    const styles = mergeStyles(base, style);
+    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }), _jsx(RowBox, { style: styles.title, children: title }), _jsx(RowBox, { style: styles.subtitle, children: subtitle })] }));
+}
+const base = {
+    container: "items-center",
+    badge: "mb-2",
+    title: "items-center gap-2 text-xl sm:text-2xl 2xl:text-3xl font-bold text-primary",
+    subtitle: "items-center gap-2 max-sm:text-sm 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
+};

package/dist/components/heading/page.d.ts

@@ -1,25 +1,25 @@
-import { ReactNode } from "react";
-declare type Props = {
-    style?: Styles;
-    badge?: string;
-    icon?: ReactNode;
-    title: string;
-    subtitle?: string;
-};
-declare type Styles = {
-    container?: string;
-    badge?: string;
-    title?: string;
-    subtitle?: string;
-};
-/**
- * Text heading with badge, title, subtitle.
- *
- * @param {Styles} style - Additional styles. (optional)
- * @param {string} badge - Little note above the title. (optional)
- * @param {ReactNode} icon - Component displayed left of title. (optional)
- * @param {string} title - Main title content.
- * @param {string} subtitle - Subtitle content. (optional)
-**/
-export default function PageHeading({ style, badge, icon, title, subtitle }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import { ReactNode } from "react";
+type Props = {
+    style?: Styles;
+    badge?: string;
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+};
+type Styles = {
+    container?: string;
+    badge?: string;
+    title?: string;
+    subtitle?: string;
+};
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {Styles} style - Additional styles. (optional)
+ * @param {string} badge - Little note above the title. (optional)
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
+ * @param {string} title - Main title content.
+ * @param {string} subtitle - Subtitle content. (optional)
+**/
+export default function PageHeading({ style, badge, icon, title, subtitle }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/heading/page.js

@@ -1,23 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeStyles } from "@bouko/style";
-import { RowBox, ColumnBox } from "../layout/flex";
-import { Badge } from "../text/badge";
-/**
- * Text heading with badge, title, subtitle.
- *
- * @param {Styles} style - Additional styles. (optional)
- * @param {string} badge - Little note above the title. (optional)
- * @param {ReactNode} icon - Component displayed left of title. (optional)
- * @param {string} title - Main title content.
- * @param {string} subtitle - Subtitle content. (optional)
-**/
-export default function PageHeading({ style = {}, badge, icon, title, subtitle }) {
-    const styles = mergeStyles(base, style);
-    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }, void 0), _jsxs(RowBox, { style: styles.title, children: [icon, title] }, void 0), _jsx(RowBox, { style: styles.subtitle, children: subtitle }, void 0)] }, void 0));
-}
-const base = {
-    container: "w-full items-center font-mono",
-    badge: "mb-2",
-    title: "items-center gap-2 mb-3 text-4xl sm:text-5xl 2xl:text-6xl text-center font-bold text-primary",
-    subtitle: "items-center gap-2 text-sm sm:text-base 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeStyles } from "@bouko/style";
+import { RowBox, ColumnBox } from "../layout/flex";
+import { Badge } from "../text/badge";
+/**
+ * Text heading with badge, title, subtitle.
+ *
+ * @param {Styles} style - Additional styles. (optional)
+ * @param {string} badge - Little note above the title. (optional)
+ * @param {ReactNode} icon - Component displayed left of title. (optional)
+ * @param {string} title - Main title content.
+ * @param {string} subtitle - Subtitle content. (optional)
+**/
+export default function PageHeading({ style = {}, badge, icon, title, subtitle }) {
+    const styles = mergeStyles(base, style);
+    return (_jsxs(ColumnBox, { style: styles.container, children: [_jsx(Badge, { style: styles.badge, children: badge }), _jsxs(RowBox, { style: styles.title, children: [icon, title] }), _jsx(RowBox, { style: styles.subtitle, children: subtitle })] }));
+}
+const base = {
+    container: "w-full items-center font-mono",
+    badge: "mb-2",
+    title: "items-center gap-2 mb-3 text-4xl sm:text-5xl 2xl:text-6xl text-center font-bold text-primary",
+    subtitle: "items-center gap-2 text-sm sm:text-base 2xl:text-lg text-center text-primary-light dark:text-primary-dark"
+};

package/dist/components/index.d.ts

@@ -1,12 +1,12 @@
-export { default as Separator } from "./layout/separator";
-export { default as FadeBox } from "./layout/fade";
-export { default as Heading } from "./heading/normal";
-export { default as PageHeading } from "./heading/page";
-export * from "./layout/flex";
-export { default as Button } from "./button/normal";
-export { default as Badge } from "./text/badge";
-export { default as Dropdown } from "./dropdown/normal";
-export { default as FileUploader } from "./upload/file";
-export * from "./animate";
-export * from "./list";
-export * from "./carousel";
+export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
+export { default as Heading } from "./heading/normal";
+export { default as PageHeading } from "./heading/page";
+export * from "./layout/flex";
+export { default as Button } from "./button/normal";
+export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
+export { default as FileUploader } from "./upload/file";
+export * from "./animate";
+export * from "./list";
+export * from "./carousel";

package/dist/components/index.js

@@ -1,12 +1,12 @@
-export { default as Separator } from "./layout/separator";
-export { default as FadeBox } from "./layout/fade";
-export { default as Heading } from "./heading/normal";
-export { default as PageHeading } from "./heading/page";
-export * from "./layout/flex";
-export { default as Button } from "./button/normal";
-export { default as Badge } from "./text/badge";
-export { default as Dropdown } from "./dropdown/normal";
-export { default as FileUploader } from "./upload/file";
-export * from "./animate";
-export * from "./list";
-export * from "./carousel";
+export { default as Separator } from "./layout/separator";
+export { default as FadeBox } from "./layout/fade";
+export { default as Heading } from "./heading/normal";
+export { default as PageHeading } from "./heading/page";
+export * from "./layout/flex";
+export { default as Button } from "./button/normal";
+export { default as Badge } from "./text/badge";
+export { default as Dropdown } from "./dropdown/normal";
+export { default as FileUploader } from "./upload/file";
+export * from "./animate";
+export * from "./list";
+export * from "./carousel";

package/dist/components/input.d.ts

@@ -1,11 +1,37 @@
-import type { Field as FieldProps } from "./form/types";
-declare type Props<T> = FieldProps<T> & {
-    placeholder?: string;
-    styles?: {
-        container?: string;
-        input?: string;
-    };
-    disabled?: boolean;
-};
-export default function Input({ id, styles, label, required, note, style, value, update, ...props }: Props<string>): import("react/jsx-runtime").JSX.Element;
-export {};
+import { ReactNode } from "react";
+type FieldProps<T> = {
+    id?: string;
+    label?: string;
+    style?: string;
+    value?: T;
+    update: (x: T) => void;
+    required?: boolean;
+    disabled?: boolean;
+    note?: ReactNode;
+};
+type Variant = "normal" | "ghost";
+type Props = Omit<FieldProps<string>, "id"> & {
+    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({ variant, style, value, update, onEnter, disabled, placeholder, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/input.js

@@ -1,6 +1,40 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Field from "./field";
-import { cn } from "@bouko/style";
-export default function Input({ id, styles, label, required = true, note, style, value, update, ...props }) {
-    return (_jsx(Field, { style: styles?.container, label: label, required: required, note: note, children: _jsx("input", { className: cn("px-3 py-2 bg-input border border-outline duration-200 focus:border-outline-light outline-none rounded text-sm disabled:brightness-90 disabled:cursor-not-allowed", styles?.input), onChange: ({ target: { value } }) => update(value), value: value ?? "", ...props }, void 0) }, void 0));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+function Field({ style, label, required = true, note, children }) {
+    return (_jsxs("div", { className: cn(fieldStyles.container, style), children: [label && _jsxs("span", { className: fieldStyles.label, children: [label, " ", !required ? _jsx("span", { className: "italic text-slate-400", children: "(optional)" }) : ""] }), children, note && _jsx("span", { className: fieldStyles.note, children: note })] }));
+}
+const fieldStyles = {
+    container: "flex flex-col shrink-0 gap-1 w-full 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)
+**/
+export default function Input({ variant, style, value, update, onEnter, disabled, placeholder, ...props }) {
+    return (_jsx(Field, { ...props, children: _jsx("input", { className: cn(styles({ variant }), style), placeholder: placeholder, value: value, onChange: ({ target: { value } }) => update?.(value), onKeyUp: ({ key }) => key === "Enter" && value ? onEnter?.(value) : null, disabled: disabled }) }));
+}
+const styles = tv({
+    base: "px-3 py-2 duration-200 rounded 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/components/layout/fade.d.ts

@@ -1,6 +1,7 @@
-import { Component } from "../../core/types";
-declare type Props = Component & {
-    gradient?: string;
-};
-export declare function FadeBox({ style, gradient, children }: Props): import("react/jsx-runtime").JSX.Element;
-export default FadeBox;
+import { Component } from "../../core/types";
+type Props = Component & {
+    direction?: "left" | "down";
+    gradient?: string;
+};
+export declare function FadeBox({ style, direction, gradient, children }: Props): import("react/jsx-runtime").JSX.Element;
+export default FadeBox;

package/dist/components/layout/fade.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, tv } from "@bouko/style";
-export function FadeBox({ style, gradient, children }) {
-    const direction = "left";
-    return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) }, void 0)] }, void 0));
-}
-const styles = tv({
-    base: "absolute from-background",
-    variants: {
-        direction: {
-            left: "top-0 right-0 w-12 h-full bg-gradient-to-l"
-        }
-    }
-});
-export default FadeBox;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "@bouko/style";
+export function FadeBox({ style, direction = "left", gradient, children }) {
+    return (_jsxs("div", { className: cn("relative", style), children: [children, _jsx("div", { className: cn(styles({ direction }), gradient) })] }));
+}
+const styles = tv({
+    base: "absolute from-background",
+    variants: {
+        direction: {
+            left: "top-0 right-0 w-12 h-full bg-gradient-to-l",
+            down: "top-0 left-0 w-full h-full bg-gradient-to-b"
+        }
+    }
+});
+export default FadeBox;