@devopness/ui-react 2.180.0 → 2.182.0

package/dist/src/components/Primitives/Review/Review.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { Icon } from '../../../icons';
+type ReviewProps = {
+    /** Content text or JSX element */
+    content: string | React.JSX.Element;
+    /** Make content bold
+     * @default false
+     */
+    isBoldFontWeight?: boolean;
+    /** Optional icon to display */
+    icon?: Icon | Omit<string, Icon>;
+    /** Background color for the icon */
+    iconBackgroundColor?: string;
+    /** Icon color */
+    iconColor?: string;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Optional prefix before the label */
+    prefix?: string;
+    /** Background color for the review box */
+    backgroundColor?: string;
+    /** Apply margin for prefix
+     * @default true
+     */
+    hasPrefixMargin?: boolean;
+    /** Show icon after label instead of before
+     * @default false
+     */
+    isIconAfterLabel?: boolean;
+};
+/**
+ * Review component displays a label/value pair with optional icon and prefix.
+ *
+ * @example
+ * ```jsx
+ * <Review
+ *   content="Status: Approved"
+ *   icon="check"
+ *   prefix="Info"
+ *   backgroundColor="#f5f5f5"
+ * />
+ * ```
+ */
+declare const Review: ({ content, icon, iconBackgroundColor, iconColor, iconSize, isBoldFontWeight, prefix, backgroundColor, hasPrefixMargin, isIconAfterLabel, }: ReviewProps) => import("react/jsx-runtime").JSX.Element;
+export type { ReviewProps };
+export { Review };

package/dist/src/components/Primitives/Review/Review.styled.d.ts

@@ -0,0 +1,24 @@
+type DetailContentValueProps = {
+    isBoldFontWeight?: boolean;
+};
+type DetailContentInformationProps = {
+    noIcon?: boolean;
+    isIconAfterLabel?: boolean;
+    backgroundColor?: string;
+};
+type ContentDetailProps = {
+    type?: 'default' | 'warning';
+};
+type StyledProps = {
+    backgroundColor?: string;
+    color?: string;
+};
+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;
+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;
+declare const PrefixWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    showMarginRight?: boolean;
+}>> & string;
+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;
+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;
+export type { DetailContentInformationProps, DetailContentValueProps, ContentDetailProps, };
+export { DetailContentInformation, DetailContentValue, PrefixWrapper, ContentIcon, ContentDetail, };

package/dist/src/components/Primitives/Review/ReviewBox.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the `ReviewBox` component.
+ */
+type ReviewBoxProps = {
+    /** Child `Review` components to be displayed inside this container */
+    children: ReactNode;
+    /** The type of the review box, which affects its background color */
+    type?: 'default' | 'warning';
+};
+/**
+ * A container component for displaying a group of `Review` components.
+ *
+ * Pass any number of `Review` components as children to this component.
+ *
+ * @example
+ * <ReviewBox type="default">
+ *   <Review content="Status: Approved" icon="check" prefix="Info" />
+ *   <Review content="Score: 85%" icon="star" isIconAfterLabel />
+ * </ReviewBox>
+ */
+declare const ReviewBox: ({ children, type }: ReviewBoxProps) => import("react/jsx-runtime").JSX.Element;
+export type { ReviewBoxProps };
+export { ReviewBox };

package/dist/src/components/Primitives/Review/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Review';
+export * from './ReviewBox';

package/dist/src/components/Primitives/ToggleContent/ToggleContent.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { ToggleContentButtonProps } from './ToggleContentButton';
+/**
+ * Props for the `ToggleContent` component.
+ */
+type ToggleContentProps = {
+    /** Whether the content is sensitive (hides by default)
+     * @default false
+     */
+    isSensitiveContent?: boolean;
+    /** Show warning when revealing sensitive content
+     * @default false
+     */
+    showWarning?: boolean;
+    /** Placeholder to show when content is hidden */
+    hiddenContentPlaceholder?: ReactNode;
+    /** Whether to show the hidden content placeholder
+     * @default true
+     */
+    showHiddenContentPlaceholder?: boolean;
+    /** Optional container props */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /** Props for the toggle button */
+    buttonProps?: ToggleContentButtonProps;
+};
+/**
+ * Component to show/hide sensitive content with a toggle button.
+ *
+ * @example
+ * <ToggleContent
+ *   isSensitiveContent
+ *   showWarning
+ *   hiddenContentPlaceholder="*****"
+ * >
+ *   <span>Secret value</span>
+ * </ToggleContent>
+ */
+declare const ToggleContent: ({ isSensitiveContent, showWarning, hiddenContentPlaceholder, showHiddenContentPlaceholder, containerProps, buttonProps, children, }: PropsWithChildren<ToggleContentProps>) => import("react/jsx-runtime").JSX.Element;
+export { ToggleContent };
+export type { ToggleContentProps };

package/dist/src/components/Primitives/ToggleContent/ToggleContentButton.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Button } from '../../Buttons';
+import { Icon } from '../../../icons';
+/**
+ * Props for the `ToggleContentButton` component.
+ */
+type ToggleContentButtonProps = ComponentPropsWithoutRef<typeof Button> & {
+    /** Whether the content is currently visible
+     * @default false
+     */
+    showContent?: boolean;
+    /** Optional props when hiding the content */
+    hideContentProps?: {
+        text?: string;
+        icon?: Icon;
+    };
+    /** Optional props when revealing the content */
+    revealContentProps?: {
+        text?: string;
+        icon?: Icon;
+    };
+};
+/**
+ * Button to toggle visibility of sensitive content.
+ */
+declare const ToggleContentButton: ({ showContent, hideContentProps, revealContentProps, ...props }: ToggleContentButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { ToggleContentButton };
+export type { ToggleContentButtonProps };

package/dist/src/components/Primitives/ToggleContent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleContent';
+export * from './ToggleContentButton';

package/dist/src/components/Primitives/ViewDetails/ViewDetails.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { DetailsContentProps } from './ViewDetailsContent';
+/**
+ * Props for the `ViewDetails` component.
+ */
+type ViewDetailsProps = {
+    /** Array of sections, each containing a label and items */
+    data: {
+        label: string | undefined;
+        items: Exclude<DetailsContentProps, 'navigationComponent'>[];
+    }[];
+    navigationComponent: DetailsContentProps['navigationComponent'];
+};
+type DetailsDataProps = ComponentPropsWithoutRef<typeof ViewDetails>['data'][number];
+/**
+ * Component to display multiple sections with details.
+ *
+ * @example
+ * ```tsx
+ * <ViewDetails data={[
+ *   { label: 'User Info', items: [{ label: 'Name', value: 'John', navigationComponent: NavigationLink }] }
+ * ]} />
+ * ```
+ */
+declare const ViewDetails: ({ data, navigationComponent }: ViewDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export { ViewDetails };
+export type { DetailsDataProps };

package/dist/src/components/Primitives/ViewDetails/ViewDetails.styled.d.ts

@@ -0,0 +1,11 @@
+declare const LoadingContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Section: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Row: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const DetailViewSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const LineWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Title: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+declare const Paragraph: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const Text: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export { Container, Section, Row, Title, Text, LoadingContainer, Paragraph, Label, DetailViewSection, LineWrapper, };

package/dist/src/components/Primitives/ViewDetails/ViewDetailsContent.d.ts

@@ -0,0 +1,72 @@
+import { ComponentType, CSSProperties, ReactNode } from 'react';
+import { Icon } from '../../../icons';
+/** Props for the icon component */
+type IconProps = (Icon | Omit<string, Icon>) | {
+    name: Omit<string, Icon>;
+    size?: number;
+    color?: string;
+    tooltip?: string;
+};
+/**
+ * Props for the navigation component
+ */
+type NavigationComponentProps = {
+    /** URL string for the navigation component */
+    to: string | undefined;
+    /** Target attribute for the navigation component */
+    target?: '_blank' | '_self' | undefined;
+    /** Node to render */
+    children: ReactNode;
+    /** Indicates if the URL should be opened in a new tab */
+    isExternalUrl?: boolean;
+    /** Style to apply to the navigation component */
+    style?: CSSProperties;
+};
+type DetailsContentProps = {
+    /** Label for the detail item */
+    label?: string;
+    /** Value for the detail item */
+    value: ReactNode;
+    /** Icon to display alongside the label */
+    icon?: IconProps;
+    /** URL string or props object for the navigation component */
+    url?: string | Partial<NavigationComponentProps>;
+    /** If true, the URL is a resource within the application */
+    isResourceUrl?: boolean;
+    /** If true, adds copy-to-clipboard functionality */
+    isCopyToClipboard?: boolean;
+    /** If true, hides sensitive content */
+    isHidden?: boolean;
+    /**
+     * When true, long text will show an ellipsis
+     * when it overflows the container and show
+     * full content in tooltip on hover
+     * @default false
+     */
+    shouldDisableTextWrap?: boolean;
+    /** Tooltip content to display */
+    tooltip?: string | {
+        label?: string;
+        value?: string;
+    };
+    statusIcon?: IconProps;
+    /**
+     * Component to use for navigation links
+     */
+    navigationComponent?: ComponentType<NavigationComponentProps>;
+};
+/**
+ * Component to display a single detail row with optional icon, link, copy-to-clipboard, and tooltip.
+ *
+ * @example
+ * ```tsx
+ * <DetailsContent
+ *   label="Username"
+ *   value="johndoe"
+ *   navigationComponent={NavigationLink}
+ * />
+ * ```
+ */
+declare const ViewDetailsContent: ({ label, value, url, icon, isCopyToClipboard, isHidden, isResourceUrl, statusIcon, tooltip, shouldDisableTextWrap, navigationComponent, }: DetailsContentProps) => import("react/jsx-runtime").JSX.Element;
+export { ViewDetailsContent };
+export type { IconProps, DetailsContentProps };

package/dist/src/components/Primitives/ViewDetails/ViewDetailsLoading.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A component that renders a structured skeleton UI for the ViewDetails component.
+ *
+ * Includes placeholders for title, paragraphs, a separator line, and buttons.
+ *
+ * @example
+ * <ViewDetailsLoading ariaLabel="loading" />
+ */
+declare const ViewDetailsLoading: () => import("react/jsx-runtime").JSX.Element;
+export { ViewDetailsLoading };

package/dist/src/components/Primitives/ViewDetails/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ViewDetails';
+export * from './ViewDetailsContent';
+export * from './ViewDetailsLoading';

package/dist/src/components/Primitives/index.d.ts

@@ -22,3 +22,6 @@ export * from './PopoverPopupState';
 export * from './TimerCounter';
 export * from './SourceAndHash';
 export * from './Popover';
+export * from './Review';
+export * from './ToggleContent';
+export * from './ViewDetails';

package/dist/src/components/type-guards.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Checks if the given data is defined (i.e. it is not null or undefined).
+ *
+ * @template T The type of the data.
+ * @param data The data to check.
+ * @returns {boolean} True if the data is defined, false otherwise.
+ *
+ * @example
+ * isDefined(5); // true
+ * isDefined(null); // false
+ */
+declare function isDefined<T>(data: T | null | undefined): data is T;
+export { isDefined };

package/dist/src/utils/QuestionIcon.d.ts

@@ -0,0 +1,7 @@
+/**
+ * QuestionIcon component that displays a help icon with hover interaction.
+ * Used to indicate additional information or help is available.
+ * @returns A question mark icon that changes color on hover
+ */
+declare const QuestionIcon: () => import("react/jsx-runtime").JSX.Element;
+export { QuestionIcon };

package/dist/src/utils/getTextContent.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+/**
+ * Extracts text content from a React node or component.
+ *
+ * @param node - Any valid React node (element, string, number, array of nodes, etc.)
+ * @returns The combined text content of the node and its children
+ *
+ * @example
+ * // Simple text
+ * getTextContent("Hello") // Returns: "Hello"
+ *
+ * // React element with children
+ * getTextContent(<div>Hello <span>World</span></div>) // Returns: "Hello World"
+ *
+ * // Array of elements
+ * getTextContent([<span>Hello</span>, " ", <span>World</span>]) // Returns: "Hello World"
+ */
+export declare const getTextContent: (node: ReactNode) => string;

package/dist/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getTextContent';
+export * from './QuestionIcon';