@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/month-picker.tsx

@@ -0,0 +1,363 @@
+'use client';
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+import { type FieldSize } from '@/lib/field-size';
+import { type FieldShellVariant } from '@/lib/field-shell';
+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 { Surface } from '@/primitives/surface';
+import { Text } from '@/primitives/text';
+import { IconButton } from '@/components/ui/icon-button';
+import { TextField } from '@/components/ui/text-field';
+
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+] as const;
+
+export type MonthPickerProps = {
+  variant?: FieldShellVariant;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  error?: boolean;
+  helperText?: string;
+  className?: string;
+  min?: string;
+  max?: string;
+  size?: FieldSize;
+};
+
+export const MonthPicker: React.FC<MonthPickerProps> = ({
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  label = 'Month',
+  disabled = false,
+  error = false,
+  helperText,
+  className,
+  variant = 'outlined',
+  min,
+  max,
+  size = 'md',
+}) => {
+  const [selectedValue, setSelectedValue] = useControllableState<string>({
+    value,
+    defaultValue: normalizeMonthValue(defaultValue) ?? '',
+    onChange: onValueChange,
+  });
+  const [openState, setOpenState] = useControllableState<boolean>({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  const normalizedValue = normalizeMonthValue(selectedValue) ?? '';
+  const normalizedMin = normalizeMonthValue(min);
+  const normalizedMax = normalizeMonthValue(max);
+  const isOpen = openState ?? false;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [viewYear, setViewYear] = useState(
+    () => readYear(normalizedValue) ?? new Date().getFullYear(),
+  );
+  const [inputValue, setInputValue] = useState(() => formatMonthLabel(normalizedValue));
+  const inputFocusedRef = useRef(false);
+  const popoverPosition = useAnchoredOverlayPosition({
+    open: isOpen,
+    anchorRef: containerRef,
+    contentRef: popoverRef,
+    portal: true,
+    minimumWidth: 320,
+    estimatedHeight: 280,
+  });
+
+  const displayValue = useMemo(() => formatMonthLabel(normalizedValue), [normalizedValue]);
+
+  useEffect(() => {
+    if (!inputFocusedRef.current) setInputValue(displayValue);
+  }, [displayValue]);
+
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    setViewYear(readYear(normalizedValue) ?? new Date().getFullYear());
+    setOpenState(true);
+  }, [disabled, normalizedValue, setOpenState]);
+
+  const selectMonth = useCallback(
+    (monthIndex: number) => {
+      const nextValue = `${viewYear}-${String(monthIndex + 1).padStart(2, '0')}`;
+      if (isMonthDisabled(nextValue, normalizedMin, normalizedMax)) return;
+      setSelectedValue(nextValue);
+      setInputValue(formatMonthLabel(nextValue));
+      setOpenState(false);
+    },
+    [normalizedMax, normalizedMin, setOpenState, setSelectedValue, viewYear],
+  );
+
+  const commitInputValue = useCallback(() => {
+    const nextValue = parseMonthInput(inputValue);
+    inputFocusedRef.current = false;
+
+    if (!inputValue.trim()) {
+      setSelectedValue('');
+      setInputValue('');
+      setOpenState(false);
+      return;
+    }
+
+    if (!nextValue || isMonthDisabled(nextValue, normalizedMin, normalizedMax)) {
+      setInputValue(displayValue);
+      return;
+    }
+
+    setSelectedValue(nextValue);
+    setViewYear(readYear(nextValue) ?? viewYear);
+    setInputValue(formatMonthLabel(nextValue));
+    setOpenState(false);
+  }, [
+    displayValue,
+    inputValue,
+    normalizedMax,
+    normalizedMin,
+    setOpenState,
+    setSelectedValue,
+    viewYear,
+  ]);
+  const scheduleInputCommit = useCallback(() => {
+    window.setTimeout(() => {
+      const activeElement = document.activeElement;
+      if (
+        activeElement &&
+        (containerRef.current?.contains(activeElement) ||
+          popoverRef.current?.contains(activeElement))
+      ) {
+        return;
+      }
+      commitInputValue();
+    }, 0);
+  }, [commitInputValue]);
+
+  useOverlayBehavior({
+    open: isOpen,
+    contentRef: popoverRef,
+    rootRef: containerRef,
+    onDismiss: () => setOpenState(false),
+    modal: false,
+    dismissOnEscape: true,
+    dismissOnInteractOutside: true,
+    initialFocus: true,
+    restoreFocus: true,
+  });
+
+  const pickerButton = (
+    <button
+      type="button"
+      disabled={disabled}
+      aria-label="Open month picker"
+      aria-expanded={isOpen}
+      aria-haspopup="dialog"
+      tabIndex={-1}
+      className={cn(
+        'rounded-icon-button -mr-1 p-1 transition-colors',
+        'hover:bg-state-hover focus-visible:bg-state-focus focus-visible:outline-none',
+        error ? 'text-error' : 'text-on-surface-variant',
+      )}
+      onClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (isOpen) {
+          setOpenState(false);
+        } else {
+          openPicker();
+        }
+      }}
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z" />
+      </svg>
+    </button>
+  );
+
+  return (
+    <div className={cn('relative w-full', className)} ref={containerRef}>
+      <TextField
+        disabled={disabled}
+        {...(error ? { errorMessage: helperText } : { description: helperText })}
+        invalid={error}
+        label={label}
+        size={size}
+        trailingIcon={pickerButton}
+        value={inputValue}
+        variant={variant}
+        onClick={openPicker}
+        onBlur={scheduleInputCommit}
+        onValueChange={setInputValue}
+        onFocus={() => {
+          inputFocusedRef.current = true;
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commitInputValue();
+            return;
+          }
+          if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            openPicker();
+          }
+        }}
+      />
+
+      {isOpen && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={popoverRef}
+              role="dialog"
+              aria-label="Choose month"
+              tabIndex={-1}
+              className="fixed z-[var(--z-popover,2000)] transition-none"
+              style={{
+                top: popoverPosition.top,
+                left: popoverPosition.left,
+                width: popoverPosition.width,
+                visibility: popoverPosition.positioned ? 'visible' : 'hidden',
+                ...getPortalLayerStyle(containerRef.current),
+              }}
+            >
+              <Surface tone="surface" elevation={1} className="overflow-hidden rounded-sm">
+                <div className="border-outline-weak flex items-center justify-between border-b p-3">
+                  <IconButton
+                    aria-label="Previous year"
+                    icon={<span className="material-symbols-outlined">chevron_left</span>}
+                    onClick={() => setViewYear((year) => year - 1)}
+                  />
+                  <Text as="span" variant="titleMedium" aria-live="polite">
+                    {viewYear}
+                  </Text>
+                  <IconButton
+                    aria-label="Next year"
+                    icon={<span className="material-symbols-outlined">chevron_right</span>}
+                    onClick={() => setViewYear((year) => year + 1)}
+                  />
+                </div>
+                <div
+                  className="grid grid-cols-3 gap-2 p-3"
+                  role="grid"
+                  aria-label={`Months in ${viewYear}`}
+                >
+                  {MONTHS.map((month, monthIndex) => {
+                    const optionValue = `${viewYear}-${String(monthIndex + 1).padStart(2, '0')}`;
+                    const selected = normalizedValue === optionValue;
+                    const disabledMonth = isMonthDisabled(
+                      optionValue,
+                      normalizedMin,
+                      normalizedMax,
+                    );
+
+                    return (
+                      <button
+                        key={month}
+                        type="button"
+                        disabled={disabledMonth}
+                        role="gridcell"
+                        aria-selected={selected}
+                        aria-label={`${month} ${viewYear}`}
+                        className={cn(
+                          'text-label-large relative min-h-10 overflow-hidden rounded-sm px-2 transition-colors',
+                          'focus-visible:ring-focus-ring focus-visible:ring-2 focus-visible:outline-none',
+                          selected
+                            ? 'bg-primary text-on-primary'
+                            : 'text-on-surface hover:bg-state-hover',
+                          disabledMonth && 'pointer-events-none cursor-not-allowed opacity-38',
+                        )}
+                        onClick={() => selectMonth(monthIndex)}
+                      >
+                        {month.slice(0, 3)}
+                      </button>
+                    );
+                  })}
+                </div>
+              </Surface>
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+};
+
+MonthPicker.displayName = 'MonthPicker';
+
+function normalizeMonthValue(value?: string) {
+  const trimmed = value?.trim();
+  if (!trimmed || !/^\d{4}-\d{2}$/.test(trimmed)) return undefined;
+  const month = Number(trimmed.slice(5));
+  if (month < 1 || month > 12) return undefined;
+  return trimmed;
+}
+
+function readYear(value: string) {
+  const normalized = normalizeMonthValue(value);
+  return normalized ? Number(normalized.slice(0, 4)) : null;
+}
+
+function parseMonthInput(value: string): string | undefined {
+  const normalized = normalizeMonthValue(value);
+  if (normalized) return normalized;
+
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+
+  const numeric = /^(0?[1-9]|1[0-2])[/\-\s]+(\d{4})$/.exec(trimmed);
+  if (numeric?.[1] && numeric[2]) {
+    return `${numeric[2]}-${numeric[1].padStart(2, '0')}`;
+  }
+
+  const named = /^([a-zA-Z]+)\s+(\d{4})$/.exec(trimmed);
+  if (!named?.[1] || !named[2]) return undefined;
+
+  const monthIndex = MONTHS.findIndex((month) =>
+    month.toLowerCase().startsWith(named[1]!.toLowerCase()),
+  );
+  if (monthIndex < 0) return undefined;
+  return `${named[2]}-${String(monthIndex + 1).padStart(2, '0')}`;
+}
+
+function formatMonthLabel(value: string) {
+  const normalized = normalizeMonthValue(value);
+  if (!normalized) return '';
+  const year = Number(normalized.slice(0, 4));
+  const month = Number(normalized.slice(5, 7));
+  return new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' }).format(
+    new Date(year, month - 1, 1),
+  );
+}
+
+function isMonthDisabled(value: string, min?: string, max?: string) {
+  if (min && value < min) return true;
+  if (max && value > max) return true;
+  return false;
+}

package/registry/components/navigation-bar.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import React from 'react';
+import { cn, focusRing } from '@/lib/utils';
+import {
+  getVisibleNavigationItems,
+  NavigationAction,
+  useNavigationSelection,
+} from '@/lib/navigation-action';
+import { NavigationIcon } from '@/lib/navigation-visuals';
+import type { NavigationPresentationProps } from '@/types/navigation';
+import { Ripple } from '@/components/ui/ripple';
+
+export interface NavigationBarProps
+  extends
+    NavigationPresentationProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'defaultValue' | 'onSelect'> {
+  'aria-label': string;
+  itemClassName?: string;
+}
+
+export function NavigationBar({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  onItemSelect,
+  renderLink,
+  className,
+  'aria-label': ariaLabel,
+  itemClassName,
+  ...props
+}: NavigationBarProps) {
+  const { currentValue, selectItem } = useNavigationSelection({
+    value,
+    defaultValue,
+    onValueChange,
+    onItemSelect,
+  });
+
+  return (
+    <nav
+      className={cn(
+        'border-outline-soft bg-surface-container-low absolute right-0 bottom-0 left-0 z-30 flex h-20 items-center justify-around border-t px-4 pb-4',
+        className,
+      )}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {getVisibleNavigationItems(items).map((item) => {
+        const active = currentValue === item.id;
+        return (
+          <NavigationAction
+            key={item.id}
+            item={item}
+            active={active}
+            onActivate={selectItem}
+            renderLink={renderLink}
+            className={cn(
+              'focus-visible:outline-focus-ring group relative flex h-full min-w-16 flex-col items-center justify-center gap-1 px-2 select-none focus-visible:outline-2 focus-visible:outline-offset-[-2px]',
+              focusRing,
+              itemClassName,
+            )}
+          >
+            <span className="relative mb-1 h-8 w-16">
+              <span
+                className={cn(
+                  'rounded-button duration-medium ease-standard absolute inset-0 overflow-hidden transition-all',
+                  active
+                    ? 'bg-secondary-container scale-x-100 opacity-100'
+                    : 'group-hover:bg-state-hover scale-x-50 bg-transparent opacity-0',
+                )}
+              >
+                <Ripple center disabled={item.disabled} />
+              </span>
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'relative z-10 flex h-full w-full items-center justify-center transition-colors',
+                  active
+                    ? 'text-on-secondary-container'
+                    : 'text-on-surface-variant group-hover:text-on-surface',
+                )}
+              >
+                {item.icon ? (
+                  <NavigationIcon
+                    icon={active && item.activeIcon ? item.activeIcon : item.icon}
+                    active={active}
+                    size="md"
+                  />
+                ) : null}
+              </span>
+              {item.badge !== undefined ? (
+                <span className="bg-error text-on-error text-label-small absolute -top-1 right-0 z-20 flex min-h-4 min-w-4 items-center justify-center rounded-full px-1 leading-none">
+                  {item.badge}
+                </span>
+              ) : null}
+            </span>
+            <span
+              className={cn(
+                'text-label-medium w-full truncate text-center font-medium transition-colors',
+                active ? 'text-on-surface' : 'text-on-surface-variant group-hover:text-on-surface',
+              )}
+            >
+              {item.label}
+            </span>
+          </NavigationAction>
+        );
+      })}
+    </nav>
+  );
+}

package/registry/components/navigation-drawer.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import React, { forwardRef, useEffect, useRef, useState, type RefObject } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+import {
+  getVisibleNavigationItems,
+  NavigationAction,
+  useNavigationSelection,
+} from '@/lib/navigation-action';
+import {
+  NavigationDrawerItemContent,
+  getNavigationDrawerItemClasses,
+} from '@/lib/navigation-visuals';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
+import { useScrollLock } from '@/hooks/use-scroll-lock';
+import type { NavigationPresentationProps } from '@/types/navigation';
+import { Ripple } from '@/components/ui/ripple';
+
+export type NavigationDrawerVariant = 'persistent' | 'modal';
+export type NavigationDrawerSide = 'start' | 'end';
+
+export interface NavigationDrawerProps
+  extends
+    NavigationPresentationProps,
+    Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'defaultValue' | 'onSelect'> {
+  'aria-label': string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  variant?: NavigationDrawerVariant;
+  side?: NavigationDrawerSide;
+  headline?: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  triggerRef?: RefObject<HTMLElement | null>;
+}
+
+export const NavigationDrawer = forwardRef<HTMLElement, NavigationDrawerProps>(
+  (
+    {
+      items,
+      value,
+      defaultValue,
+      onValueChange,
+      onItemSelect,
+      renderLink,
+      open,
+      defaultOpen = true,
+      onOpenChange,
+      variant = 'persistent',
+      side = 'start',
+      headline,
+      header,
+      footer,
+      className,
+      triggerRef,
+      'aria-label': ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const panelRef = useRef<HTMLElement | null>(null);
+    const overlayRootRef = useRef<HTMLDivElement | null>(null);
+    const [mounted, setMounted] = useState(false);
+    const [isOpen = true, setIsOpen] = useControllableState<boolean>({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const { currentValue, selectItem } = useNavigationSelection({
+      value,
+      defaultValue,
+      onValueChange,
+      onItemSelect,
+    });
+    const isModal = variant === 'modal';
+
+    useEffect(() => setMounted(true), []);
+
+    useScrollLock(isModal && isOpen);
+    useOverlayBehavior({
+      open: isModal && isOpen && mounted,
+      contentRef: panelRef,
+      rootRef: overlayRootRef,
+      triggerRef,
+      onDismiss: () => setIsOpen(false),
+      modal: true,
+      dismissOnInteractOutside: true,
+    });
+
+    const setPanelRef = (node: HTMLElement | null) => {
+      panelRef.current = node;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    };
+
+    const panel = (
+      <nav
+        ref={setPanelRef}
+        className={cn(
+          'bg-surface-container-low border-outline-soft duration-emphasized ease-emphasized w-navigation-drawer flex h-full max-w-[85vw] flex-col overflow-y-auto border-r transition-transform',
+          side === 'end' && 'border-r-0 border-l',
+          !isOpen && side === 'start' && 'invisible -translate-x-full',
+          !isOpen && side === 'end' && 'invisible translate-x-full',
+          isModal && 'shadow-3 relative z-10',
+          isModal && side === 'start' && 'rounded-e-[2rem] border-none',
+          isModal && side === 'end' && 'rounded-s-[2rem] border-none',
+          className,
+        )}
+        aria-label={ariaLabel}
+        {...props}
+      >
+        {header ? <div className="px-4 pt-4">{header}</div> : null}
+        {headline ? (
+          <div className="text-title-small text-on-surface-variant px-5 pt-4 pb-2 font-semibold">
+            {headline}
+          </div>
+        ) : null}
+        <div className="flex flex-1 flex-col gap-1 py-2">
+          {getVisibleNavigationItems(items).map((item) => {
+            const active = currentValue === item.id;
+            return (
+              <div key={item.id} className="w-full px-4">
+                <NavigationAction
+                  item={item}
+                  active={active}
+                  onActivate={(selectedItem) => {
+                    selectItem(selectedItem);
+                    if (isModal) setIsOpen(false);
+                  }}
+                  renderLink={renderLink}
+                  className={getNavigationDrawerItemClasses({
+                    active,
+                    disabled: item.disabled,
+                  })}
+                >
+                  <NavigationDrawerItemContent
+                    icon={item.icon}
+                    activeIcon={item.activeIcon}
+                    badge={item.badge}
+                    active={active}
+                    disabled={item.disabled}
+                    ripple={<Ripple disabled={item.disabled ?? false} />}
+                  >
+                    {item.label}
+                  </NavigationDrawerItemContent>
+                </NavigationAction>
+              </div>
+            );
+          })}
+        </div>
+        {footer ? <div className="mt-auto px-4 py-4">{footer}</div> : null}
+      </nav>
+    );
+
+    if (!isModal) return panel;
+    if (!isOpen || !mounted || typeof document === 'undefined') return null;
+
+    return createPortal(
+      <div
+        ref={overlayRootRef}
+        className={cn(
+          'fixed inset-0 z-[var(--z-modal,3000)] flex',
+          side === 'end' ? 'justify-end' : 'justify-start',
+        )}
+        role="presentation"
+      >
+        <div
+          className="bg-scrim absolute inset-0"
+          aria-hidden="true"
+          onMouseDown={() => setIsOpen(false)}
+        />
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label={ariaLabel}
+          className="relative z-10 h-full"
+        >
+          {panel}
+        </div>
+      </div>,
+      document.body,
+    );
+  },
+);
+
+NavigationDrawer.displayName = 'NavigationDrawer';