@okshaun/components 0.4.5 → 0.5.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { AriaAttributes } from 'react';
+import { AvatarVariantProps } from '../../../styled-system/recipes';
 import { BadgeVariantProps } from '../../../styled-system/recipes';
 import { BoxVariantProps } from '../../../styled-system/recipes';
 import { ButtonVariantProps } from '../../../styled-system/recipes';
@@ -6,6 +7,7 @@ import { CardVariantProps } from '../../../styled-system/recipes';
 import { ChangeEventHandler } from 'react';
 import { CheckboxInputVariantProps } from '../../../styled-system/recipes';
 import { CheckboxVariantProps } from '../../../styled-system/recipes';
+import { ChipVariantProps } from '../../../styled-system/recipes';
 import { CodeVariantProps } from '../../../styled-system/recipes';
 import { ColorToken } from '../../../styled-system/tokens';
 import { ComponentPropsWithoutRef } from 'react';
@@ -25,6 +27,7 @@ import { LabelVariantProps } from '../../../styled-system/recipes';
 import { LinkVariantProps } from '../../../styled-system/recipes';
 import { menu } from '../../../styled-system/recipes';
 import { MenuVariantProps } from '../../../styled-system/recipes';
+import { NumericSizeToken } from '../../../styled-system/tokens';
 import { Placement } from '@floating-ui/react';
 import { RadioInputVariantProps } from '../../../styled-system/recipes';
 import { RadioVariantProps } from '../../../styled-system/recipes';
@@ -41,6 +44,7 @@ import { TextVariantProps } from '../../../styled-system/recipes';
 import { ToggleInputVariantProps } from '../../../styled-system/recipes';
 import { ToggleVariantProps } from '../../../styled-system/recipes';
 import { TooltipVariantProps } from '../../../styled-system/recipes';
+import { WrapProps } from '../../../styled-system/jsx';
 
 declare type AllowedIconSizes = keyof typeof numericSizes;
 
@@ -91,25 +95,66 @@ export declare type AutocompleteProps = MenuVariantProps & {
 };
 
 /**
- * The Badge component uses the polymorphic Box as its base.
- * Renders as a <span> by default but can be changed via the 'as' prop.
+ * Avatar component for displaying user or entity images with optional
+ * presence and status indicators.
  */
-export declare const Badge: BadgeComponent;
+export declare const Avatar: React_2.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare type AvatarPresence = 'online' | 'busy' | 'offline' | 'focus';
+
+export declare type AvatarProps = BoxProps & Omit<AvatarVariantProps, 'size' | 'shape'> & {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Name for generating initials fallback */
+    name?: string;
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Shape of the avatar */
+    shape?: AvatarShape;
+    /** Presence indicator (bottom-right) */
+    presence?: AvatarPresence;
+    /** Status indicator (top-right) */
+    status?: AvatarStatus;
+    /** Custom fallback content (overrides initials) */
+    fallback?: React_2.ReactNode;
+    /** Border color for the avatar */
+    borderColor?: string;
+    /** Additional class name */
+    className?: string;
+};
 
-/**
- * Define a polymorphic BadgeComponent type.
- */
-declare type BadgeComponent = <E extends React_2.ElementType = 'span'>(props: BadgeProps<E> & {
-    ref?: React_2.ForwardedRef<Element>;
-}) => React_2.ReactElement;
+export declare type AvatarShape = 'circle' | 'square' | 'hexagon';
+
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export declare type AvatarStatus = 'approved' | 'declined' | 'locked';
 
 /**
- * BadgeProps is generic and manages its own polymorphism.
- * It includes props for the element type E (default "span") and BadgeVariantProps.
+ * Badge component for displaying notification counts or status indicators.
+ *
+ * - Without children: renders as standalone badge
+ * - With children: wraps content and positions badge at top-right
+ * - Without count prop: shows as dot
+ * - With count prop: shows the number (or "99+" if exceeds overflowCount)
  */
-export declare type BadgeProps<E extends React_2.ElementType = 'span'> = React_2.ComponentPropsWithoutRef<E> & BadgeVariantProps & {
-    as?: E;
+export declare const Badge: React_2.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare type BadgeAppearance = 'neutral' | 'inverted' | 'subtle' | 'subtle-inverted' | 'success' | 'danger' | 'warning' | 'info';
+
+export declare type BadgeProps = BoxProps & Omit<BadgeVariantProps, 'standalone' | 'dot'> & {
+    /** Number to show in badge. If provided, switches to count mode. */
+    count?: number;
+    /** Show badge when count is zero. Default: false */
+    showZero?: boolean;
+    /** Max count to show. Displays "99+" when exceeded. Default: 99 */
+    overflowCount?: number;
+    /** Color scheme of the badge. Default: 'danger' */
+    appearance?: BadgeAppearance;
+    /** Additional class name */
     className?: string;
+    /** Content to wrap with the badge */
     children?: React_2.ReactNode;
 };
 
@@ -171,6 +216,7 @@ export declare type ButtonProps<E extends React_2.ElementType = 'button'> = Reac
     disabled?: boolean;
     iconBefore?: IconNamesList;
     iconAfter?: IconNamesList;
+    gap?: NumericSizeToken;
 };
 
 export declare const Card: React.FC<CardProps>;
@@ -224,6 +270,37 @@ export declare type CheckboxProps = {
     error?: boolean;
 } & Omit<BoxProps, 'checked' | 'onChange' | keyof CheckboxVariantProps> & CheckboxVariantProps;
 
+export declare const Chip: React.FC<ChipProps>;
+
+export declare const ChipGroup: React.FC<ChipGroupProps>;
+
+export declare type ChipGroupProps = Omit<WrapProps, 'role'> & {
+    type: ChipGroupType;
+    value: string | string[];
+    onChange: (value: string | string[]) => void;
+    children: ReactNode;
+    label?: string;
+    id?: string;
+    name?: string;
+};
+
+export declare type ChipGroupType = 'single' | 'multi';
+
+export declare type ChipProps = BoxProps & Omit<ChipVariantProps, 'before' | 'after'> & {
+    children: string | ReactNode;
+    /** Content to render before the label (e.g., Icon, Avatar) */
+    before?: ReactNode;
+    /** Content to render after the label (e.g., Badge, Icon) */
+    after?: ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    deleted?: boolean;
+    dismissable?: boolean;
+    onDismiss?: () => void;
+    value?: string;
+    gap?: NumericSizeToken;
+};
+
 export declare const Code: React.FC<CodeProps>;
 
 export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof TextProps> & CodeVariantProps & TextProps & {