@bouku/core 0.2.2 → 0.2.3

package/dist/ui/list/item.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Item;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
-;
-function Item({ marker, content, centerMarker, index }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)("flex items-start text-sm", centerMarker && "items-center"), children: [marker, content] }, index));
-}

package/dist/ui/list/search-bar.d.ts

@@ -1,14 +0,0 @@
-type Props<T> = {
-    style?: Styles;
-    placeholder?: string;
-    trigger?: React.ReactNode;
-    submit: (query: string) => void;
-    oops?: (x: string) => void;
-};
-type Styles = {
-    container?: string;
-    input?: string;
-    trigger?: string;
-};
-export declare function SearchBar<T>({ style, placeholder, trigger, submit, oops }: Props<T>): import("react").JSX.Element;
-export {};

package/dist/ui/list/search-bar.js

@@ -1,33 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchBar = SearchBar;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const input_1 = __importDefault(require("../text/input"));
-const fade_1 = __importDefault(require("../layout/fade"));
-const flex_1 = require("../layout/flex");
-const normal_1 = __importDefault(require("../button/normal"));
-const style_1 = require("@bouko/style");
-function SearchBar({ style = {}, placeholder, trigger, submit, oops = console.log }) {
-    const [query, setQuery] = (0, react_1.useState)("");
-    const styles = (0, style_1.mergeStyles)(base, style);
-    const search = async () => {
-        if (query === "")
-            return;
-        try {
-            await submit(query);
-        }
-        catch (err) {
-            oops(err.message);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: styles.container, children: [(0, jsx_runtime_1.jsx)(fade_1.default, { style: "grow", gradient: "from-slate-950", children: (0, jsx_runtime_1.jsx)(input_1.default, { variant: "ghost", style: styles.input, placeholder: placeholder, value: query, update: setQuery, onEnter: search }) }), trigger && ((0, jsx_runtime_1.jsx)(normal_1.default, { variant: "ghost", style: style?.trigger, action: search, disabled: query === "", children: trigger }))] }));
-}
-const base = {
-    container: "items-center gap-3 sm:gap-5 w-xl max-w-full pl-4 sm:pl-5 pr-2 sm:pr-4 py-2 sm:py-3 bg-slate-950 border border-border rounded-md",
-    input: "text-base sm:text-lg tracking-wide"
-};

package/dist/ui/list/variants/bullet.d.ts

@@ -1,9 +0,0 @@
-import React, { type ReactNode } from "react";
-interface Props {
-    style?: string;
-    title?: string;
-    items: ReactNode[];
-    centerMarker?: boolean;
-}
-export default function BulletList({ style, title, items, centerMarker }: Props): React.JSX.Element;
-export {};

package/dist/ui/list/variants/bullet.js

@@ -1,21 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = BulletList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const item_1 = __importDefault(require("../item"));
-const style_1 = require("@bouko/style");
-;
-function BulletList({ style, title, items, centerMarker }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(styles.base, style), children: [!!title && (0, jsx_runtime_1.jsx)("span", { className: styles.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.base, style, !!title && "ml-2"), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(item_1.default, { marker: (0, jsx_runtime_1.jsx)(Marker, {}), content: x, index: i, centerMarker: centerMarker }, i))) })] }, title));
-}
-function Marker() {
-    return ((0, jsx_runtime_1.jsx)("span", { className: "mr-3 text-accent", children: "\u2022" }));
-}
-const styles = {
-    base: "flex flex-col gap-1 w-full",
-    title: "mb-1 text-base"
-};

package/dist/ui/list/variants/number.d.ts

@@ -1,10 +0,0 @@
-import React, { type ReactNode } from "react";
-interface Props {
-    style?: string;
-    marker?: string;
-    title?: string;
-    items: ReactNode[];
-    centerMarker?: boolean;
-}
-export default function NumberList({ style, marker, title, items, centerMarker }: Props): React.JSX.Element;
-export {};

package/dist/ui/list/variants/number.js

@@ -1,23 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = NumberList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const item_1 = __importDefault(require("../item"));
-const style_1 = require("@bouko/style");
-;
-function NumberList({ style, marker, title, items, centerMarker }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, style_1.cn)(styles.base, style), children: [!!title && (0, jsx_runtime_1.jsx)("span", { className: styles.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.base, style, !!title && "ml-2"), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(item_1.default, { marker: (0, jsx_runtime_1.jsx)(Marker, { style: marker, x: i + 1 }), content: x, index: i, centerMarker: centerMarker }, i))) }, "content")] }, "list"));
-}
-function Marker({ style, x }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(styles.marker, style), children: (0, jsx_runtime_1.jsx)("span", { className: styles.label, children: x }) }));
-}
-const styles = {
-    base: "flex flex-col gap-6 w-full text-primary-dark",
-    title: "mb-1 text-base text-primary",
-    marker: "flex justify-center items-center mt-1 mr-6 min-w-7 w-7 aspect-square bg-radial-[at_50%_75%] from-accent-light to-accent to-accent-dark to-90% border border-accent-darker rounded-full shadow-glow-soft",
-    label: "font-bold text-background-lighter select-none"
-};

package/dist/ui/pagination/index.d.ts

@@ -1,9 +0,0 @@
-type Props = {
-    style?: string;
-    page: number;
-    prev: () => void;
-    next: () => void;
-    totalPages: number;
-};
-export default function Pagination({ style, page, prev, next, totalPages }: Props): import("react").JSX.Element;
-export {};

package/dist/ui/pagination/index.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Pagination;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const chevron_left_svg_1 = __importDefault(require("../../assets/icons/chevron-left.svg"));
-const chevron_right_svg_1 = __importDefault(require("../../assets/icons/chevron-right.svg"));
-const flex_1 = require("../layout/flex");
-const normal_1 = require("../button/normal");
-const style_1 = require("@bouko/style");
-function Pagination({ style, page, prev, next, totalPages = 99 }) {
-    const canPrev = page > 1;
-    const canNext = totalPages > 0 ? page < totalPages : true;
-    return ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: (0, style_1.cn)(s.container, style), children: [(0, jsx_runtime_1.jsx)(normal_1.Button, { size: "xs", style: "rounded-none rounded-l-sm", action: prev, disabled: !canPrev, children: (0, jsx_runtime_1.jsx)(chevron_left_svg_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-px justify-center items-center w-11 h-6 px-2 bg-border-dark/20 border-y border-border-dark text-xs font-medium", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-primary", children: page }), "/", (0, jsx_runtime_1.jsx)("span", { className: "text-primary-darker", children: totalPages || 99 })] }), (0, jsx_runtime_1.jsx)(normal_1.Button, { size: "xs", style: "rounded-none rounded-r-sm", action: next, disabled: !canNext, children: (0, jsx_runtime_1.jsx)(chevron_right_svg_1.default, {}) })] }));
-}
-const s = {
-    container: "justify-center items-center text-primary-darker select-none",
-    subcontainer: "gap-2",
-};

package/dist/ui/progress/_.d.ts

@@ -1 +0,0 @@
-export { default as ProgressBar } from "./bar";

package/dist/ui/progress/_.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBar = void 0;
-var bar_1 = require("./bar");
-Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(bar_1).default; } });

package/dist/ui/progress/bar.d.ts

@@ -1,4 +0,0 @@
-export default function ProgressBar({ value, style }: {
-    value: number;
-    style?: string;
-}): import("react").JSX.Element;

package/dist/ui/progress/bar.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ProgressBar;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const style_1 = require("@bouko/style");
-function ProgressBar({ value, style }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, style_1.cn)(s.container, style), children: (0, jsx_runtime_1.jsx)("div", { className: s.filled, style: { width: (value * 100) + "%" } }) }));
-}
-const s = {
-    container: "flex grow h-1 rounded-full bg-surface overflow-hidden",
-    filled: "h-full bg-accent"
-};

package/dist/ui/table/_.d.ts

@@ -1 +0,0 @@
-export { default as Table } from "./normal";

package/dist/ui/table/_.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
-var normal_1 = require("./normal");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(normal_1).default; } });

package/dist/ui/table/normal.d.ts

@@ -1,7 +0,0 @@
-type CellValue = string | number | null | undefined;
-type Props<T> = {
-    columns: string[];
-    items: T[];
-};
-export default function Table<T extends Record<string, CellValue>>({ columns, items }: Props<T>): import("react").JSX.Element;
-export {};

package/dist/ui/table/normal.js

@@ -1,20 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Table;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const flex_1 = require("../layout/flex");
-const _1 = require("../button/_");
-const ts_1 = require("@bouko/ts");
-const style_1 = require("@bouko/style");
-function Table({ columns, items }) {
-    return ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: s.table, children: [(0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: s.header, children: columns.map((x, i) => ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: (0, style_1.cn)(s.columnLabel, i === 0 ? "justify-start" : i === columns.length - 1 ? "justify-end" : "justify-center"), children: x }, i))) }), (0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: s.rows, children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(flex_1.RowBox, { style: (0, style_1.cn)(s.row, i % 2 === 0 && "bg-surface", i === 0 ? "border-none" : i === items.length - 1 ? "border-none" : "border-b"), children: columns.map((key, j) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: (0, style_1.cn)(s.cell, j === 0 ? "justify-start" : j === columns.length - 1 ? "justify-end" : "justify-center"), children: [key === "id" ? (0, ts_1.shortenStr)(x[key]) : (x[key] ?? "N/A"), key === "id" && (0, jsx_runtime_1.jsx)(_1.CopyButton, { style: "text-primary-dark", value: (x["id"] || "N/A").toString() })] }, j))) }, i))) })] }));
-}
-const s = {
-    table: "grow w-full border border-border rounded-md overflow-hidden",
-    header: "w-full px-4 py-3 bg-background-light border-b border-border",
-    columnLabel: "flex-1 uppercase text-primary-dark font-light text-sm",
-    rows: "grow overflow-y-auto no-scrollbar",
-    row: "w-full px-4 py-4 border-b border-border",
-    cell: "flex-1 items-center gap-2"
-};

package/dist/ui/text/_.d.ts

@@ -1,2 +0,0 @@
-export { default as Badge } from "./badge";
-export { default as Input } from "./input";

package/dist/ui/text/_.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.Badge = void 0;
-var badge_1 = require("./badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
-var input_1 = require("./input");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(input_1).default; } });

package/dist/ui/text/badge.d.ts

@@ -1,18 +0,0 @@
-import type { Component } from "../../utils";
-type Props = Component & {
-    color?: string;
-    icon?: React.ReactNode;
-    size?: "xs" | "sm" | "md";
-};
-/**
- * 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)
-**/
-export declare function Badge({ style, color, size, icon, children }: Props): import("react").JSX.Element | null;
-export default Badge;

package/dist/ui/text/badge.js

@@ -1,42 +0,0 @@
-"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/ui/text/input.d.ts

@@ -1,39 +0,0 @@
-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/ui/text/input.js

@@ -1,50 +0,0 @@
-"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"
-        }
-    }
-});