@sesamehr/react-design-system 3.1.0 → 3.3.0

package/dist/Display/AvatarGroup/AvatarGroup.d.ts

@@ -3,6 +3,13 @@ export interface AvatarItem {
     src?: string;
     initials?: string;
     disabled?: boolean;
+    /**
+     * Who the avatar is. Shown in a tooltip on hover and read as the avatar's
+     * accessible name, so the name is not something only a pointer can reach:
+     * the items sit inside the group's `<button>`, which flattens them for a
+     * screen reader and leaves none of them individually focusable.
+     */
+    name?: string;
 }
 export interface AvatarGroupProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
     /** List of avatars to display */

package/dist/Display/PixelArt/PixelArt.d.ts

@@ -0,0 +1,31 @@
+import { PixelArtOrder } from './index.ts';
+export interface PixelArtProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The drawing, one string per row: `#` paints a cell, `.` leaves it blank.
+     * The widest row sets the number of columns.
+     *
+     * Leave it out and there is no drawing: a 15x15 grid with every cell lit
+     * comes and goes instead, so the space still looks occupied and alive while
+     * there is no pixel art for it.
+     */
+    rows?: string[];
+    /**
+     * How the cells come in. `random` drops them in patches; `bottom-up` builds
+     * it floor by floor from the base and takes it apart in reverse, for
+     * drawings that read badly half done.
+     */
+    order?: PixelArtOrder;
+    dataTestid: string;
+}
+/**
+ * PixelArt — mirrors `@sesame/orxata-core` PixelArt.
+ *
+ * A small bitmap drawing that draws itself, holds, rubs itself out and starts
+ * again. Decoration for an empty state, so it is hidden from assistive
+ * technology: whatever it illustrates has to be said in text beside it.
+ *
+ * `--ox-pixel-art-columns` and each cell's `--ox-pixel-art-delay` are inline
+ * custom properties because they are per-instance and per-cell numbers; the
+ * stylesheet reads both with a fallback and decides what they do.
+ */
+export declare const PixelArt: import('react').ForwardRefExoticComponent<PixelArtProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,49 @@
+export { PixelArt } from './PixelArt.tsx';
+export type { PixelArtProps } from './PixelArt.tsx';
+/**
+ * How the cells come in. `random` drops them in patches; `bottom-up` builds the
+ * drawing floor by floor from the base (a little scrambled within each row) and
+ * takes it apart in reverse, for drawings that read badly half done.
+ */
+export type PixelArtOrder = 'random' | 'bottom-up';
+export declare const PIXEL_ART_ORDERS: PixelArtOrder[];
+/**
+ * How often the next cell comes in, how long each one takes, and the pause
+ * holding the whole drawing before it starts to rub itself out.
+ *
+ * `PIXEL_ART_CELL_MS` is also the transition duration in the component's
+ * stylesheet. The two are one number: the loop waits `CELL_MS` after the last
+ * cell starts, so a longer transition would be cut short by the next toggle.
+ */
+export declare const PIXEL_ART_STEP_MS = 55;
+export declare const PIXEL_ART_CELL_MS = 500;
+export declare const PIXEL_ART_HOLD_MS = 1200;
+/**
+ * What renders when no drawing is given: 15x15 with every cell lit, so the
+ * space a drawing would take still looks occupied and alive rather than empty.
+ * 15 because that is the size every drawing in the design is.
+ */
+export declare const PIXEL_ART_FULL_GRID: string[];
+export interface PixelArtCell {
+    key: string;
+    x: number;
+    y: number;
+    on: boolean;
+    /** When it comes in, in ms from the start. Cells that are off have none. */
+    delay: number;
+}
+/**
+ * Every cell of the drawing, with the moment it comes in.
+ *
+ * `random` shuffles the turns, so the drawing reveals itself in loose patches
+ * instead of painting top to bottom. `bottom-up` sorts them by row, from the
+ * base up, with a random nudge of less than one row so each floor still comes
+ * in scrambled rather than left to right.
+ *
+ * `random` is injectable only so a test can pin it.
+ */
+export declare const pixelArtCells: (rows: string[], order?: PixelArtOrder, random?: () => number) => PixelArtCell[];
+/** How long the drawing takes to complete, first cell to last. */
+export declare const pixelArtTravel: (cells: PixelArtCell[]) => number;
+/** The widest row: a ragged drawing is laid out on the grid its longest row needs. */
+export declare const pixelArtColumns: (rows: string[]) => number;

package/dist/main.d.ts

@@ -25,6 +25,7 @@ export { AvatarGroup as OxAvatarGroup, type AvatarItem, } from './Display/Avatar
 export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/Badge/index.ts';
 export { CalendarDate as OxCalendarDate, calendarDateVariants, type CalendarDateVariants, } from './Display/CalendarDate/index.ts';
 export { NumberFlow as OxNumberFlow, resolveNumberFlowPreset, NUMBER_FLOW_PRESETS, type NumberFlowConfig, type NumberFlowPreset, } from './Display/NumberFlow/index.ts';
+export { PixelArt as OxPixelArt, type PixelArtOrder, } from './Display/PixelArt/index.ts';
 export { PaymentCard as OxPaymentCard, paymentCardVariants, type PaymentCardVariants, type BadgeType, type CardData, } from './Display/PaymentCard/index.ts';
 export { FileCard as OxFileCard } from './Display/FileCard/index.ts';
 export { FilePreviewCard as OxFilePreviewCard } from './Display/FilePreviewCard/index.ts';