@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/DefinitionList.tsx

@@ -1,38 +1,38 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface DefinitionItem {
-  term: ReactNode;
-  detail: ReactNode;
-}
-
-export interface DefinitionListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title?: ReactNode;
-  description?: ReactNode;
-  items: DefinitionItem[];
-  /** Optional footer (actions). */
-  footer?: ReactNode;
-}
-
-/** `<div class="oc-dl-panel" role="region">` with a `dl` of label / value rows. */
-export const DefinitionList = forwardRef<HTMLDivElement, DefinitionListProps>(function DefinitionList(
-  { title, description, items, footer, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-dl-panel", className)} role="region" {...rest}>
-      {title != null && <h3 className="oc-dl-title">{title}</h3>}
-      {description != null && <p className="oc-dl-description">{description}</p>}
-      <dl className="oc-dl">
-        {items.map((item, i) => (
-          <div className="oc-dl-row" key={i}>
-            <dt className="oc-dl-term">{item.term}</dt>
-            <dd className="oc-dl-detail">{item.detail}</dd>
-          </div>
-        ))}
-      </dl>
-      {footer != null && <div className="oc-dl-footer">{footer}</div>}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface DefinitionItem {
+  term: ReactNode;
+  detail: ReactNode;
+}
+
+export interface DefinitionListProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  items: DefinitionItem[];
+  /** Optional footer (actions). */
+  footer?: ReactNode;
+}
+
+/** `<div class="oc-dl-panel" role="region">` with a `dl` of label / value rows. */
+export const DefinitionList = forwardRef<HTMLDivElement, DefinitionListProps>(function DefinitionList(
+  { title, description, items, footer, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-dl-panel", className)} role="region" {...rest}>
+      {title != null && <h3 className="oc-dl-title">{title}</h3>}
+      {description != null && <p className="oc-dl-description">{description}</p>}
+      <dl className="oc-dl">
+        {items.map((item, i) => (
+          <div className="oc-dl-row" key={i}>
+            <dt className="oc-dl-term">{item.term}</dt>
+            <dd className="oc-dl-detail">{item.detail}</dd>
+          </div>
+        ))}
+      </dl>
+      {footer != null && <div className="oc-dl-footer">{footer}</div>}
+    </div>
+  );
+});

package/src/components/DocViewer.tsx

@@ -1,110 +1,110 @@
-// File: packages/react/src/components/DocViewer.tsx
-// Map: types + demo items -> media (iframe / video / img / placeholder art) -> DocViewer (grid of cards -> one <dialog> per card)
-// Same markup as packages/ui/snippets/doc-viewer.html. No JavaScript: the buttons open the full-screen dialog with
-// invoker commands (command="show-modal" commandfor), closedby="any" closes it on Esc or a click on the backdrop.
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-
-export interface DocViewerItem {
-  /** Name in the bar and the dialog title; also used in the aria-labels. */
-  label: string;
-  /** Small text next to the label, e.g. "PDF · 2.4 MB" or "1:42". */
-  meta?: ReactNode;
-  /** File URL. Leave empty to show placeholder art (`.oc-media-art`). */
-  src?: string;
-  /** Default "pdf" (A4 frame). "video" = 16/9 dark frame, "image" = natural height. */
-  type?: "pdf" | "video" | "image";
-  /** Dialog id (generated when empty). */
-  id?: string;
-  /** Text for the inline preview (aria-label / alt / iframe title). Defaults to the label. */
-  alt?: string;
-  /** Placeholder art variant (`oc-media-art--N`) when there is no src. */
-  art?: number;
-  /** Download link in the dialog bar. */
-  download?: string;
-  /** Where the preview opens: "bar" (expand button) or "frame" (the whole preview). Default: "frame" for video. */
-  open?: "bar" | "frame";
-  /** Set false for a plain card without full-screen dialog. Default true. */
-  fullscreen?: boolean;
-}
-
-export interface DocViewerProps extends HTMLAttributes<HTMLDivElement> {
-  items?: DocViewerItem[];
-  /** Text of the frame button (default "Click for full screen"). */
-  openText?: ReactNode;
-  downloadText?: ReactNode;
-  /** Prefix for generated dialog ids. */
-  idPrefix?: string;
-}
-
-const DEMO: DocViewerItem[] = [
-  { label: "Brochure 2026", meta: "PDF · 2.4 MB", alt: "First page of Brochure 2026", art: 2, download: "#brochure.pdf" },
-  { label: "Site visit", meta: "1:42", type: "video", alt: "Video still: site visit", art: 5 },
-];
-
-const media = (doc: DocViewerItem, alt: string) => {
-  const type = doc.type ?? "pdf";
-  if (!doc.src) return <div className={cx("oc-media-art", doc.art != null && `oc-media-art--${doc.art}`)} role="img" aria-label={alt} />;
-  if (type === "video") return <video src={doc.src} controls preload="metadata" aria-label={alt} />;
-  if (type === "image") return <img src={doc.src} alt={alt} />;
-  return <iframe src={`${doc.src}#toolbar=0&view=FitH`} title={alt} loading="lazy" />;
-};
-
-/** `.oc-doc-viewer-grid` of `figure.oc-doc-viewer` cards, each with its `dialog.oc-doc-viewer-dialog`. */
-export const DocViewer = forwardRef<HTMLDivElement, DocViewerProps>(function DocViewer(
-  { items = DEMO, openText = "Click for full screen", downloadText = "Download", idPrefix, className, ...rest },
-  ref,
-) {
-  const auto = useId().replace(/[^\w-]/g, "");
-  const base = idPrefix ?? `oc-doc-viewer-${auto}`;
-  const idOf = (doc: DocViewerItem, i: number) => doc.id ?? `${base}-${i + 1}`;
-
-  const cards = items.map((doc, i) => {
-    const id = idOf(doc, i);
-    const full = doc.fullscreen !== false;
-    const frame = full && (doc.open ?? (doc.type === "video" ? "frame" : "bar")) === "frame";
-    return (
-      <figure key={i} className={cx("oc-doc-viewer", doc.type === "video" && "oc-doc-viewer--video", doc.type === "image" && "oc-doc-viewer--image")}>
-        <figcaption className="oc-doc-viewer__bar">
-          <span className="oc-doc-viewer__label">{doc.label}</span>
-          {doc.meta != null && <span className="oc-doc-viewer__meta">{doc.meta}</span>}
-          {full && !frame && (
-            <button type="button" className="oc-doc-viewer__expand" {...attrs({ command: "show-modal", commandfor: id })} aria-label={`Open ${doc.label} full screen`}>&#10530;</button>
-          )}
-        </figcaption>
-        <div className="oc-doc-viewer__frame">
-          {media(doc, doc.alt ?? doc.label)}
-          {frame && <button type="button" className="oc-doc-viewer__open" {...attrs({ command: "show-modal", commandfor: id })}>{openText}</button>}
-        </div>
-      </figure>
-    );
-  });
-
-  const dialogs = items.map((doc, i) => {
-    if (doc.fullscreen === false) return null;
-    const id = idOf(doc, i);
-    const close = <button type="button" className="oc-doc-viewer-dialog__close" {...attrs({ command: "close", commandfor: id })} aria-label="Close">&#10005;</button>;
-    return (
-      <dialog key={i} className={cx("oc-doc-viewer-dialog", doc.type === "video" && "oc-doc-viewer-dialog--video")} id={id} {...attrs({ closedby: "any" })} aria-labelledby={`${id}-title`}>
-        <div className="oc-doc-viewer-dialog__bar">
-          <h2 className="oc-doc-viewer-dialog__title" id={`${id}-title`}>{doc.label}</h2>
-          {doc.download ? (
-            <div className="oc-doc-viewer-dialog__actions">
-              <a className="oc-btn oc-btn--outline oc-btn--sm" href={doc.download} download>{downloadText}</a>
-              {close}
-            </div>
-          ) : close}
-        </div>
-        <div className="oc-doc-viewer-dialog__body">{media(doc, doc.type === "video" ? `${doc.label} video` : doc.label)}</div>
-      </dialog>
-    );
-  });
-
-  return (
-    <>
-      <div ref={ref} className={cx("oc-doc-viewer-grid", className)} {...rest}>{cards}</div>
-      {dialogs}
-    </>
-  );
-});
+// File: packages/react/src/components/DocViewer.tsx
+// Map: types + demo items -> media (iframe / video / img / placeholder art) -> DocViewer (grid of cards -> one <dialog> per card)
+// Same markup as packages/ui/snippets/doc-viewer.html. No JavaScript: the buttons open the full-screen dialog with
+// invoker commands (command="show-modal" commandfor), closedby="any" closes it on Esc or a click on the backdrop.
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface DocViewerItem {
+  /** Name in the bar and the dialog title; also used in the aria-labels. */
+  label: string;
+  /** Small text next to the label, e.g. "PDF · 2.4 MB" or "1:42". */
+  meta?: ReactNode;
+  /** File URL. Leave empty to show placeholder art (`.oc-media-art`). */
+  src?: string;
+  /** Default "pdf" (A4 frame). "video" = 16/9 dark frame, "image" = natural height. */
+  type?: "pdf" | "video" | "image";
+  /** Dialog id (generated when empty). */
+  id?: string;
+  /** Text for the inline preview (aria-label / alt / iframe title). Defaults to the label. */
+  alt?: string;
+  /** Placeholder art variant (`oc-media-art--N`) when there is no src. */
+  art?: number;
+  /** Download link in the dialog bar. */
+  download?: string;
+  /** Where the preview opens: "bar" (expand button) or "frame" (the whole preview). Default: "frame" for video. */
+  open?: "bar" | "frame";
+  /** Set false for a plain card without full-screen dialog. Default true. */
+  fullscreen?: boolean;
+}
+
+export interface DocViewerProps extends HTMLAttributes<HTMLDivElement> {
+  items?: DocViewerItem[];
+  /** Text of the frame button (default "Click for full screen"). */
+  openText?: ReactNode;
+  downloadText?: ReactNode;
+  /** Prefix for generated dialog ids. */
+  idPrefix?: string;
+}
+
+const DEMO: DocViewerItem[] = [
+  { label: "Brochure 2026", meta: "PDF · 2.4 MB", alt: "First page of Brochure 2026", art: 2, download: "#brochure.pdf" },
+  { label: "Site visit", meta: "1:42", type: "video", alt: "Video still: site visit", art: 5 },
+];
+
+const media = (doc: DocViewerItem, alt: string) => {
+  const type = doc.type ?? "pdf";
+  if (!doc.src) return <div className={cx("oc-media-art", doc.art != null && `oc-media-art--${doc.art}`)} role="img" aria-label={alt} />;
+  if (type === "video") return <video src={doc.src} controls preload="metadata" aria-label={alt} />;
+  if (type === "image") return <img src={doc.src} alt={alt} />;
+  return <iframe src={`${doc.src}#toolbar=0&view=FitH`} title={alt} loading="lazy" />;
+};
+
+/** `.oc-doc-viewer-grid` of `figure.oc-doc-viewer` cards, each with its `dialog.oc-doc-viewer-dialog`. */
+export const DocViewer = forwardRef<HTMLDivElement, DocViewerProps>(function DocViewer(
+  { items = DEMO, openText = "Click for full screen", downloadText = "Download", idPrefix, className, ...rest },
+  ref,
+) {
+  const auto = useId().replace(/[^\w-]/g, "");
+  const base = idPrefix ?? `oc-doc-viewer-${auto}`;
+  const idOf = (doc: DocViewerItem, i: number) => doc.id ?? `${base}-${i + 1}`;
+
+  const cards = items.map((doc, i) => {
+    const id = idOf(doc, i);
+    const full = doc.fullscreen !== false;
+    const frame = full && (doc.open ?? (doc.type === "video" ? "frame" : "bar")) === "frame";
+    return (
+      <figure key={i} className={cx("oc-doc-viewer", doc.type === "video" && "oc-doc-viewer--video", doc.type === "image" && "oc-doc-viewer--image")}>
+        <figcaption className="oc-doc-viewer__bar">
+          <span className="oc-doc-viewer__label">{doc.label}</span>
+          {doc.meta != null && <span className="oc-doc-viewer__meta">{doc.meta}</span>}
+          {full && !frame && (
+            <button type="button" className="oc-doc-viewer__expand" {...attrs({ command: "show-modal", commandfor: id })} aria-label={`Open ${doc.label} full screen`}>&#10530;</button>
+          )}
+        </figcaption>
+        <div className="oc-doc-viewer__frame">
+          {media(doc, doc.alt ?? doc.label)}
+          {frame && <button type="button" className="oc-doc-viewer__open" {...attrs({ command: "show-modal", commandfor: id })}>{openText}</button>}
+        </div>
+      </figure>
+    );
+  });
+
+  const dialogs = items.map((doc, i) => {
+    if (doc.fullscreen === false) return null;
+    const id = idOf(doc, i);
+    const close = <button type="button" className="oc-doc-viewer-dialog__close" {...attrs({ command: "close", commandfor: id })} aria-label="Close">&#10005;</button>;
+    return (
+      <dialog key={i} className={cx("oc-doc-viewer-dialog", doc.type === "video" && "oc-doc-viewer-dialog--video")} id={id} {...attrs({ closedby: "any" })} aria-labelledby={`${id}-title`}>
+        <div className="oc-doc-viewer-dialog__bar">
+          <h2 className="oc-doc-viewer-dialog__title" id={`${id}-title`}>{doc.label}</h2>
+          {doc.download ? (
+            <div className="oc-doc-viewer-dialog__actions">
+              <a className="oc-btn oc-btn--outline oc-btn--sm" href={doc.download} download>{downloadText}</a>
+              {close}
+            </div>
+          ) : close}
+        </div>
+        <div className="oc-doc-viewer-dialog__body">{media(doc, doc.type === "video" ? `${doc.label} video` : doc.label)}</div>
+      </dialog>
+    );
+  });
+
+  return (
+    <>
+      <div ref={ref} className={cx("oc-doc-viewer-grid", className)} {...rest}>{cards}</div>
+      {dialogs}
+    </>
+  );
+});

package/src/components/Dropdown.tsx

@@ -1,52 +1,52 @@
-import { forwardRef, useId } from "react";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-import { Button } from "./Button";
-import type { ButtonProps } from "./Button";
-
-export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
-  /** Content of the trigger button. */
-  trigger: ReactNode;
-  /** Props for the trigger button (default variant `outline`). */
-  triggerProps?: ButtonProps;
-}
-
-/**
- * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popovertarget`
- * (native popover and anchor positioning, no state needed).
- */
-export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(function Dropdown(
-  { trigger, triggerProps, className, id, children, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const menuId = id ?? `oc-menu-${auto.replace(/:/g, "")}`;
-  return (
-    <>
-      <Button variant="outline" {...triggerProps} {...attrs({ popovertarget: menuId })}>{trigger}</Button>
-      <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
-        {children}
-      </div>
-    </>
-  );
-});
-
-/** `.oc-dropdown-label` */
-export function DropdownLabel({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("oc-dropdown-label", className)} {...rest} />;
-}
-
-/** `.oc-dropdown-separator` */
-export function DropdownSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("oc-dropdown-separator", className)} {...rest} />;
-}
-
-type ItemProps = (AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) | (ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined });
-
-/** `.oc-dropdown-item`: an anchor when `href` is set, otherwise a button. */
-export function DropdownItem({ className, ...props }: ItemProps) {
-  if (props.href !== undefined) {
-    return <a className={cx("oc-dropdown-item", className)} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)} />;
-  }
-  return <button type="button" className={cx("oc-dropdown-item", className)} {...(props as ButtonHTMLAttributes<HTMLButtonElement>)} />;
-}
+import { forwardRef, useId } from "react";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { Button } from "./Button";
+import type { ButtonProps } from "./Button";
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /** Content of the trigger button. */
+  trigger: ReactNode;
+  /** Props for the trigger button (default variant `outline`). */
+  triggerProps?: ButtonProps;
+}
+
+/**
+ * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popovertarget`
+ * (native popover and anchor positioning, no state needed).
+ */
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(function Dropdown(
+  { trigger, triggerProps, className, id, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const menuId = id ?? `oc-menu-${auto.replace(/:/g, "")}`;
+  return (
+    <>
+      <Button variant="outline" {...triggerProps} {...attrs({ popovertarget: menuId })}>{trigger}</Button>
+      <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
+        {children}
+      </div>
+    </>
+  );
+});
+
+/** `.oc-dropdown-label` */
+export function DropdownLabel({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-dropdown-label", className)} {...rest} />;
+}
+
+/** `.oc-dropdown-separator` */
+export function DropdownSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-dropdown-separator", className)} {...rest} />;
+}
+
+type ItemProps = (AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) | (ButtonHTMLAttributes<HTMLButtonElement> & { href?: undefined });
+
+/** `.oc-dropdown-item`: an anchor when `href` is set, otherwise a button. */
+export function DropdownItem({ className, ...props }: ItemProps) {
+  if (props.href !== undefined) {
+    return <a className={cx("oc-dropdown-item", className)} {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)} />;
+  }
+  return <button type="button" className={cx("oc-dropdown-item", className)} {...(props as ButtonHTMLAttributes<HTMLButtonElement>)} />;
+}

package/src/components/Dropzone.tsx

@@ -1,46 +1,46 @@
-"use client";
-
-import { forwardRef, useState } from "react";
-import type { DragEvent, InputHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface DropzoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "children"> {
-  /** Icon in `oc-dropzone-icon` (inline SVG or glyph). */
-  icon?: ReactNode;
-  /** Main text, e.g. `<strong>Drop invoices here</strong> or click to choose`. */
-  children?: ReactNode;
-  /** Small hint (`oc-dropzone-hint`), e.g. accepted types and size. */
-  hint?: ReactNode;
-  /** Called with the chosen or dropped files. */
-  onFiles?: (files: File[]) => void;
-}
-
-/** `<label class="oc-dropzone">` around a real file input; `is-dragover` while dragging. */
-export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>(function Dropzone(
-  { icon, children, hint, onFiles, className, ...rest },
-  ref,
-) {
-  const [over, setOver] = useState(false);
-  const stop = (e: DragEvent) => {
-    e.preventDefault();
-    setOver(e.type === "dragover" || e.type === "dragenter");
-  };
-  return (
-    <label
-      className={cx("oc-dropzone", over && "is-dragover", className)}
-      onDragEnter={stop}
-      onDragOver={stop}
-      onDragLeave={stop}
-      onDrop={(e) => {
-        stop(e);
-        const files = Array.from(e.dataTransfer?.files ?? []);
-        if (files.length && !rest.disabled) onFiles?.(files);
-      }}
-    >
-      <input ref={ref} type="file" onChange={(e) => onFiles?.(Array.from(e.target.files ?? []))} {...rest} />
-      {icon != null && <span className="oc-dropzone-icon" aria-hidden="true">{icon}</span>}
-      <span>{children}</span>
-      {hint != null && <span className="oc-dropzone-hint">{hint}</span>}
-    </label>
-  );
-});
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { DragEvent, InputHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface DropzoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "children"> {
+  /** Icon in `oc-dropzone-icon` (inline SVG or glyph). */
+  icon?: ReactNode;
+  /** Main text, e.g. `<strong>Drop invoices here</strong> or click to choose`. */
+  children?: ReactNode;
+  /** Small hint (`oc-dropzone-hint`), e.g. accepted types and size. */
+  hint?: ReactNode;
+  /** Called with the chosen or dropped files. */
+  onFiles?: (files: File[]) => void;
+}
+
+/** `<label class="oc-dropzone">` around a real file input; `is-dragover` while dragging. */
+export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>(function Dropzone(
+  { icon, children, hint, onFiles, className, ...rest },
+  ref,
+) {
+  const [over, setOver] = useState(false);
+  const stop = (e: DragEvent) => {
+    e.preventDefault();
+    setOver(e.type === "dragover" || e.type === "dragenter");
+  };
+  return (
+    <label
+      className={cx("oc-dropzone", over && "is-dragover", className)}
+      onDragEnter={stop}
+      onDragOver={stop}
+      onDragLeave={stop}
+      onDrop={(e) => {
+        stop(e);
+        const files = Array.from(e.dataTransfer?.files ?? []);
+        if (files.length && !rest.disabled) onFiles?.(files);
+      }}
+    >
+      <input ref={ref} type="file" onChange={(e) => onFiles?.(Array.from(e.target.files ?? []))} {...rest} />
+      {icon != null && <span className="oc-dropzone-icon" aria-hidden="true">{icon}</span>}
+      <span>{children}</span>
+      {hint != null && <span className="oc-dropzone-hint">{hint}</span>}
+    </label>
+  );
+});

package/src/components/EmojiPicker.tsx

@@ -1,72 +1,72 @@
-// File: packages/react/src/components/EmojiPicker.tsx
-// Map: default groups -> props -> EmojiPicker (trigger button -> popover panel -> groups: label + grid of buttons)
-// Same markup as packages/ui/snippets/emoji-picker.html. React calls onSelect and closes the popover.
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-
-export interface EmojiGroup {
-  label?: string;
-  emojis: string[];
-}
-
-const defaultGroups: EmojiGroup[] = [
-  { label: "Smileys", emojis: ["😀", "😃", "😄", "😁", "😂", "🙂", "😉", "😍", "🤔", "😎", "😢", "😴", "😯", "🥳", "😤", "🤗"] },
-  { label: "Gestures", emojis: ["👍", "👎", "👏", "🙌", "👋", "🙏", "✌️", "💪"] },
-  { label: "Objects", emojis: ["❤️", "⭐", "🔥", "🎉", "✅", "🚀", "💡", "☕"] },
-];
-
-export interface EmojiPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  groups?: EmojiGroup[];
-  /** Called with the picked emoji. */
-  onSelect?: (emoji: string) => void;
-  /** Always-visible panel without trigger / popover. */
-  inline?: boolean;
-  /** Trigger content (default 🙂) and its accessible name. */
-  trigger?: ReactNode;
-  triggerLabel?: string;
-}
-
-/** `.oc-emoji-picker`: popover grid of emoji buttons, anchored to its trigger. */
-export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPicker(
-  { groups = defaultGroups, onSelect, inline, trigger = "🙂", triggerLabel = "Insert emoji", className, id, "aria-label": label = "Emoji", ...rest },
-  ref,
-) {
-  const auto = useId();
-  const panelId = id ?? `oc-emoji-${auto.replace(/:/g, "")}`;
-  const pick = (e: MouseEvent<HTMLButtonElement>, emoji: string) => {
-    onSelect?.(emoji);
-    (e.currentTarget.closest("[popover]") as (HTMLElement & { hidePopover?: () => void }) | null)?.hidePopover?.();
-  };
-  const panel = (
-    <div
-      ref={ref}
-      id={panelId}
-      className={cx("oc-emoji-picker", inline && "oc-emoji-picker--inline", className)}
-      role={inline ? "group" : undefined}
-      aria-label={label}
-      {...(inline ? {} : attrs({ popover: "" }))}
-      {...rest}
-    >
-      {groups.map((g, gi) => (
-        <div key={gi}>
-          {g.label && <p className="oc-emoji-picker__label">{g.label}</p>}
-          <div className="oc-emoji-picker__grid">
-            {g.emojis.map((emoji) => (
-              <button key={emoji} type="button" className="oc-emoji-picker__item" onClick={(e) => pick(e, emoji)}>{emoji}</button>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-  if (inline) return panel;
-  return (
-    <>
-      <button type="button" className="oc-emoji-picker__trigger" aria-label={triggerLabel} {...attrs({ popovertarget: panelId })}>{trigger}</button>
-      {panel}
-    </>
-  );
-});
+// File: packages/react/src/components/EmojiPicker.tsx
+// Map: default groups -> props -> EmojiPicker (trigger button -> popover panel -> groups: label + grid of buttons)
+// Same markup as packages/ui/snippets/emoji-picker.html. React calls onSelect and closes the popover.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface EmojiGroup {
+  label?: string;
+  emojis: string[];
+}
+
+const defaultGroups: EmojiGroup[] = [
+  { label: "Smileys", emojis: ["😀", "😃", "😄", "😁", "😂", "🙂", "😉", "😍", "🤔", "😎", "😢", "😴", "😯", "🥳", "😤", "🤗"] },
+  { label: "Gestures", emojis: ["👍", "👎", "👏", "🙌", "👋", "🙏", "✌️", "💪"] },
+  { label: "Objects", emojis: ["❤️", "⭐", "🔥", "🎉", "✅", "🚀", "💡", "☕"] },
+];
+
+export interface EmojiPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  groups?: EmojiGroup[];
+  /** Called with the picked emoji. */
+  onSelect?: (emoji: string) => void;
+  /** Always-visible panel without trigger / popover. */
+  inline?: boolean;
+  /** Trigger content (default 🙂) and its accessible name. */
+  trigger?: ReactNode;
+  triggerLabel?: string;
+}
+
+/** `.oc-emoji-picker`: popover grid of emoji buttons, anchored to its trigger. */
+export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function EmojiPicker(
+  { groups = defaultGroups, onSelect, inline, trigger = "🙂", triggerLabel = "Insert emoji", className, id, "aria-label": label = "Emoji", ...rest },
+  ref,
+) {
+  const auto = useId();
+  const panelId = id ?? `oc-emoji-${auto.replace(/:/g, "")}`;
+  const pick = (e: MouseEvent<HTMLButtonElement>, emoji: string) => {
+    onSelect?.(emoji);
+    (e.currentTarget.closest("[popover]") as (HTMLElement & { hidePopover?: () => void }) | null)?.hidePopover?.();
+  };
+  const panel = (
+    <div
+      ref={ref}
+      id={panelId}
+      className={cx("oc-emoji-picker", inline && "oc-emoji-picker--inline", className)}
+      role={inline ? "group" : undefined}
+      aria-label={label}
+      {...(inline ? {} : attrs({ popover: "" }))}
+      {...rest}
+    >
+      {groups.map((g, gi) => (
+        <div key={gi}>
+          {g.label && <p className="oc-emoji-picker__label">{g.label}</p>}
+          <div className="oc-emoji-picker__grid">
+            {g.emojis.map((emoji) => (
+              <button key={emoji} type="button" className="oc-emoji-picker__item" onClick={(e) => pick(e, emoji)}>{emoji}</button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+  if (inline) return panel;
+  return (
+    <>
+      <button type="button" className="oc-emoji-picker__trigger" aria-label={triggerLabel} {...attrs({ popovertarget: panelId })}>{trigger}</button>
+      {panel}
+    </>
+  );
+});