@cdx-ui/components 0.0.1-alpha.35 → 0.0.1-alpha.36

package/src/components/Form/index.tsx

@@ -1,58 +1,23 @@
-import { forwardRef, type ReactNode } from 'react';
-import { Text, View, type ViewProps, type TextProps } from 'react-native';
-import { createForm, type IFormProps, type IFormFieldProps } from '@cdx-ui/primitives';
-import { cn, withStyleContext, useStyleContext } from '@cdx-ui/utils';
-import { Icon, type IconProps } from '../Icon';
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { createForm } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
 import { BaseFormRoot, type BaseFormRootProps } from './FormRoot';
-import { FormLabelRoot } from './FormLabelRoot';
-import {
-  formRootVariants,
-  formFieldVariants,
-  formLabelVariants,
-  formHelperVariants,
-  formHelperTextVariants,
-  formErrorVariants,
-  formErrorTextVariants,
-  formErrorIconVariants,
-} from './styles';
-
-// =============================================================================
-// SCOPE + CONTEXT
-// =============================================================================
-
-const SCOPE = 'FORM';
-
-const FieldRoot = withStyleContext(View, SCOPE);
-
-interface FormFieldStyleContext {
-  size?: 'default' | 'small';
-}
-
-const useFormStyleContext = () => useStyleContext(SCOPE) as FormFieldStyleContext;
+import { formRootVariants } from './styles';
 
 // =============================================================================
 // PRIMITIVE
 // =============================================================================
 
-const FormPrimitive = createForm({
-  Root: BaseFormRoot,
-  Field: FieldRoot,
-  Error: View,
-  ErrorText: Text,
-  ErrorIcon: View,
-  Label: FormLabelRoot,
-  Helper: View,
-  HelperText: Text,
-});
+const FormPrimitive = createForm({ Root: BaseFormRoot });
+
+FormPrimitive.displayName = 'FormPrimitive';
 
 // =============================================================================
 // FORM ROOT (container — <form> on web, <View> on RN)
 // =============================================================================
 
-export interface FormProps extends BaseFormRootProps, IFormProps {
-  className?: string;
-  children?: ReactNode;
-}
+export interface FormProps extends BaseFormRootProps {}
 
 const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...props }, ref) => {
   const computedClassName = cn(formRootVariants(), className);
@@ -67,206 +32,7 @@ const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...p
 FormRoot.displayName = 'Form';
 
 // =============================================================================
-// FORM FIELD (per-field wrapper — provides context for label/error/helper/input)
-// =============================================================================
-
-/**
- * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
- */
-export interface FormFieldProps extends Omit<ViewProps, 'id' | 'name'>, IFormFieldProps {
-  className?: string;
-  children?: ReactNode;
-  size?: 'default' | 'small';
-}
-
-const FormField = forwardRef<View, FormFieldProps>(
-  ({ size = 'default', className, children, style, ...props }, ref) => {
-    const computedClassName = cn(formFieldVariants(), className);
-
-    return (
-      <FormPrimitive.Field
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        context={{ size }}
-        {...props}
-      >
-        {children}
-      </FormPrimitive.Field>
-    );
-  },
-);
-
-FormField.displayName = 'Form.Field';
-
-// =============================================================================
-// FORM LABEL
-// =============================================================================
-
-export interface FormLabelProps extends ViewProps {
-  className?: string;
-  children?: ReactNode;
-  /** @platform web — passed to `<label htmlFor>`; defaults to the field input id. */
-  htmlFor?: string;
-}
-
-// TODO: Accept accessibility labels for required indicator as props to support i18n
-
-const FormLabel = forwardRef<View, FormLabelProps>(
-  ({ className, children, style, htmlFor, ...props }, ref) => {
-    const { size } = useFormStyleContext();
-    const labelClassName = cn(formLabelVariants({ size }), className);
-
-    return (
-      <FormPrimitive.Label
-        ref={ref}
-        className={labelClassName}
-        style={style}
-        htmlFor={htmlFor}
-        requiredIndicator={
-          <Text className="text-red-500" aria-hidden>
-            {' *'}
-          </Text>
-        }
-        {...props}
-      >
-        {children}
-      </FormPrimitive.Label>
-    );
-  },
-);
-
-FormLabel.displayName = 'Form.Label';
-
-// =============================================================================
-// FORM HELPER
-// =============================================================================
-
-export interface FormHelperProps extends ViewProps {
-  className?: string;
-  children?: ReactNode;
-}
-
-const FormHelper = forwardRef<View, FormHelperProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(formHelperVariants(), className);
-
-    return (
-      <FormPrimitive.Helper ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </FormPrimitive.Helper>
-    );
-  },
-);
-
-FormHelper.displayName = 'Form.Helper';
-
-// =============================================================================
-// FORM HELPER TEXT
-// =============================================================================
-
-export interface FormHelperTextProps extends TextProps {
-  className?: string;
-  children?: ReactNode;
-}
-
-const FormHelperText = forwardRef<Text, FormHelperTextProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useFormStyleContext();
-    const computedClassName = cn(formHelperTextVariants({ size }), className);
-
-    return (
-      <FormPrimitive.HelperText ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </FormPrimitive.HelperText>
-    );
-  },
-);
-
-FormHelperText.displayName = 'Form.HelperText';
-
-// =============================================================================
-// FORM ERROR
-// =============================================================================
-
-export interface FormErrorProps extends ViewProps {
-  className?: string;
-  children?: ReactNode;
-}
-
-const FormError = forwardRef<View, FormErrorProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(formErrorVariants(), className);
-
-    return (
-      <FormPrimitive.Error ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </FormPrimitive.Error>
-    );
-  },
-);
-
-FormError.displayName = 'Form.Error';
-
-// =============================================================================
-// FORM ERROR TEXT
+// EXPORT
 // =============================================================================
 
-export interface FormErrorTextProps extends TextProps {
-  className?: string;
-  children?: ReactNode;
-}
-
-const FormErrorText = forwardRef<Text, FormErrorTextProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useFormStyleContext();
-    const computedClassName = cn(formErrorTextVariants({ size }), className);
-
-    return (
-      <FormPrimitive.ErrorText ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </FormPrimitive.ErrorText>
-    );
-  },
-);
-
-FormErrorText.displayName = 'Form.ErrorText';
-
-// =============================================================================
-// FORM ERROR ICON
-// =============================================================================
-
-export interface FormErrorIconProps extends Omit<IconProps, 'children'> {}
-
-const FormErrorIcon = ({ className, style, as, ...props }: FormErrorIconProps) => {
-  const { size } = useFormStyleContext();
-  const computedClassName = cn(formErrorIconVariants({ size }), className);
-
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
-};
-
-FormErrorIcon.displayName = 'Form.ErrorIcon';
-
-// =============================================================================
-// COMPOUND EXPORT
-// =============================================================================
-
-type FormCompoundComponent = typeof FormRoot & {
-  Field: typeof FormField;
-  Label: typeof FormLabel;
-  Helper: typeof FormHelper;
-  HelperText: typeof FormHelperText;
-  Error: typeof FormError;
-  ErrorText: typeof FormErrorText;
-  ErrorIcon: typeof FormErrorIcon;
-};
-
-export const Form = Object.assign(FormRoot, {
-  Field: FormField,
-  Label: FormLabel,
-  Helper: FormHelper,
-  HelperText: FormHelperText,
-  Error: FormError,
-  ErrorText: FormErrorText,
-  ErrorIcon: FormErrorIcon,
-}) as FormCompoundComponent;
+export const Form = FormRoot;

package/src/components/Form/styles.ts

@@ -1,75 +1,3 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_TEXT_INVALID,
-  COLOR_TEXT_SECONDARY,
-  DISABLED_OPACITY,
-} from '../../styles/primitives';
+import { cva } from 'class-variance-authority';
 
 export const formRootVariants = cva(['flex-col gap-4']);
-
-export const formFieldVariants = cva(['flex-col gap-1.5 mb-4', 'web:last:mb-0', DISABLED_OPACITY]);
-
-export const formLabelVariants = cva(
-  [
-    'flex-row items-center',
-    DISABLED_OPACITY,
-    'web:cursor-pointer',
-    'font-medium data-[invalid=true]:text-red-600',
-  ],
-  {
-    variants: {
-      size: {
-        default: 'text-sm',
-        small: 'text-xs',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
-export const formHelperVariants = cva(['flex-row items-center']);
-
-export const formHelperTextVariants = cva([COLOR_TEXT_SECONDARY], {
-  variants: {
-    size: {
-      default: 'text-xs',
-      small: 'text-[11px]',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
-
-export const formErrorVariants = cva(['flex-row items-center gap-1']);
-
-export const formErrorTextVariants = cva([COLOR_TEXT_INVALID, 'font-medium'], {
-  variants: {
-    size: {
-      default: 'text-xs',
-      small: 'text-[11px]',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
-
-export const formErrorIconVariants = cva([COLOR_TEXT_INVALID], {
-  variants: {
-    size: {
-      default: 'size-3.5',
-      small: 'size-3',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
-
-export type FormLabelVariantProps = VariantProps<typeof formLabelVariants>;
-export type FormHelperTextVariantProps = VariantProps<typeof formHelperTextVariants>;
-export type FormErrorTextVariantProps = VariantProps<typeof formErrorTextVariants>;
-export type FormErrorIconVariantProps = VariantProps<typeof formErrorIconVariants>;

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
 export * from './Dialog';
+export * from './Field';
 export * from './Form';
 export * from './Image';
 export * from './Input';

package/lib/commonjs/components/Form/FormLabelRoot.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","_utils","_jsxRuntime","FormLabelRoot","exports","forwardRef","htmlFor","_omitHtmlFor","onPress","props","ref","focusInput","isDisabled","useFormControlContext","jsx","Text","disabled","Boolean","composeEventHandlers","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA4E,IAAAG,WAAA,GAAAH,OAAA;AAS5E;AACA;AACA;AACA;AACO,MAAMI,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,iBAAU,EACrC,CAAC;EAAEC,OAAO,EAAEC,YAAY;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACrD,KAAKH,YAAY;EAEjB,MAAM;IAAEI,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,4BAAqB,EAAC,CAAC;EAE1D,oBACE,IAAAX,WAAA,CAAAY,GAAA,EAACd,YAAA,CAAAe,IAAI;IACHL,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACTO,QAAQ,EAAEC,OAAO,CAACL,UAAU,CAAE;IAC9BJ,OAAO,EAAE,IAAAU,2BAAoB,EAACV,OAAO,EAAE,MAAMG,UAAU,GAAG,CAAC;EAAE,CAC9D,CAAC;AAEN,CACF,CAAC;AAEDR,aAAa,CAACgB,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/commonjs/components/Form/FormLabelRoot.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormLabelRoot","exports","forwardRef","props","ref","jsx","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.web.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0D,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAY1D;AACO,MAAMkB,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,iBAAU,EAAuC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5F,oBAAO,IAAAxB,WAAA,CAAAyB,GAAA;IAAOD,GAAG,EAAEA,GAAI;IAAA,GAAMD;EAAK,CAAmD,CAAC;AACxF,CAAC,CAAC;AAEFH,aAAa,CAACM,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/components/Form/FormLabelRoot.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","Text","composeEventHandlers","useFormControlContext","jsx","_jsx","FormLabelRoot","htmlFor","_omitHtmlFor","onPress","props","ref","focusInput","isDisabled","disabled","Boolean","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAA+C,cAAc;AAC1E,SAASC,oBAAoB,EAAEC,qBAAqB,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS5E;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,gBAAGN,UAAU,CACrC,CAAC;EAAEO,OAAO,EAAEC,YAAY;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACrD,KAAKH,YAAY;EAEjB,MAAM;IAAEI,UAAU;IAAEC;EAAW,CAAC,GAAGV,qBAAqB,CAAC,CAAC;EAE1D,oBACEE,IAAA,CAACJ,IAAI;IACHU,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACTI,QAAQ,EAAEC,OAAO,CAACF,UAAU,CAAE;IAC9BJ,OAAO,EAAEP,oBAAoB,CAACO,OAAO,EAAE,MAAMG,UAAU,GAAG,CAAC;EAAE,CAC9D,CAAC;AAEN,CACF,CAAC;AAEDN,aAAa,CAACU,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/components/Form/FormLabelRoot.web.js

@@ -1,13 +0,0 @@
-"use strict";
-
-import React, { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
-export const FormLabelRoot = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/_jsx("label", {
-    ref: ref,
-    ...props
-  });
-});
-FormLabelRoot.displayName = 'FormLabelRoot';
-//# sourceMappingURL=FormLabelRoot.web.js.map

package/lib/module/components/Form/FormLabelRoot.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","forwardRef","jsx","_jsx","FormLabelRoot","props","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.web.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAwB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY1D;AACA,OAAO,MAAMC,aAAa,gBAAGH,UAAU,CAAuC,CAACI,KAAK,EAAEC,GAAG,KAAK;EAC5F,oBAAOH,IAAA;IAAOG,GAAG,EAAEA,GAAI;IAAA,GAAMD;EAAK,CAAmD,CAAC;AACxF,CAAC,CAAC;AAEFD,aAAa,CAACG,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/typescript/components/Form/FormLabelRoot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormLabelRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormLabelRoot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAG3E,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa;IAVxB,gFAAgF;cACtE,MAAM;IAChB,4DAA4D;cAClD,CAAC,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC,GAAG,IAAI;wCAsB1D,CAAC"}

package/lib/typescript/components/Form/FormLabelRoot.web.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormLabelRoot.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormLabelRoot.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qFAAqF;IACrF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,aAAa;cATd,MAAM;eACL,SAAS;IACpB,qFAAqF;qBACpE,MAAM;IACvB,sFAAsF;cAC5E,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;0CAMhC,CAAC"}

package/src/components/Form/FormLabelRoot.web.tsx

@@ -1,18 +0,0 @@
-import React, { forwardRef, type ReactNode } from 'react';
-import type { ViewProps } from 'react-native';
-
-export type FormLabelRootProps = ViewProps & {
-  htmlFor?: string;
-  children?: ReactNode;
-  /** Mirrors field invalid state from form context (`data-[invalid=true]` styling). */
-  'data-invalid'?: string;
-  /** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
-  dataSet?: Record<string, string>;
-};
-
-/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
-export const FormLabelRoot = forwardRef<HTMLLabelElement, FormLabelRootProps>((props, ref) => {
-  return <label ref={ref} {...(props as React.LabelHTMLAttributes<HTMLLabelElement>)} />;
-});
-
-FormLabelRoot.displayName = 'FormLabelRoot';