@godxjp/ui 13.9.3 → 13.11.0

package/dist/components/data-display/data-table.js

@@ -0,0 +1,424 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown, ArrowUp, ChevronsUpDown, Layers, Layers2, MoreHorizontal } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { Flex } from "../layout/flex";
+import { Button } from "../general/button";
+import { EmptyState } from "./empty-state";
+import { Checkbox } from "../data-entry/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../data-display/table";
+import { cn } from "../../lib/utils";
+import { densityClass } from "../../lib/variants";
+import {
+  controlIconSmClass,
+  tableCellPaddingClass,
+  tableRowHeightClass
+} from "../../lib/control-styles";
+const DataTableContext = React.createContext(null);
+function useDataTableContext() {
+  const ctx = React.useContext(DataTableContext);
+  if (!ctx) throw new Error("DataTable subcomponents must be used inside <DataTable>");
+  return ctx;
+}
+function useOptionalDataTableContext() {
+  return React.useContext(DataTableContext);
+}
+const noopGetRowId = (row) => {
+  const id = row.id;
+  if (typeof id === "string") return id;
+  if (typeof id === "number") return String(id);
+  return "";
+};
+function DataTable({
+  data,
+  columns,
+  getRowId = noopGetRowId,
+  selectable = false,
+  selected: controlledSelected,
+  onSelectChange,
+  onRowClick,
+  density: controlledDensity,
+  onDensityChange,
+  sort,
+  onSortChange,
+  loading = false,
+  empty,
+  className,
+  children
+}) {
+  const [internalDensity, setInternalDensity] = React.useState("compact");
+  const density = controlledDensity ?? internalDensity;
+  const setDensity = (d) => {
+    setInternalDensity(d);
+    onDensityChange?.(d);
+  };
+  const [internalSelected, setInternalSelected] = React.useState(/* @__PURE__ */ new Set());
+  const selected = controlledSelected ?? internalSelected;
+  const setSelected = (next) => {
+    setInternalSelected(next);
+    onSelectChange?.(next);
+  };
+  const toggleSelect = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelected(next);
+  };
+  const emptyColSpan = columns.length + (selectable ? 1 : 0);
+  const allSelected = data.length > 0 && data.every((r) => selected.has(getRowId(r)));
+  const someSelected = !allSelected && data.some((r) => selected.has(getRowId(r)));
+  const toggleSelectAll = () => {
+    if (allSelected) setSelected(/* @__PURE__ */ new Set());
+    else setSelected(new Set(data.map(getRowId)));
+  };
+  const ctx = {
+    data,
+    columns,
+    density,
+    setDensity,
+    selected,
+    toggleSelect,
+    toggleSelectAll,
+    allSelected,
+    someSelected,
+    selectable,
+    getRowId,
+    onRowClick,
+    sort,
+    onSortChange,
+    loading,
+    empty,
+    emptyColSpan
+  };
+  const hasContent = React.Children.toArray(children).some(
+    (c) => React.isValidElement(c) && c.type.displayName === "DataTable.Content"
+  );
+  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ui-data-table-root",
+        densityClass[density === "compact" ? "compact" : "comfortable"],
+        className
+      ),
+      children: [
+        children,
+        !hasContent && /* @__PURE__ */ jsx(DataTable.Content, {})
+      ]
+    }
+  ) });
+}
+DataTable.Toolbar = function DataTableToolbar({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-data-table-toolbar", className), children });
+};
+DataTable.Toolbar.displayName = "DataTable.Toolbar";
+DataTable.SelectAll = function DataTableSelectAll() {
+  const { allSelected, someSelected, toggleSelectAll, selectable } = useDataTableContext();
+  const { t } = useTranslation();
+  if (!selectable) return null;
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      checked: allSelected ? true : someSelected ? "indeterminate" : false,
+      onCheckedChange: toggleSelectAll,
+      "aria-label": t("dataTable.selectAll")
+    }
+  );
+};
+DataTable.SelectAll.displayName = "DataTable.SelectAll";
+DataTable.BulkActions = function DataTableBulkActions({
+  count,
+  children,
+  className
+}) {
+  const ctx = useOptionalDataTableContext();
+  const { t } = useTranslation();
+  const c = count ?? ctx?.selected.size ?? 0;
+  if (c === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "region",
+      "aria-label": t("dataTable.bulkActions"),
+      className: cn("ui-data-table-bulk", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: t("common.selectedCount", { count: c }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "ui-data-table-bulk-actions", children })
+      ]
+    }
+  );
+};
+DataTable.BulkActions.displayName = "DataTable.BulkActions";
+DataTable.DensityToggle = function DataTableDensityToggle() {
+  const { density, setDensity } = useDataTableContext();
+  const { t } = useTranslation();
+  const next = density === "compact" ? "comfortable" : "compact";
+  const Icon = density === "compact" ? Layers : Layers2;
+  const nextLabel = next === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onClick: () => {
+        setDensity(next);
+      },
+      "aria-label": t("dataTable.densitySwitch", { density: nextLabel }),
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" }),
+        density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")
+      ] })
+    }
+  );
+};
+DataTable.DensityToggle.displayName = "DataTable.DensityToggle";
+DataTable.Content = function DataTableContent() {
+  const {
+    data,
+    columns,
+    density: _density,
+    selectable,
+    selected,
+    toggleSelect,
+    getRowId,
+    onRowClick,
+    sort,
+    onSortChange,
+    loading,
+    empty,
+    emptyColSpan
+  } = useDataTableContext();
+  const { t } = useTranslation();
+  const rowPadding = tableRowHeightClass;
+  const cellPadding = tableCellPaddingClass;
+  const hasPinEnd = columns.some((col) => col.pin === "end");
+  const onHeaderClick = (col) => {
+    if (!col.sortable || !onSortChange) return;
+    if (sort?.key !== col.key) {
+      onSortChange({ key: col.key, direction: "asc" });
+    } else if (sort.direction === "asc") {
+      onSortChange({ key: col.key, direction: "desc" });
+    } else {
+      onSortChange(void 0);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ui-data-table-scroll", hasPinEnd && "ui-data-table-has-pin-end"),
+      "aria-busy": loading,
+      children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
+          columns.map((col) => {
+            const isSortable = !!col.sortable && !!onSortChange;
+            const isActiveSort = isSortable && sort?.key === col.key;
+            const sortIndicator = isSortable ? isActiveSort ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
+            const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
+              col.header,
+              sortIndicator
+            ] });
+            return /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                "data-empty": !col.header || void 0,
+                "aria-sort": isSortable ? isActiveSort ? sort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+                className: cn(
+                  col.width,
+                  col.align === "right" && "text-end",
+                  col.align === "center" && "text-center",
+                  col.hiddenOnMobile && "hidden md:table-cell",
+                  isSortable && "select-none",
+                  col.pin === "end" && "ui-data-table-pin-end"
+                ),
+                children: isSortable ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ui-data-table-sort-button focus-visible:ring-ring rounded-sm focus-visible:ring-2",
+                    onClick: () => {
+                      onHeaderClick(col);
+                    },
+                    children: label
+                  }
+                ) : label
+              },
+              col.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: loading ? (
+          // Shaped skeleton rows rendered INSIDE the real table grid so they
+          // share its borders + column widths — no second framed container
+          // (which double-borders when the table sits in a Card). Count is
+          // bounded to the previous page so the height barely shifts.
+          Array.from({ length: Math.min(Math.max(data.length, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
+            selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block size-4 rounded-sm" }) }),
+            columns.map((col, j) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn(
+                  cellPadding,
+                  col.width,
+                  col.align === "right" && "text-end",
+                  col.align === "center" && "text-center",
+                  col.hiddenOnMobile && "hidden md:table-cell",
+                  col.pin === "end" && "ui-data-table-pin-end"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "ui-skeleton-block h-4",
+                      j === 0 ? "w-1/2" : "w-3/4",
+                      col.align === "right" && "ms-auto",
+                      col.align === "center" && "mx-auto"
+                    )
+                  }
+                )
+              },
+              col.key
+            ))
+          ] }, `skeleton-${i}`))
+        ) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            colSpan: emptyColSpan,
+            className: "ui-data-table-empty",
+            "aria-live": "polite",
+            children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
+          }
+        ) }) : data.map((row) => {
+          const id = getRowId(row);
+          const isSelected = selected.has(id);
+          const isInteractiveTarget = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem]");
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              "data-state": isSelected ? "selected" : void 0,
+              tabIndex: onRowClick ? 0 : void 0,
+              onClick: (e) => {
+                const target = e.target;
+                if (isInteractiveTarget(target)) return;
+                onRowClick?.(row);
+              },
+              onKeyDown: onRowClick ? (e) => {
+                if (e.key !== "Enter" && e.key !== " ") return;
+                if (e.target !== e.currentTarget) return;
+                e.preventDefault();
+                onRowClick?.(row);
+              } : void 0,
+              className: cn(
+                rowPadding,
+                onRowClick && "hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+                isSelected && "bg-muted/30"
+              ),
+              children: [
+                selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => {
+                      toggleSelect(id);
+                    },
+                    "aria-label": t("dataTable.selectRow", { id }),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    }
+                  }
+                ) }),
+                columns.map((col) => /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    className: cn(
+                      cellPadding,
+                      col.width,
+                      col.align === "right" && "text-end",
+                      col.align === "center" && "text-center",
+                      col.hiddenOnMobile && "hidden md:table-cell",
+                      col.pin === "end" && "ui-data-table-pin-end"
+                    ),
+                    children: col.render ? col.render(row) : (() => {
+                      const v = row[col.key];
+                      if (v == null) return "\u2014";
+                      if (typeof v === "string" || typeof v === "number") return String(v);
+                      return "\u2014";
+                    })()
+                  },
+                  col.key
+                ))
+              ]
+            },
+            id
+          );
+        }) })
+      ] }) })
+    }
+  );
+};
+DataTable.Content.displayName = "DataTable.Content";
+DataTable.Pagination = function DataTablePagination({
+  cursor,
+  hasMore,
+  onChange,
+  className
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-data-table-pagination", className), children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled: !cursor,
+        onClick: () => {
+          onChange(void 0);
+        },
+        children: t("common.first")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled: !hasMore,
+        onClick: () => {
+          onChange(cursor);
+        },
+        children: t("common.next")
+      }
+    )
+  ] });
+};
+DataTable.Pagination.displayName = "DataTable.Pagination";
+DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      "aria-label": ariaLabel ?? t("dataTable.rowActions"),
+      className: controlIconSmClass,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+};
+DataTable.RowActions.displayName = "DataTable.RowActions";
+export {
+  DataTable
+};

package/dist/components/data-display/descriptions.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface DescriptionsProps {
+    columns?: 1 | 2 | 3;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function Descriptions({ columns, className, children }: DescriptionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Descriptions {
+    var Item: ({ label, mono, span, className, children, }: DescriptionsItemProps) => import("react/jsx-runtime").JSX.Element;
+}
+export interface DescriptionsItemProps {
+    label: React.ReactNode;
+    /** Use mono spacing for IDs, paths, JSON. */
+    mono?: boolean;
+    /** Span full row(s) when value is long. */
+    span?: 2 | 3;
+    className?: string;
+    children: React.ReactNode;
+}

package/dist/components/data-display/descriptions.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+function Descriptions({ columns = 2, className, children }) {
+  const colsClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1 sm:grid-cols-2";
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-6 gap-y-3", colsClass, className), children });
+}
+Descriptions.Item = function DescriptionsItem({
+  label,
+  mono,
+  span,
+  className,
+  children
+}) {
+  const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
+  return (
+    // grid + the shared --field-label-gap so the label→value gap matches FormField / Form everywhere.
+    /* @__PURE__ */ jsxs("div", { className: cn("grid gap-[var(--field-label-gap)]", spanClass, className), children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground text-xs", children: label }),
+      /* @__PURE__ */ jsx("dd", { className: cn("text-sm break-all", mono && "font-mono"), children })
+    ] })
+  );
+};
+export {
+  Descriptions
+};

package/dist/components/data-display/empty-state.d.ts

@@ -0,0 +1,3 @@
+import type { EmptyStateProp } from "../../props/components/data-display.prop";
+export type { EmptyStateProp, EmptyStateProp as EmptyStateProps, } from "../../props/components/data-display.prop";
+export declare function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProp): import("react/jsx-runtime").JSX.Element;

package/dist/{chunk-YD7V2HGZ.js → components/data-display/empty-state.js}

@@ -1,6 +1,5 @@
-import { cn } from './chunk-U7N2A7A3.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
 function EmptyState({ icon: Icon, title, description, action, className }) {
   return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", role: "status", className: cn("ui-empty-state", className), children: [
     Icon && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-6", "aria-hidden": "true" }) }),
@@ -9,5 +8,6 @@ function EmptyState({ icon: Icon, title, description, action, className }) {
     action && /* @__PURE__ */ jsx("div", { children: action })
   ] });
 }
-
-export { EmptyState };
+export {
+  EmptyState
+};

package/dist/components/data-display/hover-card.d.ts

@@ -0,0 +1 @@
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "../ui/hover-card";

package/dist/components/data-display/hover-card.js

@@ -0,0 +1,6 @@
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "../ui/hover-card";
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};

package/dist/components/data-display/index.d.ts

@@ -1,79 +1,24 @@
-export { Badge, BadgeProps } from './badge.js';
-export { A as Avatar, a as AvatarFallback, b as AvatarImage } from '../../avatar-D9MdXzfF.js';
-export { Card, CardAction, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, StatCard, StatCardProps } from './card.js';
-export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table.js';
-export { C as ColumnDef, D as DataTable, b as Descriptions, E as EmptyState, a as TableDensity } from '../../data-table-DRr70ULe.js';
-export { h as SortStateProp } from '../../interaction.prop-DD46aTro.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { ReactNode } from 'react';
-export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from './popover.js';
-export { ScrollArea, ScrollBar } from './scroll-area.js';
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-export { Carousel, CarouselApi, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from './carousel.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import '@radix-ui/react-avatar';
-import '../../data-display.prop-CT0nVMdp.js';
-import '../../shared.prop-BvMSLFJ6.js';
-import '../../content.prop-DrV_zDy-.js';
-import '../../layout.prop-CXvl2rVR.js';
-import '../../data.prop-D0UEEczj.js';
-import '@radix-ui/react-popover';
-import '@radix-ui/react-scroll-area';
-import 'embla-carousel-react';
-
-type ProgressTone = "success" | "warning";
-type ProgressProps = {
-    value: number;
-    label?: string;
-    tone?: ProgressTone;
-};
-declare function Progress({ value, label, tone }: ProgressProps): react_jsx_runtime.JSX.Element;
-
-type TreeListItem = {
-    id: string;
-    title: ReactNode;
-    description?: ReactNode;
-    depth?: number;
-    active?: boolean;
-    badge?: ReactNode;
-};
-type TreeListProps = {
-    items: TreeListItem[];
-};
-declare function TreeList({ items }: TreeListProps): react_jsx_runtime.JSX.Element;
-
-type TimelineItem = {
-    title: ReactNode;
-    location?: ReactNode;
-    time?: ReactNode;
-    note?: ReactNode;
-    current?: boolean;
-};
-type TimelineProps = {
-    items: TimelineItem[];
-};
-declare function Timeline({ items }: TimelineProps): react_jsx_runtime.JSX.Element;
-
-declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
-
-declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-/**
- * HoverCard root. Defaults to a SNAPPY 200ms open / 100ms close (Radix's raw 700/300 default felt
- * laggy); consumers can still pass `openDelay`/`closeDelay`. A small open delay (not 0) is
- * intentional — it prevents accidental triggering as the pointer passes over the trigger.
- */
-declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
-declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Collapsible, CollapsibleContent, CollapsibleTrigger, HoverCard, HoverCardContent, HoverCardTrigger, Progress, type ProgressProps, type ProgressTone, Timeline, type TimelineItem, type TimelineProps, TreeList, type TreeListItem, type TreeListProps };
+export { Badge } from "./badge";
+export type { BadgeProps } from "./badge";
+export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export { Card, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card";
+export type { StatCardProps } from "./card";
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+export { Descriptions } from "./descriptions";
+export { DataTable } from "./data-table";
+export type { ColumnDef, Density as TableDensity } from "./data-table";
+export type { SortStateProp } from "../../props/vocabulary";
+export { EmptyState } from "./empty-state";
+export { Progress } from "./progress";
+export type { ProgressProps, ProgressTone } from "./progress";
+export { TreeList } from "./tree-list";
+export type { TreeListItem, TreeListProps } from "./tree-list";
+export { Timeline } from "./timeline";
+export type { TimelineItem, TimelineProps } from "./timeline";
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover";
+export { ScrollArea, ScrollBar } from "./scroll-area";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible";
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./accordion";
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./hover-card";
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselDots, useCarousel, } from "./carousel";
+export type { CarouselApi } from "./carousel";