@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/styles/tokens.css

@@ -94,6 +94,7 @@
 	--color-bg-hover: var(--gray-4);
 	--color-bg-active: var(--gray-5);
 	--color-bg-elevated: #ffffff;
+	--color-bg-card: #ffffff;
 
 	/* Text */
 	--color-text: var(--gray-12);
@@ -339,6 +340,8 @@
 
 	/* Semantic overrides for dark mode */
 	--color-bg-elevated: var(--gray-2);
+	--color-bg-card: var(--gray-3);
+	--color-bg-muted: var(--gray-4);
 	--color-text-inverse: var(--gray-12);
 
 	/* Shadows for dark mode */
@@ -426,6 +429,8 @@
 
 		/* Semantic overrides */
 		--color-bg-elevated: var(--gray-2);
+		--color-bg-card: var(--gray-3);
+		--color-bg-muted: var(--gray-4);
 		--color-text-inverse: var(--gray-12);
 	}
 }

package/dist/types/data-display.d.ts

@@ -0,0 +1,161 @@
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export interface CardProps {
+    variant?: CardVariant;
+    clickable?: boolean;
+    class?: string;
+}
+export interface CardHeaderProps {
+    class?: string;
+}
+export interface CardBodyProps {
+    class?: string;
+}
+export interface CardFooterProps {
+    class?: string;
+}
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    class?: string;
+}
+export interface AvatarGroupProps {
+    max?: number;
+    size?: AvatarSize;
+    spacing?: string;
+    class?: string;
+}
+export type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+export type TagSize = 'sm' | 'md' | 'lg';
+export interface TagProps {
+    variant?: TagVariant;
+    size?: TagSize;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    class?: string;
+}
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+export interface EmptyStateProps {
+    title: string;
+    description?: string;
+    size?: EmptyStateSize;
+    class?: string;
+}
+export interface ListProps {
+    dividers?: boolean;
+    class?: string;
+}
+export interface ListItemProps {
+    clickable?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+export type ChipVariant = 'filled' | 'outlined' | 'soft';
+export type ChipColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export type ChipSize = 'sm' | 'md' | 'lg';
+export interface ChipProps {
+    variant?: ChipVariant;
+    color?: ChipColor;
+    size?: ChipSize;
+    removable?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    onclick?: () => void;
+    onremove?: () => void;
+    class?: string;
+}
+export interface ChipGroupProps {
+    value?: string | string[];
+    multiple?: boolean;
+    class?: string;
+}
+export interface TableProps {
+    striped?: boolean;
+    bordered?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    stickyHeader?: boolean;
+    class?: string;
+}
+export interface TableHeadProps {
+    class?: string;
+}
+export type TableHeaderAlign = 'left' | 'center' | 'right';
+export type TableHeaderSortDirection = 'asc' | 'desc' | null;
+export interface TableHeaderProps {
+    sortable?: boolean;
+    sortDirection?: TableHeaderSortDirection;
+    onsort?: () => void;
+    align?: TableHeaderAlign;
+    class?: string;
+}
+export interface TableBodyProps {
+    class?: string;
+}
+export interface TableRowProps {
+    selected?: boolean;
+    clickable?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+export type TableCellAlign = 'left' | 'center' | 'right';
+export interface TableCellProps {
+    align?: TableCellAlign;
+    truncate?: boolean;
+    nowrap?: boolean;
+    class?: string;
+}
+export interface AccordionProps {
+    value?: string | string[];
+    multiple?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+export interface AccordionItemProps {
+    value: string;
+    disabled?: boolean;
+    class?: string;
+}
+export interface SliderProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    showTicks?: boolean;
+    class?: string;
+}
+export interface CarouselProps {
+    activeIndex?: number;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    loop?: boolean;
+    showIndicators?: boolean;
+    showArrows?: boolean;
+    class?: string;
+}
+export interface CarouselSlideProps {
+    class?: string;
+}
+export type ImageObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export type ImageRounded = boolean | 'sm' | 'md' | 'lg' | 'full';
+export interface ImageProps {
+    src: string;
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    loading?: 'lazy' | 'eager';
+    objectFit?: ImageObjectFit;
+    objectPosition?: string;
+    placeholder?: string;
+    fallback?: string;
+    rounded?: ImageRounded;
+    aspectRatio?: string;
+    class?: string;
+}

package/dist/types/data-display.js

@@ -0,0 +1 @@
+export {};

package/dist/types/feedback.d.ts

@@ -0,0 +1,92 @@
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps {
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    icon?: string;
+    class?: string;
+}
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+export type ToastPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+export interface ToastData {
+    id: string;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    dismissible?: boolean;
+}
+export interface ToastProps {
+    variant?: ToastVariant;
+    dismissible?: boolean;
+    progress?: boolean;
+    class?: string;
+}
+export interface ToastContainerProps {
+    position?: ToastPosition;
+    class?: string;
+}
+export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+export interface ModalProps {
+    open?: boolean;
+    size?: ModalSize;
+    closeOnEscape?: boolean;
+    closeOnBackdrop?: boolean;
+    class?: string;
+}
+export interface ModalHeaderProps {
+    class?: string;
+}
+export interface ModalBodyProps {
+    class?: string;
+}
+export interface ModalFooterProps {
+    class?: string;
+}
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export interface ProgressBarProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    size?: ProgressSize;
+    class?: string;
+}
+export interface ProgressCircleProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    size?: ProgressSize;
+    strokeWidth?: number;
+    class?: string;
+}
+export interface SpinnerProps {
+    size?: ProgressSize;
+    class?: string;
+}
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export interface TooltipProps {
+    content: string;
+    side?: TooltipSide;
+    delay?: number;
+    class?: string;
+}
+export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+export interface PopoverProps {
+    class?: string;
+}
+export interface PopoverTriggerProps {
+    class?: string;
+}
+export interface PopoverContentProps {
+    side?: PopoverSide;
+    class?: string;
+}
+export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
+export interface SkeletonProps {
+    variant?: SkeletonVariant;
+    width?: string;
+    height?: string;
+    class?: string;
+}

package/dist/types/feedback.js

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -126,4 +126,9 @@ export interface SwitchProps {
     disabled?: boolean;
     class?: string;
 }
-export type { TabsOrientation, TabsProps, TabListProps, TabTriggerProps, TabContentProps, MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, BreadcrumbItemData, BreadcrumbsProps, BreadcrumbItemProps, BottomNavItemData, BottomNavProps, BottomNavItemProps, NavItemProps, NavbarProps, SidebarItemData, SidebarProps, SidebarItemProps, SidebarGroupProps } from './navigation.js';
+export type { TabsOrientation, TabsProps, TabListProps, TabTriggerProps, TabContentProps, MenuProps, MenuTriggerProps, MenuContentProps, MenuItemProps, MenuSeparatorProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps, BreadcrumbItemData, BreadcrumbsProps, BreadcrumbItemProps, BottomNavItemData, BottomNavProps, BottomNavItemProps, NavItemProps, NavbarProps, SidebarItemData, SidebarProps, SidebarItemProps, SidebarGroupProps, StepperOrientation, StepperProps, StepperStepProps } from './navigation.js';
+export type { AlertVariant, AlertProps, ToastVariant, ToastPosition, ToastData, ToastProps, ToastContainerProps, ModalSize, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ProgressSize, ProgressBarProps, ProgressCircleProps, SpinnerProps, TooltipSide, TooltipProps, PopoverSide, PopoverProps, PopoverTriggerProps, PopoverContentProps, SkeletonVariant, SkeletonProps } from './feedback.js';
+export type { CardVariant, CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, AvatarSize, AvatarShape, AvatarProps, AvatarGroupProps, TagVariant, TagSize, TagProps, ChipVariant, ChipColor, ChipSize, ChipProps, ChipGroupProps, EmptyStateSize, EmptyStateProps, ListProps, ListItemProps, TableProps, TableHeadProps, TableHeaderAlign, TableHeaderSortDirection, TableHeaderProps, TableBodyProps, TableRowProps, TableCellAlign, TableCellProps, AccordionProps, AccordionItemProps, SliderProps, CarouselProps, CarouselSlideProps, ImageObjectFit, ImageRounded, ImageProps } from './data-display.js';
+export type { ContainerSize, ContainerProps, GridAlign, GridJustify, SpacingToken, GridProps, GridItemProps, StackDirection, StackProps, DividerOrientation, DividerProps, SpacerSize, SpacerProps, AspectRatioPreset, AspectRatioProps, CenterProps, BoxProps } from './layout.js';
+export type { SafeAreaEdge, SafeAreaProps, BottomSheetSnapPoint, BottomSheetProps, BottomSheetHeaderProps, BottomSheetBodyProps, ActionSheetAction, ActionSheetProps, ActionSheetItemProps, PullToRefreshProps, SwipeActionSide, SwipeActionData, SwipeActionsProps, SwipeActionProps, FABSize, FABPosition, FABProps, FABAction, FABGroupProps } from './mobile.js';
+export type { SearchInputProps, DatePickerProps, FileUploadProps, OTPInputProps, TimeFormat, TimePickerProps, RatingProps } from './input.js';

package/dist/types/input.d.ts

@@ -0,0 +1,67 @@
+export interface SearchInputProps {
+    value?: string;
+    placeholder?: string;
+    suggestions?: string[];
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    maxSuggestions?: number;
+    class?: string;
+}
+export interface DatePickerProps {
+    value?: Date | null;
+    placeholder?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    format?: string;
+    locale?: string;
+    class?: string;
+}
+export interface FileUploadProps {
+    files?: File[];
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    showPreview?: boolean;
+    class?: string;
+}
+export interface OTPInputProps {
+    value?: string;
+    length?: number;
+    type?: 'numeric' | 'alphanumeric';
+    masked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    autoFocus?: boolean;
+    class?: string;
+}
+export type TimeFormat = '12h' | '24h';
+export interface TimePickerProps {
+    value?: string;
+    format?: TimeFormat;
+    minuteStep?: number;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+    class?: string;
+}
+export interface RatingProps {
+    value?: number;
+    max?: number;
+    allowHalf?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    showValue?: boolean;
+    class?: string;
+}

package/dist/types/input.js

@@ -0,0 +1,2 @@
+// Input-related component types
+export {};

package/dist/types/layout.d.ts

@@ -0,0 +1,57 @@
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface ContainerProps {
+    size?: ContainerSize;
+    centered?: boolean;
+    class?: string;
+}
+export type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+export type GridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type SpacingToken = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface GridProps {
+    columns?: number;
+    gap?: SpacingToken;
+    align?: GridAlign;
+    justify?: GridJustify;
+    class?: string;
+}
+export interface GridItemProps {
+    colSpan?: number;
+    rowSpan?: number;
+    class?: string;
+}
+export type StackDirection = 'row' | 'column';
+export interface StackProps {
+    direction?: StackDirection;
+    gap?: SpacingToken;
+    align?: GridAlign;
+    justify?: GridJustify;
+    wrap?: boolean;
+    class?: string;
+}
+export type DividerOrientation = 'horizontal' | 'vertical';
+export interface DividerProps {
+    orientation?: DividerOrientation;
+    decorative?: boolean;
+    class?: string;
+}
+export type SpacerSize = SpacingToken | 'fill';
+export interface SpacerProps {
+    size?: SpacerSize;
+    class?: string;
+}
+export type AspectRatioPreset = '1:1' | '16:9' | '4:3' | '21:9' | '3:2';
+export interface AspectRatioProps {
+    ratio?: number | AspectRatioPreset;
+    class?: string;
+}
+export interface CenterProps {
+    inline?: boolean;
+    class?: string;
+}
+export interface BoxProps {
+    padding?: SpacingToken;
+    margin?: SpacingToken;
+    radius?: SpacingToken;
+    as?: keyof HTMLElementTagNameMap;
+    class?: string;
+}

package/dist/types/layout.js

@@ -0,0 +1 @@
+export {};

package/dist/types/mobile.d.ts

@@ -0,0 +1,91 @@
+export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
+export interface SafeAreaProps {
+    edges?: SafeAreaEdge[];
+    class?: string;
+}
+export type BottomSheetSnapPoint = 'min' | 'half' | 'full' | number;
+export interface BottomSheetProps {
+    open?: boolean;
+    snapPoints?: BottomSheetSnapPoint[];
+    defaultSnapPoint?: BottomSheetSnapPoint;
+    showHandle?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    class?: string;
+}
+export interface BottomSheetHeaderProps {
+    sticky?: boolean;
+    class?: string;
+}
+export interface BottomSheetBodyProps {
+    class?: string;
+}
+export interface ActionSheetAction {
+    label: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export interface ActionSheetProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    cancelLabel?: string;
+    showCancel?: boolean;
+    closeOnSelect?: boolean;
+    class?: string;
+}
+export interface ActionSheetItemProps {
+    destructive?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    class?: string;
+}
+export interface PullToRefreshProps {
+    refreshing?: boolean;
+    threshold?: number;
+    maxPull?: number;
+    disabled?: boolean;
+    class?: string;
+}
+export type SwipeActionSide = 'left' | 'right';
+export interface SwipeActionData {
+    label: string;
+    icon?: string;
+    color?: string;
+    onAction?: () => void;
+}
+export interface SwipeActionsProps {
+    leftActions?: SwipeActionData[];
+    rightActions?: SwipeActionData[];
+    threshold?: number;
+    disabled?: boolean;
+    class?: string;
+}
+export interface SwipeActionProps {
+    color?: string;
+    class?: string;
+}
+export type FABSize = 'sm' | 'md' | 'lg';
+export type FABPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left';
+export interface FABProps {
+    size?: FABSize;
+    position?: FABPosition;
+    extended?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+export interface FABAction {
+    label: string;
+    icon: string;
+    onAction?: () => void;
+}
+export interface FABGroupProps {
+    actions: FABAction[];
+    icon?: string;
+    closeIcon?: string;
+    position?: FABPosition;
+    direction?: 'up' | 'down' | 'left' | 'right';
+    class?: string;
+}

package/dist/types/mobile.js

@@ -0,0 +1 @@
+export {};

package/dist/types/navigation.d.ts

@@ -116,3 +116,18 @@ export interface SidebarGroupProps {
     defaultCollapsed?: boolean;
     class?: string;
 }
+export type StepperOrientation = 'horizontal' | 'vertical';
+export interface StepperProps {
+    activeStep?: number;
+    orientation?: StepperOrientation;
+    linear?: boolean;
+    class?: string;
+}
+export interface StepperStepProps {
+    label: string;
+    description?: string;
+    optional?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    class?: string;
+}