@sesamehr/react-design-system 1.3.0 → 1.5.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/Display/PointMarker/PointMarker.d.ts

@@ -0,0 +1,8 @@
+import { PointMarkerVariants } from './index.ts';
+export interface PointMarkerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Colour of the centre dot */
+    color?: PointMarkerVariants['color'];
+    dataTestid: string;
+}
+/** PointMarker — mirrors `@sesame/orxata-core` PointMarker. */
+export declare const PointMarker: import('react').ForwardRefExoticComponent<PointMarkerProps & import('react').RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+export { PointMarker } from './PointMarker.tsx';
+export type { PointMarkerProps } from './PointMarker.tsx';
+/**
+ * A marker is a fixed 32px ring with an 8px dot inside it, and the dot's colour
+ * is the only thing the design varies. The values are category slots, not hue
+ * names: a caller marking "offices" picks a category and keeps meaning the same
+ * thing if the palette is re-pointed, which naming them `teal` or `amber` would
+ * not survive. The hue behind each slot lives in `--category-*` in the theme —
+ * the comments below say what it is today, and are the only thing that changes
+ * when design moves one.
+ *
+ * The ring never varies, so it lives in the component's own styles.
+ */
+export declare const pointMarkerVariants: (props?: ({
+    color?: "category-1" | "category-2" | "category-3" | "category-4" | "category-5" | "category-6" | "category-7" | "category-8" | "category-9" | "category-10" | "category-11" | "category-12" | "category-13" | "category-14" | "category-15" | "category-16" | "category-17" | "category-18" | "category-19" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type PointMarkerVariants = VariantProps<typeof pointMarkerVariants>;

package/dist/main.d.ts

@@ -9,10 +9,11 @@ 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';
+export { PointMarker as OxPointMarker, pointMarkerVariants, type PointMarkerVariants, } from './Display/PointMarker/index.ts';
 export { StatusBadge as OxStatusBadge, statusBadgeVariants, indicatorVariants, type StatusBadgeVariants, } from './Feedback/StatusBadge/index.ts';
 export { Bullet as OxBullet, bulletVariants, type BulletVariants, } from './Feedback/Bullet/index.ts';
 export { Alert as OxAlert, AlertClose as OxAlertClose, AlertDescription as OxAlertDescription, AlertIcon as OxAlertIcon, AlertTitle as OxAlertTitle, AlertToggle as OxAlertToggle, } from './Feedback/Alert/index.ts';