@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

package/src/components/DateRangePicker/index.tsx

@@ -0,0 +1,202 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { CalendarToday } from '@cdx-ui/icons';
+import {
+  dataAttributes,
+  DateRangePickerContext,
+  DateRangePickerRoot as DateRangePickerRootPrimitive,
+  mergeDataAttributes,
+  useDateRangePickerContext,
+  type DateRangePickerRootProps as DateRangePickerRootPrimitiveProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { RangeCalendar, type RangeCalendarProps } from '../RangeCalendar';
+import { PickerTrigger, type PickerTriggerProps } from '../picker/PickerTrigger';
+import {
+  PickerBottomSheetSurface,
+  PickerDialogSurface,
+  PickerPopoverSurface,
+} from '../picker/surfaces';
+
+export type { DateRangeValue } from '@cdx-ui/primitives';
+
+export interface DateRangePickerProps
+  extends DateRangePickerRootPrimitiveProps, Omit<ViewProps, 'children'> {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+
+const DateRangePickerRoot = forwardRef<View, DateRangePickerProps>(
+  ({ 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}>
+        <DateRangePickerRootPrimitive
+          ref={ref}
+          className={cn('gap-2', className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-range-picker' }))}
+        >
+          {children}
+        </DateRangePickerRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DateRangePickerRoot.displayName = 'DateRangePicker';
+
+type DateRangePickerTriggerProps = Omit<
+  PickerTriggerProps,
+  'open' | 'setOpen' | 'disabled' | 'triggerRef' | 'accessibilityLabel'
+> & {
+  accessibilityLabel?: string;
+};
+
+const DateRangePickerTrigger = forwardRef<View, DateRangePickerTriggerProps>(
+  ({ accessibilityLabel, ...props }, ref) => {
+    const { open, setOpen, disabled, triggerRef, labels } = useDateRangePickerContext();
+    return (
+      <PickerTrigger
+        ref={ref}
+        open={open}
+        setOpen={setOpen}
+        disabled={disabled}
+        triggerRef={triggerRef}
+        accessibilityLabel={accessibilityLabel ?? labels.openDateRangePicker}
+        {...props}
+      />
+    );
+  },
+);
+
+DateRangePickerTrigger.displayName = 'DateRangePicker.Trigger';
+
+const DateRangePickerTriggerIndicator = () => (
+  <Icon as={CalendarToday} className="text-content-secondary" />
+);
+
+DateRangePickerTriggerIndicator.displayName = 'DateRangePicker.TriggerIndicator';
+
+const DateRangePickerRangeSeparator = () => {
+  const { labels } = useDateRangePickerContext();
+  return <Text className="body-md text-content-secondary px-1">{labels.rangeSeparator}</Text>;
+};
+
+DateRangePickerRangeSeparator.displayName = 'DateRangePicker.RangeSeparator';
+
+type DateRangePickerCalendarProps = Omit<
+  RangeCalendarProps,
+  'startValue' | 'endValue' | 'onRangeChange' | 'focusedField' | 'onFocusedFieldChange'
+>;
+
+const DateRangePickerCalendar = forwardRef<View, DateRangePickerCalendarProps>(
+  ({ ...props }, ref) => {
+    const { startValue, endValue, onRangeChange, focusedField, setFocusedField, locale, labels } =
+      useDateRangePickerContext();
+
+    return (
+      <RangeCalendar
+        ref={ref}
+        startValue={startValue}
+        endValue={endValue}
+        focusedField={focusedField}
+        onFocusedFieldChange={setFocusedField}
+        locale={locale}
+        labels={labels}
+        onRangeChange={(range) => {
+          if (!range.startId) {
+            return;
+          }
+          onRangeChange?.({ startId: range.startId, endId: range.endId });
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+DateRangePickerCalendar.displayName = 'DateRangePicker.Calendar';
+
+function DateRangePickerDialog({ children }: { children: ReactNode }) {
+  const ctx = useDateRangePickerContext();
+  return (
+    <PickerDialogSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <Dialog.Popup className="p-4">
+        <DateRangePickerContext.Provider value={ctx}>{children}</DateRangePickerContext.Provider>
+      </Dialog.Popup>
+    </PickerDialogSurface>
+  );
+}
+
+function DateRangePickerBottomSheet({ children }: { children: ReactNode }) {
+  const ctx = useDateRangePickerContext();
+  return (
+    <PickerBottomSheetSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+    >
+      <DateRangePickerContext.Provider value={ctx}>{children}</DateRangePickerContext.Provider>
+    </PickerBottomSheetSurface>
+  );
+}
+
+function DateRangePickerPopover({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  const ctx = useDateRangePickerContext();
+  return (
+    <PickerPopoverSurface
+      open={ctx.open}
+      setOpen={ctx.setOpen}
+      registerSurface={ctx.registerSurface}
+      anchorRef={ctx.anchorRef}
+      triggerRef={ctx.triggerRef}
+      className={className}
+    >
+      <DateRangePickerContext.Provider value={ctx}>{children}</DateRangePickerContext.Provider>
+    </PickerPopoverSurface>
+  );
+}
+
+type DateRangePickerCompound = typeof DateRangePickerRoot & {
+  Trigger: typeof DateRangePickerTrigger;
+  TriggerIndicator: typeof DateRangePickerTriggerIndicator;
+  RangeSeparator: typeof DateRangePickerRangeSeparator;
+  Calendar: typeof DateRangePickerCalendar;
+  Popover: typeof DateRangePickerPopover;
+  Dialog: typeof DateRangePickerDialog;
+  BottomSheet: typeof DateRangePickerBottomSheet;
+};
+
+export const DateRangePicker = Object.assign(DateRangePickerRoot, {
+  Trigger: DateRangePickerTrigger,
+  TriggerIndicator: DateRangePickerTriggerIndicator,
+  RangeSeparator: DateRangePickerRangeSeparator,
+  Calendar: DateRangePickerCalendar,
+  Popover: DateRangePickerPopover,
+  Dialog: DateRangePickerDialog,
+  BottomSheet: DateRangePickerBottomSheet,
+}) as DateRangePickerCompound;

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>;