@rovula/ui 0.1.6 → 0.1.8

package/dist/cjs/types/components/AlertDialog/AlertDialog.stories.d.ts

@@ -22,3 +22,6 @@ export declare const CustomStyle: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FigmaFail: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Dialog/Dialog.d.ts

@@ -13,10 +13,16 @@ declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+declare const DialogBody: {
+    ({ className, scrollable, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        scrollable?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const DialogFooter: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, };

package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts

@@ -23,3 +23,6 @@ export declare const Demo: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FigmaChangePassword: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -31,6 +31,7 @@ export type DropdownProps = {
     optionContainerClassName?: string;
     optionItemClassName?: string;
     optionNotFoundItemClassName?: string;
+    segmentedInput?: boolean;
     options: Options[];
     value?: Options;
     onChangeText?: InputProps["onChange"];
@@ -62,6 +63,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     optionContainerClassName?: string;
     optionItemClassName?: string;
     optionNotFoundItemClassName?: string;
+    segmentedInput?: boolean;
     options: Options[];
     value?: Options;
     onChangeText?: InputProps["onChange"];

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -22,6 +22,7 @@ declare const meta: {
         optionContainerClassName?: string;
         optionItemClassName?: string;
         optionNotFoundItemClassName?: string;
+        segmentedInput?: boolean;
         options: Options[];
         value?: Options;
         onChangeText?: import("../..").InputProps["onChange"];
@@ -57,6 +58,7 @@ declare const meta: {
         optionContainerClassName?: string | undefined;
         optionItemClassName?: string | undefined;
         optionNotFoundItemClassName?: string | undefined;
+        segmentedInput?: boolean | undefined;
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;

package/dist/cjs/types/components/Form/Field.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from "react";
+import { FieldPath, FieldPathValue, FieldValues, RegisterOptions } from "react-hook-form";
+type ControlledComponentProps = object;
+export type FieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TComponentProps extends ControlledComponentProps = ControlledComponentProps> = {
+    name: TName;
+    component: ComponentType<TComponentProps>;
+    componentProps?: Omit<TComponentProps, "name" | "value" | "onChange" | "onBlur" | "ref" | "aria-invalid">;
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, "disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber">;
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
+    disabled?: boolean;
+    shouldUnregister?: boolean;
+    id?: string;
+    describedBy?: string;
+    valuePropName?: string;
+    changePropName?: string;
+    blurPropName?: string | false;
+    refPropName?: string | false;
+    errorMessagePropName?: string | false;
+    invalidPropName?: string | false;
+    parseValue?: (incomingValue: unknown, rawPayload: unknown) => FieldPathValue<TFieldValues, TName>;
+    formatValue?: (value: FieldPathValue<TFieldValues, TName>) => TComponentProps[keyof TComponentProps];
+    onChange?: (value: FieldPathValue<TFieldValues, TName>, rawPayload: unknown) => void;
+    onBlur?: () => void;
+};
+export declare const Field: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TComponentProps extends ControlledComponentProps = object>({ name, component: Component, componentProps, rules, defaultValue, disabled, shouldUnregister, id, describedBy, valuePropName, changePropName, blurPropName, refPropName, errorMessagePropName, invalidPropName, parseValue, formatValue, onChange, onBlur, }: FieldProps<TFieldValues, TName, TComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export default Field;

package/dist/cjs/types/components/Form/FieldMessage.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+import { FieldPath, FieldValues } from "react-hook-form";
+export type FieldMessageProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = HTMLAttributes<HTMLParagraphElement> & {
+    name: TName;
+};
+export declare const FieldMessage: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, className, ...props }: FieldMessageProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element | null;
+export default FieldMessage;

package/dist/cjs/types/components/Form/Form.d.ts

@@ -1,12 +1,50 @@
-import React from "react";
-interface FormValues {
-    name: string;
-    email: string;
-    password: string;
-}
-interface FormProps {
-    onSubmit: (values: FormValues) => void;
-    className?: string;
-}
-declare const Form: React.FC<FormProps>;
+import React, { FormHTMLAttributes, ReactNode } from "react";
+import { DefaultValues, FieldValues, Mode, Resolver, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+import * as yup from "yup";
+type FormChildren<TFieldValues extends FieldValues> = ReactNode | ((methods: UseFormReturn<TFieldValues>) => ReactNode);
+export type FormController<TFieldValues extends FieldValues> = {
+    submit: () => Promise<void>;
+    getValues: () => TFieldValues;
+    setValue: UseFormReturn<TFieldValues>["setValue"];
+    trigger: UseFormReturn<TFieldValues>["trigger"];
+    reset: UseFormReturn<TFieldValues>["reset"];
+};
+export type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, "children" | "onSubmit"> & {
+    children: FormChildren<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues>;
+    methods?: UseFormReturn<TFieldValues>;
+    controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
+    onSubmit: SubmitHandler<TFieldValues>;
+    onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+    resolver?: Resolver<TFieldValues>;
+    validationSchema?: yup.ObjectSchema<any>;
+    mode?: Mode;
+    reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+};
+export declare const createYupResolver: <TFieldValues extends FieldValues>(schema: yup.ObjectSchema<any>) => Resolver<TFieldValues>;
+export type ControlledFormFactoryOptions<TFieldValues extends FieldValues> = {
+    methods: UseFormReturn<TFieldValues>;
+    defaultValues: DefaultValues<TFieldValues>;
+    controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
+};
+export type UseControlledFormOptions<TFieldValues extends FieldValues> = {
+    defaultValues: DefaultValues<TFieldValues>;
+    controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
+    resolver?: Resolver<TFieldValues>;
+    validationSchema?: yup.ObjectSchema<any>;
+    mode?: Mode;
+    reValidateMode?: Exclude<Mode, "onTouched" | "all">;
+};
+export declare const createControlledForm: <TFieldValues extends FieldValues>({ methods, defaultValues, controllerRef, }: ControlledFormFactoryOptions<TFieldValues>) => {
+    methods: UseFormReturn<TFieldValues>;
+    FormRoot: React.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React.RefAttributes<FormController<TFieldValues>>>;
+};
+export declare const useControlledForm: <TFieldValues extends FieldValues>({ defaultValues, controllerRef, resolver, validationSchema, mode, reValidateMode, }: UseControlledFormOptions<TFieldValues>) => {
+    methods: UseFormReturn<TFieldValues>;
+    FormRoot: React.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React.RefAttributes<FormController<TFieldValues>>>;
+};
+type FormComponent = <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
+    ref?: React.Ref<FormController<TFieldValues>>;
+}) => React.ReactElement;
+export declare const Form: FormComponent;
 export default Form;

package/dist/cjs/types/components/Form/Form.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const BasicYupLogin: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const MixedUiKitControls: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const ResolverBasedValidation: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const RenderPropsCodeControl: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const HigherLayerCodeControl: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Form/ValidationHintList.d.ts

@@ -0,0 +1,17 @@
+export type ValidationHintState = "pending" | "valid" | "invalid";
+export type ValidationHintMode = ValidationHintState[];
+export type ValidationHintRule<TValues> = {
+    id: string;
+    label: string;
+    validate: (values: TValues) => boolean;
+    when?: (values: TValues) => boolean;
+};
+export type ValidationHintListProps<TValues> = {
+    values: TValues;
+    rules: ValidationHintRule<TValues>[];
+    mode?: ValidationHintMode;
+    className?: string;
+    itemClassName?: string;
+};
+export declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => import("react/jsx-runtime").JSX.Element;
+export default ValidationHintList;

package/dist/cjs/types/components/Form/ValidationHintList.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const ThreeState: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const TwoState: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Form/index.d.ts

@@ -0,0 +1,10 @@
+export { Form, createControlledForm, createYupResolver, useControlledForm, } from "./Form";
+export type { ControlledFormFactoryOptions, FormController, FormProps, UseControlledFormOptions, } from "./Form";
+export { Field } from "./Field";
+export type { FieldProps } from "./Field";
+export { FieldMessage } from "./FieldMessage";
+export type { FieldMessageProps } from "./FieldMessage";
+export { ValidationHintList } from "./ValidationHintList";
+export type { ValidationHintListProps, ValidationHintMode, ValidationHintRule, ValidationHintState, } from "./ValidationHintList";
+export { useOptionBridge } from "./useOptionBridge";
+export type { OptionLike, UseOptionBridgeOptions, } from "./useOptionBridge";

package/dist/cjs/types/components/Form/useOptionBridge.d.ts

@@ -0,0 +1,17 @@
+type OptionValue = string | number;
+export type OptionLike<TValue extends OptionValue = string> = {
+    value: TValue;
+    label?: string;
+};
+export type UseOptionBridgeOptions<TValue extends OptionValue, TOption extends OptionLike<TValue>> = {
+    options: TOption[];
+    loading?: boolean;
+    buildFallbackOption?: (value: TValue, loading: boolean) => TOption;
+};
+export declare const useOptionBridge: <TValue extends OptionValue = string, TOption extends OptionLike<TValue> = OptionLike<TValue>>({ options, loading, buildFallbackOption, }: UseOptionBridgeOptions<TValue, TOption>) => {
+    toOption: (value: TValue | null | undefined) => TOption | undefined;
+    toOptionWithFallback: (value: TValue | null | undefined) => TOption | undefined;
+    toValue: (option: TOption | null | undefined) => TValue | undefined;
+    optionsByValue: Map<TValue, TOption>;
+};
+export default useOptionBridge;

package/dist/cjs/types/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type OtpInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    onComplete?: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    autoFocus?: boolean;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    charPattern?: RegExp;
+    className?: string;
+    inputClassName?: string;
+};
+export declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLInputElement>>;
+export default OtpInput;

package/dist/cjs/types/components/OtpInput/OtpInput.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Basic: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithFormField: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const GroupWithLabelAndError: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const GroupWithFormField: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/OtpInput/OtpInputGroup.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { OtpInputProps } from "./OtpInput";
+export type OtpInputGroupProps = OtpInputProps & {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    keepFooterSpace?: boolean;
+    labelClassName?: string;
+    messageClassName?: string;
+};
+export declare const OtpInputGroup: React.ForwardRefExoticComponent<OtpInputProps & {
+    id?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    keepFooterSpace?: boolean;
+    labelClassName?: string;
+    messageClassName?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default OtpInputGroup;

package/dist/cjs/types/components/OtpInput/index.d.ts

@@ -0,0 +1,5 @@
+export { OtpInput } from "./OtpInput";
+export type { OtpInputProps } from "./OtpInput";
+export { OtpInputGroup } from "./OtpInputGroup";
+export type { OtpInputGroupProps } from "./OtpInputGroup";
+export { default } from "./OtpInput";

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -34,6 +34,9 @@ export declare const inlineStartIconWrapperVariant: (props?: ({
 export declare const iconActionVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const searchIconVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const segmentedIconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;

package/dist/cjs/types/index.d.ts

@@ -19,6 +19,8 @@ export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
 export { Calendar } from "./components/Calendar";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as OtpInput } from "./components/OtpInput";
+export { OtpInputGroup } from "./components/OtpInput";
 export { Popover, PopoverTrigger, PopoverContent, } from "./components/Popover/Popover";
 export { default as Loading } from "./components/Loading/Loading";
 export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
@@ -41,12 +43,15 @@ export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
+export * from "./components/Form";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { PasswordInputProps } from "./components/PasswordInput/PasswordInput";
 export type { MaskedTextInputProps, MaskRule, } from "./components/MaskedTextInput";
 export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
+export type { OtpInputProps } from "./components/OtpInput";
+export type { OtpInputGroupProps } from "./components/OtpInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
 export type { FooterProps, FooterVariant } from "./components/Footer/Footer";

package/dist/cjs/types/theme/ThemeColorCoverageRuntime.stories.d.ts

@@ -0,0 +1,10 @@
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+export declare const RuntimeCoverage: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};