@bouku/core 0.0.1 → 0.0.2

package/dist/components/layout/media-row.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const flex_1 = require("./flex");
+const badge_1 = __importDefault(require("../text/badge"));
+const MediaRow = ({ media, title, subtitle, badge, styles = {}, }) => ((0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: `items-center gap-3 ${styles.container ?? ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: media, className: "size-10 w-10 h-10 border border-border rounded", alt: title }), (0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: "gap-px min-w-0", children: [(0, jsx_runtime_1.jsxs)(flex_1.RowBox, { style: "items-center gap-2 min-w-0", children: [(0, jsx_runtime_1.jsx)("span", { className: `text-primary text-sm font-semibold truncate ${styles.title ?? ""}`, children: title }), badge && (0, jsx_runtime_1.jsx)(badge_1.default, { size: "xs", children: badge })] }), subtitle && ((0, jsx_runtime_1.jsx)("span", { className: `text-xs text-primary-dark ${styles.subtitle}`, children: subtitle }))] })] }));
+exports.MediaRow = MediaRow;

package/dist/components/layout/rnd.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    style?: string;
+    min: number;
+    max: number;
+    minWidth?: number;
+    update: (min: number, size: number) => void;
+    children: React.ReactNode;
+};
+export default function RnD({ style, min, max, minWidth, update, children }: Props): import("react").JSX.Element;
+export {};

package/dist/components/layout/rnd.js

@@ -0,0 +1,32 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RnD;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_rnd_1 = require("react-rnd");
+const style_1 = require("@bouko/style");
+function RnD({ style, min, max, minWidth, update, children }) {
+    const gapSize = max - min;
+    const handleResize = (x, width) => {
+        update(x, width);
+    };
+    const handleDrag = (x) => {
+        update(x, gapSize);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_rnd_1.Rnd, { ...opts(min, max, minWidth), className: (0, style_1.cn)("flex! justify-center items-center overflow-hidden", style), size: { width: gapSize, height: "100%" }, position: { x: min, y: 0 }, onResize: (e, dir, ref, d, pos) => handleResize(pos.x, ref.offsetWidth), onDragStop: (e, d) => handleDrag(d.x), children: children }));
+}
+const opts = (min, max, minWidth) => ({
+    bounds: "parent",
+    axis: "x",
+    minWidth: minWidth || 30,
+    default: {
+        x: min,
+        y: 0,
+        width: max - min,
+        height: "100%"
+    },
+    enableResizing: {
+        left: true,
+        right: true
+    }
+});

package/dist/components/layout/scroll-box.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from "react";
+type RowProps<T> = {
+    data: T;
+    hovered: boolean;
+    setHovered: Dispatch<SetStateAction<number | null>>;
+    index: number;
+};
+type Props<T> = {
+    style?: string;
+    items: T[];
+    element: React.ComponentType<RowProps<T>>;
+};
+export declare function ScrollBox<T>({ style, items, element: Row }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/layout/scroll-box.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollBox = ScrollBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const style_1 = require("@bouko/style");
+const flex_1 = require("./flex");
+function ScrollBox({ style, items, element: Row }) {
+    const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsx)(flex_1.ColumnBox, { style: (0, style_1.cn)("grow gap-1 w-full overflow-y-auto", style), children: items.map((x, i) => ((0, jsx_runtime_1.jsx)(Row, { data: x, hovered: hoveredIndex === i, setHovered: setHoveredIndex, index: i }, i))) }));
+}

package/dist/components/layout/section.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+/**
+ * Settings Section Component.
+ *
+ * Generic layout wrapper used to group related settings or content
+ * under a titled section with a visual separator for consistency.
+ *
+ * @param {string} title - The section title displayed at top.
+ * @param {ReactNode} content - Rendered below the separator.
+**/
+declare const Section: ({ title, content }: {
+    title: string;
+    content: ReactNode;
+}) => import("react").JSX.Element;
+export default Section;

package/dist/components/layout/section.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const flex_1 = require("./flex");
+/**
+ * Settings Section Component.
+ *
+ * Generic layout wrapper used to group related settings or content
+ * under a titled section with a visual separator for consistency.
+ *
+ * @param {string} title - The section title displayed at top.
+ * @param {ReactNode} content - Rendered below the separator.
+**/
+const Section = ({ title, content }) => ((0, jsx_runtime_1.jsxs)(flex_1.ColumnBox, { style: styles.container, children: [title, (0, jsx_runtime_1.jsx)("hr", { className: styles.separator }), content] }));
+const styles = {
+    container: "gap-2 items-start text-primary",
+    separator: "mb-2 w-full text-border-dark"
+};
+exports.default = Section;

package/dist/components/layout/separator.d.ts

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

package/dist/components/layout/separator.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Separator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = require("@bouko/style");
+function Separator({ style }) {
+    return (0, jsx_runtime_1.jsx)("hr", { className: (0, style_1.cn)("w-full text-border-dark", style) });
+}

package/dist/components/link/_.d.ts

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

package/dist/components/link/_.js

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

package/dist/components/link/tab.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Tab Navigation Component.
+ *
+ * A `TabItem` wrapper that integrates with React Router.
+ * Derives active state from the current URL and renders a
+ * navigable tab using a router `<Link>`.
+ *
+ * Behavior:
+ * - Builds a route from the provided `id` (/[id]).
+ * - Marks tab as active when the pathname includes that route.
+ * - Delegates all visual rendering to `TabItem`.
+ * - Nested routes keep the parent tab active.
+ *
+ * @param id - Route identifier used to construct the URL.
+ * @param props - Remaining `NavItem` props forwarded to `TabItem`.
+**/
+declare const NavTab: ({ id, ...props }: Omit<NavItem, "isActive">) => import("react").JSX.Element;
+type NavItem = {
+    id: string;
+    isActive: boolean;
+};
+export default NavTab;

package/dist/components/link/tab.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+/**
+ * Tab Navigation Component.
+ *
+ * A `TabItem` wrapper that integrates with React Router.
+ * Derives active state from the current URL and renders a
+ * navigable tab using a router `<Link>`.
+ *
+ * Behavior:
+ * - Builds a route from the provided `id` (/[id]).
+ * - Marks tab as active when the pathname includes that route.
+ * - Delegates all visual rendering to `TabItem`.
+ * - Nested routes keep the parent tab active.
+ *
+ * @param id - Route identifier used to construct the URL.
+ * @param props - Remaining `NavItem` props forwarded to `TabItem`.
+**/
+const NavTab = ({ id, ...props }) => {
+    const location = (0, react_router_dom_1.useLocation)();
+    const route = "/" + id;
+    const isActive = location.pathname.includes(route);
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: route, children: (0, jsx_runtime_1.jsx)(Base, { isActive: isActive, ...props }) }));
+};
+function Base({ isActive }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: isActive }));
+}
+exports.default = NavTab;

package/dist/components/list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BulletList } from "./variants/bullet";
+export { default as NumberList } from "./variants/number";

package/dist/components/list/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberList = exports.BulletList = void 0;
+var bullet_1 = require("./variants/bullet");
+Object.defineProperty(exports, "BulletList", { enumerable: true, get: function () { return __importDefault(bullet_1).default; } });
+var number_1 = require("./variants/number");
+Object.defineProperty(exports, "NumberList", { enumerable: true, get: function () { return __importDefault(number_1).default; } });

package/dist/components/list/item.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+interface Props {
+    marker: ReactNode;
+    content: ReactNode;
+    index: number;
+    centerMarker?: boolean;
+}
+export default function Item({ marker, content, centerMarker, index }: Props): import("react").JSX.Element;
+export {};

package/dist/components/list/item.js

@@ -0,0 +1,9 @@
+"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/components/list/search-bar.d.ts

@@ -0,0 +1,14 @@
+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/components/list/search-bar.js

@@ -0,0 +1,33 @@
+"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/components/list/variants/bullet.d.ts

@@ -0,0 +1,9 @@
+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/components/list/variants/bullet.js

@@ -0,0 +1,21 @@
+"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/components/list/variants/number.d.ts

@@ -0,0 +1,10 @@
+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/components/list/variants/number.js

@@ -0,0 +1,23 @@
+"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/components/pagination/index.d.ts

@@ -0,0 +1,9 @@
+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/components/pagination/index.js

@@ -0,0 +1,21 @@
+"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/components/progress/_.d.ts

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

package/dist/components/progress/_.js

@@ -0,0 +1,8 @@
+"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/components/progress/bar.d.ts

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

package/dist/components/progress/bar.js

@@ -0,0 +1,12 @@
+"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/components/table/_.d.ts

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

package/dist/components/table/_.js

@@ -0,0 +1,8 @@
+"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/components/table/normal.d.ts

@@ -0,0 +1,7 @@
+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/components/table/normal.js

@@ -0,0 +1,20 @@
+"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/components/text/_.d.ts

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

package/dist/components/text/_.js

@@ -0,0 +1,10 @@
+"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/components/text/badge.d.ts

@@ -0,0 +1,18 @@
+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/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 {};