@aurora-ds/components 0.15.4 → 0.16.1

package/README.md

@@ -63,6 +63,7 @@ function App() {
 | **Page** | Page layout component |
 | **PageSection** | Section within a page |
 | **Separator** | Visual separator component |
+| **Select** | Dropdown select component for single item selection |
 | **Stack** | Flexbox container for horizontal/vertical layouts |
 | **Tabs** | Tab navigation component with multiple sections, used with `TabItem` |
 | **Text** | Typography component with semantic HTML tags (h1-h6, p, span, label) |

package/dist/cjs/components/actions/button/Button.props.d.ts

@@ -20,6 +20,12 @@ export type ButtonProps = {
     disabled?: boolean;
     /** Custom text color (overrides variant color) */
     textColor?: keyof Theme['colors'];
+    /** Custom backgroundColor (overrides variant backgroundColor) */
+    backgroundColor?: keyof Theme['colors'];
+    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
+    hoverBackgroundColor?: keyof Theme['colors'];
+    /** Custom active backgroundColor (overrides variant active backgroundColor) */
+    activeBackgroundColor?: keyof Theme['colors'];
     /** Size of the button */
     size?: IconButtonSizes;
     /** Accessibility label for screen readers */
@@ -37,5 +43,8 @@ export type ButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
     textColor?: keyof Theme['colors'];
+    backgroundColor?: keyof Theme['colors'];
+    hoverBackgroundColor?: keyof Theme['colors'];
+    activeBackgroundColor?: keyof Theme['colors'];
     size?: IconButtonSizes;
 };

package/dist/cjs/components/actions/icon-button/IconButton.props.d.ts

@@ -16,6 +16,12 @@ export type IconButtonProps = {
     disabled?: boolean;
     /** Custom text/icon color (overrides variant color) */
     textColor?: keyof Theme['colors'];
+    /** Custom backgroundColor (overrides variant backgroundColor) */
+    backgroundColor?: keyof Theme['colors'];
+    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
+    hoverBackgroundColor?: keyof Theme['colors'];
+    /** Custom active backgroundColor (overrides variant active backgroundColor) */
+    activeBackgroundColor?: keyof Theme['colors'];
     /** Size of the icon button */
     size?: IconButtonSizes;
     /** Accessibility label for screen readers */
@@ -34,4 +40,7 @@ export type IconButtonStyleParams = {
     active?: boolean;
     size?: IconButtonSizes;
     textColor?: keyof Theme['colors'];
+    backgroundColor?: keyof Theme['colors'];
+    hoverBackgroundColor?: keyof Theme['colors'];
+    activeBackgroundColor?: keyof Theme['colors'];
 };

package/dist/cjs/components/data-display/skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SkeletonProps } from '@components/data-display/skeleton/Skeleton.props';
+declare const Skeleton: FC<SkeletonProps>;
+export default Skeleton;

package/dist/cjs/components/data-display/skeleton/Skeleton.props.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '@aurora-ds/theme';
+import { CSSProperties } from 'react';
+export type SkeletonProps = {
+    width: CSSProperties['width'];
+    height: CSSProperties['height'];
+    borderRadius?: keyof Theme['radius'];
+};

package/dist/cjs/components/data-display/skeleton/Skeleton.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const SKELETON_STYLES: {
+    root: (width?: import("csstype").Property.Width<string | number> | undefined, height?: import("csstype").Property.Height<string | number> | undefined, borderRadius?: keyof import("@aurora-ds/theme").BaseRadius | undefined) => string;
+};

package/dist/cjs/components/data-display/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from '@components/data-display/skeleton/Skeleton.tsx';
+export type { SkeletonProps } from '@components/data-display/skeleton/Skeleton.props.ts';

package/dist/cjs/components/forms/select/Select.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SelectProps } from '@components/forms/select/Select.props';
+/**
+ * Select component that uses Menu for dropdown
+ */
+declare const Select: FC<SelectProps>;
+export { Select };

package/dist/cjs/components/forms/select/Select.props.d.ts

@@ -0,0 +1,31 @@
+import { SelectOption } from '@interfaces/select.types';
+export type SelectProps = {
+    /**
+     * The options to display in the select dropdown
+     */
+    options: SelectOption[];
+    /**
+     * The currently selected value
+     */
+    value?: string | number;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Width of the select
+     */
+    width?: string | number;
+};
+export type SelectStyleParams = {
+    disabled?: boolean;
+    width?: string | number;
+};

package/dist/cjs/components/forms/select/Select.styles.d.ts

@@ -0,0 +1,10 @@
+import { SelectStyleParams } from '@components/forms/select/Select.props.ts';
+/**
+ * Select styles using createStyles from @aurora-ds/theme
+ */
+export declare const SELECT_STYLES: {
+    root: (args_0: SelectStyleParams) => string;
+    trigger: string;
+    value: string;
+    placeholder: string;
+};

package/dist/cjs/components/forms/select/SelectItem/SelectItem.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SelectItemProps } from '@components/forms/select/SelectItem/SelectItem.props';
+/**
+ * SelectItem component for use inside Select dropdown
+ */
+declare const SelectItem: FC<SelectItemProps>;
+export { SelectItem };

package/dist/cjs/components/forms/select/SelectItem/SelectItem.props.d.ts

@@ -0,0 +1,19 @@
+import { SelectOption } from '@interfaces/select.types';
+export type SelectItemProps = {
+    /**
+     * The option data
+     */
+    option: SelectOption;
+    /**
+     * Whether this item is selected
+     */
+    isSelected?: boolean;
+    /**
+     * Callback when item is selected
+     */
+    onSelect?: (value: string | number) => void;
+};
+export type SelectItemStyleParams = {
+    isSelected?: boolean;
+    disabled?: boolean;
+};

package/dist/cjs/components/forms/select/SelectItem/SelectItem.styles.d.ts

@@ -0,0 +1,7 @@
+import { SelectItemStyleParams } from '@components/forms/select/SelectItem/SelectItem.props';
+/**
+ * SelectItem styles using createStyles from @aurora-ds/theme
+ */
+export declare const SELECT_ITEM_STYLES: {
+    root: (args_0: SelectItemStyleParams) => string;
+};

package/dist/cjs/components/forms/select/SelectItem/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectItem } from '@components/forms/select/SelectItem/SelectItem';
+export type { SelectItemProps } from '@components/forms/select/SelectItem/SelectItem.props';

package/dist/cjs/components/forms/select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from '@components/forms/select/Select';
+export type { SelectProps } from '@components/forms/select/Select.props';

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

@@ -2,11 +2,13 @@ export * from '@components/foundation/icon';
 export * from '@components/foundation/text';
 export * from '@components/data-display/chip';
 export * from '@components/data-display/avatar';
+export * from '@components/data-display/skeleton';
 export * from '@components/actions/button';
 export * from '@components/actions/icon-button';
 export * from '@components/forms/form';
 export * from '@components/forms/input';
 export * from '@components/forms/textarea';
+export * from '@components/forms/select';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';
 export * from '@components/layout/grid';
@@ -15,6 +17,7 @@ export * from '@components/layout/page-construction/page-section';
 export * from '@components/layout/page-construction/page';
 export * from '@components/overlay/accordion';
 export * from '@components/overlay/menu';
+export * from '@components/overlay/modal';
 export * from '@components/navigation/drawer-item';
 export * from '@components/navigation/breadcrumb';
 export * from '@components/navigation/tabs';

package/dist/cjs/components/overlay/modal/Modal.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ModalProps } from '@components/overlay/modal/Modal.props';
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/cjs/components/overlay/modal/Modal.props.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    label: string;
+    children: ReactNode;
+    isForm?: boolean;
+    action?: {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+    };
+};

package/dist/cjs/components/overlay/modal/Modal.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const MODAL_STYLES: {
+    background: (isFadingIn: boolean) => string;
+    content: (isFadingIn: boolean) => string;
+};

package/dist/cjs/components/overlay/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from '@components/overlay/modal/Modal.tsx';
+export type { ModalProps } from '@components/overlay/modal/Modal.props.ts';

package/dist/cjs/constants/animations.d.ts

@@ -0,0 +1 @@
+export declare const shimmerAnimation: string;