@cdx-ui/components 0.0.1-beta.98 → 0.1.0

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;

package/src/components/Dialog/animation.ts

@@ -0,0 +1,13 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { createContext } from '@cdx-ui/utils';
+
+export interface DialogAnimationContextValue {
+  progress: SharedValue<number>;
+  isDragging: SharedValue<boolean>;
+  isGestureReleaseAnimationRunning: SharedValue<boolean>;
+}
+
+export const [DialogAnimationProvider, useDialogAnimation] =
+  createContext<DialogAnimationContextValue>('DialogAnimationContext', {
+    strict: false,
+  });