@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/date-picker.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+import { getPortalLayerStyle } from '@/lib/portal-layer';
+import { useAnchoredOverlayPosition } from '@/lib/use-anchored-overlay-position';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
+import { Calendar } from '@/components/ui/calendar';
+import { DateInput, type DateInputProps } from '@/components/ui/date-input';
+import { Icon } from '@/components/ui/icon';
+import { IconButton } from '@/components/ui/icon-button';
+
+export interface DatePickerProps extends Omit<DateInputProps, 'onKeyDown' | 'trailingIcon'> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  showCalendarButton?: boolean;
+  portal?: boolean;
+  calendarLabel?: string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      label,
+      hideLabel = false,
+      disabled = false,
+      required = false,
+      invalid = false,
+      description,
+      errorMessage,
+      className,
+      variant = 'outlined',
+      locale,
+      format,
+      min,
+      max,
+      name,
+      showCalendarButton = true,
+      portal = true,
+      calendarLabel = 'Choose date',
+      weekStartsOn = 0,
+      onFocus,
+      onBlur,
+      id,
+      size = 'md',
+    },
+    forwardedRef,
+  ) => {
+    const [selectedValue, setSelectedValue] = useControllableState<Date | undefined>({
+      value,
+      defaultValue,
+      onChange: onValueChange,
+    });
+    const [openState, setOpenState] = useControllableState<boolean>({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const isOpen = Boolean(openState) && !disabled;
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const popoverId = React.useId();
+    const position = useAnchoredOverlayPosition({
+      open: isOpen,
+      anchorRef: containerRef,
+      contentRef,
+      portal,
+      minimumWidth: 320,
+      estimatedHeight: 360,
+    });
+
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        containerRef.current = node;
+        if (typeof forwardedRef === 'function') forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef],
+    );
+    const closePicker = React.useCallback(() => setOpenState(false), [setOpenState]);
+    const openPicker = React.useCallback(() => {
+      if (!disabled) setOpenState(true);
+    }, [disabled, setOpenState]);
+
+    useOverlayBehavior({
+      open: isOpen,
+      contentRef,
+      rootRef: containerRef,
+      triggerRef,
+      onDismiss: closePicker,
+      modal: false,
+      dismissOnEscape: true,
+      dismissOnInteractOutside: true,
+      initialFocus: false,
+      restoreFocus: true,
+    });
+
+    React.useEffect(() => {
+      if (disabled && openState) setOpenState(false);
+    }, [disabled, openState, setOpenState]);
+
+    const calendarButton = showCalendarButton ? (
+      <IconButton
+        ref={triggerRef}
+        type="button"
+        size="sm"
+        icon={<Icon symbol="calendar_today" />}
+        disabled={disabled}
+        aria-label="Open calendar"
+        aria-expanded={isOpen}
+        aria-haspopup="dialog"
+        aria-controls={isOpen ? popoverId : undefined}
+        className="-mr-1"
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          setOpenState(!isOpen);
+        }}
+      />
+    ) : undefined;
+
+    const content = isOpen ? (
+      <div
+        ref={contentRef}
+        id={popoverId}
+        role="dialog"
+        aria-label={calendarLabel}
+        data-side={position.side}
+        className={cn(
+          'z-[var(--z-popover,2000)] transition-none',
+          portal ? 'fixed' : 'absolute top-[calc(100%+var(--spacing-2))] left-0 w-full min-w-80',
+        )}
+        style={
+          portal
+            ? {
+                top: position.top,
+                left: position.left,
+                width: position.width,
+                visibility: position.positioned ? 'visible' : 'hidden',
+                ...getPortalLayerStyle(containerRef.current),
+              }
+            : undefined
+        }
+      >
+        <div className="animate-surface-enter">
+          <Calendar
+            selectedDate={selectedValue}
+            onDateSelect={(date) => {
+              setSelectedValue(date);
+              closePicker();
+            }}
+            min={min}
+            max={max}
+            locale={locale}
+            weekStartsOn={weekStartsOn}
+            autoFocus
+            aria-label={calendarLabel}
+            className="max-w-none"
+          />
+        </div>
+      </div>
+    ) : null;
+
+    return (
+      <div ref={setRefs} className={cn('relative w-full', className)}>
+        <DateInput
+          value={selectedValue}
+          onValueChange={setSelectedValue}
+          label={label}
+          hideLabel={hideLabel}
+          disabled={disabled}
+          required={required}
+          invalid={invalid}
+          description={description}
+          errorMessage={errorMessage}
+          variant={variant}
+          locale={locale}
+          format={format}
+          min={min}
+          max={max}
+          name={name}
+          trailingIcon={calendarButton}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onKeyDown={(event) => {
+            if (event.altKey && event.key === 'ArrowDown') {
+              event.preventDefault();
+              openPicker();
+            }
+          }}
+          id={id}
+          size={size}
+        />
+
+        {portal && content && typeof document !== 'undefined'
+          ? createPortal(content, document.body)
+          : content}
+      </div>
+    );
+  },
+);
+
+DatePicker.displayName = 'DatePicker';

package/registry/components/date-range-picker.tsx

@@ -0,0 +1,449 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { Text } from '@/primitives/text';
+import { Button, type ButtonProps } from '@/components/ui/button';
+import { Dialog } from '@/components/ui/dialog';
+import { Icon } from '@/components/ui/icon';
+import { IconButton } from '@/components/ui/icon-button';
+import { Ripple } from '@/components/ui/ripple';
+
+export type DateRangeValue = {
+  start: Date;
+  end?: Date;
+};
+
+export interface DateRangePickerProps {
+  value?: DateRangeValue;
+  defaultValue?: DateRangeValue;
+  onValueChange?: (value: DateRangeValue) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  min?: Date;
+  max?: Date;
+  locale?: string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  label?: string;
+  triggerLabel?: React.ReactNode;
+  applyLabel?: string;
+  cancelLabel?: string;
+  disabled?: boolean;
+  size?: NonNullable<ButtonProps['size']>;
+  triggerVariant?: NonNullable<ButtonProps['variant']>;
+  className?: string;
+  triggerClassName?: string;
+}
+
+function toDateOnly(value: Date) {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+}
+
+function startOfMonth(value: Date) {
+  return new Date(value.getFullYear(), value.getMonth(), 1);
+}
+
+function endOfMonth(value: Date) {
+  return new Date(value.getFullYear(), value.getMonth() + 1, 0);
+}
+
+function addDays(value: Date, amount: number) {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate() + amount);
+}
+
+function addMonths(value: Date, amount: number) {
+  return new Date(value.getFullYear(), value.getMonth() + amount, 1);
+}
+
+function dateKey(value: Date) {
+  return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(
+    value.getDate(),
+  ).padStart(2, '0')}`;
+}
+
+function isSameDay(left: Date, right: Date) {
+  return dateKey(left) === dateKey(right);
+}
+
+function isSameMonth(left: Date, right: Date) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+
+function isDisabledDate(value: Date, min?: Date, max?: Date) {
+  const time = toDateOnly(value).getTime();
+  return Boolean(
+    (min && time < toDateOnly(min).getTime()) || (max && time > toDateOnly(max).getTime()),
+  );
+}
+
+function clampDate(value: Date, min?: Date, max?: Date) {
+  const normalized = toDateOnly(value);
+  if (min && normalized < toDateOnly(min)) return toDateOnly(min);
+  if (max && normalized > toDateOnly(max)) return toDateOnly(max);
+  return normalized;
+}
+
+function normalizeRange(value: DateRangeValue, min?: Date, max?: Date): DateRangeValue {
+  const start = clampDate(value.start, min, max);
+  const end = value.end ? clampDate(value.end, min, max) : undefined;
+  if (!end || end < start) return { start };
+  return { start, end };
+}
+
+function monthCells(month: Date, weekStartsOn: number) {
+  const leading = (month.getDay() - weekStartsOn + 7) % 7;
+  const cells: Array<Date | null> = Array.from({ length: leading }, () => null);
+  for (let day = 1; day <= endOfMonth(month).getDate(); day += 1) {
+    cells.push(new Date(month.getFullYear(), month.getMonth(), day));
+  }
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+}
+
+function weekdayLabels(locale: string | undefined, weekStartsOn: number) {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  const sunday = new Date(2024, 0, 7);
+  return Array.from({ length: 7 }, (_, index) =>
+    formatter.format(addDays(sunday, (weekStartsOn + index) % 7)),
+  );
+}
+
+function RangeCalendar({
+  value,
+  onValueChange,
+  min,
+  max,
+  locale,
+  weekStartsOn,
+}: {
+  value: DateRangeValue;
+  onValueChange: (value: DateRangeValue) => void;
+  min?: Date;
+  max?: Date;
+  locale?: string;
+  weekStartsOn: number;
+}) {
+  const initialDate = clampDate(value.end ?? value.start, min, max);
+  const [currentMonth, setCurrentMonth] = React.useState(() => startOfMonth(initialDate));
+  const [focusedDate, setFocusedDate] = React.useState(initialDate);
+  const dayRefs = React.useRef(new Map<string, HTMLButtonElement>());
+  const monthFormatter = React.useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }),
+    [locale],
+  );
+  const dateFormatter = React.useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: 'long' }),
+    [locale],
+  );
+  const weekdays = React.useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
+  const cells = React.useMemo(
+    () => monthCells(currentMonth, weekStartsOn),
+    [currentMonth, weekStartsOn],
+  );
+  const monthLabel = monthFormatter.format(currentMonth);
+  const canGoPrevious = !min || endOfMonth(addMonths(currentMonth, -1)) >= toDateOnly(min);
+  const canGoNext = !max || startOfMonth(addMonths(currentMonth, 1)) <= toDateOnly(max);
+
+  const focusDate = React.useCallback(
+    (next: Date) => {
+      const normalized = clampDate(next, min, max);
+      setFocusedDate(normalized);
+      if (!isSameMonth(normalized, currentMonth)) setCurrentMonth(startOfMonth(normalized));
+      window.requestAnimationFrame(() => dayRefs.current.get(dateKey(normalized))?.focus());
+    },
+    [currentMonth, max, min],
+  );
+
+  const selectDate = React.useCallback(
+    (next: Date) => {
+      const selected = toDateOnly(next);
+      if (isDisabledDate(selected, min, max)) return;
+      if (value.end || selected < value.start) {
+        onValueChange({ start: selected });
+      } else {
+        onValueChange({ start: value.start, end: selected });
+      }
+      setFocusedDate(selected);
+    },
+    [max, min, onValueChange, value.end, value.start],
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, date: Date) => {
+    let next: Date | undefined;
+    switch (event.key) {
+      case 'ArrowLeft':
+        next = addDays(date, -1);
+        break;
+      case 'ArrowRight':
+        next = addDays(date, 1);
+        break;
+      case 'ArrowUp':
+        next = addDays(date, -7);
+        break;
+      case 'ArrowDown':
+        next = addDays(date, 7);
+        break;
+      case 'Home':
+        next = addDays(date, -((date.getDay() - weekStartsOn + 7) % 7));
+        break;
+      case 'End':
+        next = addDays(date, 6 - ((date.getDay() - weekStartsOn + 7) % 7));
+        break;
+      case 'PageUp':
+        next = addMonths(date, -1);
+        break;
+      case 'PageDown':
+        next = addMonths(date, 1);
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        selectDate(date);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    focusDate(next);
+  };
+
+  return (
+    <div className="border-outline-soft overflow-hidden rounded-sm border">
+      <div className="border-outline-weak flex h-12 items-center justify-between border-b px-2">
+        <IconButton
+          size="sm"
+          icon={<Icon symbol="chevron_left" />}
+          aria-label="Previous month"
+          disabled={!canGoPrevious}
+          onClick={() => setCurrentMonth((month) => startOfMonth(addMonths(month, -1)))}
+        />
+        <Text as="span" variant="titleSmall" className="font-semibold" aria-live="polite">
+          {monthLabel}
+        </Text>
+        <IconButton
+          size="sm"
+          icon={<Icon symbol="chevron_right" />}
+          aria-label="Next month"
+          disabled={!canGoNext}
+          onClick={() => setCurrentMonth((month) => startOfMonth(addMonths(month, 1)))}
+        />
+      </div>
+      <div role="grid" aria-label={`${monthLabel} date range`} className="p-2">
+        <div role="row" className="grid grid-cols-7">
+          {weekdays.map((weekday, index) => (
+            <Text
+              key={`${weekday}-${index}`}
+              as="span"
+              variant="labelSmall"
+              role="columnheader"
+              className="text-on-surface-variant py-2 text-center"
+            >
+              {weekday}
+            </Text>
+          ))}
+        </div>
+        {Array.from({ length: cells.length / 7 }, (_, rowIndex) => (
+          <div key={rowIndex} role="row" className="grid grid-cols-7 gap-y-1">
+            {cells.slice(rowIndex * 7, rowIndex * 7 + 7).map((date, columnIndex) => {
+              if (!date) {
+                return (
+                  <span
+                    key={`empty-${columnIndex}`}
+                    role="gridcell"
+                    aria-hidden="true"
+                    className="h-10"
+                  />
+                );
+              }
+              const start = isSameDay(date, value.start);
+              const end = Boolean(value.end && isSameDay(date, value.end));
+              const inRange = Boolean(value.end && date > value.start && date < value.end);
+              const disabled = isDisabledDate(date, min, max);
+              const today = isSameDay(date, new Date());
+              const focusable = isSameDay(date, focusedDate);
+
+              return (
+                <button
+                  key={dateKey(date)}
+                  ref={(node) => {
+                    const key = dateKey(date);
+                    if (node) dayRefs.current.set(key, node);
+                    else dayRefs.current.delete(key);
+                  }}
+                  type="button"
+                  role="gridcell"
+                  disabled={disabled}
+                  aria-label={dateFormatter.format(date)}
+                  aria-selected={start || end || inRange}
+                  aria-current={today ? 'date' : undefined}
+                  tabIndex={focusable ? 0 : -1}
+                  className={cn(
+                    'relative flex h-10 items-center justify-center overflow-hidden',
+                    'duration-short ease-standard transition-colors',
+                    'focus-visible:ring-focus-ring focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none',
+                    start || end
+                      ? 'bg-primary text-on-primary rounded-sm font-semibold'
+                      : inRange
+                        ? 'bg-secondary-container text-on-secondary-container'
+                        : today
+                          ? 'ring-primary text-primary rounded-sm font-medium ring-1 ring-inset'
+                          : 'text-on-surface hover:bg-state-hover rounded-sm',
+                    disabled && 'cursor-not-allowed opacity-38',
+                  )}
+                  onClick={() => selectDate(date)}
+                  onFocus={() => setFocusedDate(date)}
+                  onKeyDown={(event) => handleKeyDown(event, date)}
+                >
+                  <Ripple disabled={disabled} />
+                  <Text variant="bodyMedium" className="relative z-10">
+                    {date.getDate()}
+                  </Text>
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePickerProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      min,
+      max,
+      locale,
+      weekStartsOn = 0,
+      label = 'Date range',
+      triggerLabel,
+      applyLabel = 'Apply',
+      cancelLabel = 'Cancel',
+      disabled = false,
+      size = 'md',
+      triggerVariant = 'outlined',
+      className,
+      triggerClassName,
+    },
+    forwardedRef,
+  ) => {
+    const today = React.useMemo(() => toDateOnly(new Date()), []);
+    const fallback = React.useMemo(
+      () => normalizeRange(defaultValue ?? { start: today, end: today }, min, max),
+      [defaultValue, max, min, today],
+    );
+    const [selectedRange, setSelectedRange] = useControllableState<DateRangeValue>({
+      value: value ? normalizeRange(value, min, max) : undefined,
+      defaultValue: fallback,
+      onChange: onValueChange,
+    });
+    const [isOpen = false, setIsOpen] = useControllableState<boolean>({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [draft, setDraft] = React.useState<DateRangeValue>(() => selectedRange ?? fallback);
+    const dateFormatter = React.useMemo(
+      () => new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+      [locale],
+    );
+    const resolvedRange = selectedRange ?? fallback;
+    const formattedRange = resolvedRange.end
+      ? `${dateFormatter.format(resolvedRange.start)} – ${dateFormatter.format(resolvedRange.end)}`
+      : `${dateFormatter.format(resolvedRange.start)} – Select end date`;
+
+    const changeOpen = (next: boolean) => {
+      if (next) setDraft(resolvedRange);
+      setIsOpen(next);
+    };
+
+    return (
+      <div className={cn('inline-flex', className)}>
+        <Button
+          ref={forwardedRef}
+          type="button"
+          size={size}
+          variant={triggerVariant}
+          leadingIcon={<Icon symbol="date_range" />}
+          disabled={disabled}
+          aria-label={`${label}: ${formattedRange}`}
+          aria-haspopup="dialog"
+          aria-expanded={isOpen}
+          className={triggerClassName}
+          onClick={() => changeOpen(true)}
+        >
+          {triggerLabel ?? formattedRange}
+        </Button>
+        <Dialog
+          open={isOpen && !disabled}
+          onOpenChange={changeOpen}
+          title={label}
+          description="Choose the first and last day included in this range."
+          mobilePresentation="fullscreen"
+          className="medium:max-w-110"
+          contentClassName="space-y-4"
+          actions={
+            <>
+              <Button variant="text" size="sm" onClick={() => changeOpen(false)}>
+                {cancelLabel}
+              </Button>
+              <Button
+                size="sm"
+                disabled={!draft.end}
+                onClick={() => {
+                  if (!draft.end) return;
+                  setSelectedRange(normalizeRange(draft, min, max));
+                  changeOpen(false);
+                }}
+              >
+                {applyLabel}
+              </Button>
+            </>
+          }
+        >
+          <div className="grid grid-cols-2 gap-3">
+            <div className="bg-surface-container-low rounded-sm px-3 py-2">
+              <Text variant="labelSmall" className="text-on-surface-variant">
+                Start date
+              </Text>
+              <Text variant="bodyMedium" className="mt-0.5 font-medium">
+                {dateFormatter.format(draft.start)}
+              </Text>
+            </div>
+            <div className="bg-surface-container-low rounded-sm px-3 py-2">
+              <Text variant="labelSmall" className="text-on-surface-variant">
+                End date
+              </Text>
+              <Text variant="bodyMedium" className="mt-0.5 font-medium">
+                {draft.end ? dateFormatter.format(draft.end) : 'Select a date'}
+              </Text>
+            </div>
+          </div>
+          <RangeCalendar
+            value={draft}
+            onValueChange={setDraft}
+            min={min}
+            max={max}
+            locale={locale}
+            weekStartsOn={weekStartsOn}
+          />
+          {!draft.end ? (
+            <Text variant="bodySmall" className="text-primary" aria-live="polite">
+              Select an end date to complete the range.
+            </Text>
+          ) : null}
+        </Dialog>
+      </div>
+    );
+  },
+);
+
+DateRangePicker.displayName = 'DateRangePicker';