@devopness/ui-react 2.155.0 → 2.157.0

package/dist/src/components/Forms/Input/Input.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { ErrorMessageProps } from '../../Primitives/ErrorMessage';
 import { LabelProps } from '../../Primitives/Label';
 type SharedProps = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -36,6 +35,14 @@ type InputProps = (SharedProps & {
 /**
  * Allows users to enter and edit text
  *
+ * A flexible input component that supports:
+ * - Various input types (text, number, etc.)
+ * - Error states with automatic focus
+ * - Custom styling
+ * - Label and help text
+ *
+ * When an error state is applied, the input will automatically receive focus to draw the user's attention.
+ *
  * @example
  * ```
  * <Input
@@ -50,7 +57,7 @@ type InputProps = (SharedProps & {
  * />
  * ```
  */
-declare const Input: React.ForwardRefExoticComponent<(Omit<React.InputHTMLAttributes<HTMLInputElement> & {
+declare const Input: import('react').ForwardRefExoticComponent<(Omit<import('react').InputHTMLAttributes<HTMLInputElement> & {
     /** React ref for direct DOM manipulation */
     ref?: React.Ref<HTMLInputElement>;
     /** Error message configuration */
@@ -75,7 +82,7 @@ declare const Input: React.ForwardRefExoticComponent<(Omit<React.InputHTMLAttrib
 } & {
     /** HTML input type (text, number, email, etc) */
     type: Exclude<React.HTMLInputTypeAttribute, "number">;
-}, "ref"> | Omit<React.InputHTMLAttributes<HTMLInputElement> & {
+}, "ref"> | Omit<import('react').InputHTMLAttributes<HTMLInputElement> & {
     /** React ref for direct DOM manipulation */
     ref?: React.Ref<HTMLInputElement>;
     /** Error message configuration */
@@ -102,6 +109,6 @@ declare const Input: React.ForwardRefExoticComponent<(Omit<React.InputHTMLAttrib
     type: "number";
     /** Removes increment/decrement arrows from number inputs */
     removeArrows?: boolean;
-}, "ref">) & React.RefAttributes<HTMLInputElement>>;
+}, "ref">) & import('react').RefAttributes<HTMLInputElement>>;
 export type { InputProps };
 export { Input };

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 };