@sesamehr/react-design-system 1.3.0 → 1.4.0

package/dist/Display/Avatar/AvatarRounded/AvatarRounded.d.ts

@@ -0,0 +1,23 @@
+import { BulletVariants } from '../../../Feedback/Bullet/index.ts';
+import { AvatarRoundedVariants } from '../index.ts';
+export interface AvatarRoundedProps extends React.HTMLAttributes<HTMLSpanElement>, Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'alt'> {
+    /** Image source URL. When set it replaces the children. */
+    src?: string;
+    /** Avatar size */
+    size?: AvatarRoundedVariants['size'];
+    /** Colour pair used when there is no image */
+    tone?: AvatarRoundedVariants['tone'];
+    /** Dimmed appearance, layered over whatever the avatar shows */
+    disabled?: boolean;
+    /** Status indicator colour — sits on the circle's edge */
+    status?: BulletVariants['color'];
+    /** Rendered on the top-right edge, over the avatar */
+    action?: React.ReactNode;
+    /** Rendered centred on the bottom edge */
+    label?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * AvatarRounded — mirrors `@sesame/orxata-core` AvatarRounded.
+ */
+export declare const AvatarRounded: import('react').ForwardRefExoticComponent<AvatarRoundedProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Display/Avatar/AvatarSquare/AvatarSquare.d.ts

@@ -0,0 +1,23 @@
+import { BulletVariants } from '../../../Feedback/Bullet/index.ts';
+import { AvatarSquareVariants } from '../index.ts';
+export interface AvatarSquareProps extends React.HTMLAttributes<HTMLSpanElement>, Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'alt'> {
+    /** Image source URL. When set it replaces the children. */
+    src?: string;
+    /** Avatar size */
+    size?: AvatarSquareVariants['size'];
+    /** Colour pair used when there is no image */
+    tone?: AvatarSquareVariants['tone'];
+    /** Dimmed appearance, layered over whatever the avatar shows */
+    disabled?: boolean;
+    /** Status indicator colour — sits on the shape's corner */
+    status?: BulletVariants['color'];
+    /** Rendered on the top-right corner, over the avatar */
+    action?: React.ReactNode;
+    /** Rendered centred on the bottom edge */
+    label?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * AvatarSquare — mirrors `@sesame/orxata-core` AvatarSquare.
+ */
+export declare const AvatarSquare: import('react').ForwardRefExoticComponent<AvatarSquareProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Display/Avatar/hooks/useAvatarBullet.d.ts

@@ -1,16 +1,9 @@
-import { AvatarVariants } from '..';
-type AvatarSize = NonNullable<AvatarVariants['size']>;
-interface BulletTopStyle {
-    top: string;
-    left: string;
-}
-interface BulletBottomStyle {
-    bottom: string;
-    left: string;
-}
-export type BulletStyle = BulletTopStyle | BulletBottomStyle;
+import { AvatarSize } from '../index.ts';
+/**
+ * Picks the status bullet's size for a given avatar size. Where the bullet sits
+ * is not here: both shapes hang it off their own 45° point, which is a corner
+ * offset each component states once in CSS rather than a per-size map.
+ */
 export declare function useAvatarBullet(size: AvatarSize): {
     bulletSize: "24" | "16" | "12" | "8" | null | undefined;
-    bulletStyle: BulletStyle;
 };
-export {};

package/dist/Display/Avatar/index.d.ts

@@ -1,9 +1,35 @@
 import { VariantProps } from 'class-variance-authority';
-export { Avatar, type AvatarProps } from './Avatar.tsx';
-export declare const avatarVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "2xl" | "xl" | "2xs" | null | undefined;
+export { AvatarRounded } from './AvatarRounded/AvatarRounded.tsx';
+export type { AvatarRoundedProps } from './AvatarRounded/AvatarRounded.tsx';
+export { AvatarSquare } from './AvatarSquare/AvatarSquare.tsx';
+export type { AvatarSquareProps } from './AvatarSquare/AvatarSquare.tsx';
+export { useAvatarBullet } from './hooks/useAvatarBullet.ts';
+/**
+ * The two shapes differ by their corner radius and nothing else, so everything
+ * below is deliberately written out twice rather than spread from a constant:
+ * `parity-variants` diffs these objects as source text against the Vue package,
+ * and a variant it cannot see is a variant it stops checking.
+ *
+ * Sizes are the five the design draws — 24, 32, 48, 64 and 80px. The type scale
+ * rides along with the box because the design pairs them one to one, and every
+ * pair lands on a Tailwind step exactly (24/32, 30/36, 36/40).
+ *
+ * `tone` only shows through when there is no image: `brand` is the design's
+ * `type=text`, `neutral` its `type=counter`. Nothing here reads the children, so
+ * a counter in brand or initials in grey are both reachable — the design couples
+ * content to colour, the component has no reason to.
+ */
+export declare const avatarSquareVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    tone?: "neutral" | "brand" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const avatarTextVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "2xl" | "xl" | "2xs" | null | undefined;
+export declare const avatarRoundedVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    tone?: "neutral" | "brand" | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type AvatarVariants = VariantProps<typeof avatarVariants>;
+export type AvatarSquareVariants = VariantProps<typeof avatarSquareVariants>;
+export type AvatarRoundedVariants = VariantProps<typeof avatarRoundedVariants>;
+export type AvatarSize = NonNullable<AvatarSquareVariants['size']>;
+export type AvatarTone = NonNullable<AvatarSquareVariants['tone']>;

package/dist/main.d.ts

@@ -9,7 +9,7 @@ export { Button as OxButton, buttonVariants, type ButtonVariants, } from './Butt
 export { Card as OxCard } from './Layout/Card/index.ts';
 export { Divider as OxDivider, type DividerProps, } from './Layout/Divider/index.ts';
 export { Resizable as OxResizable, ResizablePanel as OxResizablePanel, ResizableHandle as OxResizableHandle, } from './Layout/Resizable/index.ts';
-export { Avatar as OxAvatar, avatarVariants, avatarTextVariants, type AvatarVariants, } from './Display/Avatar/index.ts';
+export { AvatarRounded as OxAvatarRounded, AvatarSquare as OxAvatarSquare, avatarRoundedVariants, avatarSquareVariants, type AvatarRoundedVariants, type AvatarSize, type AvatarSquareVariants, type AvatarTone, } from './Display/Avatar/index.ts';
 export { AvatarGroup as OxAvatarGroup, type AvatarItem, } from './Display/AvatarGroup/index.ts';
 export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/Badge/index.ts';
 export { PaymentCard as OxPaymentCard, paymentCardVariants, type PaymentCardVariants, type BadgeType, type CardData, } from './Display/PaymentCard/index.ts';