@aic-kits/react 0.12.3 → 0.13.0

package/dist/components/Box/StyledBox.d.ts

@@ -52,5 +52,9 @@ export declare const genBoxStyle: (theme: Theme, props: StyleProps & CSSStylePro
     marginBlock?: import("csstype").Property.MarginBlock<string | number> | undefined;
     paddingInline?: import("csstype").Property.PaddingInline<string | number> | undefined;
     paddingBlock?: import("csstype").Property.PaddingBlock<string | number> | undefined;
+    whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
+    textOverflow?: import("csstype").Property.TextOverflow | undefined;
+    overflowY?: import("csstype").Property.OverflowY | undefined;
+    overflowX?: import("csstype").Property.OverflowX | undefined;
 };
 export declare const StyledBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps & CSSStyleProps & CustomBoxProps>> & string;

package/dist/components/Box/config.d.ts

@@ -465,7 +465,7 @@ declare const config: {
         readonly scale: "colors";
     };
 };
-export declare const cssPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "position", "top", "right", "bottom", "left", "overflow", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "opacity", "cursor", "transition", "transform", "animation", "willChange", "pointerEvents", "userSelect", "resize", "boxShadow", "textShadow", "filter", "backdropFilter", "mixBlendMode", "isolation", "zIndex", "marginInline", "marginBlock", "paddingInline", "paddingBlock", "willChange"];
+export declare const cssPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "position", "top", "right", "bottom", "left", "overflow", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "opacity", "cursor", "transition", "transform", "animation", "willChange", "pointerEvents", "userSelect", "resize", "boxShadow", "textShadow", "filter", "backdropFilter", "mixBlendMode", "isolation", "zIndex", "marginInline", "marginBlock", "paddingInline", "paddingBlock", "willChange", "whiteSpace", "textOverflow", "overflowY", "overflowX"];
 export declare const customBoxPropsKey: readonly ["absoluteFill", "fullWidth", "fullHeight", "fw", "fh"];
 export type ColorPropsKeyType = keyof typeof colors;
 export type SpacePropsKeyType = keyof typeof spaces;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { CheckboxProps } from './types';
+export declare const Checkbox: React.FC<CheckboxProps>;

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

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './types';

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

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { Color } from '../../theme';
+import { CheckboxSize } from '../../theme/components/checkbox';
+export interface CheckboxProps {
+    /**
+     * The label text for the checkbox.
+     */
+    label?: string;
+    /**
+     * The state of the checkbox.
+     */
+    checked: boolean;
+    /**
+     * Callback fired when the checkbox state changes.
+     */
+    onChange: (checked: boolean) => void;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The base color scheme for the checked state.
+     * @default 'primary' (from theme)
+     */
+    color?: Color;
+    /**
+     * The size of the checkbox and its label.
+     * @default 'md' (from theme)
+     */
+    size?: CheckboxSize;
+    /**
+     * Additional styles to apply to the container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The test ID for targeting in tests.
+     */
+    'data-testid'?: string;
+}

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

@@ -1,54 +1,3 @@
 import { default as React } from 'react';
-import { Color } from '../../theme/common';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    /**
-     * The value of the input field
-     */
-    value?: string;
-    /**
-     * Callback when the input value changes
-     */
-    onChange?: (text: string) => void;
-    /**
-     * The placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Whether the input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Error message to display
-     */
-    error?: string;
-    /**
-     * Label text to display above the input
-     */
-    label?: string;
-    /**
-     * Helper text to display below the input
-     */
-    helperText?: string;
-    /**
-     * Icon to display on the left side of the input
-     */
-    leftIcon?: React.ReactNode;
-    /**
-     * Icon to display on the right side of the input
-     */
-    rightIcon?: React.ReactNode;
-    /**
-     * Border color when focused
-     */
-    borderColor?: Color;
-    /**
-     * Background color
-     */
-    bgColor?: Color;
-}
-export interface InputRef {
-    focus: () => void;
-    blur: () => void;
-    value: string;
-}
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+import { InputHandle, InputProps } from './types';
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputHandle>>;

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

@@ -0,0 +1,54 @@
+import { Icon } from '@phosphor-icons/react';
+import { default as React } from 'react';
+import { Color } from '../../theme';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * The value of the input field
+     */
+    value?: string;
+    /**
+     * Callback when the input value changes
+     */
+    onChange?: (text: string) => void;
+    /**
+     * The placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Label text to display above the input
+     */
+    label?: string;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: string;
+    /**
+     * Icon to display on the left side of the input
+     */
+    leftIcon?: Icon;
+    /**
+     * Icon to display on the right side of the input
+     */
+    rightIcon?: Icon;
+    /**
+     * Border color when focused
+     */
+    borderColor?: Color;
+    /**
+     * Background color
+     */
+    bgColor?: Color;
+}
+export interface InputHandle {
+    focus: () => void;
+    blur: () => void;
+    value: string;
+}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import { SelectProps } from './types';
+export declare const Select: <T extends string | number>({ options, value, onChange, placeholder, label, helperText, error, disabled, variant, color: colorProp, size: sizeProp, corner: cornerProp, style, "data-testid": testId, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/SelectDropdown.d.ts

@@ -0,0 +1,14 @@
+import { SelectSize } from '../../theme/components/select';
+import { SelectOption } from './types';
+interface SelectDropdownProps<T extends string | number> {
+    anchorElement: HTMLElement;
+    isOpen: boolean;
+    options: SelectOption<T>[];
+    onSelect: (option: SelectOption<T>) => void;
+    selectedValue?: T;
+    onClose: () => void;
+    size: SelectSize;
+    borderRadius: string;
+}
+export declare function SelectDropdown<T extends string | number>({ anchorElement, isOpen, options, onSelect, selectedValue, onClose, size, borderRadius, }: SelectDropdownProps<T>): import('react').ReactPortal | null;
+export {};

package/dist/components/Select/SelectDropdownItem.d.ts

@@ -0,0 +1,13 @@
+import { SelectSize, SelectThemeConfig } from '../../theme/components/select';
+import { SelectOption } from './types';
+interface SelectDropdownItemProps<T extends string | number> {
+    option: SelectOption<T>;
+    isSelected: boolean;
+    isDisabled: boolean;
+    onSelect: (option: SelectOption<T>) => void;
+    sizeConfig: SelectThemeConfig['sizes'][SelectSize];
+    themeSelect: SelectThemeConfig;
+    animation: SelectThemeConfig['animation'];
+}
+export declare function SelectDropdownItem<T extends string | number>({ option, isSelected, isDisabled, onSelect, sizeConfig, themeSelect, animation, }: SelectDropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Select/SelectInputDisplay.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { Color, BorderWidth, SelectSize, SelectThemeConfig } from '../../theme';
+interface SelectInputDisplayProps {
+    label?: string;
+    placeholder?: string;
+    selectedValue?: string | number;
+    selectedOptionLabel?: string;
+    isOpen: boolean;
+    isDisabled: boolean;
+    handleToggle: () => void;
+    iconSizePx: number | string;
+    inputBorderRadius: string;
+    sizeConfig: SelectThemeConfig['sizes'][SelectSize];
+    animation: SelectThemeConfig['animation'];
+    currentBgColor: Color;
+    currentBorderColor: Color;
+    baseBorderWidthKey: BorderWidth;
+    insetBoxShadow: string;
+    textColor: Color;
+    iconColor: Color;
+    testId?: string;
+    setIsHovering: (isHovering: boolean) => void;
+}
+export declare const SelectInputDisplay: React.FC<SelectInputDisplayProps>;
+export {};

package/dist/components/Select/hooks.d.ts

@@ -0,0 +1,18 @@
+import { SelectOption } from './types';
+interface UseSelectStateParams<T extends string | number> {
+    value?: T;
+    onChange?: (value: T) => void;
+    disabled?: boolean;
+}
+export declare function useSelectState<T extends string | number>({ value, onChange, disabled, }: UseSelectStateParams<T>): {
+    isOpen: boolean;
+    setIsOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    isHovering: boolean;
+    setIsHovering: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    selectedValue: T | undefined;
+    selectRef: import('react').RefObject<HTMLDivElement | null>;
+    handleToggle: () => void;
+    handleSelect: (option: SelectOption<T>) => void;
+    handleClose: () => void;
+};
+export {};

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

@@ -0,0 +1,6 @@
+export * from './Select';
+export * from './types';
+export * from './hooks';
+export * from './utils';
+export * from './SelectInputDisplay';
+export * from './SelectDropdownItem';

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

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { Color, SelectSize, SelectVariant } from '../../theme';
+/**
+ * Represents a single option in the Select component.
+ */
+export interface SelectOption<T = string | number> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps<T extends string | number> {
+    /**
+     * Array of options to display.
+     */
+    options: SelectOption<T>[];
+    /**
+     * The currently selected value.
+     */
+    value?: T;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Placeholder text when no value is selected.
+     * @default 'Select an option'
+     */
+    placeholder?: string;
+    /**
+     * Label text to display above the select input.
+     */
+    label?: string;
+    /**
+     * Helper text to display below the select input.
+     */
+    helperText?: string;
+    /**
+     * Error message to display below the select input (takes precedence over helperText).
+     */
+    error?: string;
+    /**
+     * Whether the select is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The visual variant of the select input.
+     * @default 'outlined'
+     */
+    variant?: SelectVariant;
+    /**
+     * The base color scheme for the select input (affects border/background based on variant).
+     * @default 'primary' (from theme)
+     */
+    color?: Color;
+    /**
+     * The size of the select input and its label/options.
+     * @default 'md' (from theme)
+     */
+    size?: SelectSize;
+    /**
+     * Corner style of the select input.
+     * @default 'circle'
+     */
+    corner?: 'circle' | 'rounded';
+    /**
+     * Additional styles to apply to the container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The test ID for targeting in tests.
+     */
+    'data-testid'?: string;
+}

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

@@ -0,0 +1,19 @@
+import { Theme, Color, BorderWidth, SelectVariant, SelectThemeConfig } from '../../theme';
+interface SelectStyleParams {
+    theme: Theme;
+    themeSelect: SelectThemeConfig;
+    variant: SelectVariant;
+    isDisabled: boolean;
+    isErrored: boolean;
+    isOpen: boolean;
+    isHovering: boolean;
+    focusColor: Color;
+}
+interface SelectStyleResult {
+    backgroundColor: Color;
+    borderColor: Color;
+    borderWidth: BorderWidth;
+    insetBoxShadow: string;
+}
+export declare function getSelectStyles({ theme, themeSelect, variant, isDisabled, isErrored, isOpen, isHovering, focusColor, }: SelectStyleParams): SelectStyleResult;
+export {};

package/dist/components/index.d.ts

@@ -14,3 +14,5 @@ export * from './Vimeo';
 export * from './Carousel';
 export * from './Accordion';
 export * from './Tag';
+export * from './Checkbox';
+export * from './Select';