@luxonis/common-fe-components 1.20.0 → 1.21.1

package/dist/components/custom/DatePicker.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonProps } from './Button.js';
+export type DatePickerProps = {
+    value: Date | undefined;
+    onChange: (newValue: Date | undefined) => void;
+    disabled?: boolean;
+    dateFormat?: string;
+    placeholder?: string;
+    buttonProps?: ButtonProps;
+    modal?: boolean;
+};
+export declare function DatePicker(props: Readonly<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimePicker(props: Readonly<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/custom/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/custom/DatePicker.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA2C1D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA0I9D"}

package/dist/components/custom/DatePicker.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { Popover, PopoverContent, PopoverTrigger } from '../shadow-panda/Popover.js';
+import { Calendar } from '../shadow-panda/Calendar.js';
+import { icon } from '../../styled-system/recipes/icon.mjs';
+import { css } from '../../styled-system/css/css.mjs';
+import { Label } from './Text.js';
+import { Flex } from './Flex.js';
+import { Button } from './Button.js';
+export function DatePicker(props) {
+    const { onChange, disabled = false, dateFormat = 'PPP', placeholder = 'Pick a date', value, buttonProps, modal = false, } = props;
+    const [date, setDate] = React.useState(value);
+    //TODO: Handle pointer events better
+    return (_jsxs(Popover, { modal: modal, onOpenChange: () => document.body.style.removeProperty('pointer-events'), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { width: "full", justifyContent: "flex-start", textAlign: "left", fontWeight: "normal", colorVariant: "white", variant: "outline", disabled: disabled, ...buttonProps, children: [_jsx(CalendarIcon, { className: icon() }), date ? format(date, dateFormat) : _jsx("span", { children: placeholder })] }) }), _jsx(PopoverContent, { w: "auto", p: "0", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: selectedValue => {
+                        setDate(selectedValue ?? undefined);
+                        onChange(selectedValue ?? undefined);
+                    }, className: css({ pointerEvents: 'auto' }) }) })] }));
+}
+export function DateTimePicker(props) {
+    const { onChange, disabled = false, dateFormat = 'PPp', placeholder = 'Pick a date and time', value, buttonProps, modal = false, } = props;
+    const [date, setDate] = React.useState(value);
+    const hours = Array.from({ length: 12 }, (_, i) => i + 1);
+    const minutes = Array.from({ length: 60 }, (_, i) => i);
+    const handleTimeChange = (type, v) => {
+        const newDate = date ? new Date(date) : new Date(Date.now());
+        if (type === 'hour') {
+            newDate.setHours((parseInt(v) % 12) + (newDate.getHours() >= 12 ? 12 : 0));
+        }
+        else if (type === 'minute') {
+            newDate.setMinutes(parseInt(v));
+        }
+        else if (type === 'ampm') {
+            const currentHours = newDate.getHours();
+            newDate.setHours(v === 'PM' ? currentHours + 12 : currentHours - 12);
+        }
+        setDate(newDate);
+        onChange(newDate);
+    };
+    const buttonStyles = css({
+        h: '9 !important',
+        w: '9 !important',
+        px: '0 !important',
+        py: '0 !important',
+        fontWeight: 'normal',
+        lineHeight: '10',
+    });
+    const containerStyles = css({
+        flexDirection: 'column',
+        height: 'full',
+        maxHeight: '300px',
+        overflowY: 'auto',
+        pointerEvents: 'auto',
+        paddingTop: 'xs',
+        paddingBottom: 'xs',
+        paddingInline: 'xs',
+    });
+    //TODO: Handle pointer events better
+    return (_jsxs(Popover, { modal: modal, onOpenChange: () => document.body.style.removeProperty('pointer-events'), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { width: "full", justifyContent: "flex-start", textAlign: "left", fontWeight: "normal", colorVariant: "white", variant: "outline", disabled: disabled, ...buttonProps, children: [_jsx(CalendarIcon, { className: icon() }), date ? format(date, dateFormat) : _jsx("span", { children: placeholder })] }) }), _jsxs(PopoverContent, { w: "auto", p: "0", flexDirection: "row", display: "flex", children: [_jsx(Calendar, { mode: "single", selected: date, onSelect: selectedValue => {
+                            setDate(selectedValue ?? undefined);
+                            onChange(selectedValue ?? undefined);
+                        }, className: css({ pointerEvents: 'auto' }) }), _jsx(Flex, { className: containerStyles, onWheel: e => e.stopPropagation(), children: hours.map(hour => (_jsx(Button, { label: _jsx(Label, { text: hour < 10 ? `0${hour}` : hour, color: date && date.getHours() % 12 === hour % 12 ? 'white' : 'black' }), onClick: () => handleTimeChange('hour', hour.toString()), variant: date && date.getHours() % 12 === hour % 12 ? 'filled' : 'ghost', className: buttonStyles }, hour))) }), _jsx(Flex, { height: "300px", width: "1px", bg: "light.gray" }), _jsx(Flex, { className: containerStyles, onWheel: e => e.stopPropagation(), children: minutes.map(minute => (_jsx(Button, { label: _jsx(Label, { text: minute < 10 ? `0${minute}` : minute, color: date && date.getMinutes() === minute ? 'white' : 'black' }), onClick: () => handleTimeChange('minute', minute.toString()), variant: date && date.getMinutes() === minute ? 'filled' : 'ghost', className: buttonStyles }, minute))) }), _jsx(Flex, { height: "300px", width: "1px", bg: "light.gray" }), _jsx(Flex, { className: containerStyles, onWheel: e => e.stopPropagation(), children: ['AM', 'PM'].map(ampm => (_jsx(Button, { label: _jsx(Label, { text: ampm, color: date && ((ampm === 'AM' && date.getHours() < 12) || (ampm === 'PM' && date.getHours() >= 12))
+                                    ? 'white'
+                                    : 'black' }), onClick: () => handleTimeChange('ampm', ampm), variant: date && ((ampm === 'AM' && date.getHours() < 12) || (ampm === 'PM' && date.getHours() >= 12))
+                                ? 'filled'
+                                : 'ghost', className: buttonStyles }, ampm))) })] })] }));
+}
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/custom/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/custom/DatePicker.tsx"],"names":[],"mappings":"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"}