@sableui/react 0.14.0 → 0.16.0

package/dist/components/like-button/like-button.meta.js

@@ -0,0 +1,132 @@
+// src/components/like-button/like-button.meta.ts
+var likeButtonMeta = {
+  name: "LikeButton",
+  summary: "A pressed-or-not toggle for a like, a star or a save, with its count. Pressing it on fills the glyph, which blooms while a ring and a spray of dots burst from it and the count rolls up; pressing it off is quiet.",
+  status: "stable",
+  keywords: [
+    "like",
+    "heart",
+    "favorite",
+    "favourite",
+    "love",
+    "star",
+    "bookmark",
+    "save",
+    "upvote",
+    "reaction",
+    "count",
+    "toggle"
+  ],
+  usage: {
+    description: "Use LikeButton for a personal, reversible endorsement that other people can see the tally of: liking a post, starring a repository, saving a recipe. It is the one place in Sable that celebrates, because the person chose it and it costs nothing to undo.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Pass the server's total as `count` and update it when the save lands. The button shows the viewer's own like at once, before the save, and goes back to `count` exactly whenever it changes, so a failed save that leaves `count` alone can also turn `pressed` back off."
+      },
+      {
+        guidance: "do",
+        description: 'Match the glyph, family and label to the meaning: `icon="star" tone="yellow" label="Star"` for a star. The label is the accessible name, so it must say what pressing does.'
+      },
+      {
+        guidance: "do",
+        description: 'Use `format={{ notation: "compact" }}` once counts pass a few thousand, so a feed of buttons keeps one width.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a setting or a view switch (bold, mute, grid or list). Those are tools, not endorsements, and a burst on every press of a formatting control is noise; use Toggle.",
+        instead: ["Toggle"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a rating or a verdict on an answer (helpful, not helpful). That is a question with two sides; use Feedback.",
+        instead: ["Feedback"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not press it for the user. A burst is a reply to a person's choice \u2014 liking something on their behalf, or on load, turns delight into a notification."
+      }
+    ]
+  },
+  related: {
+    components: ["Toggle", "Feedback", "NumberTicker", "Button"]
+  },
+  props: [
+    {
+      name: "count",
+      type: "number",
+      description: "The total, rolled when it changes. Pressing adds or removes the viewer's like at once; the button shows `count` exactly again whenever `count` changes. Omit it for a bare glyph (an icon-size button)."
+    },
+    { name: "pressed", type: "boolean", description: "Controlled pressed state." },
+    { name: "defaultPressed", type: "boolean", default: "false", description: "Initial pressed state when uncontrolled." },
+    {
+      name: "onPressedChange",
+      type: "(pressed: boolean, event) => void",
+      description: "Called when the user presses it, with the new state."
+    },
+    { name: "icon", type: "string", default: '"heart"', description: "The glyph, by icon name. Its `solid` variant is shown while pressed." },
+    {
+      name: "tone",
+      type: "PaletteColor",
+      default: '"red"',
+      description: "The palette family the glyph fills with while pressed, and the burst blooms from. A family, so it follows the theme."
+    },
+    { name: "label", type: "string", default: '"Like"', description: "The accessible name, read before the count." },
+    { name: "format", type: "Intl.NumberFormatOptions", description: 'How to write the count, e.g. `{ notation: "compact" }`.' },
+    { name: "variant", type: '"ghost" | "outline" | "secondary"', default: '"ghost"', description: "The Button surface." },
+    { name: "size", type: '"xs" | "sm" | "md"', default: '"sm"', description: "A Button size; without a count, the matching icon size." },
+    { name: "disabled", type: "boolean", default: "false", description: "Disables it." },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. The bloom and the burst are the flourish; the fill and the count changing stay."
+    }
+  ],
+  variants: {
+    variant: ["ghost", "outline", "secondary"],
+    size: ["xs", "sm", "md"],
+    tone: ["red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"]
+  },
+  tokensUsed: ["palette-dot", "accent", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "It arrives with the post or row it belongs to. A page that loads with likes already given must be still: nothing blooms on mount."
+    },
+    {
+      slot: "response",
+      recipe: "motion-bloom",
+      part: "Glyph",
+      why: "Pressing it on is the moment. The glyph is 16px, so it needs real amplitude to read as an event: it grows from nothing past its size and settles, after a 90ms beat in which the ring leads. Inherits Button's motion-press for the press itself. Pressing off has no bloom \u2014 taking a like back is not a celebration."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Burst",
+      why: "The follow-through: <Burst> draws a disc that hollows into a ring and shifts colour, then dots thrown outward in the theme's palette families. Expressive only \u2014 under `subtle` or reduced motion it renders nothing and the fill alone answers the press. The count rolls with NumberTicker."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "There is no in-between state to show: the like is shown at once, before it is saved."
+    }
+  ],
+  a11y: [
+    "A native <button> through Button, with `aria-pressed`. Enter and Space press it.",
+    `The accessible name is the label then the count ("Like 1,301"); the burst is aria-hidden and the rolling digits are hidden behind the count's real text.`,
+    "The pressed state is carried by the filled glyph and `aria-pressed`, never by colour alone.",
+    "Under reduced motion the glyph fills and the count changes at once; the bloom and the burst are dropped."
+  ],
+  examples: [
+    { label: "A post's likes", code: "<LikeButton count={post.likes} defaultPressed={post.liked} onPressedChange={(on) => api.like(post.id, on)} />" },
+    { label: "Star a repository", code: '<LikeButton icon="star" tone="yellow" label="Star" variant="outline" count={repo.stars} format={{ notation: "compact" }} />' },
+    { label: "Bare glyph", code: '<LikeButton label="Save recipe" />' }
+  ]
+};
+export {
+  likeButtonMeta
+};

package/dist/components/line-chart/line-chart.meta.js

@@ -180,7 +180,12 @@ var lineChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/menu/menu.js

@@ -68,7 +68,7 @@ var MENU_ITEM_DESTRUCTIVE = (
   // enough for a white label, and ink mixed from them measured 3.8:1 on
   // Meridian's popover. From the text token every theme clears 4.5:1 (worst
   // 5.4:1, Prism dark, on the 10% red wash).
-  "text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))] data-[highlighted]:bg-destructive/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
+  "text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))] data-[highlighted]:bg-destructive-mark/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
 );
 function MenuItem({ className, variant = "default", icon, description, children, ...props }) {
   const tier = useTypeTier();

package/dist/components/meter/meter.js

@@ -1,22 +1,30 @@
 // src/components/meter/meter.tsx
 import { Meter as Base } from "@base-ui/react/meter";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import { cn } from "../../lib/cn.js";
 import {
   meterIndicatorVariants,
   meterRingValueVariants,
   meterRingVariants,
+  meterSegmentedTrackVariants,
+  meterTickVariants,
   meterTrackVariants
 } from "./meter.variants.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ToneContext = createContext("primary");
 var SizeContext = createContext(void 0);
+var SegmentsContext = createContext(null);
+function filledTicks({ count, value, min, max }) {
+  if (value == null || value <= min) return 0;
+  const ratio = max === min ? 1 : Math.min(1, (value - min) / (max - min));
+  return Math.min(count, Math.max(1, Math.round(ratio * count)));
+}
 var RING_TONE_STROKE = {
   primary: "var(--primary)",
-  "3": "var(--tone-3)",
-  success: "var(--success)",
-  warning: "var(--tone-warning)",
-  destructive: "var(--destructive)"
+  "3": "var(--tone-3-mark)",
+  success: "var(--success-mark)",
+  warning: "var(--tone-warning-mark)",
+  destructive: "var(--destructive-mark)"
 };
 function MeterRing({
   value,
@@ -53,15 +61,30 @@ function MeterRing({
     showValue ? /* @__PURE__ */ jsx(MeterValue, { className: meterRingValueVariants({ size }) }) : null
   ] });
 }
-function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, ...props }) {
+function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, segments, ...props }) {
   if (shape === "ring") {
     return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(Base.Root, { className: cn(meterRingVariants({ size }), className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterRing, { value: props.value ?? null, min: props.min, max: props.max, strokeWidth, showValue, tone, size }) }) });
   }
-  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(Base.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) });
+  const count = segments != null && Number.isFinite(segments) && segments >= 1 ? Math.floor(segments) : 0;
+  const segmented = count ? { count, value: props.value ?? null, min: props.min ?? 0, max: props.max ?? 100 } : null;
+  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(SegmentsContext.Provider, { value: segmented, children: /* @__PURE__ */ jsx(Base.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) }) });
 }
 Meter.displayName = "Meter";
 function MeterTrack({ className, children, size, ...props }) {
   const inherited = useContext(SizeContext);
+  const tone = useContext(ToneContext);
+  const segments = useContext(SegmentsContext);
+  if (segments) {
+    return /* @__PURE__ */ jsx(
+      Base.Track,
+      {
+        "data-segmented": "",
+        className: cn(meterSegmentedTrackVariants({ size: size ?? inherited }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(MeterTicks, { count: segments.count, filled: filledTicks(segments), tone })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Base.Track,
     {
@@ -72,6 +95,29 @@ function MeterTrack({ className, children, size, ...props }) {
   );
 }
 MeterTrack.displayName = "MeterTrack";
+function MeterTicks({ count, filled, tone }) {
+  const [shown, setShown] = useState(filled);
+  const [from, setFrom] = useState(filled);
+  if (filled !== shown) {
+    setFrom(shown);
+    setShown(filled);
+  }
+  return Array.from({ length: count }, (_, i) => {
+    const isFilled = i < filled;
+    const step = filled > from && i >= from && i < filled ? i - from : filled < from && i >= filled && i < from ? from - 1 - i : 0;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "meter-tick",
+        "data-filled": isFilled ? "" : void 0,
+        className: meterTickVariants({ tone, filled: isFilled }),
+        style: step ? { transitionDelay: `calc(var(--motion-duration-slow) * ${Number((step / count).toFixed(4))} * var(--motion-expressive, 1))` } : void 0
+      },
+      i
+    );
+  });
+}
 function MeterIndicator({ className, tone, ...props }) {
   const inherited = useContext(ToneContext);
   return /* @__PURE__ */ jsx(

package/dist/components/meter/meter.meta.js

@@ -11,7 +11,12 @@ var meterMeta = {
     "capacity",
     "limit",
     "password strength",
-    "level"
+    "level",
+    "segmented",
+    "tick bar",
+    "score",
+    "credits",
+    "spend limit"
   ],
   usage: {
     description: "Use Meter to show a static measurement against a known maximum \u2014 storage used, seats taken, API quota, password strength. It is announced as a meter, not a progress bar, so a screen-reader user hears a level rather than a task underway.",
@@ -36,6 +41,15 @@ var meterMeta = {
       {
         guidance: "do",
         description: 'Use shape="ring" when the reading is a score that belongs in a small, glanceable spot on a card. It is the same measurement drawn as a circular gauge, not a different component.'
+      },
+      {
+        guidance: "do",
+        description: "Use `segments` (a tick bar, \u25AE\u25AE\u25AE\u25AE\u25AE\u25AE\u25AF\u25AF\u25AF\u25AF) for a discrete budget, score or quota read at a glance \u2014 a spend limit, credits left, an ICP lead score, months of data coverage. Pick a count that matches the unit when there is one (10 for a score out of 10, 12 for months) and otherwise size it to the track: a tick reads as a tick when it is taller than it is wide, about one per 8px of track (40 across a card row, 20 in a narrow table cell). Any reading above min shows at least one tick."
+      },
+      {
+        guidance: "dont",
+        description: "Do not segment a fine-grained continuous value where the exact proportion matters (disk at 73.4%) \u2014 ticks round it to the nearest mark; use the continuous bar. And do not use a tick bar for a task in flight or steps completed: that is Progress, or a Stepper for named steps.",
+        instead: ["Progress"]
       }
     ],
     anatomy: [
@@ -47,7 +61,7 @@ var meterMeta = {
       {
         name: "MeterIndicator",
         required: true,
-        description: "The fill, sized from value and coloured by tone."
+        description: "The fill, sized from value and coloured by tone. Not used with `segments`: the track draws its ticks instead."
       },
       {
         name: "MeterLabel",
@@ -105,6 +119,11 @@ var meterMeta = {
       type: "boolean",
       description: "Print the value in the ring's centre (formatted like MeterValue)."
     },
+    {
+      name: "segments",
+      type: "number",
+      description: 'Draw the bar as this many separate ticks instead of a continuous fill (a quota, score or spend limit). Filled ticks = round(share \xD7 N), at least one for any reading above min, none at min. Ticks take the tone; empty ones sit on the rail colour. The segmented track has its own, taller sm / md / lg ladder. Bar only: ignored for shape="ring".'
+    },
     {
       name: "strokeWidth",
       type: "number",
@@ -131,7 +150,7 @@ var meterMeta = {
     {
       name: "MeterTrack",
       type: "Base UI Track props + className + size",
-      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default."
+      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default \u2014 or, when the Meter has `segments`, its row of ticks (children are not rendered then)."
     },
     {
       name: "MeterIndicator",
@@ -157,11 +176,16 @@ var meterMeta = {
   tokensUsed: [
     "secondary",
     "primary",
+    "tone-3",
     "success",
     "tone-warning",
     "destructive",
     "foreground",
-    "muted-foreground"
+    "muted-foreground",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-3-mark"
   ],
   motion: [
     {
@@ -182,6 +206,12 @@ var meterMeta = {
       part: "MeterIndicator",
       why: "Width and colour ease on the motion tokens (no recipe animates width) when the reading changes \u2014 freeing space after a delete visibly shrinks the bar, so the user sees the cause and effect rather than a different bar."
     },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "MeterTrack (segments)",
+      why: "With segments, the fill runs through the ticks from the edge it is leaving \u2014 left to right as it grows, right to left as it shrinks \u2014 each tick easing its colour on the fast token after a stagger that is a share of the slow token (a full sweep is one slow duration) \xD7 --motion-expressive. Every tick switching at once would read as a different bar, not the same budget moving; `subtle` lands them together and off is instant."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -212,6 +242,23 @@ var meterMeta = {
 	</div>
 	<MeterTrack />
 </Meter>`
+    },
+    {
+      label: "Segmented spend limit",
+      code: `<Meter value={1240} max={2000} segments={40} getAriaValueText={() => "\u20AC1,240 of \u20AC2,000 spent this month"}>
+	<div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+		<MeterLabel>Monthly spend limit</MeterLabel>
+		<MeterValue>{() => "\u20AC1,240 / \u20AC2,000"}</MeterValue>
+	</div>
+	<MeterTrack />
+</Meter>`
+    },
+    {
+      label: "Segmented score cell",
+      code: `<div className="flex items-center gap-3">
+	<Meter value={8} max={10} segments={10} size="sm" tone="success" className="w-24" aria-label="ICP score" getAriaValueText={(_, v) => \`\${v} out of 10\`} />
+	<span className="text-mono-sm text-foreground">8/10</span>
+</div>`
     },
     {
       label: "Tones",

package/dist/components/meter/meter.variants.js

@@ -1,16 +1,17 @@
 // src/components/meter/meter.variants.ts
 import { cva } from "class-variance-authority";
+var meterToneFill = {
+  primary: "bg-primary",
+  "3": "bg-tone-3-mark",
+  success: "bg-success-mark",
+  warning: "bg-tone-warning-mark",
+  destructive: "bg-destructive-mark"
+};
 var meterIndicatorVariants = cva(
   "h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-decelerate",
   {
     variants: {
-      tone: {
-        primary: "bg-primary",
-        "3": "bg-tone-3",
-        success: "bg-success",
-        warning: "bg-tone-warning",
-        destructive: "bg-destructive"
-      }
+      tone: meterToneFill
     },
     defaultVariants: {
       tone: "primary"
@@ -29,6 +30,39 @@ var meterTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-se
     size: "md"
   }
 });
+var meterSegmentedTrackVariants = cva("flex w-full gap-0.5", {
+  variants: {
+    size: {
+      sm: "h-3",
+      md: "h-4",
+      lg: "h-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var meterTickVariants = cva(
+  // The corner follows the theme's smallest radius but stops at half a spacing
+  // step: a tick is a few px wide, and at the full radius-xs (4px in most
+  // themes) it rounded into a pill and the row read as a string of beads.
+  "h-full min-w-0 flex-1 rounded-[min(var(--radius-xs),--spacing(0.5))] transition-[background-color] duration-(--motion-duration-fast) ease-standard",
+  {
+    variants: {
+      tone: { primary: "", "3": "", success: "", warning: "", destructive: "" },
+      filled: { true: "", false: "bg-secondary" }
+    },
+    compoundVariants: Object.keys(meterToneFill).map((tone) => ({
+      tone,
+      filled: true,
+      class: meterToneFill[tone]
+    })),
+    defaultVariants: {
+      tone: "primary",
+      filled: false
+    }
+  }
+);
 var meterRingValueVariants = cva("absolute inset-0 flex items-center justify-center text-foreground", {
   variants: {
     size: {
@@ -57,5 +91,7 @@ export {
   meterIndicatorVariants,
   meterRingValueVariants,
   meterRingVariants,
+  meterSegmentedTrackVariants,
+  meterTickVariants,
   meterTrackVariants
 };

package/dist/components/note/note.meta.js

@@ -83,7 +83,11 @@ var noteMeta = {
     "tone-info",
     "tone-warning",
     "success",
-    "destructive"
+    "destructive",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark"
   ],
   motion: [
     {

package/dist/components/note/note.variants.js

@@ -5,10 +5,10 @@ var noteVariants = cva(
   {
     variants: {
       tone: {
-        info: "border-tone-info/30 bg-tone-info/10",
-        warning: "border-tone-warning/30 bg-tone-warning/10",
-        success: "border-success/30 bg-success/10",
-        destructive: "border-destructive/30 bg-destructive/10",
+        info: "border-tone-info-mark/30 bg-tone-info-mark/10",
+        warning: "border-tone-warning-mark/30 bg-tone-warning-mark/10",
+        success: "border-success-mark/30 bg-success-mark/10",
+        destructive: "border-destructive-mark/30 bg-destructive-mark/10",
         neutral: "border-border bg-muted/40"
       }
     },

package/dist/components/number-field/number-field.meta.js

@@ -80,8 +80,8 @@ var numberFieldMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "accent",

package/dist/components/otp-field/otp-field.meta.js

@@ -142,8 +142,8 @@ var otpFieldMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "border-strong",

package/dist/components/panel-group/panel-group.js

@@ -107,14 +107,11 @@ function PanelResizer({
       const delta = side === "left" ? ev.clientX - startX : startX - ev.clientX;
       onWidthChange(startWidth + delta);
     }
-    function onUp() {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    }
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    const drag = new AbortController();
+    const { signal } = drag;
+    window.addEventListener("pointermove", onMove, { signal });
+    window.addEventListener("pointerup", () => drag.abort(), { signal });
+    window.addEventListener("pointercancel", () => drag.abort(), { signal });
   }
   function onKeyDown(e) {
     const grow = side === "left" ? "ArrowRight" : "ArrowLeft";

package/dist/components/pie-chart/pie-chart.meta.js

@@ -168,7 +168,12 @@ var pieChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/radar-chart/radar-chart.meta.js

@@ -162,7 +162,12 @@ var radarChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/radial-chart/radial-chart.meta.js

@@ -174,7 +174,12 @@ var radialChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

package/dist/components/reaction-picker/index.js

@@ -0,0 +1,13 @@
+// src/components/reaction-picker/index.ts
+import {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker
+} from "./reaction-picker.js";
+import { reactionPickerMeta } from "./reaction-picker.meta.js";
+export {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker,
+  reactionPickerMeta
+};