@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/composed/chat/flowchart/step-body.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { SelectChip, SourceChip } from "@/components/atoms/chip";
 import { FLAVORS, PROPERTIES, TOPPINGS } from "./constant";
-import type { StepNode } from "./types";
+import type { TStepNode } from "./types";
 import { mix } from "./utils";
 
 /* ── icons ── */
@@ -15,7 +15,7 @@ function ConeIcon({ size = 16 }: { size?: number }) {
   );
 }
 
-export function StepBody({ node }: { node: StepNode }) {
+export function StepBody({ node }: { node: TStepNode }) {
   const hue = node.hue ?? "var(--accent-default)";
   return (
     <div className="flex items-center gap-2.5 p-2.5">

package/src/components/composed/chat/flowchart/types.ts

@@ -1,12 +1,12 @@
 import type { SVGProps } from "react"
 
-export type FlowchartSide = "top" | "right" | "bottom" | "left"
+export type TFlowchartSide = "top" | "right" | "bottom" | "left"
 
-export interface FlowchartProps {
+export interface IFlowchartProps {
   /** Cards to lay out. Defaults to the Trigger → If / Else sample. */
-  steps?: StepNode[]
+  steps?: TStepNode[]
   /** Connectors. Defaults to a chain through `steps` in order. */
-  edges?: Edge[]
+  edges?: TEdge[]
   /** No drag, no add / remove buttons. Selection still works. */
   readOnly?: boolean
   /** Ctrl/⌘ + wheel and the +/− buttons scale the canvas. */
@@ -14,7 +14,7 @@ export interface FlowchartProps {
   /** A card was dragged; `offset` is its displacement from the laid-out position. */
   onDrag?: (id: string, offset: { dx: number; dy: number }) => void
   /** The add button on one side of a card was pressed. */
-  onAdd?: (id: string, side: FlowchartSide) => void
+  onAdd?: (id: string, side: TFlowchartSide) => void
   /** The remove button was pressed (already confirmed when children would be orphaned). */
   onRemove?: (id: string) => void
   /**
@@ -26,9 +26,9 @@ export interface FlowchartProps {
   /** Disconnect was pressed on a selected connector. Enables connector editing. */
   onEdgeRemove?: (id: string) => void
   /** A connector end was dropped on another card; `edge` carries the new source / target. */
-  onEdgeConnect?: (edge: Edge) => void
+  onEdgeConnect?: (edge: TEdge) => void
   /** Stroke width or colour picked from the connector toolbar. */
-  onEdgeChange?: (id: string, patch: Pick<Edge, "strokeWidth" | "color">) => void
+  onEdgeChange?: (id: string, patch: Pick<TEdge, "strokeWidth" | "color">) => void
   /** The pill was renamed inline (double-click, then click away or Enter). */
   onRename?: (id: string, name: string) => void
   /** "Duplicate" in the context menu: copy the card to a new node on its right. */
@@ -38,7 +38,7 @@ export interface FlowchartProps {
   className?: string
 }
 
-export type StepNode = {
+export type TStepNode = {
   id: string
   row: number
   x: number // 0–1 center of the node
@@ -58,7 +58,7 @@ export type StepNode = {
   children?: React.ReactNode
 }
 
-export type Edge = {
+export type TEdge = {
   id: string
   source: string
   target: string
@@ -68,10 +68,10 @@ export type Edge = {
   color?: string
 }
 
-export type EdgeEnd = "source" | "target"
+export type TEdgeEnd = "source" | "target"
 
-export interface ConnectorProps extends Omit<SVGProps<SVGPathElement>, "strokeWidth"> {
-  edge: Edge
+export interface IConnectorProps extends Omit<SVGProps<SVGPathElement>, "strokeWidth"> {
+  edge: TEdge
   isLit: boolean
   strokeWidth?: number
   /** Selected for editing: bolder hit, toolbar and end handles render in Root. */
@@ -80,8 +80,8 @@ export interface ConnectorProps extends Omit<SVGProps<SVGPathElement>, "strokeWi
   onPick?: (id: string) => void
 }
 
-export interface ChartNodeProps {
-  node: StepNode
+export interface IChartNodeProps {
+  node: TStepNode
   /** Position in `steps`, for the generated "Node n" label. */
   index?: number
   onRef: (el: HTMLDivElement | null) => void

package/src/components/composed/chat/flowchart/utils.ts

@@ -1,24 +1,24 @@
 import { PAD_Y, PILL_OFFSET, ROW_GAP } from "./constant";
-import type { StepNode } from "./types";
+import type { TStepNode } from "./types";
 
-export type Offsets = Record<string, { dx: number; dy: number }>;
-export type Heights = Record<string, number>;
+export type TOffsets = Record<string, { dx: number; dy: number }>;
+export type THeights = Record<string, number>;
 
 /** Everything `place`/`bezier` need to position a node, resolved once per render. */
-export type Layout = {
+export type TLayout = {
   width: number;
-  offsets: Offsets;
+  offsets: TOffsets;
   rows: number[];
   rowY: number[];
-  heights: Heights;
+  heights: THeights;
 };
 
 /** Distinct row indices, ascending. */
-export const rows = (steps: StepNode[]) =>
+export const rows = (steps: TStepNode[]) =>
   [...new Set(steps.map((n) => n.row))].sort((a, b) => a - b);
 
 /** Height of each row = tallest node in it. */
-export const rowH = (steps: StepNode[], heights: Heights) =>
+export const rowH = (steps: TStepNode[], heights: THeights) =>
   rows(steps).map((r) =>
     Math.max(...steps.filter((n) => n.row === r).map((n) => heights[n.id] ?? 90)),
   );
@@ -35,7 +35,7 @@ export const mix = (hue: string, pct: number, base = "var(--surface)") =>
 
 export const cw = (width: number) => width || 480;
 
-export const place = (n: StepNode, { width, offsets, rows, rowY }: Layout) => {
+export const place = (n: TStepNode, { width, offsets, rows, rowY }: TLayout) => {
   const w = Math.min(n.w, cw(width) * 0.92);
   const off = offsets[n.id];
   return {
@@ -46,7 +46,7 @@ export const place = (n: StepNode, { width, offsets, rows, rowY }: Layout) => {
 };
 
 /** Card anchor points (pills sit above the card, so offset the top). */
-export const anchors = (n: StepNode, layout: Layout) => {
+export const anchors = (n: TStepNode, layout: TLayout) => {
   const { cx, top } = place(n, layout);
   return {
     top: { x: cx, y: top + (n.kind ? PILL_OFFSET : 0) },
@@ -54,25 +54,25 @@ export const anchors = (n: StepNode, layout: Layout) => {
   };
 };
 
-export type Point = { x: number; y: number };
+export type TPoint = { x: number; y: number };
 
 /** Vertical S-curve between two points. */
-export const curve = (from: Point, to: Point) => {
+export const curve = (from: TPoint, to: TPoint) => {
   const k = Math.min(Math.max(Math.abs(to.y - from.y) * 0.55, 24), 84);
   return `M ${from.x} ${from.y} C ${from.x} ${from.y + k}, ${to.x} ${to.y - k}, ${to.x} ${to.y}`;
 };
 
 /** Cubic bezier midpoint, where the connector toolbar sits. */
-export const midpoint = (from: Point, to: Point): Point => ({ x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 });
+export const midpoint = (from: TPoint, to: TPoint): TPoint => ({ x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 });
 
-export const edgePoints = (edge: { from: string; to: string }, steps: StepNode[], layout: Layout) => {
+export const edgePoints = (edge: { from: string; to: string }, steps: TStepNode[], layout: TLayout) => {
   const a = steps.find((n) => n.id === edge.from);
   const b = steps.find((n) => n.id === edge.to);
   if (!a || !b) return null;
   return { from: anchors(a, layout).bottom, to: anchors(b, layout).top };
 };
 
-export const bezier = (edge: { from: string; to: string }, steps: StepNode[], layout: Layout) => {
+export const bezier = (edge: { from: string; to: string }, steps: TStepNode[], layout: TLayout) => {
   const pts = edgePoints(edge, steps, layout);
   return pts ? curve(pts.from, pts.to) : "";
 };

package/src/components/composed/chat/index.ts

@@ -1,23 +1,17 @@
 export {
   Attachment,
-  type AttachmentKind,
-  type AttachmentProps,
-  type AttachmentVariant,
+  type TAttachmentKind,
+  type TAttachmentProps,
+  type TAttachmentVariant,
 } from "./attachment"
-export {
-  Chart,
-  type ChartDatum,
-  type ChartProps,
-  type ChartSeries,
-  type ChartType,
-} from "./chart"
+export * from "./chart"
 export {
   Markdown,
   markdownViewAtom,
   removeMarkdownInstance,
   useMarkdownView,
-  type MarkdownProps,
-  type MarkdownView,
+  type IMarkdownProps,
+  type TMarkdownView,
 } from "./markdown"
 // `SuggestedPrompts`, `SendButton` and `AddButton` stay off the barrel on
 // purpose: `blocks/ai-panel` and `ui/chat` already export those names, and
@@ -35,10 +29,12 @@ export {
   useComposerAttachments,
 } from "./composer"
 export type {
-  ComposerAttachment,
-  ComposerBaseProps,
-  ComposerMode,
-  ComposerSuggestionsProps,
+  TComposerAttachment,
+  IComposerModel,
+  IComposerOption,
+  IComposerBaseProps,
+  TComposerMode,
+  IComposerSuggestionsProps,
   IComposerMenuProps,
   IComposerProps,
   IComposerSubmitButtonProps,
@@ -46,51 +42,51 @@ export type {
 
 export { Recommendation, RecommendationCard } from "./recommendation"
 export type {
-  RecommendationCardProps,
-  RecommendationCheckboxProps,
-  RecommendationEntity,
-  RecommendationFields,
-  RecommendationGroupProps,
-  RecommendationItemProps,
-  RecommendationOption,
-  RecommendationState,
+  IRecommendationCardProps,
+  IRecommendationCheckboxProps,
+  IRecommendationEntity,
+  IRecommendationFields,
+  TRecommendationGroupProps,
+  IRecommendationItemProps,
+  IRecommendationOption,
+  TRecommendationState,
 } from "./recommendation"
 export {
   ContextCards,
-  type ContextCard,
-  type ContextCardsProps,
+  type IContextCard,
+  type IContextCardsProps,
 } from "./context-cards"
 export {
   CodeBlock,
   tokenize,
-  type CodeBlockProps,
-  type CodeDiffLine,
+  type ICodeBlockProps,
+  type ICodeDiffLine,
 } from "./code-block"
 export {
   FilterTable,
   filterTableFilterAtom,
   removeFilterTableInstance,
-  type FilterTableColumn,
-  type FilterTableProps,
-  type FilterTableStatus,
+  type IFilterTableColumn,
+  type IFilterTableProps,
+  type IFilterTableStatus,
 } from "./filter-table"
 export {
   RecordsTable,
   recordsTableSelectionAtom,
   removeRecordsTableInstance,
-  type RecordsColumnKey,
-  type RecordsRow,
-  type RecordsTableProps,
+  type TRecordsColumnKey,
+  type IRecordsRow,
+  type IRecordsTableProps,
 } from "./records-table"
 export * from "./flowchart"
-export { type ChartNodeProps, type FlowchartProps } from "./flowchart"
+export { type IChartNodeProps, type IFlowchartProps } from "./flowchart"
 export {
   InsightCards,
   InsightEntity,
-  type Insight,
-  type InsightAllocation,
-  type InsightSegment,
-  type InsightCardsProps,
+  type IInsight,
+  type IInsightAllocation,
+  type IInsightSegment,
+  type IInsightCardsProps,
 } from "./insight-cards"
 
 export { SendHint } from "./hint"

package/src/components/composed/chat/insight-cards.tsx

@@ -6,39 +6,39 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { Card, CardFrame, CardFrameHeader, CardPanel } from "@/components/ui/card"
 import { SPRING_SWAP } from "@/lib/ease"
-import { DOT_TONE_CLASSES, Dot, FollowUpRow, IconButton, Pill, Stat, type DotTone, type StatProps } from "@/components/ui/chat"
-import { Chart, type ChartDatum, type ChartSeries } from "./chart"
+import { DOT_TONE_CLASSES, Dot, FollowUpRow, IconButton, Pill, Stat, type TDotTone, type IStatProps } from "@/components/ui/chat"
+import { Chart, type TChartDatum, type IChartSeries } from "./chart"
 
-export interface Insight {
+export interface IInsight {
   /** Sentence; `entity` is highlighted with a dot in front. */
   summary: React.ReactNode
-  stats?: StatProps[]
-  snapshot?: { label?: React.ReactNode; badge?: React.ReactNode; data: ChartDatum[]; series: ChartSeries[] }
+  stats?: IStatProps[]
+  snapshot?: { label?: React.ReactNode; badge?: React.ReactNode; data: TChartDatum[]; series: IChartSeries[] }
   /** Share breakdown: tile + big value, a segmented bar, selectable legend pills and a detail panel. */
-  allocation?: InsightAllocation
+  allocation?: IInsightAllocation
   followUp?: string
 }
 
-export interface InsightSegment {
+export interface IInsightSegment {
   key: string
   label: React.ReactNode
   value: number
-  tone?: DotTone
+  tone?: TDotTone
   /** Detail panel heading; falls back to `label`. */
   title?: React.ReactNode
   description?: React.ReactNode
 }
 
-export interface InsightAllocation {
+export interface IInsightAllocation {
   label: React.ReactNode
   value: React.ReactNode
   /** Letter in the tile; takes the first segment's tone. */
   initials?: string
-  segments: InsightSegment[]
+  segments: IInsightSegment[]
   defaultSelected?: string
 }
 
-const TONE_TEXT: Record<DotTone, string> = {
+const TONE_TEXT: Record<TDotTone, string> = {
   success: "text-semantic-success", warning: "text-semantic-warning", info: "text-semantic-info", danger: "text-semantic-danger",
   neutral: "text-text-muted", accent: "text-accent-default", brand: "text-brand",
   "series-1": "text-chart-series-1", "series-2": "text-chart-series-2", "series-3": "text-chart-series-3", "series-4": "text-chart-series-4", "series-5": "text-chart-series-5",
@@ -47,12 +47,12 @@ const TONE_TEXT: Record<DotTone, string> = {
 const pct = (n: number, total: number) => `${Math.round((n / total) * 1000) / 10}%`
 
 /** @sketch beautiful-ui "Insight Cards / allocation" — segment selection changes the inspected group without moving the card. */
-function Allocation({ label, value, initials, segments, defaultSelected }: InsightAllocation): React.ReactElement {
+function Allocation({ label, value, initials, segments, defaultSelected }: IInsightAllocation): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const [selected, setSelected] = React.useState(defaultSelected ?? segments[0]?.key)
   const total = segments.reduce((n, s) => n + s.value, 0) || 1
   const active = segments.find((s) => s.key === selected) ?? segments[0]
-  const tone = (s?: InsightSegment) => s?.tone ?? "series-1"
+  const tone = (s?: IInsightSegment) => s?.tone ?? "series-1"
 
   return (
     <CardPanel data-slot="insight-allocation" className="flex flex-col gap-3 p-3">
@@ -115,9 +115,9 @@ function Allocation({ label, value, initials, segments, defaultSelected }: Insig
   )
 }
 
-export interface InsightCardsProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface IInsightCardsProps extends React.ComponentPropsWithoutRef<"div"> {
   header?: React.ReactNode
-  insights: Insight[]
+  insights: IInsight[]
   index?: number
   defaultIndex?: number
   onIndexChange?: (index: number) => void
@@ -130,7 +130,7 @@ export interface InsightCardsProps extends React.ComponentPropsWithoutRef<"div">
  *
  * @sketch "Component / Insight Cards"
  */
-export function InsightCards({ header = "Insights", insights, index, defaultIndex = 0, onIndexChange, onFollowUp, className, ...props }: InsightCardsProps): React.ReactElement {
+export function InsightCards({ header = "Insights", insights, index, defaultIndex = 0, onIndexChange, onFollowUp, className, ...props }: IInsightCardsProps): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const [internal, setInternal] = React.useState(defaultIndex)
   const current = Math.min(index ?? internal, Math.max(insights.length - 1, 0))
@@ -193,7 +193,7 @@ export function InsightCards({ header = "Insights", insights, index, defaultInde
 }
 
 /** Inline entity marker for `Insight.summary`: dot + name. */
-export function InsightEntity({ tone = "neutral", children }: { tone?: DotTone; children: React.ReactNode }): React.ReactElement {
+export function InsightEntity({ tone = "neutral", children }: { tone?: TDotTone; children: React.ReactNode }): React.ReactElement {
   return <><Dot tone={tone} size={8} /> {children}</>
 }
 

package/src/components/composed/chat/markdown-atom.ts

@@ -2,12 +2,12 @@ import { useAtom } from "jotai"
 
 import { createKeyedFamilies } from "@/lib/keyed-atom"
 
-export type MarkdownView = "preview" | "markup"
+export type TMarkdownView = "preview" | "markup"
 
 const { stateFamily, removeInstance } = createKeyedFamilies("markdown")
 
 /** Which pane a Markdown card shows, keyed by its `markdownId`; `null` until first toggled (the card then falls back to its `defaultView`). */
-export const markdownViewAtom = stateFamily<MarkdownView | null>("view", null)
+export const markdownViewAtom = stateFamily<TMarkdownView | null>("view", null)
 export const removeMarkdownInstance = removeInstance
 
 export function useMarkdownView(markdownId: string) {

package/src/components/composed/chat/markdown.tsx

@@ -17,7 +17,7 @@ import { Tabs, TabsList, TabsTab } from "@/components/ui/tabs"
 import {
   markdownViewAtom,
   removeMarkdownInstance,
-  type MarkdownView,
+  type TMarkdownView,
   useMarkdownView,
 } from "./markdown-atom"
 
@@ -25,7 +25,7 @@ export {
   markdownViewAtom,
   removeMarkdownInstance,
   useMarkdownView,
-  type MarkdownView,
+  type TMarkdownView,
 }
 
 const VIEWS = [
@@ -94,7 +94,7 @@ const COMPONENTS: Components = {
   ),
 }
 
-export interface MarkdownProps extends Omit<
+export interface IMarkdownProps extends Omit<
   React.ComponentPropsWithoutRef<"div">,
   "onCopy"
 > {
@@ -102,9 +102,9 @@ export interface MarkdownProps extends Omit<
   source: string
   /** Stable id for the view atom. Unnamed cards key off `useId()`. */
   markdownId?: string
-  view?: MarkdownView
-  defaultView?: MarkdownView
-  onViewChange?: (view: MarkdownView) => void
+  view?: TMarkdownView
+  defaultView?: TMarkdownView
+  onViewChange?: (view: TMarkdownView) => void
   onCopy?: (source: string) => void
   onExpand?: () => void
   /** Drop the card border (inside an AiBubble the bubble supplies it). */
@@ -127,7 +127,7 @@ export function Markdown({
   bare = false,
   className,
   ...props
-}: MarkdownProps): React.ReactElement {
+}: IMarkdownProps): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const generatedId = React.useId()
   const id = markdownId ?? generatedId
@@ -137,8 +137,8 @@ export function Markdown({
     return () => removeMarkdownInstance(id)
   }, [markdownId, id])
 
-  const current: MarkdownView = view ?? stored ?? defaultView ?? "preview"
-  const select = (next: MarkdownView) => {
+  const current: TMarkdownView = view ?? stored ?? defaultView ?? "preview"
+  const select = (next: TMarkdownView) => {
     if (view === undefined) setStored(next)
     onViewChange?.(next)
   }
@@ -159,7 +159,7 @@ export function Markdown({
         <Tabs
           className="gap-0"
           value={current}
-          onValueChange={(next) => select(next as MarkdownView)}
+          onValueChange={(next) => select(next as TMarkdownView)}
         >
           <TabsList aria-label="Markdown view" size="xs">
             {VIEWS.map((v) => (

package/src/components/composed/chat/recommendation/checkbox.tsx

@@ -5,19 +5,8 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import type * as React from "react"
 import { EASE_OUT_STRONG } from "@/lib/ease"
 import { cn } from "@/lib/utils"
-import type { RecommendationState } from "./types"
-
-export interface RecommendationCheckboxProps {
-  state: RecommendationState
-  /** Number shown inside the pending ring (its position in the group). */
-  step?: number
-  className?: string
-}
-
-const SIZE = 18
-const STROKE = 1.5
-const R = (SIZE - STROKE) / 2
-const C = 2 * Math.PI * R
+import type { IRecommendationCheckboxProps } from "./types"
+import { SIZE, STROKE, R, C } from "./constant"
 
 /**
  * Outcome mark after beautiful-ui's Task Rows: a Sparkle while the proposal
@@ -29,7 +18,7 @@ export function Checkbox({
   state,
   step,
   className,
-}: RecommendationCheckboxProps): React.ReactElement {
+}: IRecommendationCheckboxProps): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const transition = reduceMotion
     ? { duration: 0 }

package/src/components/composed/chat/recommendation/constant.ts

@@ -1,14 +1,15 @@
-import type { SignalLevel, TagTone } from "@/components/ui/chat"
-import type { RecommendationState } from "./types"
+import type { TSignalLevel, TTagTone } from "@/components/ui/chat"
+import type { TRecommendationState } from "./types"
+import { EASE_IN_OUT, EASE_OUT_STRONG } from "@/lib/ease"
 
-export const CONFIDENCE: Record<SignalLevel, string> = {
+export const CONFIDENCE: Record<TSignalLevel, string> = {
   high: "High confidence",
   medium: "Medium confidence",
   low: "Low confidence",
 }
 
 export const STATE_LABEL: Record<
-  Exclude<RecommendationState, "pending" | "running">,
+  Exclude<TRecommendationState, "pending" | "running">,
   string
 > = {
   accepted: "Done",
@@ -17,9 +18,37 @@ export const STATE_LABEL: Record<
 
 /** Status pill tones, shared with the presentation Tag atom. */
 export const STATE_TONE: Record<
-  Exclude<RecommendationState, "pending" | "running">,
-  TagTone
+  Exclude<TRecommendationState, "pending" | "running">,
+  TTagTone
 > = {
   accepted: "green",
   rejected: "amber",
 }
+
+export const ACTION_MOTION = {
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 4 },
+  initial: { opacity: 0, y: 4 },
+  transition: { duration: 0.18, ease: EASE_IN_OUT },
+} as const
+
+/** Row entrance, driven by the Group's staggered `visible` variant. */
+export const ROW_VARIANTS = {
+  hidden: { opacity: 0, y: 8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.45, ease: EASE_OUT_STRONG },
+  },
+} as const
+
+/** Rows enter staggered 80ms apart; each Item picks up `row` from `ROW_VARIANTS`. */
+export const GROUP_VARIANTS = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.08 } },
+} as const
+
+export const SIZE = 18
+export const STROKE = 1.5
+export const R = (SIZE - STROKE) / 2
+export const C = 2 * Math.PI * R

package/src/components/composed/chat/recommendation/default.tsx

@@ -4,7 +4,7 @@ import { useId } from "react"
 import type * as React from "react"
 import { Group } from "./group"
 import { Item } from "./item"
-import type { RecommendationCardProps } from "./types"
+import type { IRecommendationCardProps } from "./types"
 
 /**
  * One-card convenience: a Group with a single Item, so existing
@@ -14,7 +14,7 @@ export function RecommendationCard({
   value,
   defaultOpen = true,
   ...props
-}: RecommendationCardProps): React.ReactElement {
+}: IRecommendationCardProps): React.ReactElement {
   const autoId = useId()
   const itemValue = value ?? autoId
   return (

package/src/components/composed/chat/recommendation/group.tsx

@@ -4,17 +4,10 @@ import { motion } from "motion/react"
 import type * as React from "react"
 import {
   Accordion,
-  AccordionPrimitive,
 } from "@/components/ui/accordion"
 import { cn } from "@/lib/utils"
-
-export type RecommendationGroupProps = AccordionPrimitive.Root.Props
-
-/** Rows enter staggered 80ms apart; each Item picks up `row` from `ROW_VARIANTS`. */
-const GROUP_VARIANTS = {
-  hidden: {},
-  visible: { transition: { staggerChildren: 0.08 } },
-} as const
+import type { TRecommendationGroupProps } from "./types"
+import { GROUP_VARIANTS } from "./constant"
 
 /**
  * Accordion root for a stack of recommendation items. Defaults to `multiple`
@@ -24,10 +17,10 @@ export function Group({
   className,
   multiple = true,
   ...props
-}: RecommendationGroupProps): React.ReactElement {
+}: TRecommendationGroupProps): React.ReactElement {
   return (
     <Accordion
-      className={cn("flex w-full flex-col gap-2 max-w-11/12", className)}
+      className={cn("flex w-full flex-col gap-2 max-w-11/12 overflow-clip rounded-md", className)}
       data-slot="recommendation-group"
       multiple={multiple}
       render={

package/src/components/composed/chat/recommendation/index.ts

@@ -4,8 +4,6 @@ import { Group } from "./group"
 import { Item } from "./item"
 
 export type * from "./types"
-export type { RecommendationCheckboxProps } from "./checkbox"
-export type { RecommendationGroupProps } from "./group"
 
 export { RecommendationCard }