@handled-ai/design-system 0.1.0

package/README.md

@@ -0,0 +1,169 @@
+# @handled-ai/design-system
+
+A shared design system built on [shadcn/ui](https://ui.shadcn.com). Use it as an **npm package** in React/Next.js apps or via the **shadcn registry** (copy-paste).
+
+## Install as npm package (recommended)
+
+```bash
+npm install @handled-ai/design-system
+# or
+pnpm add @handled-ai/design-system
+# or
+yarn add @handled-ai/design-system
+```
+
+**Peer dependencies:** Install React and the UI primitives if not already present:
+
+```bash
+pnpm add react react-dom @radix-ui/react-slot @radix-ui/react-label radix-ui class-variance-authority clsx tailwind-merge lucide-react
+# Optional, only if you use Chart / ActivityLog / MetricCard etc.:
+pnpm add date-fns recharts zod
+```
+
+**Use in your app:**
+
+```tsx
+import { Button, Card, cn } from "@handled-ai/design-system"
+
+export function MyPage() {
+  return (
+    <Card>
+      <Button>Click me</Button>
+    </Card>
+  )
+}
+```
+
+**Tailwind:** Components use Tailwind classes. In your Tailwind config (or `postcss.config` for Tailwind v4), include the package in `content` so classes are not purged:
+
+```js
+// tailwind.config.js (v3) or postcss / @config (v4)
+content: [
+  "./src/**/*.{js,ts,jsx,tsx}",
+  "./node_modules/@handled-ai/design-system/dist/**/*.js",
+]
+```
+
+**Theme:** Define the same CSS variables in your app (e.g. in `globals.css`) so tokens like `--primary`, `--background`, `--radius` exist. You can copy the `:root` and `.dark` blocks from this repo’s `app/globals.css`, or use your own palette.
+
+---
+
+## Registry (copy-paste) usage
+
+The project is also published as a custom shadcn registry. Components are copy-pasted into your repo via the `shadcn` CLI.
+
+## What You Can View
+
+When the app is running locally, there are two main experiences:
+
+- **Component gallery:** `/`  
+  Browse individual components and UX blocks rendered directly on the page.
+- **Prototype view:** `/preview`  
+  See the Mercury-style end-to-end product prototype (sidebar, inbox/work queue, detail view, insights dashboard, meetings, and coaching banner patterns).
+
+If port `3000` is taken, Next.js will auto-pick another port (for example `3001`, `3002`, `3003`). Use whatever port appears in your terminal output.
+
+## Architecture
+
+- **Registry format:** Static JSON files served at `/r/{name}.json`
+- **Component source:** `registry/new-york/ui/` — customized shadcn primitives + custom UX blocks
+- **Theming:** CSS variables — consuming projects define their own palette
+- **Build tool:** `shadcn build` generates distributable JSON from source
+
+## Available Components
+
+| Component | Description |
+|-----------|-------------|
+| `button` | Button with multiple variants and sizes |
+| `card` | Card container with header, content, footer |
+| `dialog` | Modal dialog (Radix UI) |
+| `input` | Styled text input |
+| `label` | Form label |
+| `select` | Select dropdown (Radix UI) |
+| `table` | Responsive table |
+| `tabs` | Tab navigation (Radix UI) |
+| `badge` | Status indicator badges |
+| `avatar` | Avatar with image/fallback |
+| `dropdown-menu` | Dropdown menu with keyboard nav |
+| `tooltip` | Hover tooltip |
+| `sheet` | Slide-out panel |
+| `separator` | Visual divider |
+| `skeleton` | Loading placeholder |
+| `scroll-area` | Custom scrollable area |
+| `textarea` | Multi-line text input |
+| `activity-log` | Activity stream row pattern |
+| `chart` | Chart container and helpers |
+| `detail-view` | Production-style detail panel primitives |
+| `inbox-row` | Row-based inbox/work queue item |
+| `metric-card` | KPI cards with variants (including donut-style) |
+| `sidebar` | App navigation sidebar primitives |
+
+## Usage in a Consuming Project
+
+### 1. Add the registry namespace
+
+In your project's `components.json`:
+
+```json
+{
+  "registries": {
+    "@handled": "https://handled-design-system.vercel.app/r/{name}.json"
+  }
+}
+```
+
+### 2. Install components
+
+```bash
+npx shadcn@latest add @handled/button @handled/card @handled/input
+```
+
+### 3. Set your theme
+
+Override CSS variables in your `globals.css` — see the Theming Contract section in `docs/processes/design-system.md` (Barb repo).
+
+## Development
+
+```bash
+pnpm install
+pnpm run dev            # Start local app (component gallery at /, prototype at /preview)
+pnpm run registry:build # Build registry JSON files
+```
+
+### Local URLs
+
+- `http://localhost:3000/` (or the port shown in terminal): component gallery
+- `http://localhost:3000/preview` (or same active port): full prototype
+- `http://localhost:3000/r/registry.json` (or same active port): built registry index
+
+## Publishing
+
+### Publishing to npm (public package)
+
+1. Bump version in `package.json` (e.g. `0.1.1`).
+2. Build the library: `pnpm run build:lib` (outputs to `dist/`).
+3. Log in to npm: `npm login`.
+4. Publish: `npm publish`. (Scoped package is public thanks to `"publishConfig": { "access": "public" }`.)
+
+### Registry / Vercel
+
+1. Make component changes in `registry/new-york/ui/` (and app previews as needed).
+2. Update `registry.json` entries.
+3. Run `pnpm run registry:build`.
+4. Validate both `/` and `/preview`.
+5. Commit and push to `main` (Vercel deploys automatically).
+
+### Adding a new component
+
+1. Add the component to `registry/new-york/ui/`
+2. Register it in `registry.json`
+3. Run `pnpm run registry:build`
+4. Commit and push — Vercel auto-deploys
+
+## Theme Presets
+
+The `app/themes/` directory contains example theme presets to validate the theming contract:
+
+- **neutral** (default) — Black/white, grayscale accents
+- **forest** — Dark green primary, earthy tones
+- **ocean** — Deep blue primary, cool tones

package/dist/index.d.ts

@@ -0,0 +1,360 @@
+import { ClassValue } from 'clsx';
+import * as React$1 from 'react';
+import { Avatar as Avatar$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator as Separator$1, Tooltip as Tooltip$1, Tabs as Tabs$1 } from 'radix-ui';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as RechartsPrimitive from 'recharts';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare function useIsMobile(): boolean;
+
+interface ActivityLogItem {
+    id: string;
+    type: "workout" | "weighin" | "biometric" | "checkin" | string;
+    title: string;
+    details: string;
+    date: string;
+    time: string;
+}
+interface ActivityLogProps {
+    items: ActivityLogItem[];
+    title?: string;
+    initialLimit?: number;
+}
+declare function ActivityRow({ item }: {
+    item: ActivityLogItem;
+}): React$1.JSX.Element;
+declare function ActivityLog({ items, title, initialLimit }: ActivityLogProps): React$1.JSX.Element;
+
+declare function Avatar({ className, size, ...props }: React$1.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Fallback>): React$1.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+
+declare function Card({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React$1.ReactNode;
+        icon?: React$1.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare function ChartContainer({ id, className, children, config, ...props }: React$1.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}): React$1.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React$1.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+type TooltipPayloadItem = {
+    name?: string;
+    value?: number | string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    color?: string;
+    fill?: string;
+};
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React$1.ComponentProps<"div"> & {
+    active?: boolean;
+    payload?: TooltipPayloadItem[];
+    label?: string;
+    labelFormatter?: (value: unknown, payload: TooltipPayloadItem[]) => React$1.ReactNode;
+    formatter?: (value: unknown, name: string, item: TooltipPayloadItem, index: number, payload: Record<string, unknown>) => React$1.ReactNode;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    labelClassName?: string;
+    color?: string;
+}): React$1.JSX.Element | null;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+type LegendPayloadItem = {
+    value?: string;
+    dataKey?: string;
+    [key: string]: unknown;
+};
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React$1.ComponentProps<"div"> & {
+    payload?: LegendPayloadItem[];
+    verticalAlign?: "top" | "bottom";
+    hideIcon?: boolean;
+    nameKey?: string;
+}): React$1.JSX.Element | null;
+
+declare function DetailViewHeader({ title, breadcrumbs, badges, onBack, }: {
+    title: string;
+    breadcrumbs: React$1.ReactNode;
+    badges: React$1.ReactNode;
+    onBack?: () => void;
+}): React$1.JSX.Element;
+declare function DetailViewSummary({ title, children, sources, }: {
+    title?: string;
+    children: React$1.ReactNode;
+    sources?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function Citation({ number }: {
+    number: number | string;
+}): React$1.JSX.Element;
+declare function DetailViewThread({ title, actionCount, children, }: {
+    title: string;
+    actionCount?: number;
+    children: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare function ThreadMessage({ icon, subject, time, messageCount, threadLink, sender, senderTime, children, isExpanded, }: {
+    icon?: React$1.ReactNode;
+    subject: string;
+    time: string;
+    messageCount?: number;
+    threadLink?: string;
+    sender?: string;
+    senderTime?: string;
+    children: React$1.ReactNode;
+    isExpanded?: boolean;
+}): React$1.JSX.Element;
+
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): React$1.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): React$1.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof Dialog$1.Portal>): React$1.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): React$1.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Overlay>): React$1.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): React$1.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): React$1.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioItem>): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Label> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubContent>): React$1.JSX.Element;
+
+interface InboxRowProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    itemId: string;
+    statusColor: "red" | "orange" | "gray";
+    primaryText: string;
+    secondaryText: string;
+    tertiaryText: string;
+    isAtRisk?: boolean;
+    contactMethods?: {
+        phone?: boolean;
+        email?: boolean;
+        message?: boolean;
+    };
+    interactionCount: number | string;
+    assignee: string;
+    status: string;
+    time: string;
+}
+declare const InboxRow: React$1.ForwardRefExoticComponent<InboxRowProps & React$1.RefAttributes<HTMLDivElement>>;
+declare function InboxGroupHeader({ title, count }: {
+    title: string;
+    count: number;
+}): React$1.JSX.Element;
+
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof LabelPrimitive.Root>): React$1.JSX.Element;
+
+interface MetricDataPoint {
+    label: string;
+    value: number | string;
+    color?: string;
+}
+interface MetricCardProps {
+    title: string;
+    value?: string | number;
+    unit?: string;
+    subtitle?: string;
+    change?: {
+        value: string;
+        direction: "up" | "down" | "neutral";
+        isGood?: boolean;
+    };
+    footerText?: string;
+    dataPoints?: MetricDataPoint[];
+    showExternalLink?: boolean;
+    showInfo?: boolean;
+}
+declare function MetricCard({ title, value, unit, subtitle, change, footerText, dataPoints, showExternalLink, showInfo, }: MetricCardProps): React$1.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: React$1.ComponentProps<typeof ScrollArea$1.Root>): React$1.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React$1.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): React$1.JSX.Element;
+
+declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): React$1.JSX.Element;
+declare function SelectGroup({ ...props }: React$1.ComponentProps<typeof Select$1.Group>): React$1.JSX.Element;
+declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): React$1.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
+    size?: "sm" | "default";
+}): React$1.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): React$1.JSX.Element;
+declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): React$1.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): React$1.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): React$1.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollUpButton>): React$1.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollDownButton>): React$1.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): React$1.JSX.Element;
+
+declare function Sheet({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): React$1.JSX.Element;
+declare function SheetTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): React$1.JSX.Element;
+declare function SheetClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): React$1.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function SheetHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SheetFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SheetTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): React$1.JSX.Element;
+declare function SheetDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): React$1.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): React$1.JSX.Element;
+declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): React$1.JSX.Element;
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): React$1.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): React$1.JSX.Element;
+
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): React$1.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React$1.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}): React$1.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.ComponentProps<"button">): React$1.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.ComponentProps<"main">): React$1.JSX.Element;
+declare function SidebarInput({ className, ...props }: React$1.ComponentProps<typeof Input>): React$1.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): React$1.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React$1.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React$1.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React$1.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): React$1.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<"div"> & {
+    showIcon?: boolean;
+}): React$1.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React$1.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}): React$1.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
+
+declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): React$1.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React$1.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): React$1.JSX.Element;
+declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): React$1.JSX.Element;
+
+declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
+
+export { ActivityLog, type ActivityLogItem, type ActivityLogProps, ActivityRow, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Citation, DetailViewHeader, DetailViewSummary, DetailViewThread, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, InboxGroupHeader, InboxRow, type InboxRowProps, Input, Label, MetricCard, type MetricCardProps, type MetricDataPoint, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadMessage, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, tabsListVariants, useIsMobile, useSidebar };