@bouku/core 0.4.6 → 0.4.8

package/dist/assets/icons/calendar.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em">
+    <path 
+        d="M224 64C206.3 64 192 78.3 192 96L192 128L160 128C124.7 128 96 156.7 96 192L96 240L544 240L544 192C544 156.7 515.3 128 480 128L448 128L448 96C448 78.3 433.7 64 416 64C398.3 64 384 78.3 384 96L384 128L256 128L256 96C256 78.3 241.7 64 224 64zM96 288L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 288L96 288z" 
+        fill="currentColor" 
+    />
+</svg>

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

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

package/dist/components/date/_.js

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

package/dist/components/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/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/date/range-picker.d.ts

@@ -0,0 +1,13 @@
+export type DateRange = {
+    from: string;
+    to: string;
+};
+type Props = DateRange & {
+    size?: "xs" | "sm";
+    min?: string;
+    update: (next: DateRange) => void;
+    initial: DateRange;
+};
+export declare function DateRangePicker({ from, to, size, min, update, initial }: Props): import("react").JSX.Element;
+export declare const formatDateLabel: (value: string) => string;
+export default DateRangePicker;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from "../miscellaneous/dropdown/normal.js";
+import { DatePicker } from "./picker.js";
+import { Button } from "../button/normal.js";
+import Trash from "../../assets/icons/trash.svg";
+import Calendar from "../../assets/icons/calendar.svg";
+export function DateRangePicker({ from, to, size = "sm", min, update, initial }) {
+    const label = from && to
+        ? `${formatDateLabel(from)} – ${formatDateLabel(to)}`
+        : from
+            ? `Since ${formatDateLabel(from)}`
+            : to
+                ? `Until ${formatDateLabel(to)}`
+                : null;
+    const Trigger = (_jsx(Button, { size: size, style: "bg-surface-dark border-border-darker", icon: label ? undefined : _jsx(Calendar, {}), children: label ?? "Filter Date" }));
+    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", min: min, max: to || undefined, value: from, update: v => update({ from: v, to }) }), _jsx(DatePicker, { id: "to", label: "To", size: "sm", style: "gap-1", min: from || min, value: to, update: v => update({ from, 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), children: "Clear" }))] }));
+}
+export const formatDateLabel = (value) => {
+    if (!value)
+        return "";
+    const [year, month, day] = value.split("-").map(Number);
+    return new Date(year, month - 1, day).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+    });
+};
+export default DateRangePicker;

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

@@ -1,9 +1,9 @@
 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 { DatePicker } from "../date/picker.js";
 import { Button } from "../button/normal.js";
 import Trash from "../../assets/icons/trash.svg";
-import { formatDateLabel } from "./utils/date.js";
+import { formatDateLabel } from "../date/range-picker.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/utils/date.d.ts

@@ -2,5 +2,4 @@ import type { DateRange, TableRow, CellValue } from "./types.js";
 export declare const parseDate: (value: CellValue) => Date;
 export declare const formatDateInput: (value: CellValue) => string;
 export declare const getDateRange: <T extends TableRow>(items: T[], column?: keyof T) => DateRange;
-export declare const formatDateLabel: (value: string) => string;
 export declare const isDateLike: (value: CellValue) => boolean;

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

@@ -31,16 +31,6 @@ export const getDateRange = (items, column) => {
         to: formatDateInput(dates[dates.length - 1])
     };
 };
-export const formatDateLabel = (value) => {
-    if (!value)
-        return "";
-    const [year, month, day] = value.split("-").map(Number);
-    return new Date(year, month - 1, day).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-        year: "numeric"
-    });
-};
 export const isDateLike = (value) => value instanceof Date ||
     (typeof value === "string" &&
         !Number.isNaN(Date.parse(value)) &&

package/package.json

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