@eduardoalvarez/arrecife 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, ThemeOptions, applyTheme, curr
 import { alertVariants as alert, avatarVariants as avatar, badgeVariants as badge, buttonVariants as button, textVariants as text } from './variants/index.js';
 export { CARD, CARD_HOVER, CARD_SURFACE, categoryBadgeVariants, metricBadgeVariants } from './variants/index.js';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, ComponentProps, RefObject, SVGProps } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ComponentProps, RefObject } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { VariantProps } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -28,6 +28,7 @@ import { F as Face, P as Pose } from './catalog-D13txprv.js';
 export { A as ASSETS_PATH, B as Background, a as Fin, f as faceList, b as faceUsage, c as faces, d as fins, p as poseList, e as poses } from './catalog-D13txprv.js';
 export { Isotype, IsotypeProps, Logo, LogoProps, Mascot, MascotFace, MascotFaceProps, MascotProps } from './brand/index.js';
 import { ClassValue } from 'clsx';
+export { i as social } from './index-DlAO2JZs.js';
 import '@radix-ui/react-label';
 
 /**
@@ -778,23 +779,50 @@ declare function CourseCard({ title, summary, meta, status, progress, className,
  * not exist, so the rule lived in a comment about a ghost component. Once the
  * brand story started repeating the sentence, it was also a published promise.
  *
- * `expression` is MANDATORY and not optional: an empty state without a face is
- * half the component. It is the only place, alongside the 404, the server error,
- * course progress, celebration, the toast and the newsletter's «sin spam», where
- * a face may appear.
+ * `page` keeps that rule intact and `expression` stays MANDATORY there: an empty
+ * state that IS the screen without a face is half the component. It is the only
+ * place, alongside the 404, the server error, course progress, celebration, the
+ * toast and the newsletter's «sin spam», where a face may appear.
+ *
+ * `inline` is the other situation, and it is a different one rather than a
+ * smaller one: the hole inside a table page or a dashboard widget, competing with
+ * a dozen elements around it. An admin panel has twenty of those on one screen,
+ * and twenty faces is not the humour contract, it is a zoo. The variant carries
+ * no face, and the type does not let one through. See `docs/decisions.md` § 27.
  */
-type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
-    /** The face. Mandatory: without it this is a centred paragraph. */
-    expression: Face;
+type EmptyStateBase = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     title: ReactNode;
     /** One line explaining what is missing or what to do. */
     description?: ReactNode;
     /** The action that gets you out of the empty state. Usually a tertiary button. */
     action?: ReactNode;
+};
+type EmptyStateProps = EmptyStateBase & ({
+    /** `page`, the default: the empty state IS the screen or the section, and it carries the face. */
+    variant?: 'page' | undefined;
+    /**
+     * The face. Mandatory on `page` and impossible on `inline` — the props
+     * are a union, so the generated table cannot show a per-variant «req.»
+     * and the sentence has to carry it. Without it, `page` is a centred
+     * paragraph.
+     */
+    expression: Face;
     /** Where the brand PNGs are served from. */
     basePath?: string | undefined;
-};
-declare function EmptyState({ expression, title, description, action, basePath, className, ...props }: EmptyStateProps): react.JSX.Element;
+    icon?: never;
+} | {
+    /** `inline`: the hole inside a table or a widget. No face, and no way to pass one. */
+    variant: 'inline';
+    /**
+     * A glyph above the line. It measures 1em and inherits `currentColor`,
+     * like `Stat`'s: the project passes its own and sizes it, because the
+     * system has no icon library and is not getting one.
+     */
+    icon?: ReactNode;
+    expression?: never;
+    basePath?: never;
+});
+declare function EmptyState(props: EmptyStateProps): react.JSX.Element;
 
 /**
  * The calendar with events: seeing them, creating, editing and deleting them.
@@ -950,7 +978,8 @@ type LinkRowProps = Omit<CardShellProps, 'children'> & {
 declare function LinkRow({ name, description, icon, external, className, ...props }: LinkRowProps): react.JSX.Element;
 
 /**
- * The site bar: 64px, abyss at 86 % and a 14px blur behind it.
+ * The site bar: 64px, abyss at 86 % and a 14px blur behind it — 56 when it
+ * shares the screen with a sidebar.
  *
  * It is page composition and not a primitive, but it lives in the library for a
  * concrete reason: the CLI aesthetic of the items — mono, `./section` format —
@@ -966,6 +995,13 @@ declare function LinkRow({ name, description, icon, external, className, ...prop
  * floats in the middle of the bar and the eye has to cross the gap twice: once
  * to read the brand and once to come back and find the section. Grouped on the
  * right, brand and navigation are two anchors instead of three.
+ *
+ * `brand` and `actions` are `ReactNode` slots and they are the answer to almost
+ * everything an app shell asks for: a `~/cursos` wordmark goes in `brand`, and a
+ * user menu or a «Entrar» button goes in `actions`. Session state does not get a
+ * prop of its own — it is project infrastructure, which is the third clause of
+ * the criterion that decides what enters this library. See `docs/decisions.md`
+ * § 30.
  */
 type NavProps = ComponentPropsWithoutRef<'header'> & {
     /** The logo, on the left. */
@@ -974,8 +1010,19 @@ type NavProps = ComponentPropsWithoutRef<'header'> & {
     children?: ReactNode;
     /** Actions on the right: conversion, theme switch, search. */
     actions?: ReactNode;
+    /**
+     * `compact` is 56px instead of 64, for a bar that shares the screen with a
+     * sidebar: at 64 the two compete for the same corner and together they eat the
+     * top of the content area.
+     *
+     * It is a prop and not a `className` because the height lives on the inner
+     * container, which never sees one — `className` reaches the `<header>` and
+     * stops there. Passing `h-14` from outside did nothing, silently, which is the
+     * kind of failure this repo writes checks for.
+     */
+    size?: 'default' | 'compact' | undefined;
 };
-declare function Nav({ brand, children, actions, className, ...props }: NavProps): react.JSX.Element;
+declare function Nav({ brand, children, actions, size, className, ...props }: NavProps): react.JSX.Element;
 type NavItemProps = ComponentPropsWithoutRef<'a'> & {
     /** Current section: biolume with a 1px underline. */
     active?: boolean | undefined;
@@ -1198,6 +1245,11 @@ declare function ScrollingProgressBar({ target, tone, sticky, className, ...prop
  * format is part of the piece, not a convention to be remembered. It is
  * `aria-hidden`.
  *
+ * An `icon` REPLACES it rather than joining it. Two marks before a label is one
+ * more than the eye needs, and the `▸` exists to say «this is a place you can
+ * go» — which is exactly what a section icon already says, and says better. A
+ * sidebar with no icons keeps the prompt, which is the reading sites' case.
+ *
  * The footer carries the version and the branch (`v5.0.1 · main`) in the `meta`
  * scale. It is not decoration: in an admin it is the first thing anyone asks
  * when something looks off.
@@ -1207,16 +1259,78 @@ type SidebarItemProps = ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean | undefined;
     /** Counter on the right: pending drafts, unused media. */
     badge?: ReactNode;
+    /**
+     * The section's glyph, on the left. It REPLACES the `▸` rather than joining
+     * it, and it inherits `currentColor`, so it follows the item's state without
+     * being tinted separately.
+     */
+    icon?: ReactNode;
 };
-declare function SidebarItem({ active, asChild, badge, className, children, ...props }: SidebarItemProps): react.JSX.Element;
+declare function SidebarItem({ active, asChild, badge, icon, className, children, ...props }: SidebarItemProps): react.JSX.Element;
+/**
+ * A labelled block of items — «Contenido», «Alumnos», «Ventas».
+ *
+ * A panel's sidebar stops being readable somewhere around eight items, and the
+ * fix is not a scrollbar: it is saying what the blocks are. The label is a `<p>`
+ * and not a heading, because a heading here would land in the document outline
+ * between the page's own — a sidebar is navigation, not content.
+ *
+ * The items go in a nested `<ul>` named by that label, which is what gives a
+ * screen reader «lista Ventas, 3 elementos» instead of one list of eleven.
+ */
+type SidebarGroupProps = Omit<ComponentPropsWithoutRef<'li'>, 'title'> & {
+    /** The block's name. Sentence case, not a section title. */
+    label: ReactNode;
+};
+declare function SidebarGroup({ label, children, className, ...props }: SidebarGroupProps): react.JSX.Element;
 type SidebarNavProps = ComponentPropsWithoutRef<'nav'> & {
-    /** The panel's heading. */
+    /**
+     * The panel's heading, as an eyebrow. It also names the `<nav>` when it is a
+     * string, which is why a `brand` row does not replace it: a logo is not an
+     * accessible name. Pass `aria-label` when neither fits.
+     */
     title?: ReactNode;
+    /**
+     * The row at the top: isotype and wordmark, `cursos · admin`. It is a slot and
+     * not a `logo`/`name` pair because every panel spells its own name
+     * differently, and the part that IS the system — the rhythm, the hairline
+     * under it — is here.
+     *
+     * Collapsed, it is hidden: a wordmark does not fit in a rail and the component
+     * cannot trim somebody else's markup. Pass the isotype on its own through
+     * `mark` for the rail to keep something at the top.
+     */
+    brand?: ReactNode;
+    /** What `brand` becomes in the rail. Usually the isotype with no wordmark. */
+    mark?: ReactNode;
+    /**
+     * Who is signed in, at the bottom above the version. A slot, because an avatar
+     * needs a session and a sign-out route and the library takes no project
+     * infrastructure — the same reason `Nav`'s user menu goes in `actions`.
+     */
+    user?: ReactNode;
+    /**
+     * Turns the sidebar into a rail: icons only, and the widths become the
+     * library's — `w-sidebar` and `w-sidebar-rail`. It is CONTROLLED and there is
+     * no uncontrolled mode, because this state is almost always persisted in a
+     * cookie or in `localStorage`, and an internal state would fight the one the
+     * project already keeps.
+     */
+    collapsed?: boolean | undefined;
+    /**
+     * Called with what the state should become. With it, the toggle appears; with
+     * `collapsed` alone the sidebar is a rail with no way out of it, which is a
+     * legitimate layout and not an accident.
+     */
+    onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+    /** The toggle's accessible name, in the two directions. */
+    collapseLabel?: string;
+    expandLabel?: string;
     /** Version and branch, at the bottom. */
     version?: ReactNode;
     branch?: ReactNode;
 };
-declare function SidebarNav({ title, version, branch, children, className, ...props }: SidebarNavProps): react.JSX.Element;
+declare function SidebarNav({ title, brand, mark, user, collapsed, onCollapsedChange, collapseLabel, expandLabel, version, branch, children, className, ...props }: SidebarNavProps): react.JSX.Element;
 
 /**
  * A large metric: the number in the `stat` scale and its name underneath.
@@ -1227,24 +1341,50 @@ declare function SidebarNav({ title, version, branch, children, className, ...pr
  * about. That is why `tone` is not an open palette — there are two values and
  * they mean different things.
  *
- * The reading order is icon + title, the big number, and the standfirst below.
- * The number goes in the MIDDLE and not at the end on purpose: it is what people
+ * The reading order is title, the big number, and the standfirst below. The
+ * number goes in the MIDDLE and not at the end on purpose: it is what people
  * came to read, and a two-line standfirst between the title and the figure
  * buries it. The top says what it is about, the middle says how much, and the
  * bottom holds the nuance only someone who stops will read.
+ *
+ * `delta` and `spark` sit with the number and not with the standfirst, because
+ * both are about the number: how it moved and what shape the movement had. The
+ * order survives — top what, middle how much, bottom the nuance.
+ *
+ * THE ICON IS A BADGE IN THE OPPOSITE CORNER, not a glyph before the title, and
+ * the tone rides on it rather than on the number. In a panel of ten of these the
+ * eyebrow is the same length in none of them, so an inline icon puts the only
+ * coloured mark on a different x in every card; pinned to the corner it lands on
+ * a grid. The circle is the tint pattern the system already has — `bg-accent/10`
+ * as a surface and the colour on the GLYPH, per `docs/decisions.md` § 4b — and a
+ * glyph clears the 3:1 graphical threshold where text would not clear 4.5.
+ *
+ * WHICH IS WHY A NEUTRAL NUMBER IS PRIMARY INK AND NOT BIOLUME. With a biolume
+ * badge and a biolume sparkline, a biolume number is the third accent in a card
+ * the size of a postcard, and the thing you came to read stops being the loudest
+ * thing in it. `alert` and `achievement` DO still paint the number sand, so the
+ * document's rule survives exactly where it matters: sand when the number is not
+ * just a number. See `docs/decisions.md` § 31.
  */
 type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     /** The number, already formatted. The library imposes no locale. */
     value: ReactNode;
     /** What is being counted. It goes in mono small caps. */
     label: ReactNode;
-    /** `alerta` only when the number IS the problem. */
-    tone?: 'neutral' | 'alerta';
+    /**
+     * `alert` ONLY when the number is the problem, and `achievement` when it is
+     * the opposite — the diplomas issued, the modules finished. The two paint the
+     * same sand today and they are still two names: a system that names by meaning
+     * cannot make «this is bad» the only way to say «this stands out». See
+     * `docs/decisions.md` § 28.
+     */
+    tone?: 'neutral' | 'alert' | 'achievement';
     /** With `progress`, the metric reads as progress and adds the bar. */
     progress?: number | undefined;
     /**
-     * Glyph beside the title, at 1em. It inherits `currentColor`, so it follows
-     * the title's tone and does not have to be tinted separately.
+     * Glyph in a tinted circle, in the corner opposite the title. At 1em, and it
+     * inherits `currentColor` from the badge, so it takes the tone without being
+     * tinted separately.
      */
     icon?: ReactNode;
     /**
@@ -1252,8 +1392,31 @@ type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
      * does not say whether that is a lot, and this is where that gets said.
      */
     description?: ReactNode;
+    /** How the number moved since last time. */
+    delta?: StatDelta | undefined;
+    /**
+     * The number's shape over time, under it. A `ReactNode` and not a data prop:
+     * a sparkline needs a charting library, and this component lives in the barrel
+     * that four projects install. The one project that draws them passes its own,
+     * exactly like `icon`.
+     */
+    spark?: ReactNode;
 };
-declare function Stat({ value, label, tone, progress, icon, description, className, ...props }: StatProps): react.JSX.Element;
+type StatDelta = {
+    /**
+     * Already formatted — «+12 esta semana», «↑8 %». The library imposes no
+     * locale, same as `value`.
+     */
+    value: ReactNode;
+    /**
+     * Which way it moved. It picks the GLYPH and never the colour, because a rise
+     * is not automatically good: «+12 alumnos» and «+12 errores» point the same
+     * way and mean opposite things. Whether the number matters is `tone`'s job,
+     * and it is a decision the call site has already made.
+     */
+    direction: 'up' | 'down' | 'flat';
+};
+declare function Stat({ value, label, tone, progress, icon, description, delta, spark, className, ...props }: StatProps): react.JSX.Element;
 
 type TalkContent = {
     title: ReactNode;
@@ -1399,38 +1562,4 @@ declare function TableOfContents({ items, title, activeHref, linkAsChild, classN
 
 declare function cn(...inputs: ClassValue[]): string;
 
-type IconProps = SVGProps<SVGSVGElement>;
-declare const GitHub: (props: IconProps) => react.JSX.Element;
-declare const LinkedIn: (props: IconProps) => react.JSX.Element;
-declare const X: (props: IconProps) => react.JSX.Element;
-declare const Instagram: (props: IconProps) => react.JSX.Element;
-declare const Discord: (props: IconProps) => react.JSX.Element;
-declare const YouTube: (props: IconProps) => react.JSX.Element;
-declare const Rss: (props: IconProps) => react.JSX.Element;
-declare const Email: (props: IconProps) => react.JSX.Element;
-/**
- * The newsletter. It plays the same role as `Rss` — a way to follow, not a
- * social network — which is why it belongs in this catalogue and does not open
- * the door to an icon library.
- *
- * It is named for what it means and not for what it draws, like everything else
- * in the system: it is a bell, and it is called `Newsletter`. `eduardoalvarez.dev`
- * had it drawn in the project, following the contract by hand so it would not
- * clash while it waited.
- */
-declare const Newsletter: (props: IconProps) => react.JSX.Element;
-
-declare const social_Discord: typeof Discord;
-declare const social_Email: typeof Email;
-declare const social_GitHub: typeof GitHub;
-declare const social_Instagram: typeof Instagram;
-declare const social_LinkedIn: typeof LinkedIn;
-declare const social_Newsletter: typeof Newsletter;
-declare const social_Rss: typeof Rss;
-declare const social_X: typeof X;
-declare const social_YouTube: typeof YouTube;
-declare namespace social {
-  export { social_Discord as Discord, social_Email as Email, social_GitHub as GitHub, social_Instagram as Instagram, social_LinkedIn as LinkedIn, social_Newsletter as Newsletter, social_Rss as Rss, social_X as X, social_YouTube as YouTube };
-}
-
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, type Crumb, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EventCalendar, type EventCalendarProps, Face, Footer, FooterLink, type FooterLinkProps, type FooterProps, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, type SocialLink, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Text, type TextProps, Textarea, type TextareaProps, Theme, ThemeToggle, type ThemeToggleProps, ToastAction, type ToastOptions, type ToastVariant, Toaster, type ToasterProps, type TocEntry, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, cn, social, text as textVariants, toast, useTheme };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, type Crumb, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EventCalendar, type EventCalendarProps, Face, Footer, FooterLink, type FooterLinkProps, type FooterProps, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, type SocialLink, Stat, type StatDelta, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Text, type TextProps, Textarea, type TextareaProps, Theme, ThemeToggle, type ThemeToggleProps, ToastAction, type ToastOptions, type ToastVariant, Toaster, type ToasterProps, type TocEntry, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, cn, text as textVariants, toast, useTheme };