@tailor-platform/app-shell 1.2.0 → 1.4.0

package/dist/app-shell.d.ts

@@ -20,6 +20,7 @@ import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { Select as Select_2 } from '@base-ui/react/select';
 import { StandardSchemaV1 } from '@standard-schema/spec';
+import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
 import { toast } from 'sonner';
 import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
 import { useLocation } from 'react-router';
@@ -46,6 +47,8 @@ declare interface ActionItem {
     disabled?: boolean;
     /** When true, show loading indicator in the row and make it non-interactive */
     loading?: boolean;
+    /** Visual variant. Use "destructive" for dangerous actions like delete. */
+    variant?: "default" | "destructive";
 }
 
 /**
@@ -95,7 +98,7 @@ export declare interface ActionPanelProps {
 }
 
 export declare const ActivityCard: typeof ActivityCardStandalone & {
-    Root: typeof Root;
+    Root: typeof Root_2;
     Items: typeof Items;
     Item: typeof Item;
 };
@@ -185,6 +188,18 @@ export declare interface ActivityCardRootProps<T extends ActivityCardBaseItem> {
  */
 declare function ActivityCardStandalone({ items, title, maxVisible, overflowLabel, groupBy, className, }: ActivityCardProps): JSX.Element;
 
+export declare const Alert: {
+    Root: typeof Root;
+    Title: typeof Title;
+    Description: typeof Description;
+};
+
+export declare type AlertProps = RootProps;
+
+export declare const alertVariants: (props?: ({
+    variant?: "error" | "neutral" | "success" | "warning" | "info" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const AppShell: {
     (props: AppShellProps): JSX.Element | null;
     WithPages(pages: PageEntry[]): FC<AppShellProps>;
@@ -709,7 +724,7 @@ declare namespace AutocompleteValue {
 }
 
 export declare const Avatar: {
-    Root: typeof Root_2;
+    Root: typeof Root_3;
     Image: typeof Image_2;
     Fallback: typeof Fallback;
 };
@@ -723,36 +738,42 @@ export declare const avatarVariants: (props?: ({
 export declare function Badge({ className, variant, children, ...props }: BadgeProps): JSX.Element;
 
 /** Options for `type: "badge"` cells. */
-declare interface BadgeCellOptions {
+declare interface BadgeCellOptions extends BadgeOptions {
+    /** Maximum number of badges to display before showing a "+N" overflow indicator */
+    maxVisible?: number;
+}
+
+/**
+ * Common options for badge rendering.
+ */
+export declare interface BadgeOptions {
     /**
-     * Maps each cell value (stringified) to a Badge variant. Values not in the
+     * Maps each value (stringified) to a Badge variant. Values not in the
      * map fall back to `defaultBadgeVariant`.
      */
     badgeVariantMap?: Record<string, BadgeVariant>;
     /**
-     * Maps each cell value (stringified) to a display label. Values not in the
-     * map render the raw cell value.
+     * Maps each value (stringified) to a display label. Values not in the
+     * map render the raw value (or sentence-cased value if enabled).
      */
     badgeLabelMap?: Record<string, string>;
-    /** Variant used when the value is not in `badgeVariantMap`. Default: `"neutral"`. */
+    /** Variant used when the value is not in `badgeVariantMap`. Default: `"outline-neutral"`. */
     defaultBadgeVariant?: BadgeVariant;
 }
 
 export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 
-/** Variant union accepted by the app-shell `<Badge>` component. */
-declare type BadgeVariant = NonNullable<BadgeProps["variant"]>;
+/**
+ * Variant union accepted by the app-shell `<Badge>` component.
+ * Shared across DataTable, DescriptionCard, and any other badge consumers.
+ */
+export declare type BadgeVariant = NonNullable<BadgeProps["variant"]>;
 
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "error" | "success" | "warning" | "neutral" | "subtle-success" | "subtle-warning" | "subtle-error" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral" | null | undefined;
+    variant?: "default" | "error" | "neutral" | "success" | "warning" | "info" | "subtle-success" | "subtle-warning" | "subtle-error" | "subtle-info" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-/**
- * Badge variant mapping for automatic status coloring
- */
-declare type BadgeVariantType = "default" | "success" | "warning" | "error" | "neutral" | "subtle-success" | "subtle-warning" | "subtle-error" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral";
-
 /** The table body section (`<tbody>`). */
 declare function Body_2({ className, ...props }: React_2.ComponentProps<"tbody">): JSX.Element;
 
@@ -808,7 +829,7 @@ declare namespace Caption {
 }
 
 export declare const Card: {
-    Root: typeof Root_4;
+    Root: typeof Root_5;
     Header: typeof Header_3;
     Content: typeof Content;
 };
@@ -1146,7 +1167,7 @@ declare type ColumnTypeBranch<TRow extends Record<string, unknown>> = {
 } | {
     type: "badge";
     typeOptions?: BadgeCellOptions;
-    accessor?: (row: TRow) => string | number | boolean | null | undefined;
+    accessor?: (row: TRow) => string | string[] | number | boolean | null | undefined;
 } | {
     type: "link";
     typeOptions: LinkCellOptions<TRow>;
@@ -1494,7 +1515,7 @@ declare namespace Content_3 {
 }
 
 /** The main sheet panel. The `side` is inherited from `Sheet.Root` via context. */
-declare function Content_4({ className, children, ...props }: React_2.ComponentProps<typeof Drawer.Popup>): JSX.Element;
+declare function Content_4({ className, children, size, ...props }: SheetContentProps): JSX.Element;
 
 declare namespace Content_4 {
     var displayName: string;
@@ -2224,29 +2245,35 @@ declare type DefineResourceProps = CommonProps & ErrorBoundaryProps & {
     subResources?: Array<Resource>;
 };
 
-/** A description that provides additional context for the dialog. */
-declare function Description({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Description>): JSX.Element;
+declare function Description({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
 declare namespace Description {
     var displayName: string;
 }
 
+/** A description that provides additional context for the dialog. */
+declare function Description_2({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Description>): JSX.Element;
+
+declare namespace Description_2 {
+    var displayName: string;
+}
+
 /**
  * A paragraph with additional information about the field.
  *
  * Its ID is registered with the Field context so that the control
  * automatically receives a matching `aria-describedby` attribute.
  */
-declare function Description_2({ className, ...props }: React_2.ComponentProps<typeof Field_2.Description>): JSX.Element;
+declare function Description_3({ className, ...props }: React_2.ComponentProps<typeof Field_2.Description>): JSX.Element;
 
-declare namespace Description_2 {
+declare namespace Description_3 {
     var displayName: string;
 }
 
 /** A description that provides additional context for the sheet. */
-declare function Description_3({ className, ...props }: React_2.ComponentProps<typeof Drawer.Description>): JSX.Element;
+declare function Description_4({ className, ...props }: React_2.ComponentProps<typeof Drawer.Description>): JSX.Element;
 
-declare namespace Description_3 {
+declare namespace Description_4 {
     var displayName: string;
 }
 
@@ -2293,13 +2320,13 @@ export declare interface DescriptionCardProps {
 }
 
 export declare const Dialog: {
-    Root: typeof Root_5;
+    Root: typeof Root_6;
     Close: typeof Close;
     Content: typeof Content_2;
-    Description: typeof Description;
+    Description: typeof Description_2;
     Footer: typeof Footer_2;
     Header: typeof Header_4;
-    Title: typeof Title;
+    Title: typeof Title_2;
     Trigger: typeof Trigger;
 };
 
@@ -2462,10 +2489,10 @@ declare namespace Fallback {
 }
 
 export declare const Field: {
-    Root: typeof Root_6;
+    Root: typeof Root_7;
     Label: typeof Label;
     Control: typeof Control;
-    Description: typeof Description_2;
+    Description: typeof Description_3;
     Error: typeof Error_2;
     Validity: typeof Validity;
 };
@@ -2505,9 +2532,18 @@ declare interface FieldMeta {
     /** Show copy button for this field */
     copyable?: boolean;
     /** Map field values to badge variants */
-    badgeVariantMap?: Record<string, BadgeVariantType>;
+    badgeVariantMap?: Record<string, BadgeVariant>;
+    /**
+     * Maps each value (stringified) to a display label. Values not in the
+     * map render the raw value (or sentence-cased value if enabled).
+     */
+    badgeLabelMap?: Record<string, string>;
+    /** Variant used when the value is not in `badgeVariantMap`. Default: `"outline-neutral"` (from shared `resolveBadgeVariant`). */
+    defaultBadgeVariant?: BadgeVariant;
     /** Render badge labels in sentence case by default; set false to keep the original value */
     sentenceCaseBadges?: boolean;
+    /** Maximum number of badges to display before showing a "+N" overflow indicator */
+    maxVisible?: number;
     /** Key path to currency code in data object (for money fields) */
     currencyKey?: string;
     /** Key path to href in data object (for link fields) */
@@ -2560,7 +2596,7 @@ declare type FieldRootProps = Pick<React_2.ComponentProps<typeof Field_2.Root>,
 };
 
 export declare const Fieldset: {
-    Root: typeof Root_7;
+    Root: typeof Root_8;
     Legend: typeof Legend;
 };
 
@@ -2918,8 +2954,8 @@ declare namespace Header_4 {
     var displayName: string;
 }
 
-/** A layout wrapper for the sheet title and description. */
-declare function Header_5({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+/** A layout wrapper for the sheet title, close button, and optional action buttons. */
+declare function Header_5({ className, action, children, ...props }: SheetHeaderProps): JSX.Element;
 
 declare namespace Header_5 {
     var displayName: string;
@@ -3176,6 +3212,13 @@ declare namespace LinkItem {
     var displayName: string;
 }
 
+/** Groups the individual tab buttons. */
+declare function List({ className, children, ...props }: React_2.ComponentProps<typeof Tabs_2.List>): JSX.Element;
+
+declare namespace List {
+    var displayName: string;
+}
+
 declare type LoaderHandler = (args: LoaderFunctionArgs) => Promise<unknown> | unknown;
 
 declare type LocalizedString = string | ((locale: string) => string);
@@ -3191,7 +3234,7 @@ export declare interface MappedItem {
 }
 
 export declare const Menu: {
-    Root: typeof Root_8;
+    Root: typeof Root_9;
     Trigger: typeof Trigger_2;
     Content: typeof Content_3;
     Item: typeof Item_2;
@@ -3434,6 +3477,13 @@ export declare interface PaginationVariables {
     before?: string | null;
 }
 
+/** A panel displayed when the corresponding tab is active. */
+declare function Panel({ className, children, ...props }: React_2.ComponentProps<typeof Tabs_2.Panel>): JSX.Element;
+
+declare namespace Panel {
+    var displayName: string;
+}
+
 /** The row data passed to `onValidate`, after transforms have been applied. */
 export declare type ParsedRow = {
     /** 0-based row index, stable across edits. */
@@ -3546,12 +3596,61 @@ declare type ResourceMeta = {
     breadcrumbTitle?: string | ((segment: string) => string);
 };
 
-declare function Root<T extends ActivityCardBaseItem>({ items, title, maxVisible, overflowLabel, groupBy, className, children, }: ActivityCardRootProps<T>): JSX.Element;
+declare function Root({ className, variant, action, dismissible, onDismiss, children, ...props }: RootProps): JSX.Element | null;
 
 declare namespace Root {
     var displayName: string;
 }
 
+/**
+ * The root component that manages sheet open/close state.
+ * The `side` prop controls which edge of the screen the sheet slides in from.
+ *
+ * @example
+ * ```tsx
+ * <Sheet.Root side="right">
+ *   <Sheet.Trigger render={<Button />}>Open</Sheet.Trigger>
+ *   <Sheet.Content>
+ *     <Sheet.Header>
+ *       <Sheet.Title>Settings</Sheet.Title>
+ *       <Sheet.Description>Manage your preferences.</Sheet.Description>
+ *     </Sheet.Header>
+ *     <Sheet.Footer>
+ *       <Button>Save</Button>
+ *     </Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet.Root>
+ * ```
+ */
+declare function Root_10({ side, ...props }: SheetRootProps): JSX.Element;
+
+declare namespace Root_10 {
+    var displayName: string;
+}
+
+/**
+ * The root component that manages tab selection state.
+ *
+ * @example
+ * ```tsx
+ * <Tabs.Root defaultValue="overview">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="overview">Overview</Tabs.Tab>
+ *     <Tabs.Tab value="projects">Projects</Tabs.Tab>
+ *     <Tabs.Tab value="account">Account</Tabs.Tab>
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">Overview content</Tabs.Panel>
+ *   <Tabs.Panel value="projects">Projects content</Tabs.Panel>
+ *   <Tabs.Panel value="account">Account content</Tabs.Panel>
+ * </Tabs.Root>
+ * ```
+ */
+declare function Root_11({ className, children, variant, ...props }: RootProps_3): JSX.Element;
+
+declare namespace Root_11 {
+    var displayName: string;
+}
+
 /**
  * The root component that manages tooltip open/close state.
  *
@@ -3565,9 +3664,15 @@ declare namespace Root {
  * </Tooltip.Root>
  * ```
  */
-declare function Root_10({ children, ...props }: TooltipRootProps): JSX.Element;
+declare function Root_12({ children, ...props }: TooltipRootProps): JSX.Element;
 
-declare namespace Root_10 {
+declare namespace Root_12 {
+    var displayName: string;
+}
+
+declare function Root_2<T extends ActivityCardBaseItem>({ items, title, maxVisible, overflowLabel, groupBy, className, children, }: ActivityCardRootProps<T>): JSX.Element;
+
+declare namespace Root_2 {
     var displayName: string;
 }
 
@@ -3584,9 +3689,9 @@ declare namespace Root_10 {
  * </Avatar.Root>
  * ```
  */
-declare function Root_2({ className, size, ...props }: AvatarProps): JSX.Element;
+declare function Root_3({ className, size, ...props }: AvatarProps): JSX.Element;
 
-declare namespace Root_2 {
+declare namespace Root_3 {
     var displayName: string;
 }
 
@@ -3613,15 +3718,15 @@ declare namespace Root_2 {
  * </Table.Root>
  * ```
  */
-declare function Root_3({ className, containerClassName, ...props }: RootProps): JSX.Element;
+declare function Root_4({ className, containerClassName, ...props }: RootProps_2): JSX.Element;
 
-declare namespace Root_3 {
+declare namespace Root_4 {
     var displayName: string;
 }
 
-declare function Root_4({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+declare function Root_5({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
-declare namespace Root_4 {
+declare namespace Root_5 {
     var displayName: string;
 }
 
@@ -3645,9 +3750,9 @@ declare namespace Root_4 {
  * </Dialog.Root>
  * ```
  */
-declare function Root_5({ ...props }: DialogRootProps): JSX.Element;
+declare function Root_6({ ...props }: DialogRootProps): JSX.Element;
 
-declare namespace Root_5 {
+declare namespace Root_6 {
     var displayName: string;
 }
 
@@ -3698,17 +3803,17 @@ declare namespace Root_5 {
  * > error routing, add `name={field.name}` to `Field.Root` so errors can be
  * > matched by field name.
  */
-declare function Root_6({ className, children, isTouched, isDirty, invalid, error, isValidating: _isValidating, ...props }: FieldRootProps & {
+declare function Root_7({ className, children, isTouched, isDirty, invalid, error, isValidating: _isValidating, ...props }: FieldRootProps & {
     isValidating?: unknown;
 }): JSX.Element;
 
-declare namespace Root_6 {
+declare namespace Root_7 {
     var displayName: string;
 }
 
-declare function Root_7({ className, ...props }: FieldsetRootProps): JSX.Element;
+declare function Root_8({ className, ...props }: FieldsetRootProps): JSX.Element;
 
-declare namespace Root_7 {
+declare namespace Root_8 {
     var displayName: string;
 }
 
@@ -3728,33 +3833,7 @@ declare namespace Root_7 {
  * </Menu.Root>
  * ```
  */
-declare function Root_8({ children, ...props }: MenuRootProps): JSX.Element;
-
-declare namespace Root_8 {
-    var displayName: string;
-}
-
-/**
- * The root component that manages sheet open/close state.
- * The `side` prop controls which edge of the screen the sheet slides in from.
- *
- * @example
- * ```tsx
- * <Sheet.Root side="right">
- *   <Sheet.Trigger render={<Button />}>Open</Sheet.Trigger>
- *   <Sheet.Content>
- *     <Sheet.Header>
- *       <Sheet.Title>Settings</Sheet.Title>
- *       <Sheet.Description>Manage your preferences.</Sheet.Description>
- *     </Sheet.Header>
- *     <Sheet.Footer>
- *       <Button>Save</Button>
- *     </Sheet.Footer>
- *   </Sheet.Content>
- * </Sheet.Root>
- * ```
- */
-declare function Root_9({ side, ...props }: SheetRootProps): JSX.Element;
+declare function Root_9({ children, ...props }: MenuRootProps): JSX.Element;
 
 declare namespace Root_9 {
     var displayName: string;
@@ -3768,11 +3847,23 @@ declare type RootConfiguration = {
     locale: string;
 };
 
-declare type RootProps = React_2.ComponentProps<"table"> & {
+declare type RootProps = React_2.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+    action?: React_2.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+};
+
+declare type RootProps_2 = React_2.ComponentProps<"table"> & {
     /** Additional CSS classes for the outer scrollable `<div>` container. Use this to control height, overflow, or container-level layout. */
     containerClassName?: string;
 };
 
+declare type RootProps_3 = Pick<React_2.ComponentProps<typeof Tabs_2.Root>, "defaultValue" | "value" | "onValueChange"> & {
+    children: React_2.ReactNode;
+    className?: string;
+    variant?: TabsVariant;
+};
+
 /**
  * Route parameters type inferred from AppShellRegister.
  * Falls back to Record<string, Record<string, string>> if not augmented.
@@ -4157,14 +4248,25 @@ declare type SharedAppShellProps = React.PropsWithChildren<{
 }>;
 
 export declare const Sheet: {
-    Root: typeof Root_9;
+    Root: typeof Root_10;
     Trigger: typeof Trigger_3;
     Close: typeof Close_2;
     Content: typeof Content_4;
     Header: typeof Header_5;
     Footer: typeof Footer_3;
-    Title: typeof Title_2;
-    Description: typeof Description_3;
+    Title: typeof Title_3;
+    Description: typeof Description_4;
+};
+
+declare type SheetContentProps = React_2.ComponentProps<typeof Drawer.Popup> & {
+    /** Controls the max-width of the sheet panel (`sm` | `md` | `lg` | `xl` | `full`). Applies to left/right sides. @default "sm" */
+    size?: Size;
+};
+
+declare type SheetHeaderProps = Omit<React_2.ComponentProps<"div">, "children"> & {
+    /** Action buttons displayed to the right of the title. */
+    action?: React_2.ReactNode;
+    children?: React_2.ReactNode;
 };
 
 declare type SheetRootProps = Pick<React_2.ComponentProps<typeof Drawer.Root>, "open" | "defaultOpen" | "onOpenChange" | "modal"> & {
@@ -4368,6 +4470,8 @@ export declare type SidebarLayoutProps = {
  */
 export declare const SidebarSeparator: () => JSX.Element;
 
+declare type Size = "sm" | "md" | "lg" | "xl" | "full";
+
 /**
  * Sort configuration for a column.
  * The `type` determines how values are compared when sorting.
@@ -4413,8 +4517,15 @@ declare namespace SubmenuTrigger {
     var displayName: string;
 }
 
+/** An individual interactive tab button that toggles the corresponding panel. */
+declare function Tab({ className, children, ...props }: React_2.ComponentProps<typeof Tabs_2.Tab>): JSX.Element;
+
+declare namespace Tab {
+    var displayName: string;
+}
+
 export declare const Table: {
-    Root: typeof Root_3;
+    Root: typeof Root_4;
     Header: typeof Header_2;
     Body: typeof Body_2;
     Footer: typeof Footer;
@@ -4476,6 +4587,15 @@ export declare type TableOrderableFieldName<TTable extends TableMetadata> = Extr
     readonly name: infer N;
 } ? N extends string ? N : never : never;
 
+export declare const Tabs: {
+    Root: typeof Root_11;
+    List: typeof List;
+    Tab: typeof Tab;
+    Panel: typeof Panel;
+};
+
+declare type TabsVariant = "default" | "line" | "capsule";
+
 declare type Theme = "dark" | "light" | "system";
 
 declare type ThemeProviderState = {
@@ -4484,22 +4604,28 @@ declare type ThemeProviderState = {
     setTheme: (theme: Theme) => void;
 };
 
-/** The title of the dialog, announced by screen readers. */
-declare function Title({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Title>): JSX.Element;
+declare function Title({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
 declare namespace Title {
     var displayName: string;
 }
 
-/** The title of the sheet, announced by screen readers. */
-declare function Title_2({ className, ...props }: React_2.ComponentProps<typeof Drawer.Title>): JSX.Element;
+/** The title of the dialog, announced by screen readers. */
+declare function Title_2({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Title>): JSX.Element;
 
 declare namespace Title_2 {
     var displayName: string;
 }
 
+/** The title of the sheet, announced by screen readers. */
+declare function Title_3({ className, ...props }: React_2.ComponentProps<typeof Drawer.Title>): JSX.Element;
+
+declare namespace Title_3 {
+    var displayName: string;
+}
+
 export declare const Tooltip: {
-    Root: typeof Root_10;
+    Root: typeof Root_12;
     Trigger: typeof Trigger_4;
     Content: typeof Content_5;
     Provider: typeof Provider;