@sesamehr/react-design-system 3.7.1 → 3.8.0

package/dist/Data/KpiCard/KpiCard.d.ts

@@ -0,0 +1,38 @@
+import { KpiCardVariants } from './index.ts';
+export interface KpiCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * `md` is the dashboard tile, stacked. `sm` is the compact row for a side
+     * panel, and it draws no chart, no description and no footer at all — pass
+     * those props at that size and nothing renders them.
+     */
+    size?: KpiCardVariants['size'];
+    selected?: boolean;
+    /**
+     * Swaps each region for an `OxSkeleton` the size of the region it stands in
+     * for, so the placeholder mirrors whichever nodes this caller passed. The
+     * value's is the exception and is always drawn, since a card that is still
+     * loading has no value to pass.
+     */
+    loading?: boolean;
+    icon?: React.ReactNode;
+    /** Vue's `#title` slot, which is why the native `title` attribute is omitted. */
+    title?: React.ReactNode;
+    chart?: React.ReactNode;
+    trend?: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * OxKpiCard — mirrors `@sesame/orxata-core` KpiCard.
+ *
+ * One metric on a dashboard: a number, what it is, and the context that makes
+ * it mean something. Every region is a node-valued prop, and one left out
+ * renders nothing. See the MDX guide for the rest.
+ *
+ * Fill `trend` with an `OxTag`. Figma draws `_KPI / Trend` as a full pill and
+ * `OxTag` is `rounded-md`, which is what ships: that difference is recorded as
+ * design errata, not a bug here. A caller who needs a pill passes
+ * `className="rounded-full"` on their own tag.
+ */
+export declare const KpiCard: import('react').ForwardRefExoticComponent<KpiCardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Data/KpiCard/index.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export { KpiCard, type KpiCardProps } from './KpiCard.tsx';
+export declare const kpiCardVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type KpiCardVariants = VariantProps<typeof kpiCardVariants>;

package/dist/Display/CommentItem/CommentItem.d.ts

@@ -0,0 +1,55 @@
+export interface CommentItemProps extends React.HTMLAttributes<HTMLElement> {
+    /** Who wrote it. */
+    author: string;
+    /** When, already phrased — "2 h ago". Relative time is the caller's to format. */
+    time: string;
+    /** The full timestamp, as a tooltip on the relative time. */
+    timeTitle?: string;
+    /**
+     * Whether the reader has liked it.
+     *
+     * Controlled only, matching the Vue side — a plain prop plus an emit, with
+     * no `defineModel`. Do not add an uncontrolled fallback: that would be drift,
+     * and it is the shape this component is deliberately not in.
+     */
+    liked?: boolean;
+    /** How many likes. Omit it and no count is rendered. */
+    likes?: number;
+    /** The avatar. The Vue port's `avatar` slot. */
+    avatar?: React.ReactNode;
+    /** The rows of the overflow menu. The Vue port's `actions` slot. */
+    actions?: React.ReactNode;
+    /** Replaces the three-dots control. The Vue port's `actions-trigger` slot. */
+    actionsTrigger?: React.ReactNode;
+    /** Nested replies, indented one level. The Vue port's `replies` slot. */
+    replies?: React.ReactNode;
+    /** The heart was pressed. Flip `liked` yourself once the write lands. */
+    onLike?: () => void;
+    /** Reply was pressed. Open a composer; this component renders none. */
+    onReply?: () => void;
+    dataTestid?: string;
+}
+/**
+ * CommentItem — mirrors `@sesame/orxata-core` CommentItem.
+ *
+ * One posted comment: who wrote it, when, what they said, and the two things
+ * you can do about it.
+ *
+ * ```tsx
+ * <OxCommentItem
+ *   author="Lucía Martín"
+ *   time="2 h ago"
+ *   liked={liked}
+ *   likes={3}
+ *   avatar={<OxAvatarRounded size="sm" dataTestid="avatar">LM</OxAvatarRounded>}
+ *   actions={<OxDropdownMenuItem>Edit</OxDropdownMenuItem>}
+ *   onLike={() => setLiked(!liked)}
+ * >
+ *   Great work on the new remote-work policy.
+ * </OxCommentItem>
+ * ```
+ *
+ * `CommentItem.mdx` has the API, what each prop is for, and why the design's
+ * four cells leave the rest to us.
+ */
+export declare const CommentItem: import('react').ForwardRefExoticComponent<CommentItemProps & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1 @@
+export { CommentItem, type CommentItemProps } from './CommentItem.tsx';

package/dist/Display/ReactionBar/ReactionBar.d.ts

@@ -0,0 +1,22 @@
+import { ReactionPickerEmoji } from '../ReactionPicker/index.ts';
+import { Reaction } from './overflow.ts';
+export interface ReactionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Every reaction on the thing being reacted to, in any order */
+    reactions: Reaction[];
+    /** How many to draw before the rest collapse into `+N`. Wraps above what fits */
+    max?: number;
+    /** Which emoji the `Add` picker offers. Defaults to `OxReactionPicker`'s six */
+    emojis?: ReactionPickerEmoji[];
+    /** An emoji was chosen, by pressing a pill or picking one from `Add` */
+    onReact?: (emoji: string) => void;
+    /** The reader asked for the full picker, which is the consumer's to open */
+    onShowMore?: () => void;
+    dataTestid: string;
+}
+/**
+ * Every reaction on one post, comment or message, plus the button that adds
+ * another. Mirrors `@sesame/orxata-core` ReactionBar; see `ReactionBar.mdx` for
+ * why it takes data rather than children, and for what Figma leaves
+ * unspecified.
+ */
+export declare const ReactionBar: import('react').ForwardRefExoticComponent<ReactionBarProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+export { ReactionBar } from './ReactionBar.tsx';
+export type { ReactionBarProps } from './ReactionBar.tsx';
+export { type Reaction, type ReactionSplit } from './overflow.ts';

package/dist/Display/ReactionBar/overflow.d.ts

@@ -0,0 +1,32 @@
+/**
+ * One reaction type on one post, comment or message.
+ *
+ * The product's own shape, field for field
+ * (`community/domain/model/reaction.model.ts` in `app-mobile-v3`).
+ */
+export interface Reaction {
+    /** The emoji itself, as a grapheme */
+    reactionType: string;
+    /** How many people chose it */
+    total: number;
+    /** Whether the reader is one of them */
+    iReact: boolean;
+    /** The reader's own reaction id, for deleting it. `null` when they have not */
+    id: string | null;
+}
+/** What the bar draws, and what the `+N` pill hides. */
+export interface ReactionSplit {
+    visible: Reaction[];
+    hidden: Reaction[];
+}
+/**
+ * Which reactions fit, and which go behind the `+N` pill.
+ *
+ * **`iReact` keeps a visible slot even when it misses the cap**, taking the last
+ * one and pushing what it displaced into the hidden run. This is Figma's rule
+ * and the product's `topReactionEmojis` does *not* do it — that is a plain
+ * `slice`. Do not "align" the two: the divergence is the requirement. With more
+ * than one own reaction only the highest-ranked is guaranteed a slot, so a
+ * reader who pressed four emoji cannot push everyone else out of their own bar.
+ */
+export declare const splitReactions: (reactions: Reaction[], max: number) => ReactionSplit;

package/dist/Display/ReactionButton/ReactionButton.d.ts

@@ -0,0 +1,26 @@
+import { ReactionButtonVariants } from './index.ts';
+export interface ReactionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Which of the three pills this is */
+    variant?: ReactionButtonVariants['variant'];
+    /** The emoji itself, as a grapheme. Only `reaction` draws one */
+    emoji?: string;
+    /** How many chose it, or how many reaction types `more` hides */
+    count?: number;
+    /** Whether the reader is one of them. Also what `aria-pressed` reports */
+    reacted?: boolean;
+    dataTestid: string;
+}
+/**
+ * One reaction: an emoji and how many people chose it. Mirrors
+ * `@sesame/orxata-core` ReactionButton; see `ReactionButton.mdx`.
+ *
+ * The `...props` spread is load-bearing — `OxReactionBar` hands the `add` and
+ * `more` pills to a Radix `Popover.Trigger` through `asChild`, and the
+ * `aria-expanded` and `data-state` that trigger writes have to reach this
+ * element.
+ *
+ * The icon is `IconAddReaction`, which is the glyph Figma calls
+ * `icon-mood-plus` — same path, verified against the node, different name in
+ * our collection.
+ */
+export declare const ReactionButton: import('react').ForwardRefExoticComponent<ReactionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+export { ReactionButton } from './ReactionButton.tsx';
+export type { ReactionButtonProps } from './ReactionButton.tsx';
+/**
+ * One pill, three jobs — Figma's `Reaction button` set (node `1454:124`). See
+ * `ReactionButton.mdx` for why the three share one component.
+ *
+ * `Hover` and `Focus` are not here because the browser knows them; `Reacted` is
+ * a `data-` attribute so it composes with `variant`; and `More open` is the
+ * `data-state` the popover writes onto its trigger.
+ *
+ * Class names, not utilities: the declarations live in `ReactionButton.module.css`
+ * behind `@apply`. See `Button/index.ts` for the full reasoning.
+ */
+export declare const reactionButtonVariants: (props?: ({
+    variant?: "add" | "reaction" | "more" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ReactionButtonVariants = VariantProps<typeof reactionButtonVariants>;

package/dist/Display/ReactionPicker/ReactionPicker.d.ts

@@ -0,0 +1,21 @@
+import { ReactionPickerEmoji } from './index.ts';
+export interface ReactionPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'onKeyDown' | 'onBlur'> {
+    /** Which emoji to offer, and optionally a better name than Unicode's */
+    emojis?: ReactionPickerEmoji[];
+    /** Whether to draw the separator and the full-picker button. Figma's `Show more` */
+    showMore?: boolean;
+    /** An emoji was chosen. The grapheme, which is what the API stores */
+    onReact?: (emoji: string) => void;
+    /** The reader asked for the full picker, which is the consumer's to open */
+    onShowMore?: () => void;
+    dataTestid: string;
+}
+/**
+ * The six frequent emoji, as a toolbar. Mirrors `@sesame/orxata-core`
+ * ReactionPicker; see `ReactionPicker.mdx`.
+ *
+ * It is its own floating surface and must not be wrapped in an
+ * `OxPopoverContent`: that draws `Surface`, an 8px card, where this is a
+ * full-radius pill — one inside the other is two borders and two shadows.
+ */
+export declare const ReactionPicker: import('react').ForwardRefExoticComponent<ReactionPickerProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+export { ReactionPicker } from './ReactionPicker.tsx';
+export type { ReactionPickerProps } from './ReactionPicker.tsx';
+/**
+ * One entry in the picker: a bare grapheme, or an object carrying a better name
+ * than Unicode's. See `ReactionPicker.mdx`.
+ */
+export type ReactionPickerEmoji = string | {
+    emoji: string;
+    label?: string;
+};
+/**
+ * Figma's own six (node `1482:262`), in Figma's order, with no skin-tone
+ * modifiers — the backend treats `👍` and `👍🏻` as two different reactions, so
+ * seeding one would split a reaction in two for everyone who took the default.
+ *
+ * Here rather than in the component, to stay where the Vue twin keeps it.
+ */
+export declare const DEFAULT_REACTION_EMOJIS: ReactionPickerEmoji[];

package/dist/main.d.ts

@@ -39,9 +39,13 @@ export { VoiceMessage as OxVoiceMessage, type AudiowaveformJson, type WaveformSo
 export { FilePreviewCard as OxFilePreviewCard } from './Display/FilePreviewCard/index.ts';
 export { ChatBubble as OxChatBubble, chatBubbleVariants, type ChatBubbleDelivery, type ChatBubbleVariants, } from './Display/ChatBubble/index.ts';
 export { ChatBubbleStatus as OxChatBubbleStatus, chatBubbleStatusVariants, type ChatBubbleStatusVariants, } from './Display/ChatBubble/ChatBubbleStatus/index.ts';
+export { CommentItem as OxCommentItem } from './Display/CommentItem/index.ts';
 export { RichText as OxRichText, RICH_TEXT_SCHEMA, type RichTextSchemaMark, type RichTextSchemaNode, } from './Display/RichText/index.ts';
 export { Mention as OxMention, mentionVariants, type MentionVariants, } from './Display/Mention/index.ts';
 export { Chip as OxChip, chipVariants, type ChipVariants, } from './Display/Chip/index.ts';
+export { ReactionBar as OxReactionBar, type Reaction, type ReactionSplit, } from './Display/ReactionBar/index.ts';
+export { ReactionButton as OxReactionButton, reactionButtonVariants, type ReactionButtonVariants, } from './Display/ReactionButton/index.ts';
+export { ReactionPicker as OxReactionPicker, type ReactionPickerEmoji, } from './Display/ReactionPicker/index.ts';
 export { PlayerPill as OxPlayerPill, PlayerPillAction as OxPlayerPillAction, PlayerPillStatus as OxPlayerPillStatus, PlayerPillTime as OxPlayerPillTime, playerPillVariants, type PlayerPillActionName, type PlayerPillState, type PlayerPillVariants, } from './Display/PlayerPill/index.ts';
 export { PointMarker as OxPointMarker, pointMarkerVariants, type PointMarkerVariants, } from './Display/PointMarker/index.ts';
 export { Tag as OxTag, tagVariants, type TagVariants, } from './Display/Tag/index.ts';
@@ -71,5 +75,6 @@ export { Counter as OxCounter, counterVariants, type CounterVariants, } from './
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldGroupProps, type FieldVariant, } from './Forms/Field/index.ts';
 export { AiSearch as OxAiSearch, AiSearchAsk as OxAiSearchAsk, AiSearchPanel as OxAiSearchPanel, AiSearchSend as OxAiSearchSend, AiSearchShortcut as OxAiSearchShortcut, AiSearchSuggestion as OxAiSearchSuggestion, } from './Forms/Inputs/AiSearch/index.ts';
 export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, ColorPicker as OxColorPicker, ColorPickerTrigger as OxColorPickerTrigger, ColorPickerContent as OxColorPickerContent, ColorPickerSwatch as OxColorPickerSwatch, useColorPicker, IconPicker as OxIconPicker, IconPickerTrigger as OxIconPickerTrigger, IconPickerContent as OxIconPickerContent, IconPickerItem as OxIconPickerItem, useIconPicker, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, TimePicker as OxTimePicker, TimePickerField as OxTimePickerField, TimePickerList as OxTimePickerList, TimePickerWheel as OxTimePickerWheel, TimePickerWheelColumn as OxTimePickerWheelColumn, Textarea as OxTextarea, RichTextEditor as OxRichTextEditor, RichTextToolbar as OxRichTextToolbar, RichTextToolbarButton as OxRichTextToolbarButton, RICH_TEXT_COMMANDS, RICH_TEXT_COMMAND_NAMES, isRichTextAdapter, oxRichTextExtensions, useRichTextAdapter, useRichTextToolbar, type RichTextAdapter, type RichTextCommand, type RichTextCommandSpec, type RichTextExtras, type RichTextSource, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type ColorPickerProps, type ColorPickerContext, type IconPickerProps, type IconPickerContext, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type SearchBarVariants, type SelectProps, type TimePickerProps, type TimeFormat, type TimePart, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
+export { KpiCard as OxKpiCard, kpiCardVariants, type KpiCardVariants, } from './Data/KpiCard/index.ts';
 export { Table as OxTable, TableVirtualized as OxTableVirtualized, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, useTableVirtual, } from './Data/Table/index.ts';
 export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableVirtualOptions, UseTableVirtualReturn, UseTableColumnsOptions, UseTableColumnsReturn, UseScrollShadowOptions, UseScrollShadowReturn, UseDragToScrollOptions, UseDragToScrollReturn, UseFixedColumnsOptions, TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './Data/Table/index.ts';