@sesamehr/react-design-system 3.7.0 → 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/Forms/Inputs/RichTextEditor/commands.d.ts

@@ -13,16 +13,18 @@ import { ChainedCommands } from '@tiptap/core';
  *    undo with either would be a different control wearing the wrong sign. A
  *    code *block* has only `icon-code`, already spoken for by inline code, and
  *    a rule has only `icon-minus`. The commands themselves are all in the
- *    preset — `undoRedo` and `horizontalRule` are StarterKit extensions, and
- *    the keyboard shortcuts work — so what is missing is the buttons, not the
- *    behaviour.
+ *    preset — `history` and `horizontalRule` are StarterKit extensions on
+ *    TipTap 2 (`history` is what 3.x renamed to `undoRedo`), and the keyboard
+ *    shortcuts work — so what is missing is the buttons, not the behaviour.
  *  - **A link is not a toggle.** `toggleLink` needs an `href`, and a button
  *    whose whole API is `command` has nowhere to get one. Wiring a URL prompt
  *    in here would be deciding what that prompt looks like for everybody. The
  *    toolbar takes arbitrary children instead, so a caller puts their own
  *    control in it and calls `editor.chain().setLink(…)` — which is also how
  *    anything else outside this list gets into a toolbar. The mark is styled
- *    either way; see `RICH_TEXT_SCHEMA`.
+ *    either way; see `RICH_TEXT_SCHEMA`. On TipTap 2 `setLink` arrives with
+ *    `@tiptap/extension-link`, which StarterKit does not carry — so it only
+ *    exists for a caller who passed `Link` to `oxRichTextExtensions`.
  */
 export type RichTextCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'heading1' | 'heading2' | 'heading3' | 'bulletList' | 'orderedList' | 'blockquote';
 export interface RichTextCommandSpec {
@@ -61,6 +63,11 @@ export interface RichTextCommandSpec {
  *
  * A record and not a function, because the button resolves its own icon, label
  * and pressed state from it — the only thing a caller writes is `command`.
+ *
+ * Every entry is listed unconditionally, including `underline`, whose extension
+ * is optional on TipTap 2. What decides whether a button appears is the
+ * editor's schema at runtime rather than this record — see
+ * `RichTextAdapter.supports`.
  */
 export declare const RICH_TEXT_COMMANDS: Record<RichTextCommand, RichTextCommandSpec>;
 /** Every command, in toolbar order. */

package/dist/Forms/Inputs/RichTextEditor/extensions.d.ts

@@ -1,5 +1,45 @@
 import { Extensions } from '@tiptap/core';
+import { default as Link } from '@tiptap/extension-link';
+import { default as Underline } from '@tiptap/extension-underline';
 import { default as StarterKit } from '@tiptap/starter-kit';
+/**
+ * The two marks StarterKit does not carry, handed over the same way StarterKit
+ * itself is.
+ *
+ * **On TipTap 2, `StarterKit` contains neither `Underline` nor `Link`** —
+ * `@tiptap/starter-kit@2.27.3` does not even depend on them, where 3.x does.
+ * That difference is the reason this parameter exists rather than the preset
+ * configuring them through `starterKit.configure()`, and it is worth knowing
+ * exactly how badly that fails, because it fails quietly in both directions:
+ *
+ *  - `configure({ link: … })` on TipTap 2 is accepted and **stored**. No error,
+ *    no warning, `starterKit.options.link` reads back exactly what was passed —
+ *    and nothing anywhere consumes it, because there is no Link extension to
+ *    consume it. A test asserting on `options.link` passes. The document has no
+ *    `link` mark in it.
+ *  - `toggleUnderline` is a command an extension contributes, so with no
+ *    Underline extension the name is simply absent from the command manager.
+ *    `editor.can().chain().focus().toggleUnderline()` is a call on `undefined`.
+ *
+ * Both are optional: a caller who wants neither passes neither, and the
+ * `underline` toolbar button then does not render at all rather than render
+ * disabled or render and throw. See `useRichTextAdapter` for how that is
+ * decided — the editor's own schema, so it covers a caller who narrows
+ * StarterKit as well.
+ *
+ * The keys are capitalised to match the names TipTap's own documentation gives
+ * these imports, so the call site is `{ Underline, Link }` with no renaming.
+ */
+export interface RichTextExtras {
+    /** `@tiptap/extension-underline`. Without it there is no underline button. */
+    Underline?: typeof Underline;
+    /**
+     * `@tiptap/extension-link`. Without it a typed URL stays text, and
+     * `editor.chain().setLink(…)` — the documented way to add the one mark the
+     * toolbar deliberately has no button for — does not exist.
+     */
+    Link?: typeof Link;
+}
 /**
  * The extension list both ends of a rich text field agree on.
  *
@@ -15,40 +55,43 @@ import { default as StarterKit } from '@tiptap/starter-kit';
  *
  * ---
  *
- * **Why this takes StarterKit as an argument instead of importing it.** The
+ * **Why this takes its extensions as arguments instead of importing them.** The
  * intended design was a plain exported array. It cannot be one, and the reason
  * is worth writing down because the signature otherwise looks like ceremony:
  *
  * `oxRichTextExtensions` is published from `src/main.ts`, the barrel every
  * consumer imports — including the one who only wants `OxButton`. A static
  * `import StarterKit from '@tiptap/starter-kit'` anywhere in that graph becomes
- * a top-level import in the built `orxata-core.js`, and a bundler resolves
+ * a top-level import in the built `react-design-system.js`, and a bundler resolves
  * every import it finds before it decides what to tree-shake. For a consumer
  * who has not installed TipTap that is a module-resolution failure in their
  * build — webpack calls it an error, Rollup leaves a bare specifier that fails
  * at runtime — over a feature they never touched. "TipTap is an optional peer
  * dependency" would be false the moment anything imported it eagerly.
  *
- * An `async` factory that `import()`s it was the other option, and it is worse
- * where it matters: `useEditor` needs its extensions synchronously, so every
- * caller would need a top-level `await` and a `<Suspense>` around their own
- * component in order to use a text field.
+ * An `async` factory that `import()`s them was the other option, and it is
+ * worse where it matters: `useEditor` needs its extensions synchronously, so
+ * every caller would need a top-level `await` and a `<Suspense>` around their
+ * own component in order to use a text field.
  *
- * So the caller hands over the StarterKit they already have — one import, in a
- * file that is already importing `useEditor` from TipTap — and this package
- * contributes the part that is actually its own: the configuration. The
- * parameter's type is `typeof StarterKit`, which is erased, so this module has
- * no runtime dependency on TipTap at all.
+ * So the caller hands over the extensions they already have — three imports, in
+ * a file that is already importing `useEditor` from TipTap — and this package
+ * contributes the part that is actually its own: the configuration. Every
+ * parameter's type is erased, so this module has no runtime dependency on
+ * TipTap at all, and none of the four specifiers needs to be external in
+ * `vite.config.ts`.
  *
  * ```ts
+ * import Link from '@tiptap/extension-link';
+ * import Underline from '@tiptap/extension-underline';
  * import StarterKit from '@tiptap/starter-kit';
- * import { useEditor } from '@tiptap/vue-3';
- * import { oxRichTextExtensions } from '@sesame/orxata-core';
+ * import { useEditor } from '@tiptap/react';
+ * import { oxRichTextExtensions } from '@sesamehr/react-design-system';
  *
  * const editor = useEditor({
- *   extensions: oxRichTextExtensions(StarterKit),
+ *   extensions: oxRichTextExtensions(StarterKit, { Underline, Link }),
  *   content: '<p>…</p>',
  * });
  * ```
  */
-export declare const oxRichTextExtensions: (starterKit: typeof StarterKit) => Extensions;
+export declare const oxRichTextExtensions: (starterKit: typeof StarterKit, extras?: RichTextExtras) => Extensions;

package/dist/Forms/Inputs/RichTextEditor/index.d.ts

@@ -2,6 +2,6 @@ export { RichTextEditor } from './RichTextEditor.tsx';
 export { RichTextToolbar } from './RichTextToolbar/index.ts';
 export { RichTextToolbarButton } from './RichTextToolbarButton/index.ts';
 export { RICH_TEXT_COMMANDS, RICH_TEXT_COMMAND_NAMES, type RichTextCommand, type RichTextCommandSpec, } from './commands.ts';
-export { oxRichTextExtensions } from './extensions.ts';
+export { type RichTextExtras, oxRichTextExtensions } from './extensions.ts';
 export { type RichTextAdapter, type RichTextSource, isRichTextAdapter, useRichTextAdapter, } from './useRichTextAdapter.ts';
 export { useRichTextToolbar } from './useRichTextToolbar.ts';

package/dist/Forms/Inputs/RichTextEditor/useRichTextAdapter.d.ts

@@ -3,10 +3,10 @@ import { RichTextCommand } from './commands.ts';
 /**
  * What the toolbar talks to, and the only thing it talks to.
  *
- * Three questions, which between them are everything a toolbar button needs:
- * run this, is it on, is it available. Nothing here mentions TipTap, so a
- * second editor becomes an implementation of this interface rather than a
- * second toolbar.
+ * Four questions, which between them are everything a toolbar button needs:
+ * run this, is it on, is it available, does it exist here at all. Nothing here
+ * mentions TipTap, so a second editor becomes an implementation of this
+ * interface rather than a second toolbar.
  *
  * **What this is deliberately not is an abstraction of the document.** The
  * document stays TipTap JSON, read and written through the editor the caller
@@ -21,6 +21,26 @@ export interface RichTextAdapter {
     isActive: (command: RichTextCommand) => boolean;
     /** Whether the command can run at all — a disabled button if not. */
     can: (command: RichTextCommand) => boolean;
+    /**
+     * Whether the command exists in this editor at all — **no button** if not,
+     * which is the difference between this and `can`.
+     *
+     * `can` is "not now": a list inside a code block, an empty selection. The
+     * reader waits and tries again. This is "not here": the extension behind the
+     * command was never loaded, so there is nothing to wait for, and a disabled
+     * button that will never enable is a control that lies about what the field
+     * can do.
+     *
+     * It exists because of TipTap 2. `StarterKit` there carries neither
+     * `Underline` nor `Link`, so `oxRichTextExtensions` takes them as optional
+     * arguments — and a caller who omits `Underline` would otherwise get an
+     * underline button whose `can` probe calls `toggleUnderline` on `undefined`.
+     *
+     * Optional, and absent means supported: an adapter written against an earlier
+     * version of this interface keeps working, and so does one for an editor
+     * whose command set is fixed.
+     */
+    supports?: (command: RichTextCommand) => boolean;
 }
 /** Whatever `OxRichTextEditor` will accept as the thing the toolbar drives. */
 export type RichTextSource = Editor | RichTextAdapter;

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';
@@ -70,6 +74,7 @@ export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, Breadcr
 export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
 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 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 { 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';