indas-ui 0.0.1 → 0.1.1

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface DateTimePickerProps {
+    value?: Date | string;
+    onChange?: (date: Date | string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    returnFormat?: 'date' | 'string';
+    timeFormat?: '12h' | '24h';
+}
+export declare function DateTimePicker({ value, onChange, placeholder, label, error, disabled, minDate, maxDate, className, returnFormat, timeFormat }: DateTimePickerProps): React.JSX.Element;

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

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { Calendar, ChevronLeft, Clock, X } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/index.js';
+import { Input } from '../../ui/index.js';
+import { CalendarView } from './CalendarView.js';
+import { MONTHS } from './shared-utils.js';
+export function DateTimePicker({ value, onChange, placeholder = 'Select date & time...', label, error, disabled = false, minDate, maxDate, className, returnFormat = 'date', timeFormat = '24h' }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedDate, setSelectedDate] = React.useState(null);
+    const [hours, setHours] = React.useState(12);
+    const [minutes, setMinutes] = React.useState(0);
+    const [period, setPeriod] = React.useState('PM');
+    const [inputValue, setInputValue] = React.useState('');
+    // Initialize from value prop
+    React.useEffect(() => {
+        if (value) {
+            const date = typeof value === 'string' ? new Date(value) : value;
+            setSelectedDate(date);
+            const hrs = date.getHours();
+            const mins = date.getMinutes();
+            if (timeFormat === '12h') {
+                setHours(hrs === 0 ? 12 : hrs > 12 ? hrs - 12 : hrs);
+                setPeriod(hrs >= 12 ? 'PM' : 'AM');
+            }
+            else {
+                setHours(hrs);
+            }
+            setMinutes(mins);
+            setInputValue(formatDisplayValue(date));
+        }
+    }, [value, timeFormat]);
+    // Helper to convert date based on returnFormat
+    const convertDate = (date) => {
+        if (!date)
+            return undefined;
+        return returnFormat === 'string' ? date.toISOString() : date;
+    };
+    const formatDisplayValue = (date) => {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = MONTHS[date.getMonth()].slice(0, 3);
+        const year = date.getFullYear();
+        let timeStr = '';
+        const hrs = date.getHours();
+        const mins = date.getMinutes();
+        if (timeFormat === '12h') {
+            const displayHrs = hrs === 0 ? 12 : hrs > 12 ? hrs - 12 : hrs;
+            const ampm = hrs >= 12 ? 'PM' : 'AM';
+            timeStr = `${displayHrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')} ${ampm}`;
+        }
+        else {
+            timeStr = `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
+        }
+        return `${day} ${month}, ${year} ${timeStr}`;
+    };
+    const handleDateClick = (date) => {
+        setSelectedDate(date);
+    };
+    const handleMonthChange = (direction) => {
+        const newMonth = new Date(selectedDate || new Date());
+        newMonth.setMonth(newMonth.getMonth() + (direction === 'next' ? 1 : -1));
+        setSelectedDate(newMonth);
+    };
+    const handleApply = () => {
+        if (!selectedDate)
+            return;
+        const finalDate = new Date(selectedDate);
+        // Set time based on format
+        if (timeFormat === '12h') {
+            let hrs = hours;
+            if (period === 'PM' && hours !== 12)
+                hrs += 12;
+            if (period === 'AM' && hours === 12)
+                hrs = 0;
+            finalDate.setHours(hrs, minutes, 0, 0);
+        }
+        else {
+            finalDate.setHours(hours, minutes, 0, 0);
+        }
+        onChange?.(convertDate(finalDate));
+        setInputValue(formatDisplayValue(finalDate));
+        setIsOpen(false);
+    };
+    const handleClear = () => {
+        setSelectedDate(null);
+        setInputValue('');
+        onChange?.(convertDate(undefined));
+    };
+    const handleNow = () => {
+        const now = new Date();
+        setSelectedDate(now);
+        const hrs = now.getHours();
+        const mins = now.getMinutes();
+        if (timeFormat === '12h') {
+            setHours(hrs === 0 ? 12 : hrs > 12 ? hrs - 12 : hrs);
+            setPeriod(hrs >= 12 ? 'PM' : 'AM');
+        }
+        else {
+            setHours(hrs);
+        }
+        setMinutes(mins);
+        onChange?.(convertDate(now));
+        setInputValue(formatDisplayValue(now));
+        setIsOpen(false);
+    };
+    const renderTimeInput = (value, onChange, max, label) => (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("button", { onClick: () => onChange(value === max ? 0 : value + 1), className: "h-6 w-full flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--bg-hover))] rounded transition-colors active:scale-95", "aria-label": `Increase ${label}`, children: _jsx(ChevronLeft, { className: "h-4 w-4 rotate-90" }) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("input", { type: "number", min: "0", max: max, value: value.toString().padStart(2, '0'), onChange: (e) => {
+                            const val = parseInt(e.target.value) || 0;
+                            if (val >= 0 && val <= max)
+                                onChange(val);
+                        }, onWheel: (e) => {
+                            e.preventDefault();
+                            const delta = e.deltaY < 0 ? 1 : -1;
+                            const newValue = value + delta;
+                            if (newValue < 0)
+                                onChange(max);
+                            else if (newValue > max)
+                                onChange(0);
+                            else
+                                onChange(newValue);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'ArrowUp') {
+                                e.preventDefault();
+                                onChange(value === max ? 0 : value + 1);
+                            }
+                            else if (e.key === 'ArrowDown') {
+                                e.preventDefault();
+                                onChange(value === 0 ? max : value - 1);
+                            }
+                        }, className: "w-14 text-center text-lg font-semibold border border-[rgb(var(--bd-default))] rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))] focus:border-transparent transition-all hover:border-[rgb(var(--color-primary))]", "aria-label": label }), _jsx("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] mt-0.5", children: label })] }), _jsx("button", { onClick: () => onChange(value === 0 ? max : value - 1), className: "h-6 w-full flex items-center justify-center text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--bg-hover))] rounded transition-colors active:scale-95", "aria-label": `Decrease ${label}`, children: _jsx(ChevronLeft, { className: "h-4 w-4 -rotate-90" }) })] }));
+    return (_jsxs("div", { className: cn('relative w-full', className), children: [label && (_jsx("label", { className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-2", children: label })), _jsxs(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx("div", { className: "relative", children: _jsx(Input, { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: placeholder, disabled: disabled, error: error, className: cn('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen), readOnly: true }) }) }), _jsx(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: _jsxs(Popover.Content, { className: cn('z-[300] bg-white rounded-xl shadow-2xl border border-gray-200/50 backdrop-blur-sm', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'w-[95vw] sm:w-[380px] max-w-[calc(100vw-2rem)] p-3 sm:p-4'), side: "bottom", align: "start", sideOffset: 8, avoidCollisions: true, collisionPadding: 16, onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "h-4 w-4 text-[rgb(var(--color-primary))]" }), _jsx("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: "Select Date & Time" })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsOpen(false), className: "h-6 w-6 p-0 hover:bg-red-50 hover:text-red-600 transition-all duration-200", children: _jsx(X, { className: "h-3 w-3" }) })] }), _jsx(CalendarView, { currentMonth: selectedDate || new Date(), selectedDate: selectedDate, onDateClick: handleDateClick, onMonthChange: handleMonthChange, minDate: minDate, maxDate: maxDate, showNavigation: true }), _jsxs("div", { className: "border-t border-[rgb(var(--bd-default))] pt-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Clock, { className: "h-4 w-4 text-[rgb(var(--color-primary))]" }), _jsx("span", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: "Time" })] }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [renderTimeInput(hours, setHours, timeFormat === '12h' ? 12 : 23, 'Hours'), _jsx("span", { className: "text-2xl font-bold text-[rgb(var(--fg-muted))] mb-5", children: ":" }), renderTimeInput(minutes, setMinutes, 59, 'Mins'), timeFormat === '12h' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-16 bg-[rgb(var(--bd-default))] mx-2" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("button", { onClick: () => setPeriod('AM'), className: cn('px-3 py-1.5 text-sm font-semibold rounded-lg transition-all duration-200', period === 'AM'
+                                                                        ? 'bg-[rgb(var(--color-primary))] text-white shadow-md'
+                                                                        : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))]'), children: "AM" }), _jsx("button", { onClick: () => setPeriod('PM'), className: cn('px-3 py-1.5 text-sm font-semibold rounded-lg transition-all duration-200', period === 'PM'
+                                                                        ? 'bg-[rgb(var(--color-primary))] text-white shadow-md'
+                                                                        : 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))]'), children: "PM" })] })] }))] })] }), _jsxs("div", { className: "flex items-center gap-2 mt-4 pt-4 border-t border-[rgb(var(--bd-default))]", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleNow, className: "flex-1 text-xs font-medium hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: "Now" }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleClear, className: "flex-1 text-xs font-medium text-red-500 hover:bg-red-50 hover:text-red-600", children: "Clear" }), _jsx(Button, { variant: "primary", size: "sm", onClick: handleApply, disabled: !selectedDate, className: "flex-1 text-xs font-medium", children: "Apply" })] })] }) })] }), error && _jsx("p", { className: "mt-1 text-sm text-red-600", children: error })] }));
+}

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

@@ -0,0 +1,7 @@
+export { DatePicker } from './DatePicker.js';
+export type { DatePickerProps, DateRange } from './DatePicker.js';
+export { DateTimePicker } from './DateTimePicker.js';
+export type { DateTimePickerProps } from './DateTimePicker.js';
+export { CalendarView } from './CalendarView.js';
+export type { CalendarViewProps } from './CalendarView.js';
+export { MONTHS, WEEKDAYS, PERIOD_OPTIONS, TIME_OPTIONS, getDaysInMonth, getFirstDayOfMonth } from './shared-utils.js';

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

@@ -0,0 +1,9 @@
+'use client';
+// DatePicker - Single/Range date selection without time
+export { DatePicker } from './DatePicker.js';
+// DateTimePicker - Single date WITH time selection
+export { DateTimePicker } from './DateTimePicker.js';
+// CalendarView - Shared calendar rendering component
+export { CalendarView } from './CalendarView.js';
+// Shared utilities (for internal use or custom implementations)
+export { MONTHS, WEEKDAYS, PERIOD_OPTIONS, TIME_OPTIONS, getDaysInMonth, getFirstDayOfMonth } from './shared-utils.js';

package/dist/components/forms/date-picker/shared-utils.d.ts

@@ -0,0 +1,6 @@
+export declare const MONTHS: string[];
+export declare const WEEKDAYS: string[];
+export declare const PERIOD_OPTIONS: string[];
+export declare const TIME_OPTIONS: string[];
+export declare const getDaysInMonth: (date: Date) => number;
+export declare const getFirstDayOfMonth: (date: Date) => number;

package/dist/components/forms/date-picker/shared-utils.js

@@ -0,0 +1,19 @@
+'use client';
+// ============================================
+// Shared Utility Functions for DatePicker Components
+// ============================================
+export const MONTHS = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+export const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const PERIOD_OPTIONS = ['Day', 'Week', 'Month', 'Quarter', 'Year'];
+export const TIME_OPTIONS = ['Last', 'This', 'Next'];
+// Helper to get days in a month
+export const getDaysInMonth = (date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+// Helper to get first day of month (0-6, where 0 is Sunday)
+export const getFirstDayOfMonth = (date) => {
+    return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+};

package/dist/components/forms/dropdown/Dropdown.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { DropdownProps, DropdownOption } from './types.js';
+/**
+ * Utility: Check if a string is a base64 image
+ * Detects both data URI format and raw base64 strings
+ */
+export declare function isBase64Image(str: string | undefined): boolean;
+/**
+ * Utility: Convert raw base64 string to data URI
+ * If already a data URI, returns as-is
+ */
+export declare function getImageSrc(imageString: string | undefined): string | undefined;
+/**
+ * Component: Render option image (handles base64 and URLs)
+ * Click to expand in modal
+ */
+interface OptionImageProps {
+    image: string;
+    alt: string;
+    className?: string;
+    expandable?: boolean;
+}
+export declare function OptionImage({ image, alt, className, expandable }: OptionImageProps): React.JSX.Element;
+/**
+ * Shared clear button component for dropdowns
+ * Uses div instead of button to avoid nested button issues in HTML
+ */
+interface ClearButtonProps {
+    onClear: (e: React.MouseEvent) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function ClearButton({ onClear, disabled, className }: ClearButtonProps): React.JSX.Element;
+/**
+ * Shared styles for Dropdown components
+ * Centralized styling to ensure consistency across SingleSelect and MultiSelect
+ */
+export declare const dropdownSharedStyles: {
+    readonly trigger: {
+        readonly base: "flex items-center justify-between rounded-md border bg-bg-surface cursor-pointer transition-all duration-200";
+        readonly focus: "focus-within:outline-none focus-within:border-[rgb(var(--color-primary))]";
+        readonly error: "border-[rgb(var(--color-error))] focus-within:border-[rgb(var(--color-error))]";
+        readonly normal: "border-[rgb(var(--bd-default))] hover:border-[rgb(var(--bd-hover))]";
+        readonly disabled: "cursor-not-allowed opacity-50";
+        readonly autoWidth: "w-fit max-w-80";
+        readonly fullWidth: "w-full";
+        readonly sizes: {
+            readonly sm: "h-7 text-xs";
+            readonly md: "h-10 text-sm";
+            readonly lg: "h-12 text-base";
+        };
+        readonly variants: {
+            readonly default: "";
+            readonly compact: "px-2";
+            readonly detailed: "shadow-sm";
+        };
+    };
+    readonly tag: {
+        readonly base: "inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-[rgb(var(--color-primary)/0.1)] text-[rgb(var(--color-primary))] rounded-md border border-[rgb(var(--color-primary)/0.2)] flex-shrink-0";
+        readonly removeButton: "hover:bg-[rgb(var(--color-primary)/0.2)] rounded-full p-0.5 flex-shrink-0";
+    };
+    readonly clearButton: "absolute right-8 top-1/2 -translate-y-1/2 p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded z-10";
+    readonly chevron: {
+        readonly base: "h-4 w-4 text-[rgb(var(--fg-muted))] transition-transform duration-200";
+        readonly open: "rotate-180";
+    };
+    readonly content: {
+        readonly base: "relative z-[350] w-auto max-w-80 overflow-hidden rounded-xl border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] shadow-xl";
+        readonly animations: {
+            readonly open: "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 data-[state=open]:duration-75";
+            readonly close: "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-98 data-[state=closed]:duration-50";
+            readonly slide: "data-[side=bottom]:slide-in-from-top-0.5 data-[side=left]:slide-in-from-right-0.5 data-[side=right]:slide-in-from-left-0.5 data-[side=top]:slide-in-from-bottom-0.5";
+        };
+    };
+    readonly viewport: "p-1 bg-bg-surface max-h-60 overflow-y-auto scrollbar-thin";
+    readonly item: {
+        readonly base: "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none";
+        readonly states: "focus:bg-[rgb(var(--bg-hover))] focus:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-hover))] transition-colors duration-150";
+        readonly disabled: "data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed";
+        readonly colors: "bg-bg-surface text-fg-default";
+    };
+    readonly checkboxItem: {
+        readonly base: "relative flex w-full cursor-pointer select-none items-start rounded-sm py-1.5 px-2 text-xs transition-colors duration-150";
+        readonly states: "hover:bg-[rgb(var(--bg-hover))]";
+        readonly disabled: "disabled:opacity-50 disabled:cursor-not-allowed";
+    };
+    readonly createButton: "w-full text-left px-2 py-1.5 text-xs text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary)/0.05)] rounded-sm flex items-center gap-2 border-b border-[rgb(var(--bd-default))] mb-1";
+    readonly empty: "py-6 text-center text-xs text-[rgb(var(--fg-muted))]";
+};
+/**
+ * Helper functions to get full classNames
+ */
+export declare const getDropdownClassName: {
+    content: () => string;
+    item: () => string;
+    checkboxItem: () => string;
+};
+/**
+ * DropdownSearch - Search input for filtering dropdown options
+ */
+interface DropdownSearchProps {
+    searchTerm: string;
+    setSearchTerm: (term: string) => void;
+    placeholder?: string;
+    /** When true, stops ALL key propagation (for multi-select where no Radix handles navigation) */
+    stopAllKeyPropagation?: boolean;
+    /** Total number of results to display as a badge */
+    resultCount?: number;
+    /** Ref to imperatively focus the search input */
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    /** When provided, fully owns keydown (used by single-select so Enter commits the
+     *  highlighted option — Radix can't, since focus is trapped in this input). */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export declare function DropdownSearch({ searchTerm, setSearchTerm, placeholder, stopAllKeyPropagation, resultCount, inputRef, onKeyDown }: DropdownSearchProps): React.JSX.Element;
+/**
+ * DropdownTrigger - Trigger button for dropdown
+ */
+interface DropdownTriggerProps {
+    selectedValues: string[];
+    selectedOptions: DropdownOption[];
+    placeholder: string;
+    disabled: boolean;
+    error: boolean;
+    clearable: boolean;
+    autoWidth: boolean;
+    triggerClassName?: string;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+    showAsTags: boolean;
+    showSelectedCount: boolean;
+    open: boolean;
+    onToggle: () => void;
+    onClear: (e: React.MouseEvent) => void;
+    onRemoveTag: (value: string | number) => void;
+    variant?: 'default' | 'compact' | 'detailed';
+    size?: 'sm' | 'md' | 'lg';
+    trailingAction?: React.ReactNode;
+    formatSelectedCount?: (count: number) => string;
+}
+export declare function DropdownTrigger({ selectedValues, selectedOptions, placeholder, disabled, error, clearable, autoWidth, triggerClassName, className, id, 'aria-label': ariaLabel, showAsTags, showSelectedCount, open, onToggle, onClear, onRemoveTag, variant, size, trailingAction, formatSelectedCount }: DropdownTriggerProps): React.JSX.Element;
+export declare function Dropdown({ options, value, placeholder, onValueChange, onOpen, disabled, loading, searchable, clearable, className, error, label, labelExtra, required, emptyMessage, triggerClassName, id, 'aria-label': ariaLabel, autoWidth, customFooter, multiSelect, maxSelections, showSelectedCount, showAsTags, allowTextInput, onCreateOption, createOptionLabel, allowCustomValues, allowCustomInput, variant, size, contentClassName, selectAllLabel, hideSelectAll, showOnlyButton, customTrigger, trailingAction, formatSelectedCount, preserveOrder }: DropdownProps): React.JSX.Element;
+export {};