akku-kit 1.0.0-alpha.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/dist/assets/images/ImagePaths.d.ts +5 -0
- package/dist/assets/images/arrowRightBlack-9e202c8a68eabcc8.png +0 -0
- package/dist/assets/images/nodata-04bb1c9b346f46fd.png +0 -0
- package/dist/components/Badge/Badge.d.ts +8 -0
- package/dist/components/Badge/Badge.stories.d.ts +19 -0
- package/dist/components/Badge/Badge.types.d.ts +50 -0
- package/dist/components/Button/Button.d.ts +4 -0
- package/dist/components/Button/Button.stories.d.ts +9 -0
- package/dist/components/Button/Button.types.d.ts +7 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/ButtonV1/Button.types.d.ts +18 -0
- package/dist/components/ButtonV1/ButtonV1.d.ts +3 -0
- package/dist/components/ButtonV1/ButtonV1.stories.d.ts +12 -0
- package/dist/components/ButtonV1/index.d.ts +1 -0
- package/dist/components/Charts/donut-chart/DonutChart.d.ts +16 -0
- package/dist/components/Charts/donut-chart/DonutChart.stories.d.ts +10 -0
- package/dist/components/Charts/donut-chart/index.d.ts +1 -0
- package/dist/components/Charts/spiral-chart/SpiralChart.d.ts +13 -0
- package/dist/components/Charts/spiral-chart/SpiralChart.stories.d.ts +10 -0
- package/dist/components/Charts/spiral-chart/index.d.ts +1 -0
- package/dist/components/Form/CheckboxField/CheckboxField.d.ts +4 -0
- package/dist/components/Form/CheckboxField/CheckboxField.stories.d.ts +14 -0
- package/dist/components/Form/CheckboxField/CheckboxField.types.d.ts +14 -0
- package/dist/components/Form/CheckboxField/index.d.ts +2 -0
- package/dist/components/Form/EmailField/EmailField.d.ts +4 -0
- package/dist/components/Form/EmailField/EmailField.stories.d.ts +10 -0
- package/dist/components/Form/EmailField/EmailField.types.d.ts +16 -0
- package/dist/components/Form/EmailField/index.d.ts +2 -0
- package/dist/components/Form/MultiSelectField/MultiSelect.stories.d.ts +11 -0
- package/dist/components/Form/MultiSelectField/MultiSelectField.d.ts +4 -0
- package/dist/components/Form/MultiSelectField/MultiSelectField.types.d.ts +26 -0
- package/dist/components/Form/MultiSelectField/index.d.ts +2 -0
- package/dist/components/Form/NumberField/NumberField.d.ts +4 -0
- package/dist/components/Form/NumberField/NumberField.stories.d.ts +12 -0
- package/dist/components/Form/NumberField/NumberField.types.d.ts +28 -0
- package/dist/components/Form/NumberField/index.d.ts +2 -0
- package/dist/components/Form/PhoneField/PhoneField.d.ts +4 -0
- package/dist/components/Form/PhoneField/PhoneField.stories.d.ts +12 -0
- package/dist/components/Form/PhoneField/PhoneField.types.d.ts +17 -0
- package/dist/components/Form/PhoneField/helper.d.ts +10 -0
- package/dist/components/Form/PhoneField/index.d.ts +2 -0
- package/dist/components/Form/RadioGroupField/RadioGroupField.d.ts +4 -0
- package/dist/components/Form/RadioGroupField/RadioGroupField.stories.d.ts +8 -0
- package/dist/components/Form/RadioGroupField/RadioGroupField.types.d.ts +13 -0
- package/dist/components/Form/RadioGroupField/index.d.ts +2 -0
- package/dist/components/Form/Search/Search.d.ts +4 -0
- package/dist/components/Form/Search/Search.stories.d.ts +10 -0
- package/dist/components/Form/Search/Search.types.d.ts +12 -0
- package/dist/components/Form/Search/index.d.ts +2 -0
- package/dist/components/Form/SwitchButtonField/SwitchButtonField.d.ts +4 -0
- package/dist/components/Form/SwitchButtonField/SwitchButtonField.stories.d.ts +13 -0
- package/dist/components/Form/SwitchButtonField/SwitchButtonField.types.d.ts +14 -0
- package/dist/components/Form/SwitchButtonField/index.d.ts +2 -0
- package/dist/components/Form/TextAreaField/TextAreaField.d.ts +4 -0
- package/dist/components/Form/TextAreaField/TextAreaField.stories.d.ts +11 -0
- package/dist/components/Form/TextAreaField/TextAreaField.types.d.ts +27 -0
- package/dist/components/Form/TextAreaField/index.d.ts +2 -0
- package/dist/components/Form/TextField/TextField.d.ts +4 -0
- package/dist/components/Form/TextField/TextField.stories.d.ts +11 -0
- package/dist/components/Form/TextField/TextField.types.d.ts +17 -0
- package/dist/components/Form/TextField/index.d.ts +2 -0
- package/dist/components/Form/URLField/URLField.d.ts +4 -0
- package/dist/components/Form/URLField/URLField.stories.d.ts +9 -0
- package/dist/components/Form/URLField/URLField.types.d.ts +22 -0
- package/dist/components/Form/URLField/index.d.ts +2 -0
- package/dist/components/Form/index.d.ts +19 -0
- package/dist/components/Input.d.ts +1 -0
- package/dist/components/Modal/Modal.d.ts +5 -0
- package/dist/components/Modal/Modal.stories.d.ts +12 -0
- package/dist/components/Modal/Modal.types.d.ts +56 -0
- package/dist/components/Modal/index.d.ts +2 -0
- package/dist/components/Skeleton/Skeleton.d.ts +52 -0
- package/dist/components/Skeleton/Skeleton.stories.d.ts +12 -0
- package/dist/components/Skeleton/index.d.ts +1 -0
- package/dist/components/Table/Table.d.ts +8 -0
- package/dist/components/Table/components/TableBody.d.ts +8 -0
- package/dist/components/Table/components/TableFooter.d.ts +8 -0
- package/dist/components/Table/components/TableHeader.d.ts +7 -0
- package/dist/components/Tooltip/Tooltip.d.ts +11 -0
- package/dist/components/Tooltip/Tooltip.stories.d.ts +8 -0
- package/dist/components/Typography/Display/Display.d.ts +4 -0
- package/dist/components/Typography/Display/Display.stories.d.ts +50 -0
- package/dist/components/Typography/Display/Display.types.d.ts +13 -0
- package/dist/components/Typography/Display/index.d.ts +2 -0
- package/dist/components/Typography/Text/Text.d.ts +4 -0
- package/dist/components/Typography/Text/Text.stories.d.ts +62 -0
- package/dist/components/Typography/Text/Text.types.d.ts +13 -0
- package/dist/components/Typography/Text/index.d.ts +2 -0
- package/dist/index.cjs.js +49 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.esm.js +48 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/storybook/Button.d.ts +15 -0
- package/dist/storybook/Button.stories.d.ts +23 -0
- package/dist/storybook/Header.d.ts +12 -0
- package/dist/storybook/Header.stories.d.ts +18 -0
- package/dist/storybook/Page.d.ts +3 -0
- package/dist/storybook/Page.stories.d.ts +12 -0
- package/dist/styles.css +1 -0
- package/dist/utils/ui/cn.d.ts +1 -0
- package/package.json +72 -0
@@ -0,0 +1,11 @@
|
|
1
|
+
import { Meta, StoryObj } from "@storybook/react";
|
2
|
+
import { TextFieldProps } from "./TextField.types";
|
3
|
+
declare const meta: Meta<TextFieldProps>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<TextFieldProps>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const Required: Story;
|
8
|
+
export declare const WithPrefixSuffix: Story;
|
9
|
+
export declare const WithTooltip: Story;
|
10
|
+
export declare const Disabled: Story;
|
11
|
+
export declare const WithError: Story;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from "react";
|
2
|
+
export interface TextFieldProps {
|
3
|
+
id?: string;
|
4
|
+
name: string;
|
5
|
+
label?: string;
|
6
|
+
type?: string;
|
7
|
+
value: string;
|
8
|
+
placeholder?: string;
|
9
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
10
|
+
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
11
|
+
error?: string;
|
12
|
+
touched?: boolean;
|
13
|
+
required?: boolean;
|
14
|
+
disabled?: boolean;
|
15
|
+
className?: string;
|
16
|
+
[key: string]: any;
|
17
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { URLField } from "./URLField";
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
3
|
+
declare const meta: Meta<typeof URLField>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof URLField>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const WithError: Story;
|
8
|
+
export declare const WithCheckmark: Story;
|
9
|
+
export declare const Disabled: Story;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export interface URLFieldProps {
|
3
|
+
id: string;
|
4
|
+
name: string;
|
5
|
+
label: string;
|
6
|
+
value: string;
|
7
|
+
className?: string;
|
8
|
+
domain?: string;
|
9
|
+
showCheckmark?: boolean;
|
10
|
+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
11
|
+
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
12
|
+
placeholder?: string;
|
13
|
+
error?: string;
|
14
|
+
required?: boolean;
|
15
|
+
disabled?: boolean;
|
16
|
+
touched?: boolean;
|
17
|
+
prefix?: string;
|
18
|
+
suffix?: string;
|
19
|
+
tooltip?: string;
|
20
|
+
width?: string;
|
21
|
+
[key: string]: any;
|
22
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import "../../styles/tailwind.css";
|
2
|
+
export { default as TextField } from './TextField';
|
3
|
+
export * from './TextField';
|
4
|
+
export { default as MultiSelectField } from './MultiSelectField';
|
5
|
+
export * from './MultiSelectField';
|
6
|
+
export { default as EmailField } from './EmailField';
|
7
|
+
export * from './EmailField';
|
8
|
+
export { default as URLField } from './URLField';
|
9
|
+
export * from './URLField';
|
10
|
+
export { default as NumberField } from './NumberField';
|
11
|
+
export * from './NumberField';
|
12
|
+
export { default as PhoneField } from './PhoneField';
|
13
|
+
export * from './PhoneField';
|
14
|
+
export { default as TextAreaField } from './TextAreaField';
|
15
|
+
export * from './TextAreaField';
|
16
|
+
export { default as CheckboxField } from './CheckboxField';
|
17
|
+
export * from './CheckboxField';
|
18
|
+
export { default as RadioGroupField } from './RadioGroupField';
|
19
|
+
export * from './RadioGroupField';
|
@@ -0,0 +1 @@
|
|
1
|
+
export default function Input(): import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import Modal from './Modal';
|
3
|
+
declare const meta: Meta<typeof Modal>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof Modal>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const Centered: Story;
|
8
|
+
export declare const NotCentered: Story;
|
9
|
+
export declare const MaskClosable: Story;
|
10
|
+
export declare const NotDestroyOnClose: Story;
|
11
|
+
export declare const CustomContent: Story;
|
12
|
+
export declare const WithCustomClassName: Story;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
/**
|
3
|
+
* Defines the props accepted by the Modal component.
|
4
|
+
*/
|
5
|
+
export interface ModalProps {
|
6
|
+
/**
|
7
|
+
* Controls the visibility of the modal.
|
8
|
+
*/
|
9
|
+
isOpen: boolean;
|
10
|
+
/**
|
11
|
+
* Callback function to close the modal.
|
12
|
+
*/
|
13
|
+
handleClose: () => void;
|
14
|
+
/**
|
15
|
+
* If true, the modal and its overlay will be unmounted from the DOM when closed.
|
16
|
+
* If false, it will remain in the DOM but hidden.
|
17
|
+
* @default true
|
18
|
+
*/
|
19
|
+
destroyOnClose?: boolean;
|
20
|
+
/**
|
21
|
+
* If true, the modal content will be vertically and horizontally centered.
|
22
|
+
* @default true
|
23
|
+
*/
|
24
|
+
centered?: boolean;
|
25
|
+
/**
|
26
|
+
* If true, clicking the modal mask (overlay) will close the modal.
|
27
|
+
* @default false
|
28
|
+
*/
|
29
|
+
maskClosable?: boolean;
|
30
|
+
/**
|
31
|
+
* Additional CSS class name for the modal overlay.
|
32
|
+
*/
|
33
|
+
className?: string;
|
34
|
+
/**
|
35
|
+
* The content to be displayed inside the modal.
|
36
|
+
*/
|
37
|
+
children: React.ReactNode;
|
38
|
+
/**
|
39
|
+
* Optional title for the modal. Used for accessibility labeling (aria-labelledby).
|
40
|
+
*/
|
41
|
+
title?: React.ReactNode;
|
42
|
+
/**
|
43
|
+
* Optional description for the modal. Used for accessibility labeling (aria-describedby).
|
44
|
+
*/
|
45
|
+
description?: React.ReactNode;
|
46
|
+
/**
|
47
|
+
* HTML ID for the modal title element if you want to provide one.
|
48
|
+
* If `title` prop is used and no `titleId` is given, a default ID will be generated.
|
49
|
+
*/
|
50
|
+
titleId?: string;
|
51
|
+
/**
|
52
|
+
* HTML ID for the modal description element if you want to provide one.
|
53
|
+
* If `description` prop is used and no `descriptionId` is given, a default ID will be generated.
|
54
|
+
*/
|
55
|
+
descriptionId?: string;
|
56
|
+
}
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import React, { FC } from 'react';
|
2
|
+
interface SkeletonProps {
|
3
|
+
/**
|
4
|
+
* The width of the skeleton. Can be a number (in pixels) or a string (e.g., '100%', '10em').
|
5
|
+
* @default '100%'
|
6
|
+
*/
|
7
|
+
width?: number | string;
|
8
|
+
/**
|
9
|
+
* The height of the skeleton. Can be a number (in pixels) or a string (e.g., '20px', '2em').
|
10
|
+
* @default '1em'
|
11
|
+
*/
|
12
|
+
height?: number | string;
|
13
|
+
/**
|
14
|
+
* If true, the skeleton will be circular.
|
15
|
+
* @default false
|
16
|
+
*/
|
17
|
+
circle?: boolean;
|
18
|
+
/**
|
19
|
+
* The number of skeleton lines/blocks to render.
|
20
|
+
* @default 1
|
21
|
+
*/
|
22
|
+
count?: number;
|
23
|
+
/**
|
24
|
+
* The base color of the skeleton.
|
25
|
+
* @default '#eee'
|
26
|
+
*/
|
27
|
+
baseColor?: string;
|
28
|
+
/**
|
29
|
+
* The highlight color for the animation.
|
30
|
+
* @default '#f5f5f5'
|
31
|
+
*/
|
32
|
+
highlightColor?: string;
|
33
|
+
/**
|
34
|
+
* Additional CSS class name for the skeleton container.
|
35
|
+
*/
|
36
|
+
className?: string;
|
37
|
+
/**
|
38
|
+
* Inline style object for the skeleton container.
|
39
|
+
*/
|
40
|
+
style?: React.CSSProperties;
|
41
|
+
/**
|
42
|
+
* Type of animation to apply (e.g., 'pulse', 'shimmer').
|
43
|
+
* @default 'shimmer'
|
44
|
+
*/
|
45
|
+
animation?: 'shimmer' | 'pulse' | 'none';
|
46
|
+
}
|
47
|
+
/**
|
48
|
+
* A flexible Skeleton component for displaying loading placeholders.
|
49
|
+
* @param {SkeletonProps} props - The component's props.
|
50
|
+
*/
|
51
|
+
declare const Skeleton: FC<SkeletonProps>;
|
52
|
+
export default Skeleton;
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import Skeleton from './Skeleton';
|
3
|
+
declare const meta: Meta<typeof Skeleton>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof Skeleton>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const CustomDimensions: Story;
|
8
|
+
export declare const MultipleLines: Story;
|
9
|
+
export declare const Circle: Story;
|
10
|
+
export declare const CustomColorsAndPulse: Story;
|
11
|
+
export declare const CardExample: Story;
|
12
|
+
export declare const NoAnimation: Story;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './Skeleton';
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import "./style/Table.scss";
|
2
|
+
interface TableProps extends Readonly<{
|
3
|
+
[key: string]: any;
|
4
|
+
}> {
|
5
|
+
expandableRows?: boolean;
|
6
|
+
}
|
7
|
+
export default function Table({ columns, data, pagination, setPagination, pageCount, loader, expandableRows }: Readonly<TableProps>): import("react/jsx-runtime").JSX.Element;
|
8
|
+
export {};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Table as ReactTable } from "@tanstack/react-table";
|
3
|
+
interface TableBodyContentProps {
|
4
|
+
loader: boolean;
|
5
|
+
table: ReactTable<any>;
|
6
|
+
}
|
7
|
+
declare const TableBodyContent: React.FC<TableBodyContentProps>;
|
8
|
+
export default TableBodyContent;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from "react";
|
2
|
+
interface TooltipProps {
|
3
|
+
title: React.ReactNode;
|
4
|
+
children: React.ReactNode;
|
5
|
+
placement?: "top" | "bottom" | "left" | "right";
|
6
|
+
delay?: number;
|
7
|
+
textColor?: string;
|
8
|
+
backgroundColor?: string;
|
9
|
+
}
|
10
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
11
|
+
export default Tooltip;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { Meta, StoryObj } from "@storybook/react";
|
2
|
+
import Tooltip from "./Tooltip";
|
3
|
+
declare const meta: Meta<typeof Tooltip>;
|
4
|
+
export default meta;
|
5
|
+
type Story = StoryObj<typeof Tooltip>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const BottomPlacement: Story;
|
8
|
+
export declare const CustomColors: Story;
|
@@ -0,0 +1,50 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { StoryObj } from "@storybook/react";
|
3
|
+
import Display from "./Display";
|
4
|
+
declare const meta: {
|
5
|
+
title: string;
|
6
|
+
component: import("react").FC<import("./Display.types").DisplayProps>;
|
7
|
+
tags: string[];
|
8
|
+
argTypes: {
|
9
|
+
variant: {
|
10
|
+
options: ("xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold")[];
|
11
|
+
control: {
|
12
|
+
type: "radio";
|
13
|
+
};
|
14
|
+
};
|
15
|
+
color: {
|
16
|
+
options: ("primary" | "secondary" | "success" | "white" | "placeholder" | "tertiary" | "brand-600" | "brand-700")[];
|
17
|
+
control: {
|
18
|
+
type: "select";
|
19
|
+
};
|
20
|
+
};
|
21
|
+
align: {
|
22
|
+
options: ("center" | "left" | "right")[];
|
23
|
+
control: {
|
24
|
+
type: "radio";
|
25
|
+
};
|
26
|
+
};
|
27
|
+
as: {
|
28
|
+
options: string[];
|
29
|
+
control: {
|
30
|
+
type: "select";
|
31
|
+
};
|
32
|
+
};
|
33
|
+
children: {
|
34
|
+
control: "text";
|
35
|
+
};
|
36
|
+
};
|
37
|
+
args: {
|
38
|
+
variant: "lg-semibold";
|
39
|
+
children: string;
|
40
|
+
};
|
41
|
+
};
|
42
|
+
export default meta;
|
43
|
+
type Story = StoryObj<typeof Display>;
|
44
|
+
export declare const Default: Story;
|
45
|
+
export declare const ExtraSmall: Story;
|
46
|
+
export declare const Small: Story;
|
47
|
+
export declare const MediumSemiBold: Story;
|
48
|
+
export declare const WithSecondaryColor: Story;
|
49
|
+
export declare const CenterAligned: Story;
|
50
|
+
export declare const AsDivElement: Story;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export type DisplayVariant = "xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold";
|
3
|
+
export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder";
|
4
|
+
export type TextAlign = "left" | "center" | "right";
|
5
|
+
export type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
|
6
|
+
export interface DisplayProps extends React.HTMLAttributes<HTMLElement> {
|
7
|
+
variant?: DisplayVariant;
|
8
|
+
color?: TextColor;
|
9
|
+
align?: TextAlign;
|
10
|
+
className?: string;
|
11
|
+
children: React.ReactNode;
|
12
|
+
as?: HeadingElement;
|
13
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { StoryObj } from "@storybook/react";
|
3
|
+
import Text from "./Text";
|
4
|
+
declare const meta: {
|
5
|
+
title: string;
|
6
|
+
component: import("react").FC<import("./Text.types").TextProps>;
|
7
|
+
tags: string[];
|
8
|
+
argTypes: {
|
9
|
+
variant: {
|
10
|
+
options: ("xs-semibold" | "sm-semibold" | "lg-semibold" | "md-semibold" | "xs-medium" | "sm-regular" | "sm-medium" | "md-regular" | "lg-bold" | "xl-semibold" | "xs-regular")[];
|
11
|
+
control: {
|
12
|
+
type: "select";
|
13
|
+
};
|
14
|
+
};
|
15
|
+
color: {
|
16
|
+
options: ("primary" | "secondary" | "success" | "white" | "placeholder" | "tertiary" | "brand-600" | "brand-700")[];
|
17
|
+
control: {
|
18
|
+
type: "select";
|
19
|
+
};
|
20
|
+
};
|
21
|
+
align: {
|
22
|
+
options: ("center" | "left" | "right")[];
|
23
|
+
control: {
|
24
|
+
type: "radio";
|
25
|
+
};
|
26
|
+
};
|
27
|
+
ellipsis: {
|
28
|
+
control: "boolean";
|
29
|
+
};
|
30
|
+
as: {
|
31
|
+
options: string[];
|
32
|
+
control: {
|
33
|
+
type: "select";
|
34
|
+
};
|
35
|
+
};
|
36
|
+
children: {
|
37
|
+
control: "text";
|
38
|
+
};
|
39
|
+
};
|
40
|
+
args: {
|
41
|
+
variant: "md-regular";
|
42
|
+
children: string;
|
43
|
+
};
|
44
|
+
};
|
45
|
+
export default meta;
|
46
|
+
type Story = StoryObj<typeof Text>;
|
47
|
+
export declare const Default: Story;
|
48
|
+
export declare const ExtraSmallRegular: Story;
|
49
|
+
export declare const ExtraSmallMedium: Story;
|
50
|
+
export declare const ExtraSmallSemiBold: Story;
|
51
|
+
export declare const SmallRegular: Story;
|
52
|
+
export declare const SmallSemibold: Story;
|
53
|
+
export declare const SmallMedium: Story;
|
54
|
+
export declare const MediumRegular: Story;
|
55
|
+
export declare const MediumSemibold: Story;
|
56
|
+
export declare const LargeSemibold: Story;
|
57
|
+
export declare const LargeBold: Story;
|
58
|
+
export declare const ExtraLargeSemibold: Story;
|
59
|
+
export declare const WithSecondaryColor: Story;
|
60
|
+
export declare const CenterAligned: Story;
|
61
|
+
export declare const WithEllipsis: Story;
|
62
|
+
export declare const AsSpanElement: Story;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export type TextColor = "primary" | "secondary" | "tertiary" | "brand-600" | "brand-700" | "success" | "white" | "placeholder";
|
3
|
+
export type TextAlign = "left" | "center" | "right";
|
4
|
+
export type TextVariant = "xs-medium" | "sm-regular" | "sm-medium" | "sm-semibold" | "md-regular" | "md-semibold" | "lg-semibold" | "lg-bold" | "xs-semibold" | "xl-semibold" | "xs-regular";
|
5
|
+
export interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
6
|
+
variant?: TextVariant;
|
7
|
+
color?: TextColor;
|
8
|
+
align?: TextAlign;
|
9
|
+
ellipsis?: boolean;
|
10
|
+
className?: string;
|
11
|
+
children: React.ReactNode;
|
12
|
+
as?: React.ElementType;
|
13
|
+
}
|