@cdx-ui/components 0.0.1-beta.140 → 0.0.1-beta.141

package/src/components/DateTimeField/index.tsx

@@ -0,0 +1,128 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  DateTimeFieldInput as DateTimeFieldInputPrimitive,
+  DateTimeFieldRoot as DateTimeFieldRootPrimitive,
+  DateTimeFieldSegment as DateTimeFieldSegmentPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  type DateTimeFieldRootProps as DateTimeFieldRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { DateField } from '../DateField';
+import {
+  dateFieldInputVariants,
+  dateFieldRootVariants,
+  dateFieldSegmentVariants,
+  type DateFieldGroupVariantProps,
+} from '../DateField/styles';
+
+const SCOPE = 'DATE_FIELD';
+
+type DateFieldStyleContext = DateFieldGroupVariantProps & {
+  fullWidth?: boolean;
+};
+
+const useDateFieldStyleContext = (): DateFieldStyleContext =>
+  (useParentContext()[SCOPE] as DateFieldStyleContext | undefined) ?? {};
+
+export interface DateTimeFieldProps
+  extends DateTimeFieldRootPrimitiveProps, DateFieldGroupVariantProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+  /** When true (the default), the group stretches to fill its container; when false, it hugs the segments. */
+  fullWidth?: boolean;
+}
+
+const DateTimeFieldRoot = forwardRef<View, DateTimeFieldProps>(
+  (
+    { className, children, style, variant = 'outline', size = 'default', fullWidth, ...props },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, fullWidth } }),
+      [parent, variant, size, fullWidth],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DateTimeFieldRootPrimitive
+          ref={ref}
+          className={cn(dateFieldRootVariants(), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-time-field' }))}
+        >
+          {children ?? (
+            <DateField.Group>
+              <DateTimeField.Input>
+                {(segment) => <DateTimeField.Segment segment={segment} />}
+              </DateTimeField.Input>
+            </DateField.Group>
+          )}
+        </DateTimeFieldRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DateTimeFieldRoot.displayName = 'DateTimeField';
+
+const DateTimeFieldInput = forwardRef<
+  View,
+  {
+    children: (segment: import('@cdx-ui/formatters').DateSegment) => ReactNode;
+    className?: string;
+  } & Omit<ViewProps, 'children'>
+>(({ className, style, ...props }, ref) => {
+  const { size } = useDateFieldStyleContext();
+  return (
+    <DateTimeFieldInputPrimitive
+      ref={ref}
+      className={cn(dateFieldInputVariants({ size: size ?? 'default' }), className)}
+      style={style}
+      {...props}
+    />
+  );
+});
+
+DateTimeFieldInput.displayName = 'DateTimeField.Input';
+
+const DateTimeFieldSegment = forwardRef<
+  View,
+  {
+    segment: import('@cdx-ui/formatters').DateSegment;
+    className?: string;
+  } & Omit<ViewProps, 'children'>
+>(({ segment, className, style, ...props }, ref) => (
+  <DateTimeFieldSegmentPrimitive
+    ref={ref}
+    segment={segment}
+    className={cn(dateFieldSegmentVariants({ literal: !segment.isEditable }), className)}
+    style={style}
+    {...props}
+    {...mergeDataAttributes(
+      props,
+      dataAttributes({
+        placeholder: segment.isEditable && segment.value == null,
+      }),
+    )}
+  />
+));
+
+DateTimeFieldSegment.displayName = 'DateTimeField.Segment';
+
+type DateTimeFieldCompound = typeof DateTimeFieldRoot & {
+  Group: typeof DateField.Group;
+  Input: typeof DateTimeFieldInput;
+  Segment: typeof DateTimeFieldSegment;
+  Suffix: typeof DateField.Suffix;
+};
+
+export const DateTimeField = Object.assign(DateTimeFieldRoot, {
+  Group: DateField.Group,
+  Input: DateTimeFieldInput,
+  Segment: DateTimeFieldSegment,
+  Suffix: DateField.Suffix,
+}) as DateTimeFieldCompound;

package/src/components/DateTimeList/index.tsx

@@ -0,0 +1,187 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { useCSSVariable } from 'uniwind';
+import {
+  dataAttributes,
+  DATE_TIME_LIST_HEIGHT,
+  DATE_TIME_LIST_ITEM_HEIGHT,
+  DateTimeListColumn as DateTimeListColumnPrimitive,
+  DateTimeListRoot as DateTimeListRootPrimitive,
+  mergeDataAttributes,
+  useDateTimeListColumnContext,
+  useDateTimeListContext,
+  type DateTimeListColumnType,
+  type DateTimeListRootProps as DateTimeListRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { getDateTimeSegmentVisibility } from '@cdx-ui/formatters';
+import { cn } from '@cdx-ui/utils';
+import {
+  dateTimeListColumnsVariants,
+  dateTimeListColumnVariants,
+  dateTimeListEdgeFadeVariants,
+  dateTimeListHighlightVariants,
+  dateTimeListOptionTextVariants,
+  dateTimeListOptionVariants,
+  dateTimeListRootVariants,
+} from './styles';
+
+export interface DateTimeListProps
+  extends DateTimeListRootPrimitiveProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+function DateTimeListDefaultBody() {
+  const { granularity, hour12 } = useDateTimeListContext();
+  const { showTime, showMinute, showSecond } = getDateTimeSegmentVisibility(granularity);
+
+  return (
+    <>
+      <DateTimeListDateColumn />
+      {showTime ? (
+        <>
+          <DateTimeListHourColumn />
+          {showMinute ? <DateTimeListMinuteColumn /> : null}
+          {showSecond ? <DateTimeListSecondColumn /> : null}
+          {hour12 ? <DateTimeListPeriodColumn /> : null}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+/** Cross-platform edge fade (Uniwind gradients are unreliable on native). */
+function EdgeFade({ edge }: { edge: 'top' | 'bottom' }) {
+  const surface = useCSSVariable('--color-surface-primary') || 'transparent';
+  const isTop = edge === 'top';
+  return (
+    <View
+      pointerEvents="none"
+      className={dateTimeListEdgeFadeVariants({ edge })}
+      style={{
+        height: DATE_TIME_LIST_ITEM_HEIGHT * 1.75,
+        experimental_backgroundImage: isTop
+          ? `linear-gradient(to bottom, ${surface as string}, transparent)`
+          : `linear-gradient(to top, ${surface as string}, transparent)`,
+      }}
+    />
+  );
+}
+
+const DateTimeListRoot = forwardRef<View, DateTimeListProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <DateTimeListRootPrimitive
+      ref={ref}
+      className={cn(dateTimeListRootVariants(), className)}
+      style={[{ height: DATE_TIME_LIST_HEIGHT }, style]}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'date-time-list' }))}
+    >
+      <View
+        pointerEvents="none"
+        className={dateTimeListHighlightVariants()}
+        style={{
+          top: (DATE_TIME_LIST_HEIGHT - DATE_TIME_LIST_ITEM_HEIGHT) / 2,
+          height: DATE_TIME_LIST_ITEM_HEIGHT,
+        }}
+      />
+
+      <View className={dateTimeListColumnsVariants()}>
+        {children ?? <DateTimeListDefaultBody />}
+      </View>
+
+      <EdgeFade edge="top" />
+      <EdgeFade edge="bottom" />
+    </DateTimeListRootPrimitive>
+  ),
+);
+
+DateTimeListRoot.displayName = 'DateTimeList';
+
+function ColumnOption({
+  option,
+}: {
+  option: { value: string | number; label: string; selected: boolean };
+}) {
+  const { onSelect, column } = useDateTimeListColumnContext();
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={option.label}
+      accessibilityState={{ selected: option.selected }}
+      onPress={() => onSelect(option.value)}
+      className={dateTimeListOptionVariants()}
+      {...{ 'data-column': column, 'data-selected': option.selected }}
+    >
+      <Text
+        className={dateTimeListOptionTextVariants({ selected: option.selected })}
+        numberOfLines={1}
+      >
+        {option.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function ColumnShell({
+  className,
+  style,
+  column,
+  ...props
+}: ViewProps & { column: DateTimeListColumnType }) {
+  return (
+    <DateTimeListColumnPrimitive
+      column={column}
+      className={cn(dateTimeListColumnVariants({ column }), className)}
+      style={[{ height: DATE_TIME_LIST_HEIGHT }, style]}
+      {...props}
+    >
+      {(option) => <ColumnOption option={option} />}
+    </DateTimeListColumnPrimitive>
+  );
+}
+
+function DateTimeListDateColumn(props: ViewProps) {
+  return <ColumnShell column="date" {...props} />;
+}
+
+function DateTimeListHourColumn(props: ViewProps) {
+  return <ColumnShell column="hour" {...props} />;
+}
+
+function DateTimeListMinuteColumn(props: ViewProps) {
+  return <ColumnShell column="minute" {...props} />;
+}
+
+function DateTimeListSecondColumn(props: ViewProps) {
+  return <ColumnShell column="second" {...props} />;
+}
+
+function DateTimeListTimeColumn(props: ViewProps) {
+  const { granularity } = useDateTimeListContext();
+  const { showMinute, showSecond } = getDateTimeSegmentVisibility(granularity);
+  return (
+    <>
+      <DateTimeListHourColumn {...props} />
+      {showMinute ? <DateTimeListMinuteColumn {...props} /> : null}
+      {showSecond ? <DateTimeListSecondColumn {...props} /> : null}
+    </>
+  );
+}
+
+function DateTimeListPeriodColumn(props: ViewProps) {
+  return <ColumnShell column="period" {...props} />;
+}
+
+type DateTimeListCompound = typeof DateTimeListRoot & {
+  DateColumn: typeof DateTimeListDateColumn;
+  TimeColumn: typeof DateTimeListTimeColumn;
+  PeriodColumn: typeof DateTimeListPeriodColumn;
+};
+
+export const DateTimeList = Object.assign(DateTimeListRoot, {
+  DateColumn: DateTimeListDateColumn,
+  TimeColumn: DateTimeListTimeColumn,
+  PeriodColumn: DateTimeListPeriodColumn,
+}) as DateTimeListCompound;

package/src/components/DateTimeList/styles.ts

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+// Stacking order inside the DateTimeList root: the highlight band sits behind
+// the option columns, and the edge fades sit above both. Uniwind requires
+// statically detectable class names, so each layer is a named literal rather
+// than a computed `z-[...]` string.
+const LAYER_HIGHLIGHT = 'z-[1]';
+const LAYER_COLUMNS = 'z-[2]';
+const LAYER_EDGE_FADE = 'z-[3]';
+
+export const dateTimeListRootVariants = cva(
+  'relative overflow-hidden rounded-[var(--border-radius-default)] bg-surface-primary px-2',
+);
+
+export const dateTimeListHighlightVariants = cva([
+  'absolute left-2 right-2',
+  LAYER_HIGHLIGHT,
+  'rounded-[var(--border-radius-default)] bg-surface-secondary',
+]);
+
+export const dateTimeListColumnsVariants = cva([LAYER_COLUMNS, 'h-full flex-row']);
+
+export const dateTimeListColumnVariants = cva('min-w-0', {
+  variants: {
+    column: {
+      date: 'flex-[1.8]',
+      hour: 'flex-1',
+      minute: 'flex-1',
+      second: 'flex-1',
+      period: 'flex-[0.8]',
+    },
+  },
+  defaultVariants: { column: 'hour' },
+});
+
+export const dateTimeListOptionVariants = cva('h-full items-center justify-center px-1');
+
+export const dateTimeListOptionTextVariants = cva('body-md tabular-nums', {
+  variants: {
+    selected: {
+      true: 'font-semibold text-content-primary',
+      false: 'text-content-tertiary',
+    },
+  },
+  defaultVariants: { selected: false },
+});
+
+export const dateTimeListEdgeFadeVariants = cva(['absolute left-0 right-0', LAYER_EDGE_FADE], {
+  variants: {
+    edge: {
+      top: 'top-0',
+      bottom: 'bottom-0',
+    },
+  },
+  defaultVariants: { edge: 'top' },
+});
+
+export type DateTimeListColumnVariantProps = VariantProps<typeof dateTimeListColumnVariants>;
+export type DateTimeListEdgeFadeVariantProps = VariantProps<typeof dateTimeListEdgeFadeVariants>;

package/src/components/DateTimePicker/index.tsx

@@ -0,0 +1,233 @@
+import { forwardRef, useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Schedule } from '@cdx-ui/icons';
+import {
+  dataAttributes,
+  DateTimePickerContext,
+  DateTimePickerRoot as DateTimePickerRootPrimitive,
+  mergeDataAttributes,
+  useDateTimePickerContext,
+  type DateTimePickerRootProps as DateTimePickerRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { clampDateTimeId, nowDateTimeId, type DateTimeId } from '@cdx-ui/formatters';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { DateTimeList, type DateTimeListProps } from '../DateTimeList';
+import { PickerTrigger, type PickerTriggerProps } from '../picker/PickerTrigger';
+import {
+  PickerBottomSheetSurface,
+  PickerDialogSurface,
+  PickerPopoverSurface,
+} from '../picker/surfaces';
+
+export interface DateTimePickerProps
+  extends DateTimePickerRootPrimitiveProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+
+const DateTimePickerRoot = forwardRef<View, DateTimePickerProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [DATE_FIELD_SCOPE]: { variant: 'outline', size: 'default', fullWidth: true },
+      }),
+      [parent],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DateTimePickerRootPrimitive
+          ref={ref}
+          className={cn('gap-2', className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-time-picker' }))}
+        >
+          {children}
+        </DateTimePickerRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DateTimePickerRoot.displayName = 'DateTimePicker';
+
+type DateTimePickerTriggerProps = Omit<
+  PickerTriggerProps,
+  'open' | 'setOpen' | 'disabled' | 'triggerRef' | 'accessibilityLabel'
+> & {
+  accessibilityLabel?: string;
+};
+
+const DateTimePickerTrigger = forwardRef<View, DateTimePickerTriggerProps>(
+  ({ accessibilityLabel, ...props }, ref) => {
+    const { open, setOpen, disabled, triggerRef, labels } = useDateTimePickerContext();
+    return (
+      <PickerTrigger
+        ref={ref}
+        open={open}
+        setOpen={setOpen}
+        disabled={disabled}
+        triggerRef={triggerRef}
+        accessibilityLabel={accessibilityLabel ?? labels.openDateTimePicker}
+        {...props}
+      />
+    );
+  },
+);
+
+DateTimePickerTrigger.displayName = 'DateTimePicker.Trigger';
+
+const DateTimePickerTriggerIndicator = () => (
+  <Icon as={Schedule} className="text-content-secondary" />
+);
+
+DateTimePickerTriggerIndicator.displayName = 'DateTimePicker.TriggerIndicator';
+
+type DateTimePickerListProps = Omit<
+  DateTimeListProps,
+  | 'value'
+  | 'onValueChange'
+  | 'onUserInteract'
+  | 'granularity'
+  | 'hour12'
+  | 'locale'
+  | 'minValue'
+  | 'maxValue'
+>;
+
+const DateTimePickerList = forwardRef<View, DateTimePickerListProps>(({ ...props }, ref) => {
+  const {
+    value,
+    onValueChange,
+    draftValue,
+    setDraftValue,
+    open,
+    granularity,
+    locale,
+    hour12,
+    minValue,
+    maxValue,
+  } = useDateTimePickerContext();
+  const userInteractedRef = useRef(false);
+
+  useEffect(() => {
+    if (open) {
+      userInteractedRef.current = false;
+    }
+  }, [open]);
+
+  const handleUserInteract = useCallback(() => {
+    userInteractedRef.current = true;
+  }, []);
+
+  const handleValueChange = useCallback(
+    (next: DateTimeId) => {
+      setDraftValue(next);
+      if (!open) {
+        onValueChange?.(next);
+        return;
+      }
+      if (value !== undefined || userInteractedRef.current) {
+        onValueChange?.(next);
+      }
+    },
+    [onValueChange, open, setDraftValue, value],
+  );
+
+  const listValue = open
+    ? (draftValue ??
+      clampDateTimeId(value ?? nowDateTimeId({ granularity }), { min: minValue, max: maxValue }))
+    : value;
+
+  return (
+    <DateTimeList
+      ref={ref}
+      value={listValue}
+      onValueChange={handleValueChange}
+      onUserInteract={handleUserInteract}
+      granularity={granularity}
+      locale={locale}
+      hour12={hour12}
+      minValue={minValue}
+      maxValue={maxValue}
+      {...props}
+    />
+  );
+});
+
+DateTimePickerList.displayName = 'DateTimePicker.List';
+
+function DateTimePickerDialog({ children }: { children: ReactNode }) {
+  const ctx = useDateTimePickerContext();
+  return (
+    <PickerDialogSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <Dialog.Popup className="p-4">
+        <DateTimePickerContext.Provider value={ctx}>{children}</DateTimePickerContext.Provider>
+      </Dialog.Popup>
+    </PickerDialogSurface>
+  );
+}
+
+function DateTimePickerBottomSheet({ children }: { children: ReactNode }) {
+  const ctx = useDateTimePickerContext();
+  return (
+    <PickerBottomSheetSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <DateTimePickerContext.Provider value={ctx}>{children}</DateTimePickerContext.Provider>
+    </PickerBottomSheetSurface>
+  );
+}
+
+function DateTimePickerPopover({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  const ctx = useDateTimePickerContext();
+  return (
+    <PickerPopoverSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+      anchorRef={ctx.anchorRef}
+      triggerRef={ctx.triggerRef}
+      className={className}
+    >
+      <DateTimePickerContext.Provider value={ctx}>{children}</DateTimePickerContext.Provider>
+    </PickerPopoverSurface>
+  );
+}
+
+type DateTimePickerCompound = typeof DateTimePickerRoot & {
+  Trigger: typeof DateTimePickerTrigger;
+  TriggerIndicator: typeof DateTimePickerTriggerIndicator;
+  List: typeof DateTimePickerList;
+  Popover: typeof DateTimePickerPopover;
+  Dialog: typeof DateTimePickerDialog;
+  BottomSheet: typeof DateTimePickerBottomSheet;
+};
+
+export const DateTimePicker = Object.assign(DateTimePickerRoot, {
+  Trigger: DateTimePickerTrigger,
+  TriggerIndicator: DateTimePickerTriggerIndicator,
+  List: DateTimePickerList,
+  Popover: DateTimePickerPopover,
+  Dialog: DateTimePickerDialog,
+  BottomSheet: DateTimePickerBottomSheet,
+}) as DateTimePickerCompound;