@rovula/ui 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/bundle.css +281 -124
- package/dist/cjs/bundle.js +1545 -1545
- package/dist/cjs/bundle.js.map +1 -1
- package/dist/cjs/types/components/AlertDialog/AlertDialog.stories.d.ts +3 -0
- package/dist/cjs/types/components/Dialog/Dialog.d.ts +7 -1
- package/dist/cjs/types/components/Dialog/Dialog.stories.d.ts +3 -0
- package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +2 -0
- package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +2 -0
- package/dist/cjs/types/components/Form/Field.d.ts +26 -0
- package/dist/cjs/types/components/Form/FieldMessage.d.ts +7 -0
- package/dist/cjs/types/components/Form/Form.d.ts +49 -11
- package/dist/cjs/types/components/Form/Form.stories.d.ts +23 -0
- package/dist/cjs/types/components/Form/ValidationHintList.d.ts +17 -0
- package/dist/cjs/types/components/Form/ValidationHintList.stories.d.ts +9 -0
- package/dist/cjs/types/components/Form/index.d.ts +10 -0
- package/dist/cjs/types/components/Form/useOptionBridge.d.ts +17 -0
- package/dist/cjs/types/components/OtpInput/OtpInput.d.ts +17 -0
- package/dist/cjs/types/components/OtpInput/OtpInput.stories.d.ts +15 -0
- package/dist/cjs/types/components/OtpInput/OtpInputGroup.d.ts +25 -0
- package/dist/cjs/types/components/OtpInput/index.d.ts +5 -0
- package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts +3 -0
- package/dist/cjs/types/index.d.ts +5 -0
- package/dist/cjs/types/theme/ThemeColorCoverageRuntime.stories.d.ts +10 -0
- package/dist/cjs/types/utils/colors.d.ts +84 -0
- package/dist/components/ActionButton/ActionButton.stories.js +2 -2
- package/dist/components/ActionButton/ActionButton.styles.js +1 -1
- package/dist/components/AlertDialog/AlertDialog.js +6 -6
- package/dist/components/AlertDialog/AlertDialog.stories.js +3 -0
- package/dist/components/Avatar/Avatar.stories.js +1 -1
- package/dist/components/Avatar/Avatar.styles.js +1 -1
- package/dist/components/Avatar/AvatarBase.js +1 -1
- package/dist/components/Avatar/AvatarGroup.stories.js +1 -1
- package/dist/components/Button/Buttons.stories.js +2 -2
- package/dist/components/Calendar/Calendar.js +1 -1
- package/dist/components/Checkbox/Checkbox.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +17 -7
- package/dist/components/Collapsible/Collapsible.styles.js +1 -1
- package/dist/components/DataTable/DataTable.js +2 -2
- package/dist/components/Dialog/Dialog.js +12 -7
- package/dist/components/Dialog/Dialog.stories.js +90 -2
- package/dist/components/Dropdown/Dropdown.js +2 -2
- package/dist/components/DropdownMenu/DropdownMenu.js +3 -3
- package/dist/components/FocusedScrollView/FocusedScrollView.stories.js +6 -6
- package/dist/components/Form/Field.js +60 -0
- package/dist/components/Form/FieldMessage.js +24 -0
- package/dist/components/Form/Form.js +73 -41
- package/dist/components/Form/Form.stories.js +221 -0
- package/dist/components/Form/ValidationHintList.js +30 -0
- package/dist/components/Form/ValidationHintList.stories.js +50 -0
- package/dist/components/Form/index.js +5 -0
- package/dist/components/Form/useOptionBridge.js +27 -0
- package/dist/components/InputFilter/InputFilter.js +5 -4
- package/dist/components/InputFilter/InputFilter.stories.js +1 -1
- package/dist/components/InputFilter/InputFilter.styles.js +14 -1
- package/dist/components/Label/Label.styles.js +1 -1
- package/dist/components/Menu/Menu.js +2 -2
- package/dist/components/NumberInput/NumberInput.stories.js +1 -1
- package/dist/components/OtpInput/OtpInput.js +118 -0
- package/dist/components/OtpInput/OtpInput.stories.js +60 -0
- package/dist/components/OtpInput/OtpInputGroup.js +23 -0
- package/dist/components/OtpInput/index.js +3 -0
- package/dist/components/PasswordInput/PasswordInput.stories.js +1 -1
- package/dist/components/Popover/Popover.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +2 -2
- package/dist/components/Search/Search.js +13 -1
- package/dist/components/Search/Search.stories.js +1 -1
- package/dist/components/Slider/Slider.js +1 -1
- package/dist/components/Slider/Slider.stories.js +5 -5
- package/dist/components/Switch/Switch.stories.js +2 -2
- package/dist/components/Table/Table.js +5 -5
- package/dist/components/Tabs/Tabs.js +12 -9
- package/dist/components/Tabs/Tabs.stories.js +1 -1
- package/dist/components/Text/Text.js +1 -1
- package/dist/components/Text/Text.stories.js +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.styles.js +3 -3
- package/dist/components/TextInput/TextInput.js +3 -2
- package/dist/components/TextInput/TextInput.stories.js +3 -3
- package/dist/components/TextInput/TextInput.styles.js +41 -19
- package/dist/components/Toast/Toast.js +4 -2
- package/dist/components/Toast/Toast.stories.js +1 -1
- package/dist/components/Toast/Toast.styles.js +4 -4
- package/dist/components/Toast/Toaster.js +2 -2
- package/dist/components/Tree/Tree.stories.js +1 -1
- package/dist/components/Tree/TreeItem.js +1 -1
- package/dist/esm/bundle.css +281 -124
- package/dist/esm/bundle.js +1545 -1545
- package/dist/esm/bundle.js.map +1 -1
- package/dist/esm/types/components/AlertDialog/AlertDialog.stories.d.ts +3 -0
- package/dist/esm/types/components/Dialog/Dialog.d.ts +7 -1
- package/dist/esm/types/components/Dialog/Dialog.stories.d.ts +3 -0
- package/dist/esm/types/components/Dropdown/Dropdown.d.ts +2 -0
- package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +2 -0
- package/dist/esm/types/components/Form/Field.d.ts +26 -0
- package/dist/esm/types/components/Form/FieldMessage.d.ts +7 -0
- package/dist/esm/types/components/Form/Form.d.ts +49 -11
- package/dist/esm/types/components/Form/Form.stories.d.ts +23 -0
- package/dist/esm/types/components/Form/ValidationHintList.d.ts +17 -0
- package/dist/esm/types/components/Form/ValidationHintList.stories.d.ts +9 -0
- package/dist/esm/types/components/Form/index.d.ts +10 -0
- package/dist/esm/types/components/Form/useOptionBridge.d.ts +17 -0
- package/dist/esm/types/components/OtpInput/OtpInput.d.ts +17 -0
- package/dist/esm/types/components/OtpInput/OtpInput.stories.d.ts +15 -0
- package/dist/esm/types/components/OtpInput/OtpInputGroup.d.ts +25 -0
- package/dist/esm/types/components/OtpInput/index.d.ts +5 -0
- package/dist/esm/types/components/TextInput/TextInput.styles.d.ts +3 -0
- package/dist/esm/types/index.d.ts +5 -0
- package/dist/esm/types/theme/ThemeColorCoverageRuntime.stories.d.ts +10 -0
- package/dist/esm/types/utils/colors.d.ts +84 -0
- package/dist/index.d.ts +245 -2
- package/dist/index.js +3 -0
- package/dist/src/theme/global.css +351 -149
- package/dist/theme/ThemeColorCoverageRuntime.stories.js +91 -0
- package/dist/utils/colors.js +92 -0
- package/package.json +4 -2
- package/src/components/ActionButton/ActionButton.stories.tsx +6 -6
- package/src/components/ActionButton/ActionButton.styles.ts +1 -1
- package/src/components/AlertDialog/AlertDialog.stories.tsx +22 -0
- package/src/components/AlertDialog/AlertDialog.tsx +6 -6
- package/src/components/Avatar/Avatar.stories.tsx +1 -1
- package/src/components/Avatar/Avatar.styles.ts +1 -1
- package/src/components/Avatar/AvatarBase.tsx +1 -1
- package/src/components/Avatar/AvatarGroup.stories.tsx +1 -1
- package/src/components/Button/Buttons.stories.tsx +10 -10
- package/src/components/Calendar/Calendar.tsx +3 -3
- package/src/components/Checkbox/Checkbox.stories.tsx +35 -12
- package/src/components/Checkbox/Checkbox.tsx +7 -5
- package/src/components/Collapsible/Collapsible.styles.ts +1 -1
- package/src/components/DataTable/DataTable.tsx +2 -2
- package/src/components/Dialog/Dialog.stories.tsx +173 -0
- package/src/components/Dialog/Dialog.tsx +32 -15
- package/src/components/Dropdown/Dropdown.styles.ts +1 -1
- package/src/components/Dropdown/Dropdown.tsx +16 -14
- package/src/components/DropdownMenu/DropdownMenu.tsx +3 -3
- package/src/components/FocusedScrollView/FocusedScrollView.stories.tsx +10 -10
- package/src/components/Form/Field.tsx +160 -0
- package/src/components/Form/FieldMessage.tsx +38 -0
- package/src/components/Form/Form.docs.mdx +67 -0
- package/src/components/Form/Form.stories.tsx +490 -0
- package/src/components/Form/Form.tsx +185 -87
- package/src/components/Form/README.md +284 -0
- package/src/components/Form/ValidationHintList.stories.tsx +118 -0
- package/src/components/Form/ValidationHintList.tsx +82 -0
- package/src/components/Form/index.ts +28 -0
- package/src/components/Form/useOptionBridge.ts +55 -0
- package/src/components/InputFilter/InputFilter.stories.tsx +1 -1
- package/src/components/InputFilter/InputFilter.styles.ts +14 -1
- package/src/components/InputFilter/InputFilter.tsx +33 -28
- package/src/components/Label/Label.styles.ts +2 -2
- package/src/components/Label/Label.tsx +1 -1
- package/src/components/Menu/Menu.tsx +12 -12
- package/src/components/NumberInput/NumberInput.stories.tsx +1 -1
- package/src/components/OtpInput/OtpInput.stories.tsx +168 -0
- package/src/components/OtpInput/OtpInput.tsx +210 -0
- package/src/components/OtpInput/OtpInputGroup.tsx +74 -0
- package/src/components/OtpInput/index.ts +5 -0
- package/src/components/PasswordInput/PasswordInput.stories.tsx +1 -1
- package/src/components/Popover/Popover.tsx +1 -1
- package/src/components/RadioGroup/RadioGroup.stories.tsx +4 -4
- package/src/components/RadioGroup/RadioGroup.tsx +2 -1
- package/src/components/Search/Search.stories.tsx +1 -1
- package/src/components/Search/Search.tsx +6 -2
- package/src/components/Slider/Slider.stories.tsx +7 -7
- package/src/components/Slider/Slider.tsx +1 -1
- package/src/components/Switch/Switch.stories.tsx +4 -4
- package/src/components/Table/Table.tsx +5 -5
- package/src/components/Tabs/Tabs.stories.tsx +1 -1
- package/src/components/Tabs/Tabs.tsx +29 -18
- package/src/components/Text/Text.stories.tsx +1 -1
- package/src/components/Text/Text.tsx +1 -1
- package/src/components/TextArea/TextArea.stories.tsx +1 -1
- package/src/components/TextArea/TextArea.styles.ts +3 -3
- package/src/components/TextInput/TextInput.stories.tsx +7 -7
- package/src/components/TextInput/TextInput.styles.ts +42 -19
- package/src/components/TextInput/TextInput.tsx +3 -1
- package/src/components/Toast/Toast.stories.tsx +1 -1
- package/src/components/Toast/Toast.styles.tsx +7 -7
- package/src/components/Toast/Toast.tsx +5 -4
- package/src/components/Toast/Toaster.tsx +17 -20
- package/src/components/Tree/Tree.stories.tsx +1 -1
- package/src/components/Tree/TreeItem.tsx +1 -1
- package/src/index.ts +5 -0
- package/src/theme/ThemeColorCoverageRuntime.stories.tsx +236 -0
- package/src/theme/direct-token-migration-plan.md +121 -0
- package/src/theme/figma-mcp-check-report.md +225 -0
- package/src/theme/figma-mcp-component-checklist.json +1250 -0
- package/src/theme/presets/colors.js +155 -44
- package/src/theme/themes/xspector/components/loading.css +2 -2
- package/src/theme/tokens/color.css +3 -3
- package/src/theme/tokens/components/action-button.css +1 -1
- package/src/theme/tokens/components/dropdown-menu.css +3 -3
- package/src/theme/tokens/components/loading.css +2 -2
- package/src/theme/tokens/components/switch.css +1 -1
- package/src/theme/utils.js +164 -25
- package/src/utils/colors.ts +92 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
|
|
2
|
+
import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef, HTMLAttributes, FormHTMLAttributes, ComponentType } from 'react';
|
|
3
3
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
4
4
|
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
|
|
5
5
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
@@ -17,6 +17,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
|
17
17
|
import * as ToastPrimitives from '@radix-ui/react-toast';
|
|
18
18
|
import { ToastProviderProps } from '@radix-ui/react-toast';
|
|
19
19
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
20
|
+
import { FieldValues, UseFormReturn, DefaultValues, SubmitHandler, SubmitErrorHandler, Resolver, Mode, FieldPath, RegisterOptions, FieldPathValue } from 'react-hook-form';
|
|
21
|
+
import * as yup from 'yup';
|
|
20
22
|
import { ClassValue } from 'clsx';
|
|
21
23
|
|
|
22
24
|
type ButtonProps = {
|
|
@@ -447,6 +449,7 @@ type DropdownProps = {
|
|
|
447
449
|
optionContainerClassName?: string;
|
|
448
450
|
optionItemClassName?: string;
|
|
449
451
|
optionNotFoundItemClassName?: string;
|
|
452
|
+
segmentedInput?: boolean;
|
|
450
453
|
options: Options$1[];
|
|
451
454
|
value?: Options$1;
|
|
452
455
|
onChangeText?: InputProps["onChange"];
|
|
@@ -478,6 +481,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
|
|
|
478
481
|
optionContainerClassName?: string;
|
|
479
482
|
optionItemClassName?: string;
|
|
480
483
|
optionNotFoundItemClassName?: string;
|
|
484
|
+
segmentedInput?: boolean;
|
|
481
485
|
options: Options$1[];
|
|
482
486
|
value?: Options$1;
|
|
483
487
|
onChangeText?: InputProps["onChange"];
|
|
@@ -641,6 +645,45 @@ type DatePickerProps = {
|
|
|
641
645
|
} & React__default.ComponentPropsWithoutRef<typeof Calendar>;
|
|
642
646
|
declare const DatePicker: FC<DatePickerProps>;
|
|
643
647
|
|
|
648
|
+
type OtpInputProps = {
|
|
649
|
+
value: string;
|
|
650
|
+
onChange: (value: string) => void;
|
|
651
|
+
onBlur?: () => void;
|
|
652
|
+
onComplete?: (value: string) => void;
|
|
653
|
+
length?: number;
|
|
654
|
+
disabled?: boolean;
|
|
655
|
+
invalid?: boolean;
|
|
656
|
+
autoFocus?: boolean;
|
|
657
|
+
inputMode?: React__default.HTMLAttributes<HTMLInputElement>["inputMode"];
|
|
658
|
+
charPattern?: RegExp;
|
|
659
|
+
className?: string;
|
|
660
|
+
inputClassName?: string;
|
|
661
|
+
};
|
|
662
|
+
declare const OtpInput: React__default.ForwardRefExoticComponent<OtpInputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
663
|
+
|
|
664
|
+
type OtpInputGroupProps = OtpInputProps & {
|
|
665
|
+
id?: string;
|
|
666
|
+
label?: string;
|
|
667
|
+
required?: boolean;
|
|
668
|
+
helperText?: string;
|
|
669
|
+
error?: boolean;
|
|
670
|
+
errorMessage?: string;
|
|
671
|
+
keepFooterSpace?: boolean;
|
|
672
|
+
labelClassName?: string;
|
|
673
|
+
messageClassName?: string;
|
|
674
|
+
};
|
|
675
|
+
declare const OtpInputGroup: React__default.ForwardRefExoticComponent<OtpInputProps & {
|
|
676
|
+
id?: string;
|
|
677
|
+
label?: string;
|
|
678
|
+
required?: boolean;
|
|
679
|
+
helperText?: string;
|
|
680
|
+
error?: boolean;
|
|
681
|
+
errorMessage?: string;
|
|
682
|
+
keepFooterSpace?: boolean;
|
|
683
|
+
labelClassName?: string;
|
|
684
|
+
messageClassName?: string;
|
|
685
|
+
} & React__default.RefAttributes<HTMLInputElement>>;
|
|
686
|
+
|
|
644
687
|
type LoadingProps = {
|
|
645
688
|
size?: number;
|
|
646
689
|
color?: string;
|
|
@@ -710,6 +753,12 @@ declare const DialogHeader: {
|
|
|
710
753
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
711
754
|
displayName: string;
|
|
712
755
|
};
|
|
756
|
+
declare const DialogBody: {
|
|
757
|
+
({ className, scrollable, ...props }: React.HTMLAttributes<HTMLDivElement> & {
|
|
758
|
+
scrollable?: boolean;
|
|
759
|
+
}): react_jsx_runtime.JSX.Element;
|
|
760
|
+
displayName: string;
|
|
761
|
+
};
|
|
713
762
|
declare const DialogFooter: {
|
|
714
763
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
715
764
|
displayName: string;
|
|
@@ -1097,6 +1146,116 @@ declare const FocusedScrollView: React__default.FC<FocusedScrollViewProps>;
|
|
|
1097
1146
|
declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1098
1147
|
declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1099
1148
|
|
|
1149
|
+
type FormChildren<TFieldValues extends FieldValues> = ReactNode | ((methods: UseFormReturn<TFieldValues>) => ReactNode);
|
|
1150
|
+
type FormController<TFieldValues extends FieldValues> = {
|
|
1151
|
+
submit: () => Promise<void>;
|
|
1152
|
+
getValues: () => TFieldValues;
|
|
1153
|
+
setValue: UseFormReturn<TFieldValues>["setValue"];
|
|
1154
|
+
trigger: UseFormReturn<TFieldValues>["trigger"];
|
|
1155
|
+
reset: UseFormReturn<TFieldValues>["reset"];
|
|
1156
|
+
};
|
|
1157
|
+
type FormProps<TFieldValues extends FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, "children" | "onSubmit"> & {
|
|
1158
|
+
children: FormChildren<TFieldValues>;
|
|
1159
|
+
defaultValues: DefaultValues<TFieldValues>;
|
|
1160
|
+
methods?: UseFormReturn<TFieldValues>;
|
|
1161
|
+
controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
|
|
1162
|
+
onSubmit: SubmitHandler<TFieldValues>;
|
|
1163
|
+
onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
|
|
1164
|
+
resolver?: Resolver<TFieldValues>;
|
|
1165
|
+
validationSchema?: yup.ObjectSchema<any>;
|
|
1166
|
+
mode?: Mode;
|
|
1167
|
+
reValidateMode?: Exclude<Mode, "onTouched" | "all">;
|
|
1168
|
+
};
|
|
1169
|
+
declare const createYupResolver: <TFieldValues extends FieldValues>(schema: yup.ObjectSchema<any>) => Resolver<TFieldValues>;
|
|
1170
|
+
type ControlledFormFactoryOptions<TFieldValues extends FieldValues> = {
|
|
1171
|
+
methods: UseFormReturn<TFieldValues>;
|
|
1172
|
+
defaultValues: DefaultValues<TFieldValues>;
|
|
1173
|
+
controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
|
|
1174
|
+
};
|
|
1175
|
+
type UseControlledFormOptions<TFieldValues extends FieldValues> = {
|
|
1176
|
+
defaultValues: DefaultValues<TFieldValues>;
|
|
1177
|
+
controllerRef?: React__default.MutableRefObject<FormController<TFieldValues> | null>;
|
|
1178
|
+
resolver?: Resolver<TFieldValues>;
|
|
1179
|
+
validationSchema?: yup.ObjectSchema<any>;
|
|
1180
|
+
mode?: Mode;
|
|
1181
|
+
reValidateMode?: Exclude<Mode, "onTouched" | "all">;
|
|
1182
|
+
};
|
|
1183
|
+
declare const createControlledForm: <TFieldValues extends FieldValues>({ methods, defaultValues, controllerRef, }: ControlledFormFactoryOptions<TFieldValues>) => {
|
|
1184
|
+
methods: UseFormReturn<TFieldValues>;
|
|
1185
|
+
FormRoot: React__default.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React__default.RefAttributes<FormController<TFieldValues>>>;
|
|
1186
|
+
};
|
|
1187
|
+
declare const useControlledForm: <TFieldValues extends FieldValues>({ defaultValues, controllerRef, resolver, validationSchema, mode, reValidateMode, }: UseControlledFormOptions<TFieldValues>) => {
|
|
1188
|
+
methods: UseFormReturn<TFieldValues>;
|
|
1189
|
+
FormRoot: React__default.ForwardRefExoticComponent<Omit<FormProps<TFieldValues>, "methods" | "defaultValues" | "controllerRef"> & React__default.RefAttributes<FormController<TFieldValues>>>;
|
|
1190
|
+
};
|
|
1191
|
+
type FormComponent = <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
|
|
1192
|
+
ref?: React__default.Ref<FormController<TFieldValues>>;
|
|
1193
|
+
}) => React__default.ReactElement;
|
|
1194
|
+
declare const Form: FormComponent;
|
|
1195
|
+
|
|
1196
|
+
type ControlledComponentProps = object;
|
|
1197
|
+
type FieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TComponentProps extends ControlledComponentProps = ControlledComponentProps> = {
|
|
1198
|
+
name: TName;
|
|
1199
|
+
component: ComponentType<TComponentProps>;
|
|
1200
|
+
componentProps?: Omit<TComponentProps, "name" | "value" | "onChange" | "onBlur" | "ref" | "aria-invalid">;
|
|
1201
|
+
rules?: Omit<RegisterOptions<TFieldValues, TName>, "disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber">;
|
|
1202
|
+
defaultValue?: FieldPathValue<TFieldValues, TName>;
|
|
1203
|
+
disabled?: boolean;
|
|
1204
|
+
shouldUnregister?: boolean;
|
|
1205
|
+
id?: string;
|
|
1206
|
+
describedBy?: string;
|
|
1207
|
+
valuePropName?: string;
|
|
1208
|
+
changePropName?: string;
|
|
1209
|
+
blurPropName?: string | false;
|
|
1210
|
+
refPropName?: string | false;
|
|
1211
|
+
errorMessagePropName?: string | false;
|
|
1212
|
+
invalidPropName?: string | false;
|
|
1213
|
+
parseValue?: (incomingValue: unknown, rawPayload: unknown) => FieldPathValue<TFieldValues, TName>;
|
|
1214
|
+
formatValue?: (value: FieldPathValue<TFieldValues, TName>) => TComponentProps[keyof TComponentProps];
|
|
1215
|
+
onChange?: (value: FieldPathValue<TFieldValues, TName>, rawPayload: unknown) => void;
|
|
1216
|
+
onBlur?: () => void;
|
|
1217
|
+
};
|
|
1218
|
+
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>) => react_jsx_runtime.JSX.Element;
|
|
1219
|
+
|
|
1220
|
+
type FieldMessageProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = HTMLAttributes<HTMLParagraphElement> & {
|
|
1221
|
+
name: TName;
|
|
1222
|
+
};
|
|
1223
|
+
declare const FieldMessage: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ name, className, ...props }: FieldMessageProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element | null;
|
|
1224
|
+
|
|
1225
|
+
type ValidationHintState = "pending" | "valid" | "invalid";
|
|
1226
|
+
type ValidationHintMode = ValidationHintState[];
|
|
1227
|
+
type ValidationHintRule<TValues> = {
|
|
1228
|
+
id: string;
|
|
1229
|
+
label: string;
|
|
1230
|
+
validate: (values: TValues) => boolean;
|
|
1231
|
+
when?: (values: TValues) => boolean;
|
|
1232
|
+
};
|
|
1233
|
+
type ValidationHintListProps<TValues> = {
|
|
1234
|
+
values: TValues;
|
|
1235
|
+
rules: ValidationHintRule<TValues>[];
|
|
1236
|
+
mode?: ValidationHintMode;
|
|
1237
|
+
className?: string;
|
|
1238
|
+
itemClassName?: string;
|
|
1239
|
+
};
|
|
1240
|
+
declare const ValidationHintList: <TValues>({ values, rules, mode, className, itemClassName, }: ValidationHintListProps<TValues>) => react_jsx_runtime.JSX.Element;
|
|
1241
|
+
|
|
1242
|
+
type OptionValue = string | number;
|
|
1243
|
+
type OptionLike<TValue extends OptionValue = string> = {
|
|
1244
|
+
value: TValue;
|
|
1245
|
+
label?: string;
|
|
1246
|
+
};
|
|
1247
|
+
type UseOptionBridgeOptions<TValue extends OptionValue, TOption extends OptionLike<TValue>> = {
|
|
1248
|
+
options: TOption[];
|
|
1249
|
+
loading?: boolean;
|
|
1250
|
+
buildFallbackOption?: (value: TValue, loading: boolean) => TOption;
|
|
1251
|
+
};
|
|
1252
|
+
declare const useOptionBridge: <TValue extends OptionValue = string, TOption extends OptionLike<TValue> = OptionLike<TValue>>({ options, loading, buildFallbackOption, }: UseOptionBridgeOptions<TValue, TOption>) => {
|
|
1253
|
+
toOption: (value: TValue | null | undefined) => TOption | undefined;
|
|
1254
|
+
toOptionWithFallback: (value: TValue | null | undefined) => TOption | undefined;
|
|
1255
|
+
toValue: (option: TOption | null | undefined) => TValue | undefined;
|
|
1256
|
+
optionsByValue: Map<TValue, TOption>;
|
|
1257
|
+
};
|
|
1258
|
+
|
|
1100
1259
|
declare const resloveTimestamp: (timestamp: number) => number;
|
|
1101
1260
|
declare const getStartDateOfDay: (date: Date) => Date;
|
|
1102
1261
|
declare const getEndDateOfDay: (date: Date) => Date;
|
|
@@ -1112,6 +1271,13 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
1112
1271
|
|
|
1113
1272
|
/** CSS variable names for theme colors (resolved by data-theme) */
|
|
1114
1273
|
declare const THEME_COLOR_KEYS: {
|
|
1274
|
+
readonly "main-primary": "--main-primary";
|
|
1275
|
+
readonly "main-secondary": "--main-secondary";
|
|
1276
|
+
readonly "main-tertiary": "--main-tertiary";
|
|
1277
|
+
readonly "brand-midnight-blue": "--brand-midnight-blue";
|
|
1278
|
+
readonly "brand-columbia-blue": "--brand-columbia-blue";
|
|
1279
|
+
readonly "brand-background": "--brand-background";
|
|
1280
|
+
readonly "brand-lemon-glacier": "--brand-lemon-glacier";
|
|
1115
1281
|
readonly "primary-5": "--ramps-primary-5";
|
|
1116
1282
|
readonly "primary-10": "--ramps-primary-10";
|
|
1117
1283
|
readonly "primary-20": "--ramps-primary-20";
|
|
@@ -1304,6 +1470,13 @@ declare const THEME_COLOR_KEYS: {
|
|
|
1304
1470
|
readonly "disable-solid": "--state-disable-solid";
|
|
1305
1471
|
readonly "disable-outline": "--state-disable-outline";
|
|
1306
1472
|
readonly "text-black": "--text-black";
|
|
1473
|
+
readonly "text-contrast-low": "--text-contrast-low";
|
|
1474
|
+
readonly "text-contrast-medium": "--text-contrast-medium";
|
|
1475
|
+
readonly "text-contrast-high": "--text-contrast-high";
|
|
1476
|
+
readonly "text-contrast-max": "--text-contrast-max";
|
|
1477
|
+
readonly "text-g-contrast-low": "--text-g-contrast-low";
|
|
1478
|
+
readonly "text-g-contrast-medium": "--text-g-contrast-medium";
|
|
1479
|
+
readonly "text-g-contrast-high": "--text-g-contrast-high";
|
|
1307
1480
|
readonly "text-dark": "--text-dark";
|
|
1308
1481
|
readonly "text-medium": "--text-medium";
|
|
1309
1482
|
readonly "text-light": "--text-light";
|
|
@@ -1331,6 +1504,28 @@ declare const THEME_COLOR_KEYS: {
|
|
|
1331
1504
|
readonly "function-active-hover-bg": "--function-active-hover-bg";
|
|
1332
1505
|
readonly "function-active-stroke": "--function-active-stroke";
|
|
1333
1506
|
readonly "function-active-icon": "--function-active-icon";
|
|
1507
|
+
readonly "modal-surface": "--modal-surface";
|
|
1508
|
+
readonly "modal-highlight": "--modal-highlight";
|
|
1509
|
+
readonly "modal-overlay": "--modal-overlay";
|
|
1510
|
+
readonly "bg-bg1": "--bg-bg1";
|
|
1511
|
+
readonly "bg-bg2": "--bg-bg2";
|
|
1512
|
+
readonly "bg-bg3": "--bg-bg3";
|
|
1513
|
+
readonly "bg-stroke1": "--bg-stroke1";
|
|
1514
|
+
readonly "bg-stroke2": "--bg-stroke2";
|
|
1515
|
+
readonly "state-primary-text-solid": "--state-primary-text-solid";
|
|
1516
|
+
readonly "state-primary-text-hover": "--state-primary-text-hover";
|
|
1517
|
+
readonly "state-secondary-text-solid": "--state-secondary-text-solid";
|
|
1518
|
+
readonly "state-secondary-text-hover": "--state-secondary-text-hover";
|
|
1519
|
+
readonly "state-tertiary-text-solid": "--state-tertiary-text-solid";
|
|
1520
|
+
readonly "state-tertiary-text-hover": "--state-tertiary-text-hover";
|
|
1521
|
+
readonly "state-info-text-solid": "--state-info-text-solid";
|
|
1522
|
+
readonly "state-info-text-hover": "--state-info-text-hover";
|
|
1523
|
+
readonly "state-success-text-solid": "--state-success-text-solid";
|
|
1524
|
+
readonly "state-success-text-hover": "--state-success-text-hover";
|
|
1525
|
+
readonly "state-warning-text-solid": "--state-warning-text-solid";
|
|
1526
|
+
readonly "state-warning-text-hover": "--state-warning-text-hover";
|
|
1527
|
+
readonly "state-error-text-solid": "--state-error-text-solid";
|
|
1528
|
+
readonly "state-error-text-hover": "--state-error-text-hover";
|
|
1334
1529
|
readonly "base-bg": "--base-color-bg";
|
|
1335
1530
|
readonly "base-bg2": "--base-color-bg2";
|
|
1336
1531
|
readonly "base-bg3": "--base-color-bg3";
|
|
@@ -1342,6 +1537,54 @@ declare const THEME_COLOR_KEYS: {
|
|
|
1342
1537
|
readonly "base-popup-foreground": "--base-color-popup-foreground";
|
|
1343
1538
|
readonly "common-white": "--common-white";
|
|
1344
1539
|
readonly "common-black": "--common-black";
|
|
1540
|
+
readonly "brand-rvl-yellow": "--brand-rvl-yellow";
|
|
1541
|
+
readonly "brand-rvl-grey": "--brand-rvl-grey";
|
|
1542
|
+
readonly "others-1": "--others-1";
|
|
1543
|
+
readonly "others-2": "--others-2";
|
|
1544
|
+
readonly "others-3": "--others-3";
|
|
1545
|
+
readonly "others-4": "--others-4";
|
|
1546
|
+
readonly "others-5": "--others-5";
|
|
1547
|
+
readonly "others-6": "--others-6";
|
|
1548
|
+
readonly "others-7": "--others-7";
|
|
1549
|
+
readonly "others-8": "--others-8";
|
|
1550
|
+
readonly "others-9": "--others-9";
|
|
1551
|
+
readonly "others-10": "--others-10";
|
|
1552
|
+
readonly "others-11": "--others-11";
|
|
1553
|
+
readonly "others-12": "--others-12";
|
|
1554
|
+
readonly "others-13": "--others-13";
|
|
1555
|
+
readonly "others-14": "--others-14";
|
|
1556
|
+
readonly "others-15": "--others-15";
|
|
1557
|
+
readonly "others-16": "--others-16";
|
|
1558
|
+
readonly "others-17": "--others-17";
|
|
1559
|
+
readonly "others-18": "--others-18";
|
|
1560
|
+
readonly "others-19": "--others-19";
|
|
1561
|
+
readonly "others-20": "--others-20";
|
|
1562
|
+
readonly "others-21": "--others-21";
|
|
1563
|
+
readonly "others-22": "--others-22";
|
|
1564
|
+
readonly "others-23": "--others-23";
|
|
1565
|
+
readonly "others-24": "--others-24";
|
|
1566
|
+
readonly "others-25": "--others-25";
|
|
1567
|
+
readonly "others-26": "--others-26";
|
|
1568
|
+
readonly "others-27": "--others-27";
|
|
1569
|
+
readonly "others-28": "--others-28";
|
|
1570
|
+
readonly "others-29": "--others-29";
|
|
1571
|
+
readonly "others-30": "--others-30";
|
|
1572
|
+
readonly "others-31": "--others-31";
|
|
1573
|
+
readonly "others-32": "--others-32";
|
|
1574
|
+
readonly "others-33": "--others-33";
|
|
1575
|
+
readonly "others-34": "--others-34";
|
|
1576
|
+
readonly "others-35": "--others-35";
|
|
1577
|
+
readonly "page-bg-main": "--page-bg-main";
|
|
1578
|
+
readonly "page-bg-circle-top-g-in": "--page-bg-circle-top-g-in";
|
|
1579
|
+
readonly "page-bg-circle-top-g-out": "--page-bg-circle-top-g-out";
|
|
1580
|
+
readonly "page-bg-circle-bottom-g-in": "--page-bg-circle-bottom-g-in";
|
|
1581
|
+
readonly "page-bg-circle-bottom-g-out": "--page-bg-circle-bottom-g-out";
|
|
1582
|
+
readonly "modal-line": "--modal-line";
|
|
1583
|
+
readonly "bg-bg4": "--bg-bg4";
|
|
1584
|
+
readonly "bg-bg5": "--bg-bg5";
|
|
1585
|
+
readonly "bg-stroke3": "--bg-stroke3";
|
|
1586
|
+
readonly "bg-stroke4": "--bg-stroke4";
|
|
1587
|
+
readonly "bg-stroke5": "--bg-stroke5";
|
|
1345
1588
|
readonly background: "--background";
|
|
1346
1589
|
readonly foreground: "--foreground";
|
|
1347
1590
|
readonly surface: "--surface";
|
|
@@ -1452,4 +1695,4 @@ declare const srgbToHex: (color: string) => string;
|
|
|
1452
1695
|
*/
|
|
1453
1696
|
declare function getLucideIconNames(): Promise<string[]>;
|
|
1454
1697
|
|
|
1455
|
-
export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type Options$1 as Options, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, usePrevious, useToast };
|
|
1698
|
+
export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type ControlledFormFactoryOptions, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Field, FieldMessage, type FieldMessageProps, type FieldProps, FocusedScrollView, Footer, type FooterProps, type FooterVariant, Form, type FormController, type FormProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, type MaskRule, MaskedTextInput, type MaskedTextInputProps, Menu, MenuItem, type MenuItemType, MenuLabel, type MenuOption, type MenuProps, MenuSeparator, Navbar, type NavbarProps, type NavbarVariant, NumberInput, type NumberInputProps, type OptionLike, type Options$1 as Options, OtpInput, OtpInputGroup, type OtpInputGroupProps, type OtpInputProps, PasswordInput, type PasswordInputProps, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, THEME_COLOR_KEYS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, type ThemeColorKey, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, type UseControlledFormOptions, type UseOptionBridgeOptions, ValidationHintList, type ValidationHintListProps, type ValidationHintMode, type ValidationHintRule, type ValidationHintState, cn, createControlledForm, createYupResolver, getEndDateOfDay, getLucideIconNames, getStartDateOfDay, getStartEndTimestampOfDay, getThemeColor, getThemeColors, getTimestampUTC, reducer, resloveTimestamp, srgbToHex, toast, useControlledForm, useOptionBridge, usePrevious, useToast };
|
package/dist/index.js
CHANGED
|
@@ -21,6 +21,8 @@ export { Avatar, AvatarGroup } from "./components/Avatar";
|
|
|
21
21
|
export { Collapsible } from "./components/Collapsible";
|
|
22
22
|
export { Calendar } from "./components/Calendar";
|
|
23
23
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
24
|
+
export { default as OtpInput } from "./components/OtpInput";
|
|
25
|
+
export { OtpInputGroup } from "./components/OtpInput";
|
|
24
26
|
export { Popover, PopoverTrigger, PopoverContent, } from "./components/Popover/Popover";
|
|
25
27
|
export { default as Loading } from "./components/Loading/Loading";
|
|
26
28
|
export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
|
|
@@ -43,6 +45,7 @@ export * from "./components/Toast/useToast";
|
|
|
43
45
|
export * from "./components/Tree";
|
|
44
46
|
export * from "./components/FocusedScrollView/FocusedScrollView";
|
|
45
47
|
export * from "./components/RadioGroup/RadioGroup";
|
|
48
|
+
export * from "./components/Form";
|
|
46
49
|
// UTILS
|
|
47
50
|
export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
|
|
48
51
|
// Hooks
|