@finafrica/fin-ui 1.1.40
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/README.md +27 -0
- package/dist/components/Avatar/Avatar.d.ts +13 -0
- package/dist/components/Avatar/Avatar.stories.d.ts +16 -0
- package/dist/components/Badge/Badge.d.ts +12 -0
- package/dist/components/Badge/Badge.stories.d.ts +12 -0
- package/dist/components/Box/Box.d.ts +9 -0
- package/dist/components/Box/Box.stories.d.ts +10 -0
- package/dist/components/BreadCrumbs/BreadCrumbs.d.ts +11 -0
- package/dist/components/BreadCrumbs/BreadCrumbs.stories.d.ts +8 -0
- package/dist/components/Button/Button.d.ts +28 -0
- package/dist/components/Button/Button.stories.d.ts +21 -0
- package/dist/components/Calendar/Calendar.d.ts +4 -0
- package/dist/components/Calendar/Calendar.stories.d.ts +6 -0
- package/dist/components/Container/Container.d.ts +10 -0
- package/dist/components/Container/Container.stories.d.ts +9 -0
- package/dist/components/DatePicker/DatePicker.d.ts +9 -0
- package/dist/components/DatePicker/DatePicker.stories.d.ts +6 -0
- package/dist/components/Debug/Debug.d.ts +4 -0
- package/dist/components/Debug/Debug.stories.d.ts +6 -0
- package/dist/components/Dialog/Dialog.d.ts +31 -0
- package/dist/components/Divider/Divider.d.ts +4 -0
- package/dist/components/Divider/Divider.stories.d.ts +6 -0
- package/dist/components/Document/Document.d.ts +8 -0
- package/dist/components/Document/Document.stories.d.ts +11 -0
- package/dist/components/DropDown/DropDown.d.ts +32 -0
- package/dist/components/Flex/Flex.d.ts +16 -0
- package/dist/components/Image/Image.d.ts +11 -0
- package/dist/components/InfoCard/InfoCard.d.ts +8 -0
- package/dist/components/InfoCard/InfoCard.stories.d.ts +9 -0
- package/dist/components/Input/Input.d.ts +6 -0
- package/dist/components/Input/Input.stories.d.ts +16 -0
- package/dist/components/InputButton/InputButton.d.ts +8 -0
- package/dist/components/Logo/Logo.d.ts +4 -0
- package/dist/components/Menu/Menu.d.ts +19 -0
- package/dist/components/Menu/Menu.stories.d.ts +6 -0
- package/dist/components/NavLink/NavLink.d.ts +9 -0
- package/dist/components/ObjectViewer/ObjectViewer.d.ts +7 -0
- package/dist/components/Select/Select.d.ts +13 -0
- package/dist/components/Switch/Switch.d.ts +6 -0
- package/dist/components/Switch/Switch.stories.d.ts +27 -0
- package/dist/components/Table/Table.d.ts +23 -0
- package/dist/components/Table/Table.stories.d.ts +6 -0
- package/dist/components/Tabs/Tabs.d.ts +17 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +6 -0
- package/dist/components/Text/Text.d.ts +18 -0
- package/dist/components/Text/Text.stories.d.ts +10 -0
- package/dist/components/TextArea/TextArea.d.ts +6 -0
- package/dist/components/Tooltip/Tooltip.d.ts +7 -0
- package/dist/components/Wrapper/Wrapper.d.ts +12 -0
- package/dist/components/index.d.ts +31 -0
- package/dist/index.d.ts +345 -0
- package/dist/index.esm.js +7 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +7 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/classnames.d.ts +2 -0
- package/dist/lib/index.d.ts +1 -0
- package/package.json +94 -0
- package/tailwind.config.js +96 -0
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Fin UI Component Library
|
|
2
|
+
|
|
3
|
+
Welcome to the Fin UI component library! This library provides a collection of reusable UI components designed to help you build beautiful and functional user interfaces for your web applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To install Fin UI, you can use npm:
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install fin-ui
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
import { Button, Box, Input } from 'fin-ui';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Documentation
|
|
21
|
+
|
|
22
|
+
For detailed documentation, including props and usage examples for each component, please visit our website: [ui.fin.africa](https://ui.fin.africa)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## We Value Your Feedback!
|
|
26
|
+
|
|
27
|
+
Thank you for using Fin UI! We hope these components help you create amazing user interfaces. If you have any feedback or suggestions, please don't hesitate to reach out. Happy coding!
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FC, HTMLAttributes } from "react";
|
|
2
|
+
import { VariantProps } from "cva";
|
|
3
|
+
declare const avatar: (props?: {
|
|
4
|
+
variant?: "square" | "circle";
|
|
5
|
+
color?: "primary" | "danger" | "info" | "warning" | "light" | "secondary";
|
|
6
|
+
size?: "sm" | "md" | "lg";
|
|
7
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
8
|
+
export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof avatar> {
|
|
9
|
+
src?: string;
|
|
10
|
+
name: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const Avatar: FC<AvatarProps>;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Avatar } from './Avatar';
|
|
3
|
+
declare const _default: Meta<typeof Avatar>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Avatar>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const WithImage: Story;
|
|
8
|
+
export declare const Danger: Story;
|
|
9
|
+
export declare const Square: Story;
|
|
10
|
+
export declare const SquareImg: Story;
|
|
11
|
+
export declare const Small: Story;
|
|
12
|
+
export declare const Large: Story;
|
|
13
|
+
export declare const WithClassName: Story;
|
|
14
|
+
export declare const Warning: Story;
|
|
15
|
+
export declare const Secondary: Story;
|
|
16
|
+
export declare const WithIcon: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, HTMLAttributes } from "react";
|
|
2
|
+
import { VariantProps } from "cva";
|
|
3
|
+
declare const badge: (props?: {
|
|
4
|
+
variant?: "outline" | "solid";
|
|
5
|
+
rounded?: "sm" | "md" | "lg" | "none" | "full";
|
|
6
|
+
color?: "primary" | "danger" | "info" | "warning" | "light" | "secondary";
|
|
7
|
+
size?: "sm" | "md" | "lg";
|
|
8
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
9
|
+
export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badge> {
|
|
10
|
+
}
|
|
11
|
+
export declare const Badge: FC<BadgeProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Badge } from './Badge';
|
|
3
|
+
declare const _default: Meta<typeof Badge>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Badge>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Danger: Story;
|
|
8
|
+
export declare const Warning: Story;
|
|
9
|
+
export declare const Info: Story;
|
|
10
|
+
export declare const Large: Story;
|
|
11
|
+
export declare const Small: Story;
|
|
12
|
+
export declare const Outline: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FC, HTMLAttributes, CSSProperties, ReactNode, JSXElementConstructor } from "react";
|
|
2
|
+
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
className?: string;
|
|
4
|
+
as?: "div" | "form" | "section" | "article" | JSXElementConstructor<any>;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
html?: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const Box: FC<Props>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Box } from './Box';
|
|
3
|
+
declare const _default: Meta<typeof Box>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Box>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const CustomContent: Story;
|
|
8
|
+
export declare const CustomElement: Story;
|
|
9
|
+
export declare const InlineStyles: Story;
|
|
10
|
+
export declare const WithHTML: Story;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface BreadCrumb {
|
|
3
|
+
name: string;
|
|
4
|
+
url: string;
|
|
5
|
+
}
|
|
6
|
+
export type BreadCrumbsProps = {
|
|
7
|
+
breadCrumbs: BreadCrumb[];
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
export declare const BreadCrumbs: ({ breadCrumbs, className }: BreadCrumbsProps) => React.JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { BreadCrumbs } from './BreadCrumbs';
|
|
3
|
+
declare const _default: Meta<typeof BreadCrumbs>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof BreadCrumbs>;
|
|
6
|
+
export declare const MoreItems: Story;
|
|
7
|
+
export declare const TwoItems: Story;
|
|
8
|
+
export declare const OneItem: Story;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { VariantProps } from "cva";
|
|
2
|
+
import React, { type ButtonHTMLAttributes, type JSXElementConstructor, type ReactElement } from "react";
|
|
3
|
+
declare const button: (props?: {
|
|
4
|
+
variant?: "outline" | "solid" | "naked";
|
|
5
|
+
rounded?: "sm" | "md" | "lg" | "none" | "full";
|
|
6
|
+
color?: "primary" | "danger" | "info" | "warning" | "light" | "secondary";
|
|
7
|
+
size?: "sm" | "md" | "lg" | "xs";
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
active?: boolean;
|
|
10
|
+
loading?: boolean;
|
|
11
|
+
fullWidth?: boolean;
|
|
12
|
+
align?: "center" | "left" | "right" | "between";
|
|
13
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
14
|
+
interface BaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "disabled" | "active">, VariantProps<typeof button> {
|
|
15
|
+
href?: string;
|
|
16
|
+
loadingText?: string;
|
|
17
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
18
|
+
as?: "button" | "a" | JSXElementConstructor<any>;
|
|
19
|
+
}
|
|
20
|
+
export type ButtonProps = BaseProps & ({
|
|
21
|
+
rightIcon?: ReactElement;
|
|
22
|
+
leftIcon?: never;
|
|
23
|
+
} | {
|
|
24
|
+
rightIcon?: never;
|
|
25
|
+
leftIcon?: ReactElement;
|
|
26
|
+
});
|
|
27
|
+
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Button } from './Button';
|
|
3
|
+
declare const _default: Meta<typeof Button>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Button>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Secondary: Story;
|
|
8
|
+
export declare const Danger: Story;
|
|
9
|
+
export declare const Warning: Story;
|
|
10
|
+
export declare const Light: Story;
|
|
11
|
+
export declare const Info: Story;
|
|
12
|
+
export declare const Custom: Story;
|
|
13
|
+
export declare const WithRightIcon: Story;
|
|
14
|
+
export declare const WithLeftIcon: Story;
|
|
15
|
+
export declare const Disabled: Story;
|
|
16
|
+
export declare const OutlineVariant: Story;
|
|
17
|
+
export declare const NakedVariant: Story;
|
|
18
|
+
export declare const Loading: Story;
|
|
19
|
+
export declare const CustomLoadingText: Story;
|
|
20
|
+
export declare const AsLink: Story;
|
|
21
|
+
export declare const FullWidth: Story;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React, { ComponentProps } from "react";
|
|
2
|
+
import { DayPicker } from "react-day-picker";
|
|
3
|
+
export type CalendarProps = ComponentProps<typeof DayPicker>;
|
|
4
|
+
export declare const Calendar: ({ className, classNames, showOutsideDays, ...props }: CalendarProps) => React.JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CSSProperties, FC, JSXElementConstructor, ReactNode } from "react";
|
|
2
|
+
export interface ContainerProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
id?: string;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
as?: "div" | "section" | "nav" | "header" | "footer" | JSXElementConstructor<any>;
|
|
8
|
+
full?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare const Container: FC<ContainerProps>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Container } from './Container';
|
|
3
|
+
declare const _default: Meta<typeof Container>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Container>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const CustomContent: Story;
|
|
8
|
+
export declare const CustomElement: Story;
|
|
9
|
+
export declare const FullWidth: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CalendarProps } from "../Calendar/Calendar";
|
|
3
|
+
export type DatePickerProps = CalendarProps & {
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
helpText?: string;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const DatePicker: (props: DatePickerProps) => React.JSX.Element;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComponentProps, HTMLAttributes } from "react";
|
|
3
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
4
|
+
import { Box } from "../Box/Box";
|
|
5
|
+
type DialogProps = ComponentProps<typeof DialogPrimitive.Root>;
|
|
6
|
+
type BodyProps = ComponentProps<typeof Box>;
|
|
7
|
+
export declare const Dialog: {
|
|
8
|
+
({ children, ...rest }: DialogProps): React.JSX.Element;
|
|
9
|
+
Header: {
|
|
10
|
+
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
|
|
15
|
+
variant?: "naked" | "bordered";
|
|
16
|
+
} & React.RefAttributes<HTMLHeadingElement>>;
|
|
17
|
+
Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
18
|
+
Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
19
|
+
hideClose?: boolean;
|
|
20
|
+
size?: "sm" | "md" | "lg" | "xl" | "2xl";
|
|
21
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
Body: ({ className, ...props }: BodyProps) => React.JSX.Element;
|
|
23
|
+
Footer: {
|
|
24
|
+
({ className, variant, justify, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
25
|
+
variant?: "naked" | "bordered";
|
|
26
|
+
justify?: "start" | "end" | "center" | "between";
|
|
27
|
+
}): React.JSX.Element;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Document } from './Document';
|
|
3
|
+
declare const _default: Meta<typeof Document>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Document>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const WithTimestamp: Story;
|
|
8
|
+
export declare const WithDeleteAction: Story;
|
|
9
|
+
export declare const WithImage: Story;
|
|
10
|
+
export declare const WithGoogleDocLink: Story;
|
|
11
|
+
export declare const WithPDF: Story;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface Option {
|
|
3
|
+
readonly label: string;
|
|
4
|
+
readonly value: any;
|
|
5
|
+
}
|
|
6
|
+
type Props = {
|
|
7
|
+
options: Option[];
|
|
8
|
+
allOptions?: Option[];
|
|
9
|
+
onChange: any;
|
|
10
|
+
selectable?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
handleCreate?: (inputValue: string) => void;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
name: string;
|
|
15
|
+
label?: string;
|
|
16
|
+
value: string | number;
|
|
17
|
+
isMulti?: false;
|
|
18
|
+
} | {
|
|
19
|
+
options: Option[];
|
|
20
|
+
allOptions?: Option[];
|
|
21
|
+
onChange: any;
|
|
22
|
+
selectable?: boolean;
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
handleCreate?: (inputValue: string) => void;
|
|
25
|
+
required?: boolean;
|
|
26
|
+
name: string;
|
|
27
|
+
label?: string;
|
|
28
|
+
value: any[];
|
|
29
|
+
isMulti?: true;
|
|
30
|
+
};
|
|
31
|
+
export declare const DropDown: ({ options, allOptions, onChange, required, disabled, selectable, handleCreate, name, label, value, isMulti, }: Props) => React.JSX.Element;
|
|
32
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { FC, HTMLAttributes, JSXElementConstructor } from "react";
|
|
2
|
+
import { VariantProps } from "cva";
|
|
3
|
+
declare const flex: (props?: {
|
|
4
|
+
align?: "center" | "stretch" | "end" | "start";
|
|
5
|
+
justify?: "center" | "end" | "start" | "between" | "around";
|
|
6
|
+
direction?: "row" | "column" | "column-reverse" | "row-reverse";
|
|
7
|
+
wrap?: boolean;
|
|
8
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20;
|
|
9
|
+
gapX?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20;
|
|
10
|
+
gapY?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 16 | 20;
|
|
11
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
12
|
+
interface Props extends HTMLAttributes<HTMLElement>, VariantProps<typeof flex> {
|
|
13
|
+
as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
|
|
14
|
+
}
|
|
15
|
+
export declare const Flex: FC<Props>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare const BlurImage: ({ className, rounded, priority, objectPosition, quality, theme, alt, src, }: {
|
|
3
|
+
className?: string;
|
|
4
|
+
rounded?: boolean;
|
|
5
|
+
priority?: boolean;
|
|
6
|
+
objectPosition?: string;
|
|
7
|
+
quality?: number;
|
|
8
|
+
theme?: string;
|
|
9
|
+
alt?: string;
|
|
10
|
+
src?: string;
|
|
11
|
+
}) => React.JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { InfoCard } from './InfoCard';
|
|
3
|
+
declare const _default: Meta<typeof InfoCard>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof InfoCard>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Raw: Story;
|
|
8
|
+
export declare const Small: Story;
|
|
9
|
+
export declare const WithCustomClass: Story;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Input } from './Input';
|
|
3
|
+
declare const _default: Meta<typeof Input>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Input>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithHelpText: Story;
|
|
8
|
+
export declare const PasswordInput: Story;
|
|
9
|
+
export declare const WithPlaceholder: Story;
|
|
10
|
+
export declare const WithCustomClasses: Story;
|
|
11
|
+
export declare const ReadOnly: Story;
|
|
12
|
+
export declare const Required: Story;
|
|
13
|
+
export declare const NumberInput: Story;
|
|
14
|
+
export declare const EmailInput: Story;
|
|
15
|
+
export declare const TelInput: Story;
|
|
16
|
+
export declare const DateInput: Story;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FC, InputHTMLAttributes } from 'react';
|
|
2
|
+
export interface InputButtonProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
+
className?: string;
|
|
4
|
+
active?: boolean;
|
|
5
|
+
label?: string;
|
|
6
|
+
type?: 'checkbox' | 'radio';
|
|
7
|
+
}
|
|
8
|
+
export declare const InputButton: FC<InputButtonProps>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
2
|
+
import { VariantProps } from "cva";
|
|
3
|
+
import React, { ComponentProps } from "react";
|
|
4
|
+
type TriggerProps = ComponentProps<typeof DropdownMenu.Trigger>;
|
|
5
|
+
export declare const Trigger: ({ children, className, ...rest }: TriggerProps) => React.JSX.Element;
|
|
6
|
+
declare const contentClasses: (props?: {
|
|
7
|
+
rounded?: "sm" | "md" | "lg";
|
|
8
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
9
|
+
type ContentProps = ComponentProps<typeof DropdownMenu.Content> & VariantProps<typeof contentClasses>;
|
|
10
|
+
export declare const Items: ({ children, className, sideOffset, rounded, ...rest }: ContentProps) => React.JSX.Element;
|
|
11
|
+
type MenuProps = ComponentProps<typeof DropdownMenu.Root>;
|
|
12
|
+
export declare const Menu: {
|
|
13
|
+
({ children, ...rest }: MenuProps): React.JSX.Element;
|
|
14
|
+
Button: ({ children, className, ...rest }: TriggerProps) => React.JSX.Element;
|
|
15
|
+
Items: ({ children, className, sideOffset, rounded, ...rest }: ContentProps) => React.JSX.Element;
|
|
16
|
+
Item: React.ForwardRefExoticComponent<Omit<DropdownMenu.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenu.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { FC, SelectHTMLAttributes, OptionHTMLAttributes } from "react";
|
|
2
|
+
interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
3
|
+
className?: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
}
|
|
6
|
+
interface OptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
interface StaticComponents {
|
|
10
|
+
Option?: FC<OptionProps>;
|
|
11
|
+
}
|
|
12
|
+
export declare const Select: FC<Props> & StaticComponents;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
4
|
+
type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
|
|
5
|
+
export declare const Switch: ({ className, ...props }: SwitchProps) => React.JSX.Element;
|
|
6
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: ({ className, ...props }: Omit<import("@radix-ui/react-switch").SwitchProps & import("react").RefAttributes<HTMLButtonElement>, "ref">) => import("react").JSX.Element;
|
|
4
|
+
argTypes: {
|
|
5
|
+
color: {
|
|
6
|
+
control: {
|
|
7
|
+
type: string;
|
|
8
|
+
options: string[];
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default _default;
|
|
14
|
+
export declare const Primary: {
|
|
15
|
+
(args: any): import("react").JSX.Element;
|
|
16
|
+
args: {
|
|
17
|
+
color: string;
|
|
18
|
+
checked: boolean;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export declare const Secondary: {
|
|
22
|
+
(args: any): import("react").JSX.Element;
|
|
23
|
+
args: {
|
|
24
|
+
color: string;
|
|
25
|
+
checked: boolean;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { VariantProps } from "cva";
|
|
2
|
+
import { FC, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
|
|
3
|
+
declare const table: (props?: {
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xs";
|
|
5
|
+
align?: "left" | "right";
|
|
6
|
+
color?: "primary" | "danger" | "info" | "warning" | "light" | "secondary";
|
|
7
|
+
variant?: "bordered" | "striped";
|
|
8
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
9
|
+
type TableProps = HTMLAttributes<HTMLTableElement> & VariantProps<typeof table>;
|
|
10
|
+
type TDProps = TdHTMLAttributes<HTMLTableCellElement>;
|
|
11
|
+
type THProps = ThHTMLAttributes<HTMLTableCellElement>;
|
|
12
|
+
type TRProps = HTMLAttributes<HTMLTableRowElement>;
|
|
13
|
+
type HeadProps = HTMLAttributes<HTMLTableSectionElement>;
|
|
14
|
+
type BodyProps = HTMLAttributes<HTMLTableSectionElement>;
|
|
15
|
+
interface StaticComponents {
|
|
16
|
+
Head?: FC<HeadProps>;
|
|
17
|
+
Body?: FC<BodyProps>;
|
|
18
|
+
TH?: FC<THProps>;
|
|
19
|
+
TD?: FC<TDProps>;
|
|
20
|
+
TR?: FC<TRProps>;
|
|
21
|
+
}
|
|
22
|
+
export declare const Table: FC<TableProps> & StaticComponents;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
4
|
+
type TabProps = ComponentProps<typeof TabsPrimitive.Trigger> & {
|
|
5
|
+
leftIcon?: React.ReactNode;
|
|
6
|
+
rightIcon?: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
type ListProps = ComponentProps<typeof TabsPrimitive.List>;
|
|
9
|
+
type ContentProps = ComponentProps<typeof TabsPrimitive.Content>;
|
|
10
|
+
type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
|
|
11
|
+
export declare const Tabs: {
|
|
12
|
+
({ children, ...rest }: TabsProps): React.JSX.Element;
|
|
13
|
+
Tab: ({ children, value, className, leftIcon, rightIcon, ...rest }: TabProps) => React.JSX.Element;
|
|
14
|
+
List: ({ children, className, ...rest }: ListProps) => React.JSX.Element;
|
|
15
|
+
Panel: ({ children, value, ...rest }: ContentProps) => React.JSX.Element;
|
|
16
|
+
};
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { FC, HTMLAttributes, JSXElementConstructor } from "react";
|
|
2
|
+
import { VariantProps } from "cva";
|
|
3
|
+
declare const text: (props?: {
|
|
4
|
+
align?: "center" | "left" | "right";
|
|
5
|
+
color?: "primary" | "danger" | "info" | "warning" | "secondary" | "black" | "white" | "muted";
|
|
6
|
+
fontSize?: "sm" | "md" | "lg" | "inherit" | "xl" | "2xl" | "xs" | "3xl" | "4xl";
|
|
7
|
+
fontWeight?: "light" | "bold" | "normal" | "medium" | "semibold";
|
|
8
|
+
transform?: "none" | "capitalize" | "lowercase" | "uppercase";
|
|
9
|
+
fontStyle?: "normal" | "italic";
|
|
10
|
+
decoration?: "none" | "underline" | "lineThrough";
|
|
11
|
+
textOverflow?: "clip" | "ellipsis" | "truncate";
|
|
12
|
+
} & import("cva/dist/types").ClassProp) => string;
|
|
13
|
+
export interface TextProps extends Omit<HTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLParagraphElement>, "color">, VariantProps<typeof text> {
|
|
14
|
+
as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
|
|
15
|
+
html?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const Text: FC<TextProps>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Text } from './Text';
|
|
3
|
+
declare const _default: Meta<typeof Text>;
|
|
4
|
+
export default _default;
|
|
5
|
+
type Story = StoryObj<typeof Text>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const TitleText: Story;
|
|
8
|
+
export declare const BoldText: Story;
|
|
9
|
+
export declare const BoldH1: Story;
|
|
10
|
+
export declare const HTMLContent: Story;
|