@coderabbitai/carrot-ui 0.1.22 → 0.2.0

package/dist/index.d.ts

@@ -339,6 +339,8 @@ export declare const Card: ReturnType<typeof forwardRef<HTMLDivElement, CardProp
     Section: typeof CardSection;
 };
 
+declare function Card_2({ value, title, description, icon, disabled, className, }: RadioGroupCardProps): JSX.Element;
+
 declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface CardBodyProps {
@@ -604,7 +606,7 @@ export declare const createTooltipHandle: typeof Tooltip_2.createHandle;
  * For simple static tables, use `Table` directly. Use `DataTable` when you
  * need interactive features.
  */
-export declare function DataTable<TData>({ columns, data, sortable, paginated, pageSize, pageSizeOptions, selectable, rowSelection: controlledRowSelection, onRowSelectionChange, onRowClick, emptyMessage, className, tableOptions, }: DataTableProps<TData>): JSX.Element;
+export declare function DataTable<TData>({ columns, data, sortable, paginated, pageSize, pageSizeOptions, selectable, rowSelection: controlledRowSelection, onRowSelectionChange, onRowClick, loading, loadingRows, emptyMessage, className, tableOptions, }: DataTableProps<TData>): JSX.Element;
 
 /**
  * A faceted filter button for DataTable, inspired by shadcn's Tasks example.
@@ -664,6 +666,10 @@ export declare interface DataTableProps<TData> {
     onRowSelectionChange?: (selection: RowSelectionState) => void;
     /** Called when a row is clicked */
     onRowClick?: (row: Row<TData>) => void;
+    /** Show skeleton loading state. Default false. */
+    loading?: boolean;
+    /** Number of skeleton rows to show when loading. Default 5. */
+    loadingRows?: number;
     /** Message shown when data is empty. Default "No results." */
     emptyMessage?: string | ReactNode;
     /** Additional class on the outer wrapper */
@@ -1285,8 +1291,23 @@ export declare interface PopoverTriggerProps extends ComponentProps<typeof Popov
 export declare const RadioGroup: {
     Root: ForwardRefExoticComponent<Omit<RadioGroupRootProps, "ref"> & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+    Card: typeof Card_2;
 };
 
+declare interface RadioGroupCardProps {
+    /** Unique value identifying this card */
+    readonly value: string;
+    /** Card title */
+    readonly title: string;
+    /** Optional description below the title */
+    readonly description?: string;
+    /** Optional icon rendered to the left of the text */
+    readonly icon?: ReactNode;
+    /** Disable this card */
+    readonly disabled?: boolean;
+    readonly className?: string;
+}
+
 export declare interface RadioGroupItemProps extends ComponentProps<typeof Radio.Root> {
     /** Size of the radio indicator */
     size?: RadioGroupItemSize;
@@ -1297,6 +1318,8 @@ export declare interface RadioGroupItemProps extends ComponentProps<typeof Radio
 export declare type RadioGroupItemSize = keyof typeof sizeStyles_10;
 
 export declare interface RadioGroupRootProps extends ComponentProps<typeof RadioGroup_2> {
+    /** Layout direction. Default "vertical". */
+    orientation?: "horizontal" | "vertical";
 }
 
 export { Row }
@@ -1567,6 +1590,7 @@ export declare interface SettingsRowProps {
 }
 
 export declare const Sidebar: typeof SidebarRoot & {
+    Provider: typeof SidebarProvider;
     Section: typeof SidebarSection;
     Header: typeof SidebarHeader;
     Label: ForwardRefExoticComponent<Omit<SidebarLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
@@ -1595,6 +1619,10 @@ export declare interface SidebarCollapseButtonProps {
 declare interface SidebarContextValue {
     readonly collapsed: boolean;
     readonly toggle: () => void;
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly mobile: boolean;
+    readonly mobileOpen: boolean;
+    readonly setMobileOpen: (open: boolean) => void;
 }
 
 /**
@@ -1617,7 +1645,7 @@ declare interface SidebarContextValue {
  */
 declare function SidebarHeader({ className, children }: SidebarHeaderProps): JSX.Element;
 
-declare interface SidebarHeaderProps {
+export declare interface SidebarHeaderProps {
     readonly className?: string;
     readonly children: ReactNode;
 }
@@ -1650,14 +1678,21 @@ export declare interface SidebarLayersProps {
     readonly children: ReactNode;
 }
 
-declare function SidebarLink({ name, href, as, active, icon, nested, external, showIndicator, onClick, className, }: SidebarLinkProps): JSX.Element;
+declare function SidebarLink({ name, href, as, active, icon, nested, external, showIndicator, trailing, disabled, loading, onClick, className, ...rest }: SidebarLinkProps): JSX.Element;
 
-export declare interface SidebarLinkProps {
+export declare type SidebarLinkComponent = ComponentType<{
+    readonly to?: string;
+    readonly href?: string;
+    readonly className?: string;
+    readonly children?: ReactNode;
+}>;
+
+export declare interface SidebarLinkProps extends Omit<ComponentProps<"div">, "children"> {
     /** Display name */
     readonly name: string;
-    /** Link URL (renders as <a>) or omit for button */
+    /** Link URL — renders via `linkComponent` (or native `<a>` if none provided) */
     readonly href?: string;
-    /** Render as "div" when nested inside an interactive container (e.g. DropdownMenu.Trigger) to avoid nested <button> */
+    /** Render as "div" when nested inside an interactive container (e.g. DropdownMenu.Trigger) to avoid nested `<button>` */
     readonly as?: "div";
     /** Whether this link is currently active */
     readonly active?: boolean;
@@ -1669,35 +1704,69 @@ export declare interface SidebarLinkProps {
     readonly external?: boolean;
     /** Show a pulsing activity indicator dot */
     readonly showIndicator?: boolean;
+    /** Arbitrary trailing content rendered after the name (e.g. badges, lock icons) */
+    readonly trailing?: ReactNode;
+    /** Disable the link — reduces opacity and prevents clicks */
+    readonly disabled?: boolean;
+    /** Show a skeleton placeholder instead of the link content */
+    readonly loading?: boolean;
     /** Click handler */
     readonly onClick?: () => void;
-    readonly className?: string;
 }
 
 /**
- * Sidebar with collapsible state and directional layer transitions.
+ * Context-only provider for sidebar state — no visual output.
  *
- * Supports both uncontrolled (`defaultCollapsed`) and controlled
- * (`collapsed` + `onCollapsedChange`) modes. Use controlled mode
- * to persist state across route changes or sync with external storage.
+ * Wrap your entire page layout with this when you need `useSidebar()`
+ * outside the visual `<Sidebar>` container (e.g. in the page header
+ * or in portaled components).
  *
- * Sub-components:
- * - `Sidebar.Section` — groups related links
- * - `Sidebar.Label` — section label that collapses smoothly
- * - `Sidebar.Link` — nav link with Hover + Tooltip
- * - `Sidebar.BackLink` — back navigation with directional slide
- * - `Sidebar.CollapseButton` — toggle sidebar width
- * - `Sidebar.Layers` — directional animation container for nested sidebars
+ * When `<Sidebar>` is rendered inside a `<Sidebar.Provider>`, it
+ * skips creating its own context and uses the provider's state.
+ *
+ * ```tsx
+ * <Sidebar.Provider collapsed={collapsed} onCollapsedChange={setCollapsed}>
+ *   <PageLayout sidebar={<Sidebar>...</Sidebar>}>
+ *     <MyHeader />
+ *   </PageLayout>
+ * </Sidebar.Provider>
+ * ```
  */
-declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, className, children, }: SidebarRootProps): JSX.Element;
+declare function SidebarProvider({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, linkComponent, children, }: SidebarProviderProps): JSX.Element;
 
-export declare interface SidebarRootProps {
+export declare interface SidebarProviderProps {
     /** Start in collapsed state (uncontrolled) */
     readonly defaultCollapsed?: boolean;
     /** Controlled collapsed state */
     readonly collapsed?: boolean;
     /** Callback when collapsed state changes (controlled mode) */
     readonly onCollapsedChange?: (collapsed: boolean) => void;
+    /** Custom link component for client-side navigation */
+    readonly linkComponent?: SidebarLinkComponent;
+    readonly children: ReactNode;
+}
+
+/**
+ * Responsive sidebar with collapsible state and directional layer transitions.
+ *
+ * When rendered inside a `<Sidebar.Provider>`, uses the provider's context
+ * and only renders the visual shell. Otherwise, creates its own context.
+ *
+ * **Desktop** (`md:` and up): renders inline with collapse/expand animation.
+ * **Mobile** (below `md:`): shows collapsed icons inline. Tapping an icon
+ * or the collapse button opens the full sidebar in a left-side Drawer.
+ */
+declare function SidebarRoot({ defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, linkComponent, className, children, }: SidebarRootProps): JSX.Element;
+
+export declare interface SidebarRootProps {
+    /** Start in collapsed state (uncontrolled). Ignored when inside a Sidebar.Provider. */
+    readonly defaultCollapsed?: boolean;
+    /** Controlled collapsed state. Ignored when inside a Sidebar.Provider. */
+    readonly collapsed?: boolean;
+    /** Callback when collapsed state changes. Ignored when inside a Sidebar.Provider. */
+    readonly onCollapsedChange?: (collapsed: boolean) => void;
+    /** Custom link component for client-side navigation. Ignored when inside a Sidebar.Provider. */
+    readonly linkComponent?: SidebarLinkComponent;
     readonly className?: string;
     readonly children: ReactNode;
 }
@@ -1873,6 +1942,7 @@ export declare const Table: ReturnType<typeof forwardRef<HTMLDivElement, TablePr
     Row: typeof TableRow;
     HeaderCell: typeof TableHeaderCell;
     Cell: typeof TableCell;
+    Skeleton: typeof TableSkeleton;
 };
 
 declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
@@ -1925,6 +1995,27 @@ export declare interface TableRowProps extends Omit<ComponentProps<"tr">, "child
     children: ReactNode;
 }
 
+/**
+ * Skeleton loading rows for the Table.
+ * Renders inside a `<tbody>` with the specified number of rows and columns.
+ *
+ * ```tsx
+ * <Table>
+ *   <Table.Header>...</Table.Header>
+ *   {loading ? <Table.Skeleton columns={3} /> : <Table.Body>...</Table.Body>}
+ * </Table>
+ * ```
+ */
+declare function TableSkeleton({ columns, rows, className }: TableSkeletonProps): JSX.Element;
+
+declare interface TableSkeletonProps {
+    /** Number of columns to render */
+    readonly columns: number;
+    /** Number of skeleton rows. Default 5. */
+    readonly rows?: number;
+    readonly className?: string;
+}
+
 export declare const Tabs: {
     Root: ForwardRefExoticComponent<Omit<TabsRootProps, "ref"> & RefAttributes<HTMLDivElement>>;
     List: ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & RefAttributes<HTMLDivElement>>;