mado-ui 0.1.0
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/LICENSE +674 -0
- package/README.md +274 -0
- package/css/index.css +5829 -0
- package/dist/components/button.d.ts +21 -0
- package/dist/components/form/index.d.ts +30 -0
- package/dist/components/form/input/index.d.ts +36 -0
- package/dist/components/form/submit-button.d.ts +20 -0
- package/dist/components/ghost.d.ts +4 -0
- package/dist/components/heading.d.ts +11 -0
- package/dist/components/index.d.ts +8 -0
- package/dist/components/link.d.ts +51 -0
- package/dist/components/mado-ui-provider.d.ts +1 -0
- package/dist/components/modal.d.ts +19 -0
- package/dist/components/time.d.ts +16 -0
- package/dist/hooks/create-fast-context.d.ts +7 -0
- package/dist/hooks/index.d.ts +4 -0
- package/dist/hooks/use-anime-scope.d.ts +15 -0
- package/dist/hooks/use-form-context.d.ts +30 -0
- package/dist/hooks/use-form-status.d.ts +7 -0
- package/dist/icons/3-people.d.ts +2 -0
- package/dist/icons/3-rectangles-desktop-fill.d.ts +2 -0
- package/dist/icons/3-rectangles-desktop.d.ts +2 -0
- package/dist/icons/airplane.d.ts +2 -0
- package/dist/icons/arrow-triangle-2-circlepath-circle-fill.d.ts +2 -0
- package/dist/icons/arrow-triangle-2-circlepath-circle.d.ts +2 -0
- package/dist/icons/bag-fill.d.ts +2 -0
- package/dist/icons/banknote.d.ts +2 -0
- package/dist/icons/bell-fill.d.ts +2 -0
- package/dist/icons/bolt-car.d.ts +2 -0
- package/dist/icons/bolt-fill.d.ts +2 -0
- package/dist/icons/bolt-ring-closed.d.ts +2 -0
- package/dist/icons/bolt-trianglebadge-exclamationmark.d.ts +2 -0
- package/dist/icons/book-fill.d.ts +2 -0
- package/dist/icons/bookmark-fill.d.ts +2 -0
- package/dist/icons/briefcase-fill.d.ts +2 -0
- package/dist/icons/bubble-left-fill.d.ts +2 -0
- package/dist/icons/building-2-fill.d.ts +2 -0
- package/dist/icons/calendar.d.ts +2 -0
- package/dist/icons/camera-fill.d.ts +2 -0
- package/dist/icons/car-fill.d.ts +2 -0
- package/dist/icons/cart-fill.d.ts +2 -0
- package/dist/icons/chart-bar-doc-horizontal.d.ts +2 -0
- package/dist/icons/checkmark-seal.d.ts +2 -0
- package/dist/icons/checkmark.d.ts +2 -0
- package/dist/icons/chevron-compact-down.d.ts +2 -0
- package/dist/icons/chevron-down.d.ts +2 -0
- package/dist/icons/chevron-left-forwardslash-chevron-right.d.ts +2 -0
- package/dist/icons/chevron-left.d.ts +2 -0
- package/dist/icons/chevron-right.d.ts +2 -0
- package/dist/icons/chevron-up-chevron-down.d.ts +2 -0
- package/dist/icons/circle-fill.d.ts +2 -0
- package/dist/icons/clock-badge-checkmark.d.ts +2 -0
- package/dist/icons/clock-fill.d.ts +2 -0
- package/dist/icons/cloud-fill.d.ts +2 -0
- package/dist/icons/cube-fill.d.ts +2 -0
- package/dist/icons/curve-point-left.d.ts +2 -0
- package/dist/icons/dial-high.d.ts +2 -0
- package/dist/icons/doc-fill.d.ts +2 -0
- package/dist/icons/doc-on-clipboard.d.ts +2 -0
- package/dist/icons/doc-on-doc-fill.d.ts +2 -0
- package/dist/icons/doc-on-doc.d.ts +2 -0
- package/dist/icons/doc-text-magnifyingglass.d.ts +2 -0
- package/dist/icons/dollar-sign.d.ts +2 -0
- package/dist/icons/ellipsis-circle-fill.d.ts +2 -0
- package/dist/icons/ellipsis-circle.d.ts +2 -0
- package/dist/icons/envelope-fill.d.ts +2 -0
- package/dist/icons/envelope.d.ts +2 -0
- package/dist/icons/exclamationmark-octagon.d.ts +2 -0
- package/dist/icons/eye.d.ts +2 -0
- package/dist/icons/figure-water-fitness.d.ts +2 -0
- package/dist/icons/flag-fill.d.ts +2 -0
- package/dist/icons/flame-fill.d.ts +2 -0
- package/dist/icons/folder-fill.d.ts +2 -0
- package/dist/icons/folder.d.ts +2 -0
- package/dist/icons/gearshape-fill.d.ts +2 -0
- package/dist/icons/gearshape.d.ts +2 -0
- package/dist/icons/gift-fill.d.ts +2 -0
- package/dist/icons/globe-americas-fill.d.ts +2 -0
- package/dist/icons/hare-fill.d.ts +2 -0
- package/dist/icons/house-deskclock.d.ts +2 -0
- package/dist/icons/house-fill.d.ts +2 -0
- package/dist/icons/house.d.ts +2 -0
- package/dist/icons/index.d.ts +104 -0
- package/dist/icons/iphone-house.d.ts +2 -0
- package/dist/icons/light-ribbon.d.ts +2 -0
- package/dist/icons/lightbulb-fill.d.ts +2 -0
- package/dist/icons/lightbulb-led.d.ts +2 -0
- package/dist/icons/list-bullet-clipboard-fill.d.ts +2 -0
- package/dist/icons/magnifyingglass.d.ts +2 -0
- package/dist/icons/map-pin-ellipse.d.ts +2 -0
- package/dist/icons/minus-plus-batterblock.d.ts +2 -0
- package/dist/icons/network-shield.d.ts +2 -0
- package/dist/icons/network.d.ts +2 -0
- package/dist/icons/newspaper-fill.d.ts +2 -0
- package/dist/icons/number.d.ts +2 -0
- package/dist/icons/paperplane-fill.d.ts +2 -0
- package/dist/icons/person-crop-square.d.ts +2 -0
- package/dist/icons/person-fill-questionmark.d.ts +2 -0
- package/dist/icons/person-fill.d.ts +2 -0
- package/dist/icons/person.d.ts +2 -0
- package/dist/icons/phone-arrow-up-right.d.ts +2 -0
- package/dist/icons/phone-fill.d.ts +2 -0
- package/dist/icons/phone.d.ts +2 -0
- package/dist/icons/play-rectangle-fill.d.ts +2 -0
- package/dist/icons/plus.d.ts +2 -0
- package/dist/icons/qrcode.d.ts +2 -0
- package/dist/icons/rectangle-portrait-and-arrow-left-fill.d.ts +2 -0
- package/dist/icons/rectangle-portrait-and-arrow-left.d.ts +2 -0
- package/dist/icons/sensor.d.ts +2 -0
- package/dist/icons/signature.d.ts +2 -0
- package/dist/icons/solar-panel.d.ts +2 -0
- package/dist/icons/square-and-arrow-down-fill.d.ts +2 -0
- package/dist/icons/square-and-arrow-down.d.ts +2 -0
- package/dist/icons/square-and-arrow-up-fill.d.ts +2 -0
- package/dist/icons/square-and-arrow-up.d.ts +2 -0
- package/dist/icons/square-and-pencil-fill.d.ts +2 -0
- package/dist/icons/square-and-pencil.d.ts +2 -0
- package/dist/icons/text-bubble.d.ts +2 -0
- package/dist/icons/trash-fill.d.ts +2 -0
- package/dist/icons/trash.d.ts +2 -0
- package/dist/icons/tree.d.ts +2 -0
- package/dist/icons/umbrella-fill.d.ts +2 -0
- package/dist/icons/xmark.d.ts +2 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.esm.js +1168 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +1186 -0
- package/dist/index.js.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/utils.d.ts +18 -0
- package/dist/utils/class-management.d.ts +29 -0
- package/dist/utils/custom-tailwind-merge.d.ts +4 -0
- package/dist/utils/get-date.d.ts +153 -0
- package/dist/utils/helpers.d.ts +2 -0
- package/dist/utils/index.d.ts +9 -0
- package/dist/utils/math.d.ts +1 -0
- package/dist/utils/regex.d.ts +12 -0
- package/dist/utils/string-manipulation.d.ts +17 -0
- package/dist/utils/tw-sort.d.ts +1 -0
- package/package.json +63 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, RefObject } from 'react';
|
|
2
|
+
import { OneOf } from '../types';
|
|
3
|
+
type HtmlButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
4
|
+
ref?: RefObject<HTMLButtonElement | null>;
|
|
5
|
+
};
|
|
6
|
+
type LinkOrButtonProps<T extends HTMLButtonElement | HTMLAnchorElement | unknown> = [T] extends [HTMLButtonElement] ? HtmlButtonProps : [T] extends [HTMLAnchorElement] ? AnchorProps : OneOf<[AnchorProps, HtmlButtonProps]>;
|
|
7
|
+
export type ButtonProps<T extends HTMLButtonElement | HTMLAnchorElement | unknown> = LinkOrButtonProps<T> & {
|
|
8
|
+
/** The size of the element based on padding. */
|
|
9
|
+
padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
10
|
+
/** The size of the border-1 radius. */
|
|
11
|
+
rounded?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
12
|
+
/** Color theme. */
|
|
13
|
+
theme?: 'blue' | 'blue-gradient' | 'brown' | 'brown-gradient' | 'green' | 'green-gradient' | 'grey' | 'grey-gradient' | 'sky-blue' | 'sky-blue-gradient' | 'magenta' | 'magenta-gradient' | 'neutral' | 'neutral-gradient' | 'orange' | 'orange-gradient' | 'pink' | 'pink-gradient' | 'primary' | 'primary-gradient' | 'primary-light' | 'purple' | 'purple-gradient' | 'red' | 'red-gradient' | 'violet' | 'violet-gradient' | 'yellow' | 'yellow-gradient';
|
|
14
|
+
};
|
|
15
|
+
import { AnchorProps } from './link';
|
|
16
|
+
/**
|
|
17
|
+
* # Button
|
|
18
|
+
* - A pre-styled button with utility props for easy customization depending on use case.
|
|
19
|
+
*/
|
|
20
|
+
export default function Button<T extends HTMLButtonElement | HTMLAnchorElement | unknown = unknown>({ className, padding, rounded, theme, ref, ...props }: ButtonProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ElementType, FormEvent, FormEventHandler } from 'react';
|
|
2
|
+
import { AnyElementProps } from '../../types';
|
|
3
|
+
export type FormSubmitArgs = {
|
|
4
|
+
event: FormEvent<HTMLFormElement>;
|
|
5
|
+
formContext: FormContext;
|
|
6
|
+
};
|
|
7
|
+
export type FormProps<T extends ElementType = 'form'> = Omit<AnyElementProps<T, {
|
|
8
|
+
controlled?: 'auto' | 'manual' | 'none';
|
|
9
|
+
handleSubmit?: FormEventHandler<HTMLFormElement>;
|
|
10
|
+
initialStatus?: FormStatus;
|
|
11
|
+
onError?: (e: FormEvent<HTMLFormElement>, error: string) => void;
|
|
12
|
+
onSuccess?: (e: FormEvent<HTMLFormElement>) => void;
|
|
13
|
+
}>, 'onSubmit'> & {
|
|
14
|
+
onSubmit?: ({ event, formContext, }: FormSubmitArgs) => ({
|
|
15
|
+
error?: string;
|
|
16
|
+
status?: 'error';
|
|
17
|
+
} | {
|
|
18
|
+
status?: 'success';
|
|
19
|
+
}) | Promise<{
|
|
20
|
+
error?: string;
|
|
21
|
+
status?: 'error';
|
|
22
|
+
} | {
|
|
23
|
+
status?: 'success';
|
|
24
|
+
}>;
|
|
25
|
+
};
|
|
26
|
+
import { FormContext, FormStatus } from '../../hooks';
|
|
27
|
+
export default function Form<T extends ElementType = 'form'>({ controlled, initialStatus, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
import Input, { InputProps } from './input';
|
|
29
|
+
import SubmitButton, { SubmitButtonProps } from './submit-button';
|
|
30
|
+
export { Input, InputProps, SubmitButton, SubmitButtonProps };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { HTMLInputTypeAttribute, RefObject } from 'react';
|
|
2
|
+
import { OneOf } from '../../../types';
|
|
3
|
+
type PasswordOptionList = {
|
|
4
|
+
matchPreviousInput: boolean;
|
|
5
|
+
requireLowercaseCharacter: boolean;
|
|
6
|
+
requireNumber: boolean;
|
|
7
|
+
requireSpecialCharacter: boolean;
|
|
8
|
+
requireUppercaseCharacter: boolean;
|
|
9
|
+
};
|
|
10
|
+
type TypeOfPasswordOrNot = OneOf<[
|
|
11
|
+
{
|
|
12
|
+
type?: 'password';
|
|
13
|
+
passwordOptions?: Partial<PasswordOptionList>;
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
type?: Exclude<HTMLInputTypeAttribute, 'password'>;
|
|
17
|
+
}
|
|
18
|
+
]>;
|
|
19
|
+
export type InputProps = Omit<HeadlessInputProps, 'name' | 'type'> & TypeOfPasswordOrNot & {
|
|
20
|
+
description?: string;
|
|
21
|
+
descriptionProps?: Omit<DescriptionProps, 'children'> & {
|
|
22
|
+
/** @deprecated Use the `description` prop instead. */
|
|
23
|
+
children?: never;
|
|
24
|
+
};
|
|
25
|
+
fieldProps?: Omit<FieldProps, 'children' | 'disabled'>;
|
|
26
|
+
label?: string;
|
|
27
|
+
labelProps?: Omit<LabelProps, 'children'> & {
|
|
28
|
+
/** @deprecated Use the `label` prop instead. */
|
|
29
|
+
children?: never;
|
|
30
|
+
};
|
|
31
|
+
name: string;
|
|
32
|
+
ref?: RefObject<HTMLInputElement | null>;
|
|
33
|
+
};
|
|
34
|
+
import { DescriptionProps, FieldProps, InputProps as HeadlessInputProps, LabelProps } from '@headlessui/react';
|
|
35
|
+
export default function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onChange, placeholder, ref, required, type, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type SubmitButtonProps = ButtonProps<HTMLButtonElement> & {
|
|
3
|
+
/** The message to display when the form status is "error" */
|
|
4
|
+
error?: ReactNode;
|
|
5
|
+
/** The message to display when the form status is "incomplete" */
|
|
6
|
+
incomplete?: ReactNode;
|
|
7
|
+
/** The message to display when the form status is "loading" */
|
|
8
|
+
loading?: ReactNode;
|
|
9
|
+
/** @deprecated Use `children` instead.
|
|
10
|
+
*
|
|
11
|
+
* ~~The message to display when the form status is "ready"~~
|
|
12
|
+
*/
|
|
13
|
+
ready?: never;
|
|
14
|
+
/** The message to display when the form status is "success" */
|
|
15
|
+
success?: ReactNode;
|
|
16
|
+
/** The message to display when the form status is "readonly" */
|
|
17
|
+
readonly?: ReactNode;
|
|
18
|
+
};
|
|
19
|
+
import { ButtonProps } from '../button';
|
|
20
|
+
export default function SubmitButton({ children, className, 'aria-disabled': ariaDisabled, error, incomplete, loading, success, theme, type, ref, ...props }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
|
|
2
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
3
|
+
ref?: RefObject<HTMLHeadingElement | null>;
|
|
4
|
+
};
|
|
5
|
+
import { HTMLAttributes, RefObject } from 'react';
|
|
6
|
+
/**
|
|
7
|
+
* # Heading
|
|
8
|
+
* A heading component that renders HTML heading elements (h1-h6) with appropriate styling.
|
|
9
|
+
* Automatically generates an ID for the heading based on its content if none is provided.
|
|
10
|
+
*/
|
|
11
|
+
export default function Heading({ as, children, className, id, ref, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import Button, { ButtonProps } from './button';
|
|
2
|
+
import Form, { FormProps, FormSubmitArgs, Input, InputProps, SubmitButton, SubmitButtonProps } from './form';
|
|
3
|
+
import Ghost from './ghost';
|
|
4
|
+
import Heading, { HeadingProps } from './heading';
|
|
5
|
+
import Link, { Anchor, AnchorProps, LinkProps } from './link';
|
|
6
|
+
import Modal, { ModalDialog, ModalProps, ModalTrigger } from './modal';
|
|
7
|
+
import Time from './time';
|
|
8
|
+
export { Anchor, AnchorProps, Button, ButtonProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Time, };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { OneOf } from '../types';
|
|
2
|
+
import { AnchorHTMLAttributes, RefObject } from 'react';
|
|
3
|
+
export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
ref?: RefObject<HTMLAnchorElement | null>;
|
|
6
|
+
};
|
|
7
|
+
export declare function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export type LinkProps = AnchorProps & OneOf<[
|
|
9
|
+
{
|
|
10
|
+
type?: 'center' | 'lift' | 'ltr' | 'multiline' | 'multiline-center' | 'multiline-lift' | 'multiline-ltr' | 'multiline-rtl' | 'multiline-static' | 'normal' | 'rtl' | 'static';
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
type?: 'fill' | 'fill-lift' | 'fill-ltr' | 'fill-rtl' | 'multiline-fill' | 'multiline-fill-center' | 'multiline-fill-ltr' | 'multiline-fill-lift' | 'multiline-fill-rtl';
|
|
14
|
+
theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'neutral' | 'orange' | 'pink' | 'primary' | 'purple' | 'red' | 'violet' | 'yellow';
|
|
15
|
+
}
|
|
16
|
+
]>;
|
|
17
|
+
export declare const lineNormalClasses: string;
|
|
18
|
+
export declare const lineLtrClasses: string;
|
|
19
|
+
export declare const lineRtlClasses: string;
|
|
20
|
+
export declare const lineCenterClasses: string;
|
|
21
|
+
export declare const lineLiftClasses: string;
|
|
22
|
+
/**
|
|
23
|
+
* # Link
|
|
24
|
+
*
|
|
25
|
+
* - A component for rendering links with various styles and options.
|
|
26
|
+
* - Utilizes the Next.js `Link` component and provides additional functionality.
|
|
27
|
+
*
|
|
28
|
+
* ---
|
|
29
|
+
*
|
|
30
|
+
* ## Styles
|
|
31
|
+
*
|
|
32
|
+
* This component includes various classes to style the link. The styles are divided into two types:
|
|
33
|
+
*
|
|
34
|
+
* - Line styles: These styles add a line underneath the link, and include variations for different positions and orientations.
|
|
35
|
+
* - Fill styles: These styles add a background color behind the link, and include variations for different positions and orientations.
|
|
36
|
+
* - Multiline styles: These styles seek to accomplish the same as the line and fill styles, while offering multiline support.
|
|
37
|
+
*
|
|
38
|
+
* ---
|
|
39
|
+
*
|
|
40
|
+
* ## Examples
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* <Link href='/about' type='ltr' title='About Us'>Learn more about our company</Link>
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* <Link href='/about' type='fill-ltr' title='About Us'>Learn more about our company</Link>
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
|
|
50
|
+
*/
|
|
51
|
+
export default function Link({ type, theme, className, ref, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AnimeScopeProvider as default, AnimeScopeProvider as MadoUIProvider } from '../hooks/use-anime-scope';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { AnyElementProps } from '../types';
|
|
2
|
+
export type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
3
|
+
children: ReactNode | (({ openModal, closeModal }: {
|
|
4
|
+
openModal: () => void;
|
|
5
|
+
closeModal: () => void;
|
|
6
|
+
}) => ReactNode);
|
|
7
|
+
closeButtonRef?: RefObject<HTMLButtonElement | null>;
|
|
8
|
+
dragToClose?: boolean;
|
|
9
|
+
onClose?: () => void;
|
|
10
|
+
onOpen?: () => void;
|
|
11
|
+
place?: 'center' | 'bottom';
|
|
12
|
+
};
|
|
13
|
+
import { ElementType, HTMLAttributes, ReactNode, RefObject } from 'react';
|
|
14
|
+
import { Button as HeadlessButton, DialogTitleProps } from '@headlessui/react';
|
|
15
|
+
export declare function ModalTrigger<T extends ElementType = typeof HeadlessButton>({ as, ...props }: AnyElementProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function ModalTitle(props: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function ModalDialog(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function ModalClose<T extends ElementType = typeof HeadlessButton>({ as, ...props }: AnyElementProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default function Modal({ children, className, onClose, onOpen, place }: ModalProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
type TimeProps = HTMLAttributes<HTMLTimeElement> & Partial<{
|
|
2
|
+
dateObject: Date;
|
|
3
|
+
dateTime: string;
|
|
4
|
+
day: boolean;
|
|
5
|
+
hours: boolean;
|
|
6
|
+
milliseconds: boolean;
|
|
7
|
+
minutes: boolean;
|
|
8
|
+
month: boolean;
|
|
9
|
+
seconds: boolean;
|
|
10
|
+
year: boolean;
|
|
11
|
+
}> & {
|
|
12
|
+
ref?: RefObject<HTMLTimeElement | null>;
|
|
13
|
+
};
|
|
14
|
+
import { HTMLAttributes, RefObject } from 'react';
|
|
15
|
+
export default function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export default function createFastContext<Store>(defaultInitialState: Store): {
|
|
3
|
+
Provider: ({ initialValue, ...props }: Pick<HTMLAttributes<HTMLElement>, "children"> & {
|
|
4
|
+
initialValue?: Store;
|
|
5
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
useStore: <SelectorOutput>(selector: (store: Store) => SelectorOutput, initialValue?: Store) => [SelectorOutput | undefined, ((value: Store | ((prevState: Store) => Store)) => void) | undefined];
|
|
7
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import createFastContext from './create-fast-context';
|
|
2
|
+
import { defineField, Field, FieldType, FormContext, FormContextProvider, useFormContext } from './use-form-context';
|
|
3
|
+
import { FormStatus, FormStatusProvider, useFormStatus } from './use-form-status';
|
|
4
|
+
export { createFastContext, defineField, Field, FieldType, FormContext, FormContextProvider, useFormContext, FormStatus, FormStatusProvider, useFormStatus, };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type AnimeScopeStore = {
|
|
2
|
+
scope: Scope | null;
|
|
3
|
+
methods: Record<string, Function>;
|
|
4
|
+
};
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
import { Scope } from 'animejs';
|
|
7
|
+
declare function useAnimeScope(): {
|
|
8
|
+
scope: Scope | null;
|
|
9
|
+
methods: Record<string, Function>;
|
|
10
|
+
isReady: boolean;
|
|
11
|
+
};
|
|
12
|
+
declare function AnimeScopeProvider({ children }: {
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export { AnimeScopeProvider, useAnimeScope };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type FieldType = 'array' | 'email' | 'file' | 'number' | 'object' | 'string' | 'tel' | 'textarea' | 'url';
|
|
3
|
+
type ArrayObjectOrNormalField = {
|
|
4
|
+
type: 'email' | 'file' | 'number' | 'string' | 'tel' | 'textarea' | 'url';
|
|
5
|
+
} | {
|
|
6
|
+
type: 'array';
|
|
7
|
+
of: ArrayObjectOrNormalField;
|
|
8
|
+
} | {
|
|
9
|
+
type: 'object';
|
|
10
|
+
fields: Field[];
|
|
11
|
+
};
|
|
12
|
+
export type Field = ArrayObjectOrNormalField & {
|
|
13
|
+
id: string;
|
|
14
|
+
invalid?: boolean;
|
|
15
|
+
name: string;
|
|
16
|
+
required?: boolean;
|
|
17
|
+
value: string;
|
|
18
|
+
};
|
|
19
|
+
export type FormContext = Field[];
|
|
20
|
+
/**
|
|
21
|
+
* # Define Field
|
|
22
|
+
*
|
|
23
|
+
* This is a helper function to define a field in a form context with type safety.
|
|
24
|
+
*/
|
|
25
|
+
export declare function defineField(fieldDefinition: Field): Field;
|
|
26
|
+
export declare function FormContextProvider({ children }: {
|
|
27
|
+
children?: ReactNode;
|
|
28
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare function useFormContext(): [FormContext | undefined, ((value: FormContext | ((prevState: FormContext) => FormContext)) => void) | undefined];
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export type FormStatus = 'error' | 'incomplete' | 'loading' | 'ready' | 'success' | 'readonly';
|
|
3
|
+
export declare function FormStatusProvider({ children, initialStatus, }: {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
initialStatus?: FormStatus;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function useFormStatus(): [FormStatus | undefined, ((value: FormStatus | ((prevState: FormStatus) => FormStatus)) => void) | undefined];
|