@multiplatform.one/frappe-ui 6.0.0

package/src/fields/OTPInput/index.tsx

@@ -0,0 +1,83 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { OTPInput } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type OTPInputFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    length?: number;
+    secureTextEntry?: boolean;
+    onComplete?: (code: string) => void;
+    type?: "numeric" | "alphanumeric" | "password";
+  };
+
+export function OTPInputField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: OTPInputFieldProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    name,
+    onChange,
+    validators,
+    disabled,
+    value,
+    length,
+    secureTextEntry,
+    onComplete,
+    type,
+    mode: _mode,
+    preserveValue: _preserveValue,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <OTPInput
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as any}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      length={length}
+      secureTextEntry={secureTextEntry}
+      onComplete={onComplete}
+      type={type}
+    />
+  );
+}

package/src/fields/Password/index.tsx

@@ -0,0 +1,80 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Input as FormsInput } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type PasswordProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    inputProps?: Record<string, unknown>;
+  };
+
+export function Password<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: PasswordProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    inputProps,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    placeholder,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    ...fieldProps
+  } = useProps(props) as PasswordProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsInput
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      onChangeText={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      disabled={disabled}
+      secureTextEntry
+      inputProps={inputProps as any}
+    />
+  );
+}

package/src/fields/Phone/index.tsx

@@ -0,0 +1,77 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { PhoneInput } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type PhoneFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    defaultCountry?: string;
+    placeholder?: string;
+  };
+
+export function Phone<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: PhoneFieldProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onChange,
+    placeholder,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    defaultCountry,
+    ...fieldProps
+  } = useProps(props) as PhoneFieldProps<TData, TName> & Record<string, unknown>;
+
+  const phoneProps: any = {
+    name,
+    form,
+    validators,
+    defaultValue: defaultValue as string,
+    label: fieldProps.label,
+    labelProps: fieldProps.labelProps,
+    error: fieldProps.error,
+    helperText: fieldProps.helperText,
+    required: fieldProps.required,
+    id: fieldProps.id,
+    size: fieldProps.size,
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    defaultCountry,
+  };
+
+  return <PhoneInput {...phoneProps} />;
+}

package/src/fields/Progress/index.tsx

@@ -0,0 +1,71 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Progress as FormsProgress } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type ProgressFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    number
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        number
+      >,
+      "children"
+    >
+  > & {
+    value?: number;
+    max?: number;
+    progressProps?: Record<string, unknown>;
+  };
+
+export function ProgressField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: ProgressFieldProps<TData, TName>) {
+  const {
+    progressProps,
+    defaultValue,
+    form,
+    name,
+    validators,
+    value,
+    max,
+    mode: _mode,
+    preserveValue: _preserveValue,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsProgress
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as number}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      max={max}
+      progressProps={progressProps as any}
+    />
+  );
+}

package/src/fields/RadioGroup/index.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { RadioGroup as FormsRadioGroup } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type RadioGroupFieldProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    value?: string;
+    onChange?: (value: string) => void;
+    options?: Array<{ label: string; value: string }>;
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+    children?: ReactNode;
+    radioGroupProps?: Record<string, unknown>;
+  };
+
+export function RadioGroupField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: RadioGroupFieldProps<TData, TName>) {
+  const {
+    radioGroupProps,
+    defaultValue,
+    form,
+    _mode,
+    name,
+    onBlur,
+    onChange,
+    _preserveValue,
+    validators,
+    disabled,
+    value,
+    options,
+    orientation,
+    children,
+    ...fieldProps
+  } = useProps(props) as RadioGroupFieldProps<TData, TName> & Record<string, unknown>;
+
+  return (
+    <FormsRadioGroup
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      onValueChange={onChange}
+      onBlur={onBlur}
+      disabled={disabled}
+      options={options}
+      orientation={orientation}
+      radioGroupProps={radioGroupProps as any}
+    >
+      {children}
+    </FormsRadioGroup>
+  );
+}

package/src/fields/Rating/index.tsx

@@ -0,0 +1,78 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import { Rating as FormsRating } from "@multiplatform.one/forms";
+import { StarIcon } from "@phosphor-icons/react";
+import type { DeepKeys } from "@tanstack/form-core";
+import { useProps } from "tamagui";
+
+export type RatingProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    number
+  >,
+  "children" | "field"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        number
+      >,
+      "children"
+    >
+  > & {
+    value?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    maxStars?: number;
+  };
+
+export function Rating<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: RatingProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    mode: _mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue: _preserveValue,
+    validators,
+    disabled,
+    value,
+    maxStars,
+    ...fieldProps
+  } = useProps(props);
+
+  return (
+    <FormsRating
+      name={name}
+      form={form}
+      validators={validators}
+      defaultValue={defaultValue as number}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      disabled={disabled}
+      maxStars={maxStars}
+      starIcon={StarIcon}
+    />
+  );
+}

package/src/fields/ReadOnly/ReadOnly.stories.tsx

@@ -0,0 +1,96 @@
+import { YStack } from "tamagui";
+import { ReadOnly } from ".";
+
+export default {
+  title: "FrappeUI/ReadOnly",
+  component: ReadOnly,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "A read-only display field for showing non-editable values with proper formatting for all Frappe field types.",
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: [
+        "Data",
+        "Int",
+        "Float",
+        "Currency",
+        "Percent",
+        "Date",
+        "Datetime",
+        "Time",
+        "Check",
+        "Select",
+        "Link",
+        "Color",
+        "Text",
+        "SmallText",
+        "LongText",
+      ],
+      description: "The type of value to display",
+    },
+    label: { control: "text", description: "Field label" },
+    value: { control: "text", description: "Value to display" },
+    emptyText: { control: "text", description: "Text to show when value is empty" },
+    currencySymbol: { control: "text", description: "Currency symbol for Currency type" },
+    precision: { control: "number", description: "Decimal precision for Float type" },
+  },
+};
+
+export const AllTypes = () => (
+  <YStack gap="$4" width={400}>
+    <ReadOnly label="Data" value="John Doe" type="Data" />
+    <ReadOnly label="Int" value={42} type="Int" />
+    <ReadOnly label="Float" value={99.99} type="Float" precision={2} />
+    <ReadOnly label="Currency" value={1500} type="Currency" currencySymbol="$" />
+    <ReadOnly label="Percent" value={75} type="Percent" />
+    <ReadOnly label="Date" value="2026-01-24" type="Date" />
+    <ReadOnly label="Datetime" value="2026-01-24 14:30" type="Datetime" />
+    <ReadOnly label="Time" value="14:30" type="Time" />
+    <ReadOnly label="Check (Yes)" value={true} type="Check" />
+    <ReadOnly label="Check (No)" value={false} type="Check" />
+    <ReadOnly label="Color" value="#10B981" type="Color" />
+    <ReadOnly label="Link" value="DOC-001" type="Link" />
+    <ReadOnly label="Empty" value={undefined} type="Data" />
+  </YStack>
+);
+AllTypes.parameters = {
+  docs: {
+    description: {
+      story: "All supported field types in the ReadOnlyField component.",
+    },
+  },
+};
+
+AllTypes.storyName = "Main";
+export const ProfileCardExample = () => (
+  <YStack
+    gap="$3"
+    width={400}
+    padding="$4"
+    borderWidth={1}
+    borderColor="$borderColor"
+    borderRadius="$4"
+  >
+    <ReadOnly label="Name" value="Jane Smith" type="Data" />
+    <ReadOnly label="Email" value="jane@company.com" type="Data" />
+    <ReadOnly label="Department" value="Engineering" type="Link" />
+    <ReadOnly label="Employee ID" value="EMP-042" type="Data" />
+    <ReadOnly label="Joining Date" value="2023-06-15" type="Date" />
+    <ReadOnly label="Active" value={true} type="Check" />
+    <ReadOnly label="Salary" value={85000} type="Currency" currencySymbol="$" />
+  </YStack>
+);
+ProfileCardExample.parameters = {
+  docs: {
+    description: {
+      story: "Real-world example of using ReadOnlyField to display a profile card.",
+    },
+  },
+};