@devopness/ui-react 2.180.0 → 2.181.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/src/components/Primitives/Review/Review.d.ts +46 -0
- package/dist/src/components/Primitives/Review/Review.styled.d.ts +24 -0
- package/dist/src/components/Primitives/Review/ReviewBox.d.ts +24 -0
- package/dist/src/components/Primitives/Review/index.d.ts +2 -0
- package/dist/src/components/Primitives/ToggleContent/ToggleContent.d.ts +40 -0
- package/dist/src/components/Primitives/ToggleContent/ToggleContentButton.d.ts +28 -0
- package/dist/src/components/Primitives/ToggleContent/index.d.ts +2 -0
- package/dist/src/components/Primitives/index.d.ts +2 -0
- package/dist/ui-react.cjs +361 -322
- package/dist/ui-react.js +4390 -4201
- package/package.json +2 -2
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Icon } from '../../../icons';
|
|
3
|
+
type ReviewProps = {
|
|
4
|
+
/** Content text or JSX element */
|
|
5
|
+
content: string | React.JSX.Element;
|
|
6
|
+
/** Make content bold
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
isBoldFontWeight?: boolean;
|
|
10
|
+
/** Optional icon to display */
|
|
11
|
+
icon?: Icon | Omit<string, Icon>;
|
|
12
|
+
/** Background color for the icon */
|
|
13
|
+
iconBackgroundColor?: string;
|
|
14
|
+
/** Icon color */
|
|
15
|
+
iconColor?: string;
|
|
16
|
+
/** Icon size in pixels */
|
|
17
|
+
iconSize?: number;
|
|
18
|
+
/** Optional prefix before the label */
|
|
19
|
+
prefix?: string;
|
|
20
|
+
/** Background color for the review box */
|
|
21
|
+
backgroundColor?: string;
|
|
22
|
+
/** Apply margin for prefix
|
|
23
|
+
* @default true
|
|
24
|
+
*/
|
|
25
|
+
hasPrefixMargin?: boolean;
|
|
26
|
+
/** Show icon after label instead of before
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
isIconAfterLabel?: boolean;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Review component displays a label/value pair with optional icon and prefix.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```jsx
|
|
36
|
+
* <Review
|
|
37
|
+
* content="Status: Approved"
|
|
38
|
+
* icon="check"
|
|
39
|
+
* prefix="Info"
|
|
40
|
+
* backgroundColor="#f5f5f5"
|
|
41
|
+
* />
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
declare const Review: ({ content, icon, iconBackgroundColor, iconColor, iconSize, isBoldFontWeight, prefix, backgroundColor, hasPrefixMargin, isIconAfterLabel, }: ReviewProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export type { ReviewProps };
|
|
46
|
+
export { Review };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
type DetailContentValueProps = {
|
|
2
|
+
isBoldFontWeight?: boolean;
|
|
3
|
+
};
|
|
4
|
+
type DetailContentInformationProps = {
|
|
5
|
+
noIcon?: boolean;
|
|
6
|
+
isIconAfterLabel?: boolean;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
};
|
|
9
|
+
type ContentDetailProps = {
|
|
10
|
+
type?: 'default' | 'warning';
|
|
11
|
+
};
|
|
12
|
+
type StyledProps = {
|
|
13
|
+
backgroundColor?: string;
|
|
14
|
+
color?: string;
|
|
15
|
+
};
|
|
16
|
+
declare const DetailContentInformation: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, DetailContentInformationProps>> & string;
|
|
17
|
+
declare const DetailContentValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, DetailContentValueProps>> & string;
|
|
18
|
+
declare const PrefixWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
19
|
+
showMarginRight?: boolean;
|
|
20
|
+
}>> & string;
|
|
21
|
+
declare const ContentIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
|
|
22
|
+
declare const ContentDetail: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, ContentDetailProps>> & string;
|
|
23
|
+
export type { DetailContentInformationProps, DetailContentValueProps, ContentDetailProps, };
|
|
24
|
+
export { DetailContentInformation, DetailContentValue, PrefixWrapper, ContentIcon, ContentDetail, };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the `ReviewBox` component.
|
|
4
|
+
*/
|
|
5
|
+
type ReviewBoxProps = {
|
|
6
|
+
/** Child `Review` components to be displayed inside this container */
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/** The type of the review box, which affects its background color */
|
|
9
|
+
type?: 'default' | 'warning';
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* A container component for displaying a group of `Review` components.
|
|
13
|
+
*
|
|
14
|
+
* Pass any number of `Review` components as children to this component.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* <ReviewBox type="default">
|
|
18
|
+
* <Review content="Status: Approved" icon="check" prefix="Info" />
|
|
19
|
+
* <Review content="Score: 85%" icon="star" isIconAfterLabel />
|
|
20
|
+
* </ReviewBox>
|
|
21
|
+
*/
|
|
22
|
+
declare const ReviewBox: ({ children, type }: ReviewBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export type { ReviewBoxProps };
|
|
24
|
+
export { ReviewBox };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
import { ToggleContentButtonProps } from './ToggleContentButton';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the `ToggleContent` component.
|
|
5
|
+
*/
|
|
6
|
+
type ToggleContentProps = {
|
|
7
|
+
/** Whether the content is sensitive (hides by default)
|
|
8
|
+
* @default false
|
|
9
|
+
*/
|
|
10
|
+
isSensitiveContent?: boolean;
|
|
11
|
+
/** Show warning when revealing sensitive content
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
showWarning?: boolean;
|
|
15
|
+
/** Placeholder to show when content is hidden */
|
|
16
|
+
hiddenContentPlaceholder?: ReactNode;
|
|
17
|
+
/** Whether to show the hidden content placeholder
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
showHiddenContentPlaceholder?: boolean;
|
|
21
|
+
/** Optional container props */
|
|
22
|
+
containerProps?: HTMLAttributes<HTMLDivElement>;
|
|
23
|
+
/** Props for the toggle button */
|
|
24
|
+
buttonProps?: ToggleContentButtonProps;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Component to show/hide sensitive content with a toggle button.
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* <ToggleContent
|
|
31
|
+
* isSensitiveContent
|
|
32
|
+
* showWarning
|
|
33
|
+
* hiddenContentPlaceholder="*****"
|
|
34
|
+
* >
|
|
35
|
+
* <span>Secret value</span>
|
|
36
|
+
* </ToggleContent>
|
|
37
|
+
*/
|
|
38
|
+
declare const ToggleContent: ({ isSensitiveContent, showWarning, hiddenContentPlaceholder, showHiddenContentPlaceholder, containerProps, buttonProps, children, }: PropsWithChildren<ToggleContentProps>) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export { ToggleContent };
|
|
40
|
+
export type { ToggleContentProps };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { Button } from '../../Buttons';
|
|
3
|
+
import { Icon } from '../../../icons';
|
|
4
|
+
/**
|
|
5
|
+
* Props for the `ToggleContentButton` component.
|
|
6
|
+
*/
|
|
7
|
+
type ToggleContentButtonProps = ComponentPropsWithoutRef<typeof Button> & {
|
|
8
|
+
/** Whether the content is currently visible
|
|
9
|
+
* @default false
|
|
10
|
+
*/
|
|
11
|
+
showContent?: boolean;
|
|
12
|
+
/** Optional props when hiding the content */
|
|
13
|
+
hideContentProps?: {
|
|
14
|
+
text?: string;
|
|
15
|
+
icon?: Icon;
|
|
16
|
+
};
|
|
17
|
+
/** Optional props when revealing the content */
|
|
18
|
+
revealContentProps?: {
|
|
19
|
+
text?: string;
|
|
20
|
+
icon?: Icon;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Button to toggle visibility of sensitive content.
|
|
25
|
+
*/
|
|
26
|
+
declare const ToggleContentButton: ({ showContent, hideContentProps, revealContentProps, ...props }: ToggleContentButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export { ToggleContentButton };
|
|
28
|
+
export type { ToggleContentButtonProps };
|