@aic-kits/react 0.7.1 → 0.9.0

package/dist/components/Art/EmojiArt.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { EmojiArtProps } from './types';
-export declare const EmojiArt: ({ art, width, height, style, "data-testid": testId, ...rest }: EmojiArtProps) => React.ReactElement;
+export declare const EmojiArt: ({ art, size, style, "data-testid": testId, ...rest }: EmojiArtProps) => React.ReactElement;

package/dist/components/Art/IconArt.d.ts

@@ -1,3 +1,7 @@
 import { default as React } from 'react';
 import { IconArtProps } from './types';
-export declare const IconArt: ({ art, width, height, color, style, "data-testid": testId, ...rest }: IconArtProps) => React.ReactElement;
+/**
+ * Renders a Phosphor icon within a layout Box.
+ * The specific icon is determined by the `art` prop (kebab-case name).
+ */
+export declare const IconArt: ({ art, size, color, weight, style, "data-testid": testId, ...rest }: IconArtProps) => React.ReactElement | null;

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

@@ -1,15 +1,24 @@
+import { Icon, IconWeight } from '@phosphor-icons/react';
 import { default as React } from 'react';
-import { Size } from '../../theme/common';
+import { Size, Color } from '../../theme/common';
 import { BoxProps } from '../Box';
-export interface BaseArtProps extends BoxProps {
+export interface WidthHeightProps {
     /**
      * Width of the art
      */
-    width?: string | number;
+    width?: Size | string | number;
     /**
      * Height of the art
      */
     height?: Size | string | number;
+}
+export interface SizeProps {
+    /**
+     * Size of the art
+     */
+    size?: Size | string | number;
+}
+export interface BaseArtProps extends Omit<BoxProps, 'width' | 'height'> {
     /**
      * Testing id of the component
      */
@@ -19,21 +28,28 @@ export interface BaseArtProps extends BoxProps {
      */
     style?: React.CSSProperties;
 }
-export interface IconArtProps extends BaseArtProps {
+export interface IconArtProps extends BaseArtProps, SizeProps {
     /**
      * Type of the art
      */
     type?: 'icon';
     /**
-     * Icon name
+     * Name of the Phosphor icon (e.g., 'house', 'heart', 'airplane-in-flight').
+     * Must be a valid key from the `phosphorIconMap`.
      */
-    art: string;
+    art: Icon;
+    /**
+     * Color of the icon. Can be a theme color key or any valid CSS color string.
+     * @default 'currentColor'
+     */
+    color?: Color | string;
     /**
-     * Color of the icon
+     * Icon weight (stroke style).
+     * @default 'regular'
      */
-    color?: string;
+    weight?: IconWeight;
 }
-export interface EmojiArtProps extends BaseArtProps {
+export interface EmojiArtProps extends BaseArtProps, SizeProps {
     /**
      * Type of the art
      */
@@ -43,7 +59,7 @@ export interface EmojiArtProps extends BaseArtProps {
      */
     art: string;
 }
-export interface SvgArtProps extends BaseArtProps {
+export interface SvgArtProps extends BaseArtProps, WidthHeightProps {
     /**
      * Type of the art
      */
@@ -53,7 +69,7 @@ export interface SvgArtProps extends BaseArtProps {
      */
     art: React.FunctionComponent<React.SVGAttributes<SVGElement>> | string;
 }
-export interface ImageArtProps extends BaseArtProps {
+export interface ImageArtProps extends BaseArtProps, WidthHeightProps {
     /**
      * Type of the art
      */
@@ -63,7 +79,7 @@ export interface ImageArtProps extends BaseArtProps {
      */
     art: string;
 }
-export interface BrandArtProps extends BaseArtProps {
+export interface BrandArtProps extends BaseArtProps, WidthHeightProps {
     /**
      * Type of the art
      */

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

@@ -1,6 +1,8 @@
 import { Color } from '../../theme';
 import { BoxProps } from '../Box';
 import { HeaderProps } from '../Header/types';
+/** Defines the layout mode for the content area on desktop screens. */
+export type ContentLayoutMode = 'maxWidth' | 'padded';
 export interface BaseProps extends BoxProps {
     /**
      * The background color of the Base component
@@ -12,4 +14,12 @@ export interface BaseProps extends BoxProps {
      * Can provide a HeaderProps object to customize the header
      */
     header?: HeaderProps | false;
+    /**
+     * Defines how the main content area is laid out on desktop screens.
+     * - `'maxWidth'`: Content is centered with a maximum width defined in the theme.
+     * - `'padded'`: Content uses horizontal padding defined in the theme.
+     * On mobile screens, content always uses mobile padding defined in the theme.
+     * @default 'maxWidth' (behavior might depend on theme defaults)
+     */
+    contentLayoutMode?: ContentLayoutMode;
 }

package/dist/components/Base/utils.d.ts

@@ -0,0 +1,5 @@
+import { BaseThemeConfig } from '../../theme';
+import { BoxProps } from '../Box';
+import { ContentLayoutMode } from './types';
+export declare const getInnerBoxStyleProps: (isDesktop: boolean, contentLayoutMode: ContentLayoutMode, baseThemeConfig: BaseThemeConfig) => Pick<BoxProps, "px" | "maxWidth">;
+export declare const getInnerBoxInlineStyle: (isDesktop: boolean, contentLayoutMode: ContentLayoutMode) => import('react').CSSProperties;

package/dist/components/Button/StyledButton.d.ts

@@ -1,4 +1,5 @@
-import { BorderWidth, Color, Space } from '../../theme/common';
+import { BorderWidth, Color, FontSize, Space, Size, FontWeight } from '../../theme/common';
+import { ButtonSize } from '../../theme/components/button';
 type ButtonContainerProps = {
     $backgroundColor: Color | 'disabled';
     $borderRadius: string;
@@ -6,8 +7,9 @@ type ButtonContainerProps = {
     $disabled?: boolean;
     $variant: 'solid' | 'outlined' | 'text';
     $color: Color;
-    $paddingHorizontal?: Space;
-    $paddingVertical?: Space;
+    $paddingHorizontal: Space;
+    $paddingVertical: Space;
+    $size: ButtonSize;
 };
 declare const StyledButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
@@ -19,6 +21,8 @@ type ButtonTextProps = {
     $themeTextColor?: Color;
     $disabled?: boolean;
     $variant: 'solid' | 'outlined' | 'text';
+    $themeFontSize: FontSize;
+    $themeFontWeight: FontWeight;
 };
 declare const StyledButtonText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TextProps & {
     useRichText?: boolean;
@@ -27,10 +31,19 @@ declare const StyledButtonText: import('styled-components/dist/types').IStyledCo
 }) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 type ButtonIconWrapperProps = {
     $themePosition: 'left' | 'right';
+    $iconSpacing: Space;
 };
 declare const StyledButtonIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
 }, ButtonIconWrapperProps>> & string & Omit<(props: import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
 }) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
-export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, };
+type ButtonIconProps = {
+    $themeColor: Color;
+    $themeTextColor?: Color;
+    $disabled?: boolean;
+    $variant: 'solid' | 'outlined' | 'text';
+    $iconSize: Size;
+};
+declare const StyledButtonIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').IconArtProps | import('..').EmojiArtProps | import('..').SvgArtProps | import('..').ImageArtProps | import('..').BrandArtProps, ButtonIconProps>> & string & Omit<(props: import('..').ArtProps) => React.ReactElement, keyof import('react').Component<any, {}, any>>;
+export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, };

package/dist/components/Button/index.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ButtonProps } from './types';
-export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, variant, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
+export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, variant, size, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
 export * from './utils';

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

@@ -1,3 +1,4 @@
+import { Icon } from '@phosphor-icons/react';
 import { Color } from '../../theme';
 export interface ButtonProps {
     /**
@@ -7,7 +8,7 @@ export interface ButtonProps {
     /**
      * Places an icon within the button, before the button's text
      */
-    icon?: React.ReactNode;
+    icon?: Icon;
     /**
      * Visual color to apply to button.
      * For 'solid' variant, sets background color.
@@ -31,7 +32,7 @@ export interface ButtonProps {
     /**
      * Places an icon within the button, after the button's text
      */
-    rightIcon?: React.ReactNode;
+    rightIcon?: Icon;
     /**
      * Corner style of button.
      */
@@ -41,6 +42,11 @@ export interface ButtonProps {
      * @default 'solid'
      */
     variant?: 'solid' | 'outlined' | 'text';
+    /**
+     * Button size.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Additional style.
      */

package/dist/components/Text/StyledText.d.ts

@@ -8,5 +8,7 @@ interface StyledTextProps {
     $textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
     $textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through';
 }
-declare const StyledText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, StyledTextProps>> & string;
+declare const StyledText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, {
+    as?: "p" | "span";
+}>, StyledTextProps>> & string;
 export { StyledText };

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

@@ -42,6 +42,10 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
      * Whether to render the text with rich text formatting.
      */
     useRichText?: boolean;
+    /**
+     * The tag to render the text in.
+     */
+    as?: 'p' | 'span';
 }
 export interface TagStyle {
     pattern: RegExp;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React hook that tracks state of a CSS media query.
+ *
+ * @param query - The media query string to watch (e.g., '(min-width: 768px)').
+ * @returns `true` if the media query matches, `false` otherwise.
+ */
+export declare function useMediaQuery(query: string): boolean;