@bouku/core 0.4.2 → 0.4.3

package/dist/assets/icons/trash.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
+    <path 
+        d="M232.7 69.9C237.1 56.8 249.3 48 263.1 48L377 48C390.8 48 403 56.8 407.4 69.9L416 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128C96 110.3 110.3 96 128 96L224 96L232.7 69.9zM128 208L512 208L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 208zM216 272C202.7 272 192 282.7 192 296L192 488C192 501.3 202.7 512 216 512C229.3 512 240 501.3 240 488L240 296C240 282.7 229.3 272 216 272zM320 272C306.7 272 296 282.7 296 296L296 488C296 501.3 306.7 512 320 512C333.3 512 344 501.3 344 488L344 296C344 282.7 333.3 272 320 272zM424 272C410.7 272 400 282.7 400 296L400 488C400 501.3 410.7 512 424 512C437.3 512 448 501.3 448 488L448 296C448 282.7 437.3 272 424 272z" 
+        fill="currentColor" 
+    />
+</svg>

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

@@ -1,6 +1,6 @@
-import { type Component } from "../../utils/index.js";
+import type { Component } from "../../utils/types/element.js";
 export type ButtonProps = Component & {
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: "icon" | "xs" | "sm" | "md" | "lg";
     variant?: "surface" | "accent" | "outline" | "ghost" | "error";
     icon?: React.ReactNode;
     action?: () => void;

package/dist/components/button/normal.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { cn } from "../../utils/index.js";
-import { tv } from "tailwind-variants";
 import Spinner from "../../assets/icons/spinner.svg";
+import { cn } from "../../utils/functions/style.js";
+import { tv } from "tailwind-variants";
 export function Button({ style, size = "md", variant = "surface", icon, action, oops = console.log, disabled, children }) {
     const [isLoading, setLoading] = useState(false);
     const handleClick = async () => {
@@ -28,6 +28,7 @@ const styles = tv({
     base: "relative flex justify-center items-center border outline-none rounded font-semibold shadow duration-200 cursor-pointer disabled:cursor-not-allowed hover:brightness-125",
     variants: {
         size: {
+            icon: "p-2 text-sm rounded-full",
             xs: "gap-2 px-3 py-2 text-xs",
             sm: "gap-2 px-3 py-2 text-xs sm:text-sm",
             md: "gap-2 px-4 py-2 text-xs sm:text-sm",

package/dist/components/container/flex.d.ts

@@ -1,17 +1,14 @@
-import { Component, Hoverable } from "../../utils/index.js";
+import type { Hoverable } from "../../utils/types/element.js";
+type Component = {
+    style?: string;
+    children?: React.ReactNode;
+};
 type Props = Component & Hoverable & {
     center?: boolean;
     centerX?: boolean;
     centerY?: boolean;
     equal?: boolean;
 };
-/**
- * Flex containers with configurable alignment and styling.
- *
- * @param {string} style - Additional styles for container.
- * @param {ReactNode} children - Child elements to render inside the row.
- * @param {Props} opts - Variant options for styling.
-**/
 export declare function RowBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
 export declare function ColumnBox({ style, children, onHover, onLeave, ...opts }: Props): import("react").JSX.Element | null;
 export {};

package/dist/components/container/flex.js

@@ -1,13 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/functions/style.js";
 import { tv } from "tailwind-variants";
-/**
- * Flex containers with configurable alignment and styling.
- *
- * @param {string} style - Additional styles for container.
- * @param {ReactNode} children - Child elements to render inside the row.
- * @param {Props} opts - Variant options for styling.
-**/
 export function RowBox({ style, children, onHover, onLeave, ...opts }) {
     if (!children)
         return null;

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

@@ -1 +1,2 @@
 export { default as TimeAgo } from "./time-ago.js";
+export { default as DatePicker } from "./date-picker.js";

package/dist/components/date/_.js

@@ -1 +1,2 @@
 export { default as TimeAgo } from "./time-ago.js";
+export { default as DatePicker } from "./date-picker.js";

package/dist/components/date/date-picker.d.ts

@@ -0,0 +1,38 @@
+import type { 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 DatePickerProps = FieldProps<string> & {
+    variant?: Variant;
+    size?: "sm" | "md";
+    style?: string;
+    min?: string;
+    max?: string;
+};
+/**
+ * Date picker field component.
+ *
+ * Wraps the native `input[type="date"]` element with custom styling.
+ * It displays an optional label and note, and can be marked as required.
+ * The value is controlled externally as an ISO date string (`YYYY-MM-DD`).
+ *
+ * Variants:
+ *  - `normal`: Standard input with primary color scheme.
+ *  - `ghost`: Transparent for injecting input inside another component.
+ *
+ * @param {Variant} variant - Visual style variant. (optional, default = normal)
+ * @param {string} style - Additional class names for styling. (optional)
+ * @param {string} min - Earliest selectable date in `YYYY-MM-DD` format. (optional)
+ * @param {string} max - Latest selectable date in `YYYY-MM-DD` format. (optional)
+ */
+export declare function DatePicker({ id, variant, size, value, update, updateForm, disabled, min, max, ...props }: DatePickerProps): import("react").JSX.Element;
+export default DatePicker;

package/dist/components/date/date-picker.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/functions/style.js";
+import { tv } from "tailwind-variants";
+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-2 overflow-hidden",
+    label: "text-xs text-primary-dark",
+    note: "mt-1 text-xs text-slate-500 whitespace-pre-line"
+};
+/**
+ * Date picker field component.
+ *
+ * Wraps the native `input[type="date"]` element with custom styling.
+ * It displays an optional label and note, and can be marked as required.
+ * The value is controlled externally as an ISO date string (`YYYY-MM-DD`).
+ *
+ * Variants:
+ *  - `normal`: Standard input with primary color scheme.
+ *  - `ghost`: Transparent for injecting input inside another component.
+ *
+ * @param {Variant} variant - Visual style variant. (optional, default = normal)
+ * @param {string} style - Additional class names for styling. (optional)
+ * @param {string} min - Earliest selectable date in `YYYY-MM-DD` format. (optional)
+ * @param {string} max - Latest selectable date in `YYYY-MM-DD` format. (optional)
+ */
+export function DatePicker({ id, variant, size = "md", value, update, updateForm, disabled = false, min, max, ...props }) {
+    const handleUpdate = (value) => {
+        if (id && updateForm)
+            updateForm(id, value);
+        else
+            update?.(value);
+    };
+    return (_jsx(Field, { ...props, children: _jsx("input", { type: "date", className: styles({ variant, size }), value: value || "", onChange: ({ target: { value } }) => handleUpdate(value), autoComplete: "off", disabled: disabled, min: min, max: max }) }));
+}
+const styles = tv({
+    base: "px-3 py-2 duration-200 rounded placeholder:text-primary-darker text-primary disabled:brightness-90 disabled:cursor-not-allowed",
+    defaultVariants: { variant: "normal", size: "md" },
+    variants: {
+        variant: {
+            normal: "bg-input border border-outline focus:border-outline-light outline-none",
+            ghost: "p-0 bg-transparent border-none outline-none"
+        },
+        size: {
+            sm: "px-2 text-xs",
+            md: "text-xs sm:text-sm"
+        }
+    }
+});
+export default DatePicker;

package/dist/components/miscellaneous/checkbox/index.d.ts

@@ -1,9 +1,9 @@
 interface Props {
-    size?: "sm" | "md" | "lg";
-    label: string;
+    size?: "sm" | "md";
+    label?: string;
     value: boolean;
     update: (x: boolean) => void;
     disabled?: boolean;
 }
-export declare const CheckBox: ({ size, label, value: isChecked, update, disabled }: Props) => import("react").JSX.Element;
+export declare function CheckBox({ size, label, value: isChecked, update, disabled }: Props): import("react").JSX.Element;
 export default CheckBox;

package/dist/components/miscellaneous/checkbox/index.js

@@ -1,24 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RowBox } from "@bouku/core";
+import { RowBox } from "../../container/flex.js";
 import Check from "../../../assets/icons/check.svg";
 import { cn } from "../../../utils/functions/style.js";
 import { tv } from "tailwind-variants";
-export const CheckBox = ({ size, label, value: isChecked, update, disabled = false }) => {
-    const s = baseStyles({
+export function CheckBox({ size, label, value: isChecked, update, disabled = false }) {
+    const s = getStyle({
         size,
         active: isChecked
     });
-    return (_jsxs(RowBox, { style: s.container(), children: [_jsx("div", { className: cn(s.box(), disabled && "pointer-events-none"), onClick: () => !disabled ? update(!isChecked) : null, children: isChecked && _jsx(Check, { className: s.check() }) }), _jsx("span", { className: s.label(), children: label })] }));
-};
-const baseStyles = tv({
+    return (_jsxs(RowBox, { style: s.container(), children: [_jsx("div", { className: cn(s.box(), disabled && "pointer-events-none"), onClick: () => !disabled ? update(!isChecked) : null, children: isChecked && _jsx(Check, { className: s.check() }) }), label && (_jsx("span", { className: s.label(), children: label }))] }));
+}
+const getStyle = tv({
     slots: {
         container: "items-center",
-        box: "flex justify-center items-center bg-input hover:bg-input-dark border rounded border-outline duration-200 cursor-pointer",
+        box: "flex justify-center items-center hover:bg-accent border rounded border-outline duration-200 cursor-pointer",
         check: "text-background",
-        label: "text-primary"
-    },
-    defaultVariants: {
-        size: "md"
+        label: "text-primary-dark"
     },
     variants: {
         size: {
@@ -29,12 +26,6 @@ const baseStyles = tv({
                 label: "text-xs"
             },
             md: {
-                container: "gap-3",
-                box: "size-5 min-w-5",
-                check: "size-3",
-                label: "text-sm"
-            },
-            lg: {
                 container: "gap-3",
                 box: "size-5 min-w-5",
                 check: "size-3",
@@ -43,9 +34,12 @@ const baseStyles = tv({
         },
         active: {
             true: {
-                box: "!bg-accent border-accent-darker"
+                box: "bg-accent"
             }
         }
+    },
+    defaultVariants: {
+        size: "md"
     }
 });
 export default CheckBox;

package/dist/components/miscellaneous/dropdown/multi-select.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from "react";
-import type { LabeledItem } from "../../../utils/types/_.js";
+import type { LabeledItem } from "../../../utils/types/element.js";
 interface Props {
+    size?: "xs" | "sm";
+    style?: string;
     prefix?: ReactNode;
     align?: "left" | "right";
     options: LabeledItem[];
     values?: string[];
     update: (x: string) => void;
 }
-export declare function MultiSelect({ prefix, align, options, values, update }: Props): import("react").JSX.Element;
+export declare function MultiSelect({ size, style, prefix, align, options, values, update }: Props): import("react").JSX.Element;
 export default MultiSelect;

package/dist/components/miscellaneous/dropdown/multi-select.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, } from "react";
 import ChevronDown from "../../../assets/icons/chevron-down.svg";
 import { AnimatePresence, motion } from "framer-motion";
-import { Button } from "../../button/normal.js";
 import { CheckBox } from "../checkbox/index.js";
-import { cn } from "../../../utils/functions/_.js";
+import { Button } from "../../button/normal.js";
+import { cn } from "../../../utils/functions/style.js";
 ;
-export function MultiSelect({ prefix, align = "left", options, values = [], update }) {
+export function MultiSelect({ size = "sm", style, prefix, align = "left", options, values = [], update }) {
     const [isOpen, setOpen] = useState(false);
     const ref = useRef(null);
     const activeOpts = options.filter(({ id }) => (values?.includes(id)));
@@ -21,7 +21,7 @@ export function MultiSelect({ prefix, align = "left", options, values = [], upda
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
-    return (_jsxs("div", { className: s.container, ref: ref, children: [_jsxs(Button, { size: "sm", action: () => setOpen(o => !o), children: [prefix, activeOpts.length > 0 && (_jsx("span", { className: "text-primary-dark", children: activeOpts.map(({ label }) => label).join(", ") })), _jsx(ChevronDown, { className: s.chevron })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(s.dropdown, align === "left" ? "left-0" : "right-0"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("div", { className: s.option, onClick: () => update(id), children: _jsx(CheckBox, { size: "sm", label: label, value: !!values?.includes(id), update: () => console.log("hi"), disabled: true }) }, id))) })) })] }));
+    return (_jsxs("div", { className: s.container, ref: ref, children: [_jsxs(Button, { size: size, style: style, action: () => setOpen(o => !o), children: [prefix, activeOpts.length > 0 && (_jsx("span", { className: "text-primary-dark", children: activeOpts.map(({ label }) => label).join(", ") })), _jsx(ChevronDown, { className: s.chevron })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(s.dropdown, align === "left" ? "left-0" : "right-0"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("div", { className: s.option, onClick: () => update(id), children: _jsx(CheckBox, { size: "sm", label: label, value: !!values?.includes(id), update: () => console.log("hi"), disabled: true }) }, id))) })) })] }));
 }
 const s = {
     container: "relative shrink-0",

package/dist/components/miscellaneous/dropdown/normal.d.ts

@@ -3,7 +3,8 @@ interface Props {
     trigger: ReactNode;
     align?: "left" | "right";
     direction?: "up" | "down";
+    style?: string;
     children: ReactNode;
 }
-export declare function Dropdown({ trigger, align, direction, children }: Props): import("react").JSX.Element;
+export declare function Dropdown({ trigger, align, direction, style, children }: Props): import("react").JSX.Element;
 export default Dropdown;

package/dist/components/miscellaneous/dropdown/normal.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { cn } from "../../../utils/functions/_.js";
+import { cn } from "../../../utils/functions/style.js";
 ;
-export function Dropdown({ trigger, align = "left", direction = "down", children }) {
+export function Dropdown({ trigger, align = "left", direction = "down", style, children }) {
     const [isOpen, setOpen] = useState(false);
     const ref = useRef(null);
     useEffect(() => {
@@ -19,10 +19,10 @@ export function Dropdown({ trigger, align = "left", direction = "down", children
     }, []);
     return (_jsxs("div", { ref: ref, className: styles.container, children: [_jsx("div", { onClick: () => setOpen(open => !open), children: trigger }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(styles.dropdown, align === "left" ? "left-0" : "right-0", direction === "down"
                         ? "top-full mt-2"
-                        : "bottom-full mb-2"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: children })) })] }));
+                        : "bottom-full mb-2", style), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: children })) })] }));
 }
 const styles = {
     container: "relative shrink-0",
-    dropdown: "absolute z-50 flex flex-col gap-2 min-w-full w-max bg-surface-darker rounded-md border border-border-darker p-2 text-sm shadow-md"
+    dropdown: "absolute z-50 flex flex-col gap-2 min-w-full w-max bg-surface-dark rounded-md border border-border-dark p-2 text-sm shadow"
 };
 export default Dropdown;

package/dist/components/miscellaneous/dropdown/select.d.ts

@@ -1,11 +1,13 @@
 import { type ReactNode } from "react";
-import type { LabeledItem } from "../../../utils/types/_.js";
+import type { LabeledItem } from "../../../utils/types/element.js";
 interface Props {
+    size?: "xs" | "sm";
+    style?: string;
     prefix?: ReactNode;
     align?: "left" | "right";
     options: LabeledItem[];
     value?: string;
     update: (x: string) => void;
 }
-export declare function Select({ prefix, align, options, value, update }: Props): import("react").JSX.Element;
+export declare function Select({ size, style, prefix, align, options, value, update }: Props): import("react").JSX.Element;
 export default Select;

package/dist/components/miscellaneous/dropdown/select.js

@@ -4,9 +4,9 @@ import { useState, useRef, useEffect, } from "react";
 import ChevronDown from "../../../assets/icons/chevron-down.svg";
 import { AnimatePresence, motion } from "framer-motion";
 import { Button } from "../../button/normal.js";
-import { cn } from "../../../utils/functions/_.js";
+import { cn } from "../../../utils/functions/style.js";
 ;
-export function Select({ prefix, align = "left", options, value, update }) {
+export function Select({ size = "sm", style, prefix, align = "left", options, value, update }) {
     const [isOpen, setOpen] = useState(false);
     const ref = useRef(null);
     const active = options.find(o => o.id === value);
@@ -24,7 +24,7 @@ export function Select({ prefix, align = "left", options, value, update }) {
         update(x);
         setOpen(false);
     };
-    return (_jsxs("div", { ref: ref, className: s.container, children: [_jsxs(Button, { size: "sm", action: () => setOpen(open => !open), children: [prefix, _jsx("span", { className: "text-primary-dark", children: active && active.label }), _jsx(ChevronDown, { className: s.chevron })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(s.dropdown, align === "left" ? "left-0" : "right-0"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn(s.option, id === value && "text-accent pointer-events-none"), onClick: () => setValue(id), children: label }, id))) })) })] }));
+    return (_jsxs("div", { ref: ref, className: s.container, children: [_jsxs(Button, { size: size, style: style, action: () => setOpen(open => !open), children: [prefix, _jsx("span", { className: "text-primary-dark", children: active && active.label }), _jsx(ChevronDown, { className: s.chevron })] }), _jsx(AnimatePresence, { children: isOpen && (_jsx(motion.div, { className: cn(s.dropdown, align === "left" ? "left-0" : "right-0"), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: options.map(({ id, label }) => (_jsx("span", { className: cn(s.option, id === value && "text-accent pointer-events-none"), onClick: () => setValue(id), children: label }, id))) })) })] }));
 }
 const s = {
     container: "relative shrink-0",

package/dist/components/table/actions.js

@@ -6,6 +6,6 @@ export function Actions({ row, actions }) {
     return (_jsx(RowBox, { style: "gap-2 items-center", children: actions.map(action => {
             if (action.hidden?.(row))
                 return null;
-            return (_jsx(Button, { size: "xs", variant: action.variant ?? "surface", style: action.style, icon: action.icon, action: () => action.handler(row), children: action.label }, action.id));
+            return (_jsx(Button, { size: "icon", variant: action.variant ?? "surface", style: action.style, icon: action.icon, action: () => action.handler(row), children: action.label }, action.id));
         }) }));
 }

package/dist/components/table/date-range.d.ts

@@ -0,0 +1,8 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { DateRange } from "./utils/types.js";
+type Props = DateRange & {
+    update: Dispatch<SetStateAction<DateRange>>;
+    initial: DateRange;
+};
+export default function DateRange({ from, to, update, initial }: Props): import("react").JSX.Element;
+export {};

package/dist/components/table/date-range.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from "../miscellaneous/dropdown/normal.js";
+import { DatePicker } from "../date/date-picker.js";
+import { Button } from "../button/normal.js";
+import Trash from "../../assets/icons/trash.svg";
+import { formatDateLabel } from "./utils/date.js";
+export default function DateRange({ from, to, update, initial }) {
+    const Trigger = (_jsxs(Button, { size: "xs", style: "bg-surface-dark border-border-darker", children: [formatDateLabel(from), " \u2013 ", formatDateLabel(to)] }));
+    return (_jsxs(Dropdown, { trigger: Trigger, align: "right", style: "gap-3 min-w-56 p-4", children: [_jsx(DatePicker, { id: "from", label: "From", size: "sm", style: "gap-1", value: from, update: v => update(prev => ({ ...prev, from: v })) }), _jsx(DatePicker, { id: "to", label: "To", size: "sm", style: "gap-1", value: to, update: v => update(prev => ({ ...prev, to: v })) }), (from || to) && (_jsx(Button, { size: "xs", style: "mx-auto py-1 px-2 gap-1", variant: "error", icon: _jsx(Trash, {}), action: () => update(initial), disabled: from === initial.from && to === initial.to, children: "Clear" }))] }));
+}

package/dist/components/table/filters.d.ts

@@ -0,0 +1,10 @@
+import type { CellValue, Column, TableRow } from "./utils/types.js";
+type Props<T extends TableRow> = {
+    columns: Column<T>[];
+    items: Map<keyof T, Set<CellValue>>;
+    options: Partial<Record<keyof T, CellValue[]>>;
+    update: (column: keyof T, value: CellValue) => void;
+    clear: (column: keyof T) => void;
+};
+export default function Filters<T extends TableRow>({ columns, items, options, update, clear }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/table/filters.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown, MultiSelect } from "../miscellaneous/dropdown/_.js";
+import { Button } from "../button/normal.js";
+import FilterIcon from "../../assets/icons/filter.svg";
+import Trash from "../../assets/icons/trash.svg";
+export default function Filters({ columns, items, options, update, clear }) {
+    const filterColumns = columns
+        .filter(column => column.filter === "select")
+        .map(column => column.key);
+    const activeFilterCount = Array.from(items.values())
+        .filter(values => values.size > 0)
+        .length;
+    const getColumnLabel = (key) => {
+        const col = columns.find(column => column.key === key);
+        return col?.label ?? key.toString().replaceAll("_", " ");
+    };
+    const clearFilters = () => {
+        for (const c of filterColumns)
+            clear(c);
+    };
+    const Trigger = (_jsxs(Button, { size: "xs", style: "bg-surface-dark border-border-darker", icon: _jsx(FilterIcon, {}), children: ["Filter", activeFilterCount > 0 && (_jsx("span", { className: s.count, children: activeFilterCount }))] }));
+    return (_jsxs(Dropdown, { trigger: Trigger, style: "p-3 gap-3", children: [filterColumns.map(column => {
+                const myFilters = items.get(column);
+                return (_jsx(MultiSelect, { size: "xs", prefix: getColumnLabel(column).toUpperCase(), options: (options[column] || []).filter(v => v !== null).map(value => ({
+                        id: String(value),
+                        label: String(value)
+                    })), values: Array.from(myFilters || []).map(f => String(f)), update: (x) => update(column, x) }, String(column)));
+            }), _jsx(Button, { size: "xs", style: "mx-auto py-1 px-2 gap-1", variant: "error", icon: _jsx(Trash, {}), action: clearFilters, disabled: activeFilterCount === 0, children: "Clear" })] }));
+}
+const s = {
+    count: "flex justify-center items-center ml-1 bg-accent border border-accent-dark size-4 rounded-full text-px font-bold"
+};

package/dist/components/table/header.d.ts

@@ -6,6 +6,10 @@ type Props<T> = {
     hasActions: boolean;
     sortBy: (x: string | null) => void;
     toggleSortDirection: () => void;
+    selection?: {
+        allSelected: boolean;
+        toggleAll: () => void;
+    };
 };
-export declare const Header: <T extends Record<keyof T, CellValue>>({ columnLabels, sortColumn, sortDirection, hasActions, sortBy, toggleSortDirection }: Props<T>) => import("react").JSX.Element;
+export declare const Header: <T extends Record<keyof T, CellValue>>({ columnLabels, sortColumn, sortDirection, hasActions, sortBy, toggleSortDirection, selection }: Props<T>) => import("react").JSX.Element;
 export {};

package/dist/components/table/header.js

@@ -2,12 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { RowBox } from "../container/flex.js";
-import ArrowUp from "../../assets/icons/arrow-up.svg";
-import ArrowDown from "../../assets/icons/arrow-down.svg";
-export const Header = ({ columnLabels, sortColumn, sortDirection, hasActions, sortBy, toggleSortDirection }) => (_jsxs(RowBox, { style: s.container, children: [Object.entries(columnLabels).map(([col, label], i) => (_jsxs(RowBox, { style: s.column, children: [_jsx("span", { className: s.label, onClick: () => sortBy(col), children: label }), col === sortColumn && (_jsxs(Fragment, { children: [sortDirection === "desc" && _jsx(ArrowDown, { className: s.sorter, onClick: () => toggleSortDirection() }), sortDirection === "asc" && _jsx(ArrowUp, { className: s.sorter, onClick: () => toggleSortDirection() })] }))] }, i))), hasActions && (_jsx(RowBox, { style: s.column, children: _jsx("span", { children: "Actions" }) }))] }));
+import { CheckBox } from "../miscellaneous/checkbox/index.js";
+import { cn } from "../../utils/functions/style.js";
+import ArrowUp from "../static/icons/arrow-up.svg";
+import ArrowDown from "../static/icons/arrow-down.svg";
+export const Header = ({ columnLabels, sortColumn, sortDirection, hasActions, sortBy, toggleSortDirection, selection }) => (_jsxs(RowBox, { style: s.container, children: [selection && (_jsx(RowBox, { style: s.selection, children: _jsx(CheckBox, { size: "sm", value: selection.allSelected, update: selection.toggleAll }) })), Object.entries(columnLabels).map(([col, label], i) => (_jsxs(RowBox, { style: cn(s.column, i === 0 && "justify-start"), children: [_jsx("span", { className: s.label, onClick: () => sortBy(col), children: label }), col === sortColumn && (_jsxs(Fragment, { children: [sortDirection === "desc" && _jsx(ArrowDown, { className: s.sorter, onClick: () => toggleSortDirection() }), sortDirection === "asc" && _jsx(ArrowUp, { className: s.sorter, onClick: () => toggleSortDirection() })] }))] }, i))), hasActions && (_jsx(RowBox, { style: s.column, children: _jsx("span", { children: "Actions" }) }))] }));
 const s = {
-    container: "w-full px-4 py-3 bg-background-light border-b border-border",
+    container: "w-full px-4 h-11 shrink-0 bg-background-light border-b border-border",
     column: "flex-1 gap-1 first:justify-start justify-center last:justify-end items-center uppercase text-primary-dark font-light text-sm",
+    selection: "w-10 shrink-0 flex items-center justify-start",
     label: "hover:brightness-120 duration-200 cursor-pointer",
     sorter: "hover:text-primary cursor-pointer duration-200"
 };

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

@@ -1,12 +1,18 @@
 import type { Column, TableAction } from "./utils/types.js";
+import type { SetState } from "../../utils/types/state.js";
 import { type Row } from "./row.js";
-type Props<T extends Row> = {
+type Props<T extends Row, K extends keyof T = keyof T> = {
     style?: string;
     title?: string;
     columns: Column<T>[];
     items: T[];
     actions?: TableAction<T>[];
     initialSort?: keyof T;
+    selection?: {
+        key: K;
+        values: T[K][];
+        update: SetState<T[K][]>;
+    };
 };
-export declare function Table<T extends Row>({ style, title, columns, items, actions, initialSort }: Props<T>): import("react").JSX.Element;
+export declare function Table<T extends Row, K extends keyof T = keyof T>({ style, title, columns, items, actions, initialSort, selection }: Props<T, K>): import("react").JSX.Element;
 export type { TableAction } from "./utils/types.js";

package/dist/components/table/index.js

@@ -1,56 +1,70 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTableData } from "./state/_.js";
-import Filter from "../../assets/icons/filter.svg";
+import { condenseArray } from "ts-helper-kit";
 import { ColumnBox, RowBox } from "../container/flex.js";
-import { Button } from "../button/normal.js";
+import { Select } from "../miscellaneous/dropdown/select.js";
 import { Header } from "./header.js";
 import { TableRow } from "./row.js";
-import { Dropdown, Select, MultiSelect } from "../miscellaneous/dropdown/_.js";
 import { SearchBar } from "./search-bar.js";
-import { condenseArray } from "ts-helper-kit";
-import { formatDateLabel } from "./utils/date.js";
-import { cn } from "../../utils/functions/_.js";
-export function Table({ style, title, columns, items, actions, initialSort }) {
+import Filters from "./filters.js";
+import DateRange from "./date-range.js";
+import { cn } from "../../utils/functions/style.js";
+export function Table({ style, title, columns, items, actions, initialSort, selection }) {
     const columnKeys = columns.map(column => column.key);
     const filterColumns = columns
         .filter(column => column.filter === "select")
         .map(column => column.key);
     const dateColumn = columns.find(column => column.filter === "date")?.key;
-    const { sortedItems, search, setSearch, dateRange, setDateRange, initialDateRange, sortBy, sortColumn, sortDirection, toggleSortDirection, filterOptions, selectedFilters, toggleFilter } = useTableData(items, columns, initialSort);
+    const { sortedItems, search, setSearch, dateRange, setDateRange, initialDateRange, sortBy, sortColumn, sortDirection, toggleSortDirection, filterOptions, selectedFilters, toggleFilter, clearFilter } = useTableData(items, columns, initialSort);
+    const toggleSelection = (item) => {
+        if (!selection)
+            return;
+        const value = item[selection.key];
+        selection.update(selection.values.includes(value)
+            ? selection.values.filter(x => x !== value)
+            : [...selection.values, value]);
+    };
     const condensedItems = condenseArray(sortedItems, columnKeys);
-    const activeFilterCount = Array.from(selectedFilters.values())
-        .filter(values => values.size > 0)
-        .length;
+    const visibleSelectionValues = selection
+        ? condensedItems.map(({ item }) => item[selection.key])
+        : [];
+    const allSelected = selection
+        ? visibleSelectionValues.length > 0 &&
+            visibleSelectionValues.every(value => selection.values.includes(value))
+        : false;
+    const toggleAll = () => {
+        if (!selection)
+            return;
+        selection.update(current => {
+            if (allSelected) {
+                return current.filter(value => !visibleSelectionValues.includes(value));
+            }
+            return [
+                ...current,
+                ...visibleSelectionValues.filter(value => !current.includes(value))
+            ];
+        });
+    };
     const getColumnLabel = (key) => {
         const col = columns.find(column => column.key === key);
         return col?.label ?? key.toString().replaceAll("_", " ");
     };
-    return (_jsxs(ColumnBox, { style: cn(s.container, style), children: [title && (_jsx("span", { className: s.title, children: title })), _jsxs(RowBox, { style: "gap-3 mb-1", children: [_jsx(SearchBar, { value: search, update: setSearch, resultCount: sortedItems.length }), filterColumns.length > 0 && (_jsx(Dropdown, { trigger: _jsxs(Button, { size: "sm", icon: _jsx(Filter, {}), children: ["Filter", activeFilterCount > 0 && (_jsx("span", { className: "flex justify-center items-center ml-1 bg-accent border border-accent-dark size-4 rounded-full text-px font-bold", children: activeFilterCount }))] }), children: filterColumns.map(column => {
-                            const myFilters = selectedFilters.get(column);
-                            return (_jsx(MultiSelect, { prefix: getColumnLabel(column).toUpperCase(), options: (filterOptions[column] || []).map(value => ({
-                                    id: String(value),
-                                    label: String(value)
-                                })), values: Array.from(myFilters || []).map(f => String(f)), update: (x) => toggleFilter(column, x) }, String(column)));
-                        }) })), _jsx(Select, { prefix: "Sort By", options: columns.map(column => ({
+    return (_jsxs(ColumnBox, { style: cn(s.container, style), children: [title && (_jsx("span", { className: s.title, children: title })), _jsxs(RowBox, { style: "gap-3 items-center mb-1", children: [_jsx(SearchBar, { value: search, update: setSearch, resultCount: sortedItems.length }), filterColumns.length > 0 && (_jsx(Filters, { columns: columns, items: selectedFilters, options: filterOptions, update: toggleFilter, clear: clearFilter })), _jsx(Select, { size: "xs", style: "bg-surface-dark border-border-darker", prefix: "Sort By", options: columns.map(column => ({
                             id: column.key.toString(),
                             label: getColumnLabel(column.key).toUpperCase()
-                        })), value: sortColumn?.toString(), update: x => sortBy(x) }), dateColumn && (_jsx(Dropdown, { align: "right", trigger: _jsx(Button, { size: "sm", children: dateRange.from && dateRange.to
-                                ? `${formatDateLabel(dateRange.from)} – ${formatDateLabel(dateRange.to)}`
-                                : getColumnLabel(dateColumn) }), children: _jsxs(ColumnBox, { style: "gap-3 p-3 min-w-64", children: [_jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["From", _jsx("input", { type: "date", value: dateRange.from, onChange: e => setDateRange(prev => ({
-                                                ...prev,
-                                                from: e.target.value
-                                            })), className: "px-3 py-2 bg-input border border-border rounded-md" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["To", _jsx("input", { type: "date", value: dateRange.to, onChange: e => setDateRange(prev => ({
-                                                ...prev,
-                                                to: e.target.value
-                                            })), className: "px-3 py-2 bg-input border border-border rounded-md" })] }), (dateRange.from || dateRange.to) && (_jsx(Button, { size: "sm", action: () => setDateRange(initialDateRange), children: "Clear" }))] }) }))] }), _jsxs(ColumnBox, { style: s.subcontainer, children: [_jsx(Header, { sortBy: sortBy, sortColumn: sortColumn, sortDirection: sortDirection, toggleSortDirection: toggleSortDirection, hasActions: !!actions?.length, columnLabels: Object.fromEntries(columns.map(column => [
+                        })), value: sortColumn?.toString(), update: x => sortBy(x) }), dateColumn && (_jsx(DateRange, { ...dateRange, update: setDateRange, initial: initialDateRange }))] }), _jsxs(ColumnBox, { style: s.subcontainer, children: [_jsx(Header, { sortBy: sortBy, sortColumn: sortColumn, sortDirection: sortDirection, toggleSortDirection: toggleSortDirection, hasActions: !!actions?.length, columnLabels: Object.fromEntries(columns.map(column => [
                             column.key,
                             getColumnLabel(column.key)
-                        ])) }), _jsx(ColumnBox, { style: s.rows, children: condensedItems.map(({ item, count }, i) => (_jsx(TableRow, { columns: columns, data: item, count: count, actions: actions }, i))) })] })] }));
+                        ])), selection: selection ? { allSelected, toggleAll } : undefined }), _jsx(ColumnBox, { style: s.rows, children: condensedItems.map(({ item, count }, i) => (_jsx(TableRow, { columns: columns, data: item, count: count, actions: actions, selected: selection
+                                ? selection.values.includes(item[selection.key])
+                                : undefined, toggleSelected: selection
+                                ? () => toggleSelection(item)
+                                : undefined }, i))) })] })] }));
 }
 const s = {
-    container: "grow gap-3 overflow-hidden",
+    container: "grow gap-3 shadow-md overflow-hidden",
     title: "text-xl font-bold text-primary",
-    subcontainer: "grow w-full border border-border rounded-md overflow-hidden",
+    subcontainer: "w-full grow border border-border-dark rounded-md overflow-hidden",
     rows: "grow overflow-y-auto no-scrollbar"
 };

package/dist/components/table/row.d.ts

@@ -5,7 +5,9 @@ interface Props<T extends TableRowType> {
     data: T;
     count: number;
     actions?: TableAction<T>[];
+    selected?: boolean;
+    toggleSelected?: () => void;
 }
 export type Row = Record<string, CellValue>;
-export declare const TableRow: <T extends Row>({ columns, data, actions, count }: Props<T>) => import("react").JSX.Element;
+export declare const TableRow: <T extends Row>({ columns, data, actions, count, selected, toggleSelected }: Props<T>) => import("react").JSX.Element;
 export {};

package/dist/components/table/row.js

@@ -1,19 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RowBox } from "../container/flex.js";
+import { RowBox, cn } from "@bouku/core";
+import { CheckBox } from "../miscellaneous/checkbox/index.js";
 import { Actions } from "./actions.js";
 import CheckCircle from "../../assets/icons/check-circle.svg";
 import XCircle from "../../assets/icons/x-circle.svg";
 export const isDateLike = (val) => !isNaN(Date.parse(val)) && isNaN(Number(val));
-;
-export const TableRow = ({ columns, data, actions, count }) => (_jsxs(RowBox, { style: s.container, children: [columns.map(({ key, format }, i) => {
+export const TableRow = ({ columns, data, actions, count, selected, toggleSelected }) => (_jsxs(RowBox, { style: s.container, children: [toggleSelected && (_jsx(RowBox, { style: s.selection, children: _jsx(CheckBox, { size: "sm", value: selected ?? false, update: toggleSelected }) })), columns.map(({ key, format }, i) => {
             const rawValue = data[key];
-            const value = rawValue === 0 ? 0 : (data[key] ?? "-");
+            const value = rawValue === 0
+                ? 0
+                : (data[key] ?? "-");
             let cellValue = value;
-            if (format && format === "date" && isDateLike(value.toString()))
+            if (format === "date" &&
+                isDateLike(value.toString())) {
                 cellValue = new Date(cellValue.toString()).toLocaleDateString();
-            return (_jsx(RowBox, { style: s.cell, children: _jsx("span", { className: "truncate", children: value === true ? _jsx(CheckCircle, { className: "text-success" }) : value === false ? _jsx(XCircle, { className: "text-error" }) : cellValue }) }, i));
+            }
+            return (_jsx(RowBox, { style: cn(s.cell, i === 0 && "justify-start"), children: _jsx("span", { className: "truncate", children: value === true
+                        ? _jsx(CheckCircle, { className: "text-success" })
+                        : value === false
+                            ? _jsx(XCircle, { className: "text-error" })
+                            : cellValue }) }, i));
         }), actions && (_jsx(RowBox, { style: s.cell, children: _jsx(Actions, { row: data, actions: actions }) })), count > 1 && (_jsx("span", { className: "absolute top-0 left-0 pb-px px-1 bg-surface-light border-b border-r rounded-br border-border-light font-bold font-mono text-px text-accent", children: count }))] }));
 const s = {
-    container: "relative w-full px-4 py-4 bg-background even:bg-surface border-b border-border last:border-b-0",
+    container: "relative w-full px-4 h-15 shrink-0 bg-background even:bg-surface/50 border-b border-border last:border-b-0",
+    selection: "w-10 shrink-0 flex items-center justify-start",
     cell: "flex-1 first-of-type:justify-start justify-center last-of-type:justify-end items-center gap-2 font-mono overflow-hidden"
 };

package/dist/components/table/search-bar.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RowBox } from "../container/flex.js";
+import { cn } from "../../utils/functions/style.js";
 import MagnifyGlass from "../../assets/icons/magnify-glass.svg";
 export function SearchBar({ value, update, resultCount }) {
-    return (_jsxs(RowBox, { style: "items-center gap-3 mr-auto px-3", children: [_jsx(MagnifyGlass, { className: "text-lg text-primary/70" }), _jsx("input", { className: "outline-0 text-primary placeholder:text-primary-dark", placeholder: `Search ${resultCount} result${resultCount !== 1 ? "s" : ""}...`, value: value, onChange: e => update(e.target.value) })] }));
+    return (_jsxs(RowBox, { style: "group items-center gap-2 mr-auto w-56 px-3 py-2 bg-surface-dark border border-border-darker shadow rounded", children: [_jsx(MagnifyGlass, { className: cn("text-base text-primary-darker group-focus-within:text-primary duration-200", value && value !== "" && "text-primary") }), _jsx("input", { className: "outline-0 text-primary placeholder:text-primary-dark text-xs", placeholder: `Search ${resultCount} result${resultCount !== 1 ? "s" : ""}...`, value: value, onChange: e => update(e.target.value) })] }));
 }
 export default SearchBar;

package/dist/components/table/state/filters.js

@@ -1,6 +1,5 @@
 import { useMemo, useState } from "react";
 export function useFilters(items, columns) {
-    console.log(items, columns);
     const [selectedFilters, setSelectedFilters] = useState(new Map());
     const filterOptions = useMemo(() => {
         return Object.fromEntries(columns.map(column => [

package/dist/components/table/state/sort.js

@@ -20,16 +20,20 @@ export function useSort(items, initialSort) {
             if (valB === undefined || valB === null)
                 return -1;
             let comparison;
-            if (isDateLike(valA) && isDateLike(valB))
+            if (isDateLike(valA) && isDateLike(valB)) {
                 comparison =
                     parseDate(valA).getTime() -
                         parseDate(valB).getTime();
-            else if (typeof valA === "number" && typeof valB === "number")
+            }
+            else if (typeof valA === "number" &&
+                typeof valB === "number") {
                 comparison = valA - valB;
-            else
+            }
+            else {
                 comparison = String(valA)
                     .toLowerCase()
                     .localeCompare(String(valB).toLowerCase());
+            }
             return isDescending ? -comparison : comparison;
         });
     }, [items, column, isDescending]);

package/dist/components/table/utils/date.js

@@ -41,6 +41,7 @@ export const formatDateLabel = (value) => {
         year: "numeric"
     });
 };
-export const isDateLike = (value) => value instanceof Date || (typeof value === "string" &&
-    !Number.isNaN(Date.parse(value)) &&
-    Number.isNaN(Number(value)));
+export const isDateLike = (value) => value instanceof Date ||
+    (typeof value === "string" &&
+        !Number.isNaN(Date.parse(value)) &&
+        Number.isNaN(Number(value)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bouku/core",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "main": "./dist/index.js",
   "type": "module",
   "types": "./dist/index.d.ts",