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

package/src/components/Chip/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 const chipInteractiveRoot = [
   TRANSITION_COLORS,
@@ -16,15 +16,15 @@ const chipInteractiveRoot = [
 ];
 
 export const chipRootVariants = cva(
-  ['flex-row items-center justify-center self-start overflow-hidden', ...chipInteractiveRoot],
+  ['flex-row items-center justify-center overflow-hidden web:inline-flex', ...chipInteractiveRoot],
   {
     variants: {
       variant: {
-        tint: [],
+        subtle: [],
         outline: ['bg-transparent', 'border'],
       },
       color: {
-        default: [],
+        neutral: [],
         action: [],
         danger: [],
         warning: [],
@@ -38,70 +38,70 @@ export const chipRootVariants = cva(
       },
     },
     compoundVariants: [
-      // ── tint × color ────────────────────────────────────────────────────
+      // ── subtle × color ────────────────────────────────────────────────────
       {
-        variant: 'tint',
-        color: 'default',
+        variant: 'subtle',
+        color: 'neutral',
         className: [
-          'bg-surface-neutral-tint',
+          'bg-surface-neutral-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-neutral-tint-active',
-            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+            default: 'data-[active=true]:bg-surface-neutral-subtle-active',
+            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'action',
         className: [
-          'bg-surface-action-tint',
+          'bg-surface-action-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-tint-active',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+            default: 'data-[active=true]:bg-surface-action-subtle-active',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'danger',
         className: [
-          'bg-surface-danger-tint',
+          'bg-surface-danger-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-tint-active',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+            default: 'data-[active=true]:bg-surface-danger-subtle-active',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'warning',
         className: [
-          'bg-surface-warning-tint',
+          'bg-surface-warning-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-warning-tint-active',
-            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
+            default: 'data-[active=true]:bg-surface-warning-subtle-active',
+            web: 'data-[hover=true]:bg-surface-warning-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-warning-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'success',
         className: [
-          'bg-surface-success-tint',
+          'bg-surface-success-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-success-tint-active',
-            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
+            default: 'data-[active=true]:bg-surface-success-subtle-active',
+            web: 'data-[hover=true]:bg-surface-success-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-success-subtle-active',
           }),
         ],
       },
       {
-        variant: 'tint',
+        variant: 'subtle',
         color: 'info',
         className: [
-          'bg-surface-info-tint',
+          'bg-surface-info-subtle',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-info-tint-active',
-            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
+            default: 'data-[active=true]:bg-surface-info-subtle-active',
+            web: 'data-[hover=true]:bg-surface-info-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-info-subtle-active',
           }),
         ],
       },
@@ -109,12 +109,12 @@ export const chipRootVariants = cva(
       // ── outline × color ───────────────────────────────────────────────────
       {
         variant: 'outline',
-        color: 'default',
+        color: 'neutral',
         className: [
           'border-stroke-primary',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-neutral-tint',
-            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+            default: 'data-[active=true]:bg-surface-neutral-subtle',
+            web: 'data-[hover=true]:bg-surface-neutral-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-subtle-active',
           }),
         ],
       },
@@ -124,8 +124,8 @@ export const chipRootVariants = cva(
         className: [
           'border-stroke-action',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-action-tint',
-            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+            default: 'data-[active=true]:bg-surface-action-subtle',
+            web: 'data-[hover=true]:bg-surface-action-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-action-subtle-active',
           }),
         ],
       },
@@ -135,8 +135,8 @@ export const chipRootVariants = cva(
         className: [
           'border-stroke-danger',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-danger-tint',
-            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+            default: 'data-[active=true]:bg-surface-danger-subtle',
+            web: 'data-[hover=true]:bg-surface-danger-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-danger-subtle-active',
           }),
         ],
       },
@@ -146,8 +146,8 @@ export const chipRootVariants = cva(
         className: [
           'border-stroke-warning',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-warning-tint',
-            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
+            default: 'data-[active=true]:bg-surface-warning-subtle',
+            web: 'data-[hover=true]:bg-surface-warning-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-warning-subtle-active',
           }),
         ],
       },
@@ -157,8 +157,8 @@ export const chipRootVariants = cva(
         className: [
           'border-stroke-success',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-success-tint',
-            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
+            default: 'data-[active=true]:bg-surface-success-subtle',
+            web: 'data-[hover=true]:bg-surface-success-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-success-subtle-active',
           }),
         ],
       },
@@ -168,28 +168,28 @@ export const chipRootVariants = cva(
         className: [
           'border-stroke-info',
           Platform.select({
-            default: 'data-[active=true]:bg-surface-info-tint',
-            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
+            default: 'data-[active=true]:bg-surface-info-subtle',
+            web: 'data-[hover=true]:bg-surface-info-subtle-hover data-[active=true]:data-[hover=true]:bg-surface-info-subtle-active',
           }),
         ],
       },
     ],
     defaultVariants: {
-      variant: 'tint',
-      color: 'default',
+      variant: 'subtle',
+      color: 'neutral',
       size: 'default',
     },
   },
 );
 
-export const chipLabelVariants = cva(['font-sans-medium'], {
+export const chipLabelVariants = cva(['font-medium'], {
   variants: {
     variant: {
-      tint: 'text-content-primary',
+      subtle: 'text-content-primary',
       outline: 'text-content-primary',
     },
     color: {
-      default: [],
+      neutral: [],
       action: [],
       danger: [],
       warning: [],
@@ -210,8 +210,8 @@ export const chipLabelVariants = cva(['font-sans-medium'], {
     { variant: 'outline', color: 'info', className: 'text-content-info' },
   ],
   defaultVariants: {
-    variant: 'tint',
-    color: 'default',
+    variant: 'subtle',
+    color: 'neutral',
     size: 'default',
   },
 });
@@ -224,7 +224,7 @@ export const chipIconVariants = cva(['shrink-0'], {
       xsmall: 'size-2.5 data-[icon=inline-start]:-ms-px data-[icon=inline-end]:-me-px',
     },
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       action: 'text-content-action',
       danger: 'text-content-danger',
       warning: 'text-content-warning',
@@ -234,7 +234,7 @@ export const chipIconVariants = cva(['shrink-0'], {
   },
   defaultVariants: {
     size: 'default',
-    color: 'default',
+    color: 'neutral',
   },
 });
 

package/src/components/CurrencyInput/index.tsx

@@ -38,7 +38,7 @@ export interface CurrencyInputProps
     CurrencyInputVariantProps,
     Pick<
       TextInputProps,
-      'accessibilityLabel' | 'accessibilityHint' | 'testID' | 'onFocus' | 'onBlur'
+      'accessibilityLabel' | 'accessibilityHint' | 'testID' | 'onFocus' | 'onBlur' | 'returnKeyType'
     > {
   /** Current numeric value. Renders formatted zero when undefined or null. */
   value?: number;
@@ -71,6 +71,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
       testID,
       onFocus,
       onBlur,
+      returnKeyType = 'done',
     },
     ref,
   ) => {
@@ -173,6 +174,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
           onChangeText={handleChangeText}
           onSelectionChange={handleSelectionChange}
           keyboardType="decimal-pad"
+          returnKeyType={returnKeyType}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}
           accessibilityValue={{ text: fullDisplay }}

package/src/components/CurrencyInput/styles.ts

@@ -1,5 +1,5 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR } from '../../styles/constants';
 
 export const currencyInputRootVariants = cva(
   [

package/src/components/DateField/index.tsx

@@ -0,0 +1,196 @@
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  DateFieldInput as DateFieldInputPrimitive,
+  DateFieldRoot as DateFieldRootPrimitive,
+  DateFieldSegment as DateFieldSegmentPrimitive,
+  InputRoot as InputRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type DateFieldRootProps as DateFieldRootPrimitiveProps,
+  type DateFieldSegmentProps as DateFieldSegmentPrimitiveProps,
+} from '@cdx-ui/primitives';
+import type { DateComponentLabels } from '@cdx-ui/formatters';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import {
+  dateFieldGroupVariants,
+  dateFieldInputVariants,
+  dateFieldRootVariants,
+  dateFieldSegmentVariants,
+  dateFieldSuffixVariants,
+  type DateFieldGroupVariantProps,
+} from './styles';
+
+const SCOPE = 'DATE_FIELD';
+
+type DateFieldStyleContext = DateFieldGroupVariantProps & {
+  fullWidth?: boolean;
+};
+
+const useDateFieldStyleContext = (): DateFieldStyleContext =>
+  (useParentContext()[SCOPE] as DateFieldStyleContext | undefined) ?? {};
+
+export interface DateFieldProps extends DateFieldRootPrimitiveProps, DateFieldGroupVariantProps {
+  className?: string;
+  /** When true (the default), the group stretches to fill its container; when false, it hugs the segments. */
+  fullWidth?: boolean;
+  labels?: Partial<DateComponentLabels>;
+}
+
+const DateFieldRoot = forwardRef<View, DateFieldProps>(
+  (
+    {
+      mode = 'date',
+      locale = 'en-US',
+      labels,
+      variant = 'outline',
+      size = 'default',
+      fullWidth,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, fullWidth } }),
+      [parent, variant, size, fullWidth],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DateFieldRootPrimitive
+          ref={ref}
+          mode={mode}
+          locale={locale}
+          labels={labels}
+          className={cn(dateFieldRootVariants(), className)}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field' }))}
+        >
+          {children}
+        </DateFieldRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+DateFieldRoot.displayName = 'DateField';
+
+export interface DateFieldGroupProps extends ViewProps, DateFieldGroupVariantProps {
+  className?: string;
+  children?: ReactNode;
+  fullWidth?: boolean;
+}
+
+const DateFieldGroup = forwardRef<View, DateFieldGroupProps>(
+  ({ variant, size, fullWidth, className, children, style, ...props }, ref) => {
+    const inherited = useDateFieldStyleContext();
+    const resolvedVariant = variant ?? inherited.variant ?? 'outline';
+    const resolvedSize = size ?? inherited.size ?? 'default';
+    const resolvedFullWidth = fullWidth ?? inherited.fullWidth ?? true;
+    const computedClassName = cn(
+      dateFieldGroupVariants({ variant: resolvedVariant, size: resolvedSize }),
+      !resolvedFullWidth && 'w-auto self-start',
+      className,
+    );
+
+    return (
+      <InputRootPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </InputRootPrimitive>
+    );
+  },
+);
+
+DateFieldGroup.displayName = 'DateField.Group';
+
+export interface DateFieldInputProps extends Omit<ViewProps, 'children'> {
+  children?: (segment: DateFieldSegmentPrimitiveProps['segment']) => ReactNode;
+  slot?: 'start' | 'end';
+  className?: string;
+}
+
+export interface DateFieldSegmentProps extends DateFieldSegmentPrimitiveProps {
+  className?: string;
+}
+
+const DateFieldSegment = forwardRef<View, DateFieldSegmentProps>(
+  ({ segment, className, style, ...props }, ref) => (
+    <DateFieldSegmentPrimitive
+      ref={ref}
+      segment={segment}
+      className={cn(dateFieldSegmentVariants({ literal: !segment.isEditable }), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field-segment' }))}
+    />
+  ),
+);
+
+DateFieldSegment.displayName = 'DateField.Segment';
+
+const renderDefaultDateFieldSegment = (segment: DateFieldSegmentPrimitiveProps['segment']) => (
+  <DateFieldSegment segment={segment} />
+);
+
+const DateFieldInput = forwardRef<View, DateFieldInputProps>(
+  ({ children = renderDefaultDateFieldSegment, className, style, ...props }, ref) => {
+    const { size } = useDateFieldStyleContext();
+    return (
+      <DateFieldInputPrimitive
+        ref={ref}
+        className={cn(dateFieldInputVariants({ size: size ?? 'default' }), className)}
+        style={style}
+        {...props}
+      >
+        {children}
+      </DateFieldInputPrimitive>
+    );
+  },
+);
+
+DateFieldInput.displayName = 'DateField.Input';
+
+export interface DateFieldSuffixProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const DateFieldSuffix = forwardRef<View, DateFieldSuffixProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(dateFieldSuffixVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field-suffix' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DateFieldSuffix.displayName = 'DateField.Suffix';
+
+type DateFieldCompound = typeof DateFieldRoot & {
+  Group: typeof DateFieldGroup;
+  Input: typeof DateFieldInput;
+  Segment: typeof DateFieldSegment;
+  Suffix: typeof DateFieldSuffix;
+};
+
+export const DateField = Object.assign(DateFieldRoot, {
+  Group: DateFieldGroup,
+  Input: DateFieldInput,
+  Segment: DateFieldSegment,
+  Suffix: DateFieldSuffix,
+}) as DateFieldCompound;

package/src/components/DateField/styles.ts

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { inputRootVariants, inputSlotVariants } from '../Input/styles';
+
+export const dateFieldRootVariants = cva('gap-1.5');
+
+export const dateFieldGroupVariants = inputRootVariants;
+
+export const dateFieldInputVariants = cva(
+  [
+    'flex-1 min-w-0 flex-row flex-wrap items-center gap-px bg-transparent p-0',
+    'text-content-primary',
+    'web:outline-none',
+    'tracking-normal',
+    'tabular-nums',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const dateFieldSegmentVariants = cva(
+  [
+    'body-md shrink-0 rounded-[var(--border-radius-default)] px-0.5 text-end tabular-nums',
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[focus=true]:bg-surface-action-subtle data-[focus=true]:text-content-primary',
+  ],
+  {
+    variants: {
+      literal: {
+        true: 'text-content-secondary px-0',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      literal: false,
+    },
+  },
+);
+
+export const dateFieldSuffixVariants = inputSlotVariants;
+
+export type DateFieldGroupVariantProps = VariantProps<typeof dateFieldGroupVariants>;