@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/bar-graph.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type BarGraphSize      = "sm" | "md" | "lg"
+export type BarGraphDirection = "horizontal" | "vertical"
+
+export interface BarGraphItem {
+  /** Display label, e.g. `"Compliant"`, `"Q3"`. */
+  label: string
+  /** Absolute count shown beside the bar. The bar fill is `value / max`. */
+  value: number
+  /** Tailwind background utility, e.g. `"ax:bg-chart-1"`, `"ax:bg-success"`.
+   *  The track renders the same colour at 15 % opacity, mirroring the
+   *  Activity Rings idiom so bar charts and rings read as one system. */
+  color: string
+}
+
+export interface BarGraphProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** One item per bar, rendered in order. */
+  bars: BarGraphItem[]
+  /** Ceiling value - each bar fills to `value / max`.
+   *  Omit to let the tallest bar reach 100 % (relative comparison).
+   *  Pass explicitly when bars are fractions of a known whole. */
+  max?: number
+  /** Growth direction. `horizontal` grows left → right (default);
+   *  `vertical` grows bottom → top. */
+  direction?: BarGraphDirection
+  /** Visual density: drives bar thickness, chart height, and type scale. */
+  size?: BarGraphSize
+  /** Render the computed percentage beside / above each bar. Defaults to `true`. */
+  showPct?: boolean
+  /** Render the raw value count beside / above each bar. Defaults to `true`. */
+  showCount?: boolean
+  /** Horizontal-mode label alignment within its fixed-width column. `right`
+   *  (default) sets a shared axis flush against the bars; `left` aligns with
+   *  a left-aligned heading above the chart instead. No effect in `vertical`
+   *  mode (labels there are centred under each bar). */
+  labelAlign?: "left" | "right"
+}
+
+// ─── Size tokens ─────────────────────────────────────────────────────────────
+
+// Horizontal bar track height - mirrors the Progress bar height scale
+const H_TRACK_H: Record<BarGraphSize, string> = {
+  sm: "ax:h-1.5",
+  md: "ax:h-2.5",
+  lg: "ax:h-4",
+}
+
+// Vertical chart area height in px (bar drawing area, excluding label/stat space)
+const V_CHART_H: Record<BarGraphSize, number> = {
+  sm: 80,
+  md: 120,
+  lg: 160,
+}
+
+// Label column width (horizontal) - right-aligned so all bars share one axis
+const LABEL_W: Record<BarGraphSize, string> = {
+  sm: "ax:w-20",
+  md: "ax:w-28",
+  lg: "ax:w-32",
+}
+
+const LABEL_CLS: Record<BarGraphSize, string> = {
+  sm: "ax:t-label-2xs",
+  md: "ax:t-label-xs",
+  lg: "ax:t-label-xs",
+}
+
+const STAT_CLS: Record<BarGraphSize, string> = {
+  sm: "ax:t-micro",
+  md: "ax:t-caption",
+  lg: "ax:t-label-sm",
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const BarGraph = React.forwardRef<HTMLDivElement, BarGraphProps>(
+  (
+    {
+      bars,
+      max,
+      direction = "horizontal",
+      size = "md",
+      showPct = true,
+      showCount = true,
+      labelAlign = "right",
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedMax = max ?? Math.max(...bars.map((b) => b.value), 1)
+
+    // ── Vertical ─────────────────────────────────────────────────────────────
+    if (direction === "vertical") {
+      return (
+        <div
+          ref={ref}
+          className={cn("ax:flex ax:items-end ax:gap-sm", className)}
+          {...props}
+        >
+          {bars.map((bar, i) => {
+            const pct = Math.min(100, Math.max(0, (bar.value / resolvedMax) * 100))
+            return (
+              <div key={i} className="ax:flex ax:flex-col ax:items-center ax:gap-xs ax:flex-1 ax:min-w-0">
+                {/* Stats above bar - percentage + count */}
+                {(showPct || showCount) && (
+                  <div className={cn(STAT_CLS[size], "ax:flex ax:flex-col ax:items-center ax:gap-2xs ax:tabular-nums")}>
+                    {showPct   && <span className="ax:text-foreground ax:font-medium">{Math.round(pct)}%</span>}
+                    {showCount && <span className="ax:text-muted-foreground">{bar.value}</span>}
+                  </div>
+                )}
+
+                {/* Bar column: track behind fill, fill grows from bottom */}
+                <div
+                  className="ax:relative ax:w-full ax:overflow-hidden ax:rounded-md"
+                  style={{ height: V_CHART_H[size] }}
+                >
+                  {/* Track - same hue at 15 % opacity, matches the ring idiom */}
+                  <div className={cn("ax:absolute ax:inset-0", bar.color, "ax:opacity-[0.15]")} />
+                  {/* Fill - animated height from bottom */}
+                  <div
+                    className={cn(
+                      "ax:absolute ax:bottom-0 ax:left-0 ax:right-0 ax:rounded-md",
+                      bar.color,
+                      "ax:[transition:height_var(--motion-slow)_var(--motion-ease-out)]",
+                    )}
+                    style={{ height: `${pct}%` }}
+                  />
+                </div>
+
+                {/* Label below bar */}
+                <span
+                  className={cn(LABEL_CLS[size], "ax:text-muted-foreground ax:text-center ax:w-full ax:truncate")}
+                >
+                  {bar.label}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      )
+    }
+
+    // ── Horizontal (default) ──────────────────────────────────────────────────
+    return (
+      <div
+        ref={ref}
+        className={cn("ax:flex ax:flex-col ax:gap-sm", className)}
+        {...props}
+      >
+        {bars.map((bar, i) => {
+          const pct = Math.min(100, Math.max(0, (bar.value / resolvedMax) * 100))
+          return (
+            <div key={i} className="ax:flex ax:items-center ax:gap-sm">
+              {/* Row label - fixed-width column, right-aligned for clean axis */}
+              <span
+                className={cn(
+                  LABEL_CLS[size],
+                  LABEL_W[size],
+                  "ax:shrink-0 ax:text-muted-foreground",
+                  labelAlign === "left" ? "ax:text-left" : "ax:text-right",
+                )}
+              >
+                {bar.label}
+              </span>
+
+              {/* Track + fill */}
+              <div className={cn("ax:relative ax:flex-1 ax:overflow-hidden ax:rounded-full", H_TRACK_H[size])}>
+                {/* Track - same hue at 15 % opacity */}
+                <div className={cn("ax:absolute ax:inset-0", bar.color, "ax:opacity-[0.15]")} />
+                {/* Fill - animated width from left */}
+                <div
+                  className={cn(
+                    "ax:absolute ax:inset-y-0 ax:left-0 ax:rounded-full",
+                    bar.color,
+                    "ax:[transition:width_var(--motion-slow)_var(--motion-ease-out)]",
+                  )}
+                  style={{ width: `${pct}%` }}
+                />
+              </div>
+
+              {/* Stats - percentage + count, tabular so digits don't dance */}
+              <div className={cn(STAT_CLS[size], "ax:flex ax:items-baseline ax:gap-xs ax:shrink-0 ax:tabular-nums")}>
+                {showPct   && (
+                  <span className="ax:text-muted-foreground ax:w-9 ax:text-right">{Math.round(pct)}%</span>
+                )}
+                {showCount && (
+                  <span className="ax:text-foreground ax:font-medium">{bar.value}</span>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
+  },
+)
+BarGraph.displayName = "BarGraph"

package/src/components/bento-grid.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { BentoGrid, BentoItem } from "./bento-grid"
+
+const meta: Meta<typeof BentoGrid> = {
+  title: "Components/BentoGrid",
+  component: BentoGrid,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof BentoGrid>
+
+export const Default: Story = {
+  render: () => (
+    <BentoGrid cols={3} className="ax:max-w-3xl">
+      <BentoItem colSpan={2} className="ax:p-lg">Wide feature</BentoItem>
+      <BentoItem className="ax:p-lg">Side card</BentoItem>
+      <BentoItem className="ax:p-lg">Analytics</BentoItem>
+      <BentoItem colSpan={2} className="ax:p-lg">Reports</BentoItem>
+    </BentoGrid>
+  ),
+}

package/src/components/bento-grid.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+// ─── Column / row span lookup tables ─────────────────────────────────────────
+// Full class strings required so Tailwind's JIT includes them in the bundle.
+
+const GRID_COLS = {
+  2: "ax:grid-cols-2",
+  3: "ax:grid-cols-3",
+  4: "ax:grid-cols-4",
+} as const
+
+const COL_SPAN = {
+  1: "ax:col-span-1",
+  2: "ax:col-span-2",
+  3: "ax:col-span-3",
+  4: "ax:col-span-4",
+} as const
+
+const ROW_SPAN = {
+  1: "ax:row-span-1",
+  2: "ax:row-span-2",
+  3: "ax:row-span-3",
+} as const
+
+// ─── BentoGrid ────────────────────────────────────────────────────────────────
+
+export interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of columns at all breakpoints. Default: 3. */
+  cols?: 2 | 3 | 4
+}
+
+export const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
+  ({ className, cols = 3, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("ax:grid ax:gap-3", GRID_COLS[cols], className)}
+      {...props}
+    />
+  )
+)
+BentoGrid.displayName = "BentoGrid"
+
+// ─── BentoItem ────────────────────────────────────────────────────────────────
+
+export interface BentoItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** How many grid columns this cell spans. Default: 1. */
+  colSpan?: 1 | 2 | 3 | 4
+  /** How many grid rows this cell spans. Default: 1. */
+  rowSpan?: 1 | 2 | 3
+}
+
+export const BentoItem = React.forwardRef<HTMLDivElement, BentoItemProps>(
+  ({ className, colSpan = 1, rowSpan = 1, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "ax:rounded-2xl ax:bg-card ax:border ax:border-border ax:overflow-hidden",
+        COL_SPAN[colSpan],
+        ROW_SPAN[rowSpan],
+        className
+      )}
+      {...props}
+    />
+  )
+)
+BentoItem.displayName = "BentoItem"

package/src/components/blockquote.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Blockquote, BlockquoteCaption, BlockquoteFigure } from "./blockquote"
+
+const meta: Meta<typeof Blockquote> = {
+  title: "Components/Blockquote",
+  component: Blockquote,
+  tags: ["autodocs"],
+  args: {
+    children: "Design is not just what it looks like. Design is how it works.",
+    size: "md",
+    color: "primary",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Blockquote>
+
+export const Default: Story = {}
+
+export const WithCaption: Story = {
+  render: (args) => (
+    <BlockquoteFigure>
+      <Blockquote {...args} />
+      <BlockquoteCaption>Steve Jobs</BlockquoteCaption>
+    </BlockquoteFigure>
+  ),
+}

package/src/components/blockquote.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type BlockquoteSize  = "sm" | "md" | "lg" | "xl"
+export type BlockquoteColor = "primary" | "neutral"
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+export const blockquoteVariants = cva(
+  "ax:border-l-2 ax:pl-4 ax:text-foreground",
+  {
+    variants: {
+      size: {
+        sm: "ax:t-body-sm",
+        md: "ax:t-body-md",
+        lg: "ax:t-body-lg",
+        // xl is one step bigger than t-body-lg for editorial / hero quotes.
+        // No t-body-xl exists, but font-normal makes the body intent explicit.
+        xl: "ax:text-xl ax:font-normal ax:leading-normal",
+      },
+      color: {
+        primary: "ax:border-primary",
+        neutral: "ax:border-border-strong",
+      },
+    },
+    defaultVariants: {
+      size:  "md",
+      color: "primary",
+    },
+  }
+)
+
+// ─── Figure wrapper ───────────────────────────────────────────────────────────
+//
+// Renders `<figure>` so a contained <figcaption> (via BlockquoteCaption) is
+// valid HTML. Use whenever Blockquote is paired with a caption.
+
+export interface BlockquoteFigureProps extends React.HTMLAttributes<HTMLElement> {}
+
+export const BlockquoteFigure = React.forwardRef<HTMLElement, BlockquoteFigureProps>(
+  ({ className, ...props }, ref) => (
+    // Pure structural wrapper: the caption manages its own top margin so the
+    // figure has no styling opinions of its own.
+    <figure ref={ref} className={className} {...props} />
+  )
+)
+BlockquoteFigure.displayName = "BlockquoteFigure"
+
+// ─── Blockquote ───────────────────────────────────────────────────────────────
+
+export interface BlockquoteProps
+  extends Omit<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, "color">,
+    VariantProps<typeof blockquoteVariants> {}
+
+export const Blockquote = React.forwardRef<HTMLQuoteElement, BlockquoteProps>(
+  ({ className, size, color, ...props }, ref) => (
+    <blockquote
+      ref={ref}
+      className={cn(blockquoteVariants({ size, color }), className)}
+      {...props}
+    />
+  )
+)
+Blockquote.displayName = "Blockquote"
+
+// ─── Caption ──────────────────────────────────────────────────────────────────
+//
+// Renders `<figcaption>` for attribution. Must be a child of `<BlockquoteFigure>`
+// (or any `<figure>`) to be valid HTML: `<figcaption>` outside `<figure>` is
+// invalid markup that screen readers handle inconsistently.
+
+export interface BlockquoteCaptionProps extends React.HTMLAttributes<HTMLElement> {}
+
+export const BlockquoteCaption = React.forwardRef<HTMLElement, BlockquoteCaptionProps>(
+  ({ className, ...props }, ref) => (
+    <figcaption
+      ref={ref}
+      className={cn("ax:mt-2 ax:t-body-sm ax:text-muted-foreground", className)}
+      {...props}
+    />
+  )
+)
+BlockquoteCaption.displayName = "BlockquoteCaption"

package/src/components/box-list.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { BoxList } from "./box-list"
+
+const items = [
+  { title: "Unlimited projects", description: "Create as many workspaces as you need." },
+  { title: "Team collaboration", description: "Invite teammates and assign roles." },
+  { title: "Priority support", description: "Get help within one business day." },
+]
+
+const meta: Meta<typeof BoxList> = {
+  title: "Components/BoxList",
+  component: BoxList,
+  tags: ["autodocs"],
+  args: { items, columns: 3 },
+}
+
+export default meta
+type Story = StoryObj<typeof BoxList>
+
+export const Default: Story = {}
+
+export const WithChecks: Story = {
+  args: { check: true },
+}

package/src/components/box-list.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { Check } from "lucide-react"
+import { cn } from "../lib/cn"
+
+export interface BoxListItem {
+  /** Heading line, rendered with the title type token. Omit for a plain
+   *  body-text item (the `description` reads as the box's only line). */
+  title?: React.ReactNode
+  /** Supporting line. Sits under a `title`, or stands alone as body text. */
+  description?: React.ReactNode
+}
+
+/** Responsive column count at desktop. */
+const COLUMNS: Record<1 | 2 | 3 | 4, string> = {
+  1: "",
+  2: "ax:sm:grid-cols-2",
+  3: "ax:sm:grid-cols-2 ax:lg:grid-cols-3",
+  4: "ax:sm:grid-cols-2 ax:lg:grid-cols-4",
+}
+
+export type BoxListSize = "sm" | "md" | "lg"
+
+/** Box padding per size. */
+const SIZE: Record<BoxListSize, string> = {
+  sm: "ax:p-md",
+  md: "ax:p-lg",
+  lg: "ax:p-xl",
+}
+
+/** Type scale per text size - steps the title and body line up together. */
+const TEXT: Record<BoxListSize, { title: string; desc: string }> = {
+  sm: { title: "ax:t-h6", desc: "ax:t-caption" },
+  md: { title: "ax:t-h5", desc: "ax:t-body-sm" },
+  lg: { title: "ax:t-h4", desc: "ax:t-body-md" },
+}
+
+export interface BoxListProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: BoxListItem[]
+  /** Columns at desktop (1–4). Default 3. Ignored when `vertical`. */
+  columns?: 1 | 2 | 3 | 4
+  /** Box padding. Default "lg". */
+  size?: BoxListSize
+  /** Type scale for the title + description. Default "md". */
+  textSize?: BoxListSize
+  /** Stack items in a single vertical column instead of a grid. Overrides
+   *  `columns`. */
+  vertical?: boolean
+  /** Show a leading bullet dot before each item's title. */
+  bullet?: boolean
+  /** Show a leading Check icon before each item's title - for "included" /
+   *  affirmative sets. Takes precedence over `bullet` when both are set. */
+  check?: boolean
+  /** Show a two-digit ordinal (01, 02, …) as a t-overline eyebrow above each
+   *  item. Takes precedence over `check` and `bullet` when several are set. */
+  numerical?: boolean
+  /** Sit each item on the muted surface (`bg-muted`) instead of the default
+   *  card surface - a softer, lower-contrast fill for secondary lists. */
+  muted?: boolean
+}
+
+/**
+ * BoxList - a responsive grid of bordered "box" cards, each a title with an
+ * optional supporting line. The tidy way to present a set of features,
+ * services, terms or options without hand-rolling the card + grid each time.
+ *
+ * Optionally mark each item (precedence: numerical → check → bullet):
+ * `numerical` prefixes a 01, 02, … eyebrow (ordered sequences), `check` a Check
+ * icon (affirmative sets), or `bullet` a leading dot (an unordered set).
+ */
+export function BoxList({ items, columns = 3, size = "lg", textSize = "md", vertical = false, bullet = false, check = false, numerical = false, muted = false, className, ...props }: BoxListProps) {
+  return (
+    <div
+      className={cn(
+        "ax:gap-2xs",
+        vertical ? "ax:flex ax:flex-col" : cn("ax:grid", COLUMNS[columns]),
+        className,
+      )}
+      {...props}
+    >
+      {items.map((item, i) => (
+        <div key={i} className={cn("ax:rounded-xs", muted ? "ax:bg-muted" : "ax:bg-card", SIZE[size])}>
+          {numerical && (
+            <div className="ax:mb-sm ax:t-overline ax:text-primary">{String(i + 1).padStart(2, "0")}</div>
+          )}
+          <div className="ax:flex ax:items-center ax:gap-sm">
+            {!numerical && check && (
+              <Check aria-hidden="true" className="ax:size-4 ax:shrink-0 ax:text-primary" />
+            )}
+            {!numerical && !check && bullet && (
+              <span aria-hidden="true" className="ax:size-1.5 ax:shrink-0 ax:rounded-full ax:bg-foreground-strong" />
+            )}
+            <div
+              className={cn(
+                item.title != null ? TEXT[textSize].title : TEXT[textSize].desc,
+                "ax:text-foreground",
+              )}
+            >
+              {item.title ?? item.description}
+            </div>
+          </div>
+          {item.title != null && item.description != null && (
+            <div className={cn("ax:mt-2xs ax:text-muted-foreground", TEXT[textSize].desc)}>{item.description}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/bullet-list.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { BulletList, BulletListItem } from "./bullet-list"
+
+const meta: Meta<typeof BulletList> = {
+  title: "Components/BulletList",
+  component: BulletList,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof BulletList>
+
+export const Default: Story = {
+  render: () => (
+    <BulletList>
+      <BulletListItem>Responsive by default</BulletListItem>
+      <BulletListItem>Accessible components</BulletListItem>
+      <BulletListItem>Brand-aware tokens</BulletListItem>
+    </BulletList>
+  ),
+}

package/src/components/bullet-list.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export type BulletListSize = "sm" | "md" | "lg"
+
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+//
+// Text uses the matching `t-body-*` token so the bullet rhythm tracks the
+// surrounding prose. Bullet diameter scales with text size; row gap stays at
+// `gap-sm` (12px), comfortable across all three sizes without feeling loose.
+
+const TEXT_CLASS: Record<BulletListSize, string> = {
+  sm: "ax:t-body-sm",
+  md: "ax:t-body-md",
+  lg: "ax:t-body-lg",
+}
+
+const BULLET_CLASS: Record<BulletListSize, string> = {
+  sm: "ax:size-1",      // 4px
+  md: "ax:size-1.5",    // 6px
+  lg: "ax:size-2",      // 8px
+}
+
+const ROW_GAP_CLASS: Record<BulletListSize, string> = {
+  sm: "ax:gap-xs",
+  md: "ax:gap-sm",
+  lg: "ax:gap-sm",
+}
+
+const LIST_GAP_CLASS: Record<BulletListSize, string> = {
+  sm: "ax:space-y-2xs",
+  md: "ax:space-y-xs",
+  lg: "ax:space-y-sm",
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+//
+// Size is propagated via context so an item can pick up the right text/bullet
+// classes without the consumer threading it through every <BulletListItem>.
+
+interface BulletListContextValue {
+  size: BulletListSize
+}
+
+const BulletListContext = React.createContext<BulletListContextValue>({ size: "md" })
+
+// ─── BulletList ───────────────────────────────────────────────────────────────
+
+export interface BulletListProps extends React.HTMLAttributes<HTMLUListElement> {
+  size?: BulletListSize
+}
+
+/** Bulleted list with a small foreground-strong dot, body-text rhythm, and
+ *  consistent spacing. Compose with `BulletListItem`. Use for short lists
+ *  of related items (goals, features, qualities) where the surrounding
+ *  context already provides the heading. */
+export const BulletList = React.forwardRef<HTMLUListElement, BulletListProps>(
+  ({ size = "md", className, children, ...props }, ref) => (
+    <BulletListContext.Provider value={{ size }}>
+      <ul
+        ref={ref}
+        className={cn("ax:list-none", LIST_GAP_CLASS[size], className)}
+        {...props}
+      >
+        {children}
+      </ul>
+    </BulletListContext.Provider>
+  ),
+)
+BulletList.displayName = "BulletList"
+
+// ─── BulletListItem ───────────────────────────────────────────────────────────
+
+export interface BulletListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {}
+
+export const BulletListItem = React.forwardRef<HTMLLIElement, BulletListItemProps>(
+  ({ className, children, ...props }, ref) => {
+    const { size } = React.useContext(BulletListContext)
+    return (
+      <li
+        ref={ref}
+        className={cn(
+          "ax:flex ax:items-center ax:text-foreground",
+          ROW_GAP_CLASS[size],
+          TEXT_CLASS[size],
+          className,
+        )}
+        {...props}
+      >
+        <span
+          aria-hidden="true"
+          className={cn("ax:rounded-full ax:shrink-0 ax:bg-foreground-strong", BULLET_CLASS[size])}
+        />
+        <span>{children}</span>
+      </li>
+    )
+  },
+)
+BulletListItem.displayName = "BulletListItem"