@devopness/ui-react 2.156.0 → 2.157.0

package/dist/src/components/Templates/Card/Card.d.ts

@@ -0,0 +1,98 @@
+import { Color } from '../../../colors';
+import { IconProps } from '../../Primitives/Icon';
+import { TooltipProps } from '../../Primitives/Tooltip';
+type CardProps = React.PropsWithChildren<{
+    /**
+     * Props for the avatar wrapper
+     */
+    avatarProps: {
+        backgroundColor: Color;
+    };
+    /**
+     * Array of footer items to be rendered at the bottom of the card
+     */
+    footer?: {
+        /**
+         * Icon to display next to the label
+         */
+        icon?: IconProps['name'] | IconProps;
+        /**
+         * Text to display in the footer item
+         */
+        label?: string | {
+            content: string;
+            style?: React.CSSProperties;
+        };
+        /**
+         * Tooltip text to show on hover
+         */
+        tooltip?: string | Omit<TooltipProps, 'children'>;
+        /**
+         * URL to navigate to when footer item is clicked
+         */
+        url?: string;
+    }[];
+    /**
+     * Props for the header
+     */
+    headerProps?: {
+        backgroundColor?: Color;
+    };
+    /**
+     * Icon to display in the card
+     */
+    icon?: IconProps['name'] | IconProps;
+    /**
+     * Unique identifier for the card
+     */
+    id?: string;
+    /**
+     * Indicator to display in the card
+     */
+    indicator?: React.ReactNode;
+    /**
+     * Subtitle to display in the card
+     */
+    subtitle?: string;
+    /**
+     * Title to display in the card
+     */
+    title: string;
+    /**
+     * Props for the title
+     */
+    titleProps?: Pick<React.HTMLProps<HTMLSpanElement>, 'style'>;
+    /**
+     * URL to navigate to when card is clicked
+     */
+    url?: string;
+}>;
+/**
+ * A flexible and customizable card component for displaying content
+ * with a consistent, structured layout.
+ *
+ * @example
+ * // Basic usage
+ * <Card
+ *   title="Environment"
+ *   subtitle="Overview of current environments"
+ *   avatarProps={{ backgroundColor: 'blue.500' }}
+ *   icon="cubes"
+ * />
+ *
+ * @example
+ * // Card with footer and navigation
+ * <Card
+ *   title="Teams"
+ *   url="/teams"
+ *   footer={[
+ *     {
+ *       label: 'View All',
+ *       url: '/teams'
+ *     }
+ *   ]}
+ * />
+ */
+declare const Card: ({ children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export type { CardProps };
+export { Card };

package/dist/src/components/Templates/Card/Card.styled.d.ts

@@ -0,0 +1,38 @@
+import { CardProps } from './Card';
+import { TransientProps } from '../../types';
+type StyledContainerProps = {
+    /**
+     * Disable the minimum height of the container
+     *
+     * @default false
+     */
+    $disableMinHeight?: boolean;
+};
+declare const StyledContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
+declare const StyledAvatar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TransientProps<{
+    backgroundColor: import('../../../colors').Color;
+}>>> & string;
+declare const StyledTitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const StyledSubtitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const StyledIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+type StyledHeaderProps = TransientProps<CardProps['headerProps']> & {
+    /**
+     * Hide the border of the header
+     *
+     * @default false
+     */
+    $hideBorder?: boolean;
+};
+declare const StyledHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledHeaderProps>> & string;
+type StyledFooterProps = {
+    /**
+     * Show the footer border
+     *
+     * @default false
+     */
+    $showBorder?: boolean;
+};
+declare const StyledFooter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFooterProps>> & string;
+declare const StyledFooterLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const StyledLetterAvatar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export { StyledAvatar, StyledContainer, StyledFooter, StyledFooterLabel, StyledHeader, StyledIndicator, StyledLetterAvatar, StyledSubtitle, StyledTitle, };

package/dist/src/components/Templates/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

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

@@ -1 +1,2 @@
+export * from './Card';
 export * from './Tabs';

package/dist/src/components/types.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Maps props to styled component transient props
+ *
+ * Adds a `$` prefix to the prop name to prevent it from being passed to the
+ * underlying React node or rendered to the DOM element
+ *
+ * @see {@link https://styled-components.com/docs/api#transient-props | Styled Components - Transient props}
+ */
+type TransientProps<T extends object | undefined> = {
+    [Key in keyof NonNullable<T> as `$${string & Key}`]: NonNullable<T>[Key];
+};
 /**
  * Unwrap<T>
  *
@@ -24,4 +35,4 @@
 type Unwrap<T> = {
     [K in keyof T]: T[K];
 } & {};
-export type { Unwrap };
+export type { TransientProps, Unwrap };