@columenlabs/lumen-ui 0.1.17 → 0.1.18

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, type CardControls, type CardLink, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm, type LumenConfirmProps } from './confirm.js';
 export { type LumenAuthPoint, LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, type LumenAuthStageProps, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenDateInput, type LumenDateInputProps, stepDate, } from './lumen-date-input.js';
 export { LumenChoice, type LumenChoiceOption } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';

package/dist/index.js

@@ -23,6 +23,7 @@ export { LumenGeoMap } from './lumen-geo-map.js';
 export { LumenWidget, LumenSavedWidget } from './lumen-widget.js';
 export { LumenConfirm } from './confirm.js';
 export { LumenAuthHeading, LumenAuthNote, LumenAuthProblem, LumenAuthStage, LumenCodeField, LumenEmailField, LumenPasswordField, LumenStepBar, } from './lumen-auth.js';
+export { LumenDateInput, stepDate, } from './lumen-date-input.js';
 export { LumenChoice } from './lumen-choice.js';
 export { LumenSecret } from './lumen-secret.js';
 export { RankedBars, StackedBars, StackedColumns } from './lumen-widget-charts.js';

package/dist/lumen-date-input.d.ts

@@ -0,0 +1,30 @@
+export type LumenDateInputProps = {
+    /** The day as ISO `yyyy-mm-dd`, or '' for none. */
+    value: string;
+    onChange: (iso: string) => void;
+    /** Earliest and latest day the picker and the steps reach. */
+    min?: string;
+    max?: string;
+    /** Which days the steps land on (a trading calendar); every day when left out. */
+    isOpen?: (iso: string) => boolean;
+    /** What a day is called in the step tooltips: "Previous trading day". Default "day". */
+    unit?: string;
+    /** Shows a Today icon button that runs this. */
+    onToday?: () => void;
+    /** Today is already shown: the Today button is off. */
+    atToday?: boolean;
+    /** `sm` for toolbars and card headers, `default` in forms. */
+    size?: 'sm' | 'default';
+    disabled?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    className?: string;
+};
+/** The next open day from `iso` in direction `dir`, inside min and max; null when none. */
+export declare function stepDate(iso: string, dir: 1 | -1, { min, max, isOpen }?: Pick<LumenDateInputProps, 'min' | 'max' | 'isOpen'>): string | null;
+/**
+ * The kit's date picker: the browser's date input between ‹ and › icon buttons that step
+ * one open day (an app passes its trading calendar as `isOpen`), Alt+← and Alt+→ while it
+ * has focus, and an optional Today. Every date field in an app uses it.
+ */
+export declare function LumenDateInput({ value, onChange, min, max, isOpen, unit, onToday, atToday, size, disabled, id, 'aria-label': ariaLabel, className, }: LumenDateInputProps): import("react").JSX.Element;

package/dist/lumen-date-input.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A date picker with ‹ › to step one open day back or forward, and an optional Today.
+import { CalendarClockIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { Input } from './ui/input.js';
+const DAY = 86_400_000;
+/** The furthest a step looks for an open day (long holiday runs fit easily). */
+const REACH = 14;
+function addDays(iso, n) {
+    return new Date(Date.parse(`${iso}T00:00:00Z`) + n * DAY).toISOString().slice(0, 10);
+}
+/** The next open day from `iso` in direction `dir`, inside min and max; null when none. */
+export function stepDate(iso, dir, { min, max, isOpen } = {}) {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(iso))
+        return null;
+    let day = iso;
+    for (let i = 0; i < REACH; i++) {
+        day = addDays(day, dir);
+        if ((min && day < min) || (max && day > max))
+            return null;
+        if (!isOpen || isOpen(day))
+            return day;
+    }
+    return null;
+}
+/**
+ * The kit's date picker: the browser's date input between ‹ and › icon buttons that step
+ * one open day (an app passes its trading calendar as `isOpen`), Alt+← and Alt+→ while it
+ * has focus, and an optional Today. Every date field in an app uses it.
+ */
+export function LumenDateInput({ value, onChange, min, max, isOpen, unit = 'day', onToday, atToday, size = 'sm', disabled, id, 'aria-label': ariaLabel, className, }) {
+    const prev = disabled ? null : stepDate(value, -1, { min, max, isOpen });
+    const next = disabled ? null : stepDate(value, 1, { min, max, isOpen });
+    const btn = size === 'sm' ? 'icon-xs' : 'icon-sm';
+    const onKeyDown = (e) => {
+        if (!e.altKey)
+            return;
+        const to = e.key === 'ArrowLeft' ? prev : e.key === 'ArrowRight' ? next : undefined;
+        if (to === undefined)
+            return;
+        e.preventDefault();
+        if (to)
+            onChange(to);
+    };
+    return (_jsxs("div", { className: cn('inline-flex shrink-0 items-center gap-0.5', className), children: [_jsx(IconButton, { icon: ChevronLeftIcon, label: `Previous ${unit}`, size: btn, disabled: !prev, onClick: () => prev && onChange(prev) }), _jsx(Input, { type: "date", id: id, "aria-label": ariaLabel ?? 'Date', className: cn('tabular-nums', size === 'sm' ? 'h-7 w-32 text-xs md:text-xs' : 'w-36'), min: min, max: max, value: value, disabled: disabled, onKeyDown: onKeyDown, onChange: (e) => onChange(e.target.value) }), _jsx(IconButton, { icon: ChevronRightIcon, label: `Next ${unit}`, size: btn, disabled: !next, onClick: () => next && onChange(next) }), onToday && (_jsx(IconButton, { icon: CalendarClockIcon, label: "Today", size: btn, disabled: disabled || atToday, onClick: onToday }))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.17",
+    "@columenlabs/lumen-ui-types": "0.1.18",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",