aplance-ui 1.0.1

package/registry/components/ui/input-fields/date-picker/types.ts

@@ -0,0 +1,102 @@
+import type { ComponentProps } from "react";
+import type { Matcher } from "react-day-picker";
+import type { BaseInputFieldProps } from "../common/types";
+import type {
+  Align,
+  Popover,
+  PopoverMenu,
+  Position,
+  PopoverTrigger,
+} from "../../../primitives/popover/popover";
+import type { SelectButtonProps } from "../common/select-button/select-button";
+import type { CalendarProps } from "./calendar";
+
+/** Inclusive date range. Both ends are optional to support partial selections. */
+export type DateRange = {
+  from?: Date;
+  to?: Date;
+};
+
+export const datePickerModes = ["single", "range"] as const;
+export type DatePickerMode = (typeof datePickerModes)[number];
+
+export type CommonDatePickerProps = Omit<
+  BaseInputFieldProps,
+  "buttonStyle"
+> & {
+  placeholder?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
+
+  /** Disable days before this date. */
+  minDate?: Date;
+  /** Disable days after this date. */
+  maxDate?: Date;
+  /** Any additional react-day-picker matcher(s) for disabled days. */
+  disabledDates?: Matcher | Matcher[];
+
+  /** Close popover after selection (default: false). */
+  closeOnSelection?: boolean;
+
+  /** Show date input(s) above the calendar for direct keyboard entry (default: true). */
+  showManualInput?: boolean;
+
+  /** Show HH:mm input(s) below the calendar and include time in the value. */
+  showTime?: boolean;
+  /** Optional `step` forwarded to the time input(s) (seconds). */
+  timeStep?: number;
+  /** Time panel display format. Internal value remains 24h Date-based. */
+  timeFormat?: "24h" | "12h";
+  /** Configure nested time picker popover placement while keeping DatePicker defaults. */
+  timePickerPopover?: {
+    position?: Position;
+    align?: Align;
+  };
+  /** Show popover footer actions (Clear/Done) in DatePicker. Default: true. */
+  showActionFooter?: boolean;
+
+  /** Show a clear button on the trigger when a value is set (default: true). */
+  showClear?: boolean;
+  onClear?: () => void;
+  onBlur?: () => void;
+
+  /** How many months the calendar renders. Defaults: single=1, range=2. */
+  numberOfMonths?: number;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** Passed through to react-day-picker. */
+  captionLayout?: CalendarProps["captionLayout"];
+  showWeekNumber?: boolean;
+
+  /** Override the trigger display. Receives the current value + context. */
+  formatDisplay?: (
+    value: Date | DateRange | undefined,
+    context: { mode: DatePickerMode; withTime: boolean },
+  ) => string;
+
+  /** Override how a single `Date` is formatted (used by the default display). */
+  formatDate?: (date: Date, context: { withTime: boolean }) => string;
+
+  popover?: Omit<ComponentProps<typeof Popover>, "children">;
+  popoverTrigger?: ComponentProps<typeof PopoverTrigger>;
+  popoverMenu?: ComponentProps<typeof PopoverMenu>;
+  selectButton?: Omit<SelectButtonProps, "children" | "onClear">;
+  calendar?: Omit<CalendarProps, "mode" | "selected" | "onSelect">;
+};
+
+export type SingleDatePickerProps = CommonDatePickerProps & {
+  mode?: "single";
+  value?: Date;
+  defaultValue?: Date;
+  onChange?: (date: Date | undefined) => void;
+};
+
+export type RangeDatePickerProps = CommonDatePickerProps & {
+  mode: "range";
+  value?: DateRange;
+  defaultValue?: DateRange;
+  onChange?: (range: DateRange | undefined) => void;
+};
+
+export type DatePickerProps =
+  | SingleDatePickerProps
+  | RangeDatePickerProps;

package/registry/components/ui/input-fields/date-picker/utils.ts

@@ -0,0 +1,236 @@
+import type { DatePickerMode, DateRange } from "./types";
+
+export type InternalValue = Date | DateRange | undefined;
+
+const pad2 = (value: number): string => String(value).padStart(2, "0");
+
+export const isValidDate = (value: unknown): value is Date =>
+  value instanceof Date && !Number.isNaN(value.getTime());
+
+/**
+ * Build a Date for the given calendar day, anchored at 12:00 UTC.
+ * Why: anchoring to UTC noon keeps `toISOString()` on the intended day for
+ * users in any timezone within ~±11h of UTC - local midnight crosses the day
+ * boundary when serialized east of UTC, which is the classic cause of
+ * "selected Apr 3 but JSON says Apr 2T18:30Z". Returns undefined for invalid
+ * parts (e.g. Feb 30).
+ */
+const fromCalendarParts = (
+  year: number,
+  month: number,
+  day: number,
+): Date | undefined => {
+  if (month < 1 || month > 12 || day < 1 || day > 31) return undefined;
+  const date = new Date(Date.UTC(year, month - 1, day, 12, 0, 0, 0));
+  if (
+    date.getUTCFullYear() !== year ||
+    date.getUTCMonth() !== month - 1 ||
+    date.getUTCDate() !== day
+  ) {
+    return undefined;
+  }
+  return date;
+};
+
+/**
+ * Anchor `date` to its calendar day in a timezone-safe way so that
+ * `toISOString()` preserves the user-visible day. Use for date-only picker
+ * values; do not use when a specific time of day is meaningful.
+ */
+export const startOfDay = (date: Date): Date =>
+  new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0, 0),
+  );
+
+/** "HH:mm" string for the time portion of `date`. */
+export const toTimeString = (date: Date): string =>
+  `${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
+
+/** "YYYY-MM-DD" string for native date input controls. */
+export const toDateInputString = (date: Date): string =>
+  `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+
+/** Parse a "YYYY-MM-DD" date-input string into a calendar-day Date. */
+export const parseDateInputString = (value: string): Date | undefined => {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return undefined;
+  return fromCalendarParts(Number(match[1]), Number(match[2]), Number(match[3]));
+};
+
+/**
+ * Parse plain-text date input.
+ * Supported formats:
+ * - YYYY-MM-DD
+ * - DD/MM/YYYY
+ * - DD-MM-YYYY
+ * - DD.MM.YYYY
+ */
+export const parseDateTextString = (value: string): Date | undefined => {
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+
+  const fromIso = parseDateInputString(trimmed);
+  if (fromIso) return fromIso;
+
+  const match = /^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/.exec(trimmed);
+  if (!match) return undefined;
+  return fromCalendarParts(Number(match[3]), Number(match[2]), Number(match[1]));
+};
+
+/** Parse "HH:mm" (or "HH:mm:ss") into {hours, minutes}. */
+export const parseTimeString = (
+  value: string,
+): { hours: number; minutes: number } | undefined => {
+  const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+  if (!match) return undefined;
+
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
+    return undefined;
+  }
+
+  return { hours, minutes };
+};
+
+/** Return a new Date with the time portion replaced by `time` ("HH:mm"). */
+export const withTimeString = (date: Date, time: string): Date => {
+  const parsed = parseTimeString(time);
+  const next = new Date(date);
+  if (!parsed) {
+    next.setHours(0, 0, 0, 0);
+    return next;
+  }
+  next.setHours(parsed.hours, parsed.minutes, 0, 0);
+  return next;
+};
+
+/** Return a new Date that keeps `date`'s calendar day but adopts `time`'s H/M. */
+export const mergeDateWithTimeOf = (date: Date, time: Date | undefined): Date => {
+  const next = new Date(date);
+  if (time && isValidDate(time)) {
+    next.setHours(time.getHours(), time.getMinutes(), 0, 0);
+  } else {
+    next.setHours(0, 0, 0, 0);
+  }
+  return next;
+};
+
+/** Default `Intl`-based display for a single date. */
+export const defaultFormatDate = (
+  date: Date,
+  { withTime }: { withTime: boolean },
+): string => {
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+      ...(withTime
+        ? ({ hour: "2-digit", minute: "2-digit" } as const)
+        : undefined),
+    }).format(date);
+  } catch {
+    return date.toDateString();
+  }
+};
+
+export const isRangeValue = (
+  value: Date | DateRange | undefined,
+): value is DateRange =>
+  !!value &&
+  typeof value === "object" &&
+  !(value instanceof Date) &&
+  ("from" in value || "to" in value);
+
+export const hasRangeValue = (range: DateRange | undefined): boolean =>
+  Boolean(range?.from || range?.to);
+
+/** Normalize a single Date input, optionally anchoring to the calendar day. */
+export const coerceToDate = (
+  value: Date | undefined,
+  anchorToDay: boolean,
+): Date | undefined => {
+  if (!isValidDate(value)) return undefined;
+  return anchorToDay ? startOfDay(value) : value;
+};
+
+/** Normalize a DateRange input; returns undefined when both ends are empty. */
+export const coerceToRange = (
+  value: DateRange | undefined,
+  anchorToDay: boolean,
+): DateRange | undefined => {
+  if (!value) return undefined;
+  const from = coerceToDate(value.from, anchorToDay);
+  const to = coerceToDate(value.to, anchorToDay);
+  if (!from && !to) return undefined;
+  return { from, to };
+};
+
+/** First day of `value`'s month, in local time. */
+export const toMonthStart = (value: Date): Date =>
+  new Date(value.getFullYear(), value.getMonth(), 1);
+
+/** First day of the month `amount` offsets from `value`. */
+export const addMonthOffset = (value: Date, amount: number): Date =>
+  new Date(value.getFullYear(), value.getMonth() + amount, 1);
+
+/** True when both dates fall in the same calendar year + month. */
+export const isSameMonth = (a: Date | undefined, b: Date | undefined): boolean =>
+  Boolean(
+    a &&
+      b &&
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth(),
+  );
+
+/** Build the trigger button text for the current value, falling back to placeholders. */
+export const formatTriggerDisplay = (
+  value: InternalValue,
+  mode: DatePickerMode,
+  withTime: boolean,
+  placeholder: string,
+  startPlaceholder: string,
+  endPlaceholder: string,
+  formatDate: (date: Date, ctx: { withTime: boolean }) => string,
+): string => {
+  if (mode === "range") {
+    const range = isRangeValue(value) ? value : undefined;
+    const start = range?.from;
+    const end = range?.to;
+
+    if (!start && !end) return placeholder;
+
+    const startText = start
+      ? formatDate(start, { withTime })
+      : startPlaceholder;
+    const endText = end ? formatDate(end, { withTime }) : endPlaceholder;
+
+    return `${startText} - ${endText}`;
+  }
+
+  const single = value instanceof Date ? value : undefined;
+  if (!single) return placeholder;
+  return formatDate(single, { withTime });
+};
+
+/**
+ * Auto-format a date string as the user types: inserts `-` separators
+ * so that `20260419` becomes `2026-04-19`.
+ */
+export const autoFormatDateText = (raw: string, previousText: string): string => {
+  const digits = raw.replace(/\D/g, "");
+
+  // If user deleted a separator, don't re-insert it (allow backspace).
+  const prevDigits = previousText.replace(/\D/g, "");
+  if (digits.length < prevDigits.length) return raw;
+
+  let formatted = "";
+  for (let i = 0; i < digits.length && i < 8; i++) {
+    if (i === 4 || i === 6) formatted += "-";
+    formatted += digits[i];
+  }
+
+  return formatted;
+};

package/registry/components/ui/input-fields/emoji-picker/emoji-palette.module.css

@@ -0,0 +1,90 @@
+/* Emoji palette - fully custom UI, themed via family tokens.
+   Search bar + scrollable viewport with sticky category headers + grid. */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 22rem;
+  background-color: var(--color-background);
+  font-family: var(--font-family-1);
+  isolation: isolate;
+}
+
+/* ── Search ─────────────────────────────────────────────────────────────── */
+
+.search_wrap {
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+/* ── Viewport ───────────────────────────────────────────────────────────── */
+
+.viewport {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  padding: var(--spacing-3);
+}
+
+/* ── Categories ─────────────────────────────────────────────────────────── */
+
+.category + .category {
+  margin-top: var(--spacing-3);
+}
+
+.category_header {
+  position: sticky;
+  top: calc(var(--spacing-3) * -1);
+  z-index: 1;
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-2) var(--spacing-2);
+  background-color: var(--color-background);
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.02em;
+}
+
+/* ── Grid + emoji buttons ───────────────────────────────────────────────── */
+
+.grid {
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.emoji {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+
+  &:hover {
+    background-color: var(--color-muted);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-ring);
+  }
+}
+
+/* ── Empty state ────────────────────────────────────────────────────────── */
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-sm);
+}

package/registry/components/ui/input-fields/emoji-picker/emoji-palette.tsx

@@ -0,0 +1,168 @@
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+} from "react";
+import clsx from "clsx";
+import { Input } from "../input/input";
+import {
+  DEFAULT_EMOJI_CATEGORIES,
+  searchEmojis,
+  type EmojiCategory,
+  type EmojiEntry,
+} from "./utils";
+import s from "./emoji-palette.module.css";
+
+export type EmojiPaletteProps = {
+  /** Fires with the picked emoji character. */
+  onSelect: (emoji: string) => void;
+  /** Custom dataset. Defaults to ~300 curated emojis bundled inline. */
+  categories?: readonly EmojiCategory[];
+  /** Number of grid columns. Default: 9. */
+  columns?: number;
+  /** Search field placeholder. Default: "Search emojis…". */
+  searchPlaceholder?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+/**
+ * Standalone emoji palette - search + categorized grid + keyboard navigation.
+ * Renderable on its own (e.g. inline in a sidebar) or inside any popover.
+ * Custom-built so every element matches the family's tokens; bundle is tiny
+ * (~10KB inline data, no third-party UI dependency).
+ */
+export const EmojiPalette = ({
+  onSelect,
+  categories = DEFAULT_EMOJI_CATEGORIES,
+  columns = 9,
+  searchPlaceholder = "Search emojis…",
+  className,
+  style,
+}: EmojiPaletteProps) => {
+  const [query, setQuery] = useState("");
+  const [focusedChar, setFocusedChar] = useState<string | null>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  const searchResults = useMemo(
+    () => searchEmojis(query, categories),
+    [query, categories],
+  );
+  const isSearching = query.trim().length > 0;
+
+  // Build a flat list of characters (in display order) for keyboard nav.
+  const flatChars: string[] = useMemo(() => {
+    if (isSearching) return searchResults.map((e) => e.char);
+    return categories.flatMap((c) => c.emojis.map((e) => e.char));
+  }, [isSearching, searchResults, categories]);
+
+  const focusEmoji = useCallback((char: string) => {
+    setFocusedChar(char);
+    const el = gridRef.current?.querySelector<HTMLButtonElement>(
+      `[data-char="${CSS.escape(char)}"]`,
+    );
+    el?.focus();
+  }, []);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (flatChars.length === 0 || !focusedChar) return;
+    const idx = flatChars.indexOf(focusedChar);
+    if (idx === -1) return;
+    let next = idx;
+    switch (e.key) {
+      case "ArrowRight":
+        next = Math.min(idx + 1, flatChars.length - 1);
+        break;
+      case "ArrowLeft":
+        next = Math.max(idx - 1, 0);
+        break;
+      case "ArrowDown":
+        next = Math.min(idx + columns, flatChars.length - 1);
+        break;
+      case "ArrowUp":
+        next = Math.max(idx - columns, 0);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = flatChars.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    if (next !== idx) focusEmoji(flatChars[next]);
+  };
+
+  const renderEmoji = (entry: EmojiEntry) => (
+    <button
+      key={entry.char}
+      type="button"
+      data-char={entry.char}
+      className={s.emoji}
+      title={entry.name}
+      aria-label={entry.name}
+      tabIndex={focusedChar === entry.char ? 0 : -1}
+      onClick={() => onSelect(entry.char)}
+      onFocus={() => setFocusedChar(entry.char)}
+    >
+      {entry.char}
+    </button>
+  );
+
+  // Initialize keyboard focus on the first emoji in view.
+  const firstChar = flatChars[0];
+  if (focusedChar === null && firstChar) {
+    setFocusedChar(firstChar);
+  }
+
+  const gridStyle: CSSProperties = {
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+  };
+
+  return (
+    <div className={clsx(s.root, className)} style={style}>
+      <div className={s.search_wrap}>
+        <Input
+          type="search"
+          placeholder={searchPlaceholder}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          showClear
+          aria-label="Search emojis"
+        />
+      </div>
+
+      <div
+        className={s.viewport}
+        ref={gridRef}
+        onKeyDown={handleKeyDown}
+        role="grid"
+        aria-label={isSearching ? "Search results" : "Emojis"}
+      >
+        {isSearching ? (
+          searchResults.length > 0 ? (
+            <div className={s.grid} style={gridStyle}>
+              {searchResults.map(renderEmoji)}
+            </div>
+          ) : (
+            <div className={s.empty}>No results</div>
+          )
+        ) : (
+          categories.map((cat) => (
+            <section key={cat.id} className={s.category}>
+              <h3 className={s.category_header}>{cat.label}</h3>
+              <div className={s.grid} style={gridStyle}>
+                {cat.emojis.map(renderEmoji)}
+              </div>
+            </section>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};

package/registry/components/ui/input-fields/emoji-picker/emoji-picker.module.css

@@ -0,0 +1,8 @@
+/* Emoji Picker - icon trigger + popover wrapping EmojiPalette.
+   Only the popover sizing lives here; palette internals live in
+   emoji-palette.module.css. */
+
+.menu {
+  --picker-popover-menu-width: 19rem;
+  padding: 0;
+}

package/registry/components/ui/input-fields/emoji-picker/emoji-picker.tsx

@@ -0,0 +1,102 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+import clsx from "clsx";
+import { IconMoodSmile } from "@tabler/icons-react";
+import {
+  Popover,
+  PopoverMenu,
+  PopoverTrigger,
+} from "../../../primitives/popover/popover";
+import { Icon } from "../../../primitives/icon/icon";
+import { Button } from "../../button/button";
+import { EmojiPalette } from "./emoji-palette";
+import sPickerCommon from "../common/picker-popover-common.module.css";
+import s from "./emoji-picker.module.css";
+import type { Align, Position } from "../../../primitives/popover/popover";
+
+export type EmojiPickerProps = {
+  /** Fires with the picked emoji character whenever one is chosen. */
+  onSelect: (emoji: string) => void;
+  /** Custom trigger icon. Defaults to a smile icon. */
+  icon?: ReactNode;
+  /** Number of grid columns in the palette. Default: 9. */
+  columns?: number;
+  /** Popover placement. */
+  popoverPosition?: Position;
+  popoverAlign?: Align;
+  /**
+   * Show the popover footer with a Done action so users can pick multiple
+   * emojis before dismissing. Default: true. Set to `false` to hide the
+   * footer - the picker still stays open after each selection so the
+   * consumer can close it manually via outside-click.
+   */
+  showActionFooter?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+};
+
+/**
+ * Compact icon button that opens a popover containing `<EmojiPalette />`.
+ * Designed for "insert emoji" flows next to text inputs / textareas - not
+ * itself a form field. Use `<EmojiPalette />` directly when you need an
+ * inline picker without a trigger.
+ *
+ * The picker stays open after each selection so users can pick multiple
+ * emojis in one session; close via the footer Done button or by clicking
+ * outside.
+ */
+export const EmojiPicker = ({
+  onSelect,
+  icon,
+  columns = 9,
+  popoverPosition = "bottom",
+  popoverAlign = "end",
+  showActionFooter = true,
+  disabled,
+  className,
+  style,
+}: EmojiPickerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Popover
+      position={popoverPosition}
+      align={popoverAlign}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      closeOnClickOutside
+      className={clsx(sPickerCommon.picker_popover, className)}
+      style={style}
+    >
+      <PopoverTrigger asChild disabled={disabled}>
+        {icon ?? (
+          <Icon aria-hidden="true" clickable>
+            <IconMoodSmile />
+          </Icon>
+        )}
+      </PopoverTrigger>
+
+      {!disabled && (
+        <PopoverMenu
+          className={clsx(sPickerCommon.picker_popover_menu_base, s.menu)}
+          matchTriggerWidth={false}
+        >
+          <EmojiPalette columns={columns} onSelect={onSelect} />
+
+          {showActionFooter && (
+            <div className={sPickerCommon.picker_actions_footer}>
+              <Button
+                type="button"
+                variant="primary"
+                size="sm"
+                onClick={() => setIsOpen(false)}
+              >
+                Done
+              </Button>
+            </div>
+          )}
+        </PopoverMenu>
+      )}
+    </Popover>
+  );
+};