@tailor-platform/app-shell 0.29.0 → 0.30.0

package/dist/app-shell.d.ts

@@ -1,5 +1,8 @@
 import { AuthClient } from '@tailor-platform/auth-public-client';
 import { ClassProp } from 'class-variance-authority/types';
+import { CSSProperties } from 'react';
+import { Dialog as Dialog_2 } from '@base-ui/react/dialog';
+import { Drawer } from '@base-ui/react/drawer';
 import { FC } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { Link } from 'react-router';
@@ -7,6 +10,7 @@ import { LoaderFunctionArgs } from 'react-router';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { toast } from 'sonner';
+import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
 import { useLocation } from 'react-router';
 import { useNavigate } from 'react-router';
 import { useParams } from 'react-router';
@@ -293,6 +297,64 @@ export declare const badgeVariants: (props?: ({
  */
 declare type BadgeVariantType = "default" | "success" | "warning" | "error" | "neutral" | "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;
+
+declare namespace Body_2 {
+    var displayName: string;
+}
+
+/**
+ * A styled button component with multiple variants and sizes.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from "@tailor-platform/app-shell";
+ *
+ * <Button variant="default">Click me</Button>
+ * <Button variant="outline" size="sm">Small</Button>
+ * <Button variant="destructive">Delete</Button>
+ * ```
+ */
+export declare function Button({ className, variant, size, render, children, ...props }: ButtonProps): React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>>;
+
+export declare type ButtonProps = React_2.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    render?: React_2.ReactElement;
+};
+
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/** A table caption element. */
+declare function Caption({ className, ...props }: React_2.ComponentProps<"caption">): JSX.Element;
+
+declare namespace Caption {
+    var displayName: string;
+}
+
+/** A table data cell (`<td>`). */
+declare function Cell({ className, ...props }: React_2.ComponentProps<"td">): JSX.Element;
+
+declare namespace Cell {
+    var displayName: string;
+}
+
+/** A button that closes the dialog. */
+declare function Close({ ...props }: React_2.ComponentProps<typeof Dialog_2.Close>): JSX.Element;
+
+declare namespace Close {
+    var displayName: string;
+}
+
+/** A button that closes the sheet. */
+declare function Close_2({ ...props }: React_2.ComponentProps<typeof Drawer.Close>): JSX.Element;
+
+declare namespace Close_2 {
+    var displayName: string;
+}
+
 /**
  * Supported area values for Layout.Column
  */
@@ -309,6 +371,8 @@ declare type ColumnCount = 1 | 2 | 3;
 declare interface ColumnProps {
     /** Additional CSS classes */
     className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
     /**
      * Column area role. When specified on all columns, determines width template
      * based on role rather than position.
@@ -379,6 +443,31 @@ declare type CommonProps = {
     guards?: Guard[];
 };
 
+/** The main dialog panel that contains the dialog content. Automatically includes a close button and overlay. */
+declare function Content({ className, children, ...props }: React_2.ComponentProps<typeof Dialog_2.Popup>): JSX.Element;
+
+declare namespace Content {
+    var displayName: string;
+}
+
+/** The main sheet panel. The `side` is inherited from `Sheet.Root` via context. */
+declare function Content_2({ className, children, ...props }: React_2.ComponentProps<typeof Drawer.Popup>): JSX.Element;
+
+declare namespace Content_2 {
+    var displayName: string;
+}
+
+/** The tooltip popup that displays additional information. */
+declare function Content_3({ className, sideOffset, side, align, children, ...restProps }: React_2.ComponentProps<typeof Tooltip_2.Popup> & {
+    sideOffset?: number;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+}): JSX.Element;
+
+declare namespace Content_3 {
+    var displayName: string;
+}
+
 /**
  * Context data type inferred from AppShellRegister.
  * Falls back to Record<string, unknown> if not augmented.
@@ -709,6 +798,20 @@ 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 namespace Description {
+    var displayName: string;
+}
+
+/** A description that provides additional context for the sheet. */
+declare function Description_2({ className, ...props }: React_2.ComponentProps<typeof Drawer.Description>): JSX.Element;
+
+declare namespace Description_2 {
+    var displayName: string;
+}
+
 /**
  * DescriptionCard - ERP document display component
  *
@@ -729,7 +832,7 @@ declare type DefineResourceProps = CommonProps & ErrorBoundaryProps & {
  * />
  * ```
  */
-export declare function DescriptionCard({ data, title, fields, columns, className, headerAction, }: DescriptionCardProps): JSX.Element;
+export declare function DescriptionCard({ data, title, fields, columns, className, style, headerAction, }: DescriptionCardProps): JSX.Element;
 
 /**
  * Props for the DescriptionCard component
@@ -745,10 +848,27 @@ export declare interface DescriptionCardProps {
     columns?: Columns;
     /** Additional CSS classes */
     className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
     /** Header action slot (e.g., edit button) */
-    headerAction?: React.ReactNode;
+    headerAction?: ReactNode;
 }
 
+export declare const Dialog: {
+    Root: typeof Root_2;
+    Close: typeof Close;
+    Content: typeof Content;
+    Description: typeof Description;
+    Footer: typeof Footer_2;
+    Header: typeof Header_3;
+    Title: typeof Title;
+    Trigger: typeof Trigger;
+};
+
+declare type DialogRootProps = Pick<React_2.ComponentProps<typeof Dialog_2.Root>, "open" | "defaultOpen" | "onOpenChange" | "modal"> & {
+    children: React_2.ReactNode;
+};
+
 declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
     [locale: string]: Partial<LabelDefinition<Def>> | undefined;
 };
@@ -894,6 +1014,27 @@ declare interface FieldMeta {
  */
 declare type FieldType = "text" | "badge" | "money" | "date" | "link" | "address" | "reference";
 
+/** The table footer section (`<tfoot>`). */
+declare function Footer({ className, ...props }: React_2.ComponentProps<"tfoot">): JSX.Element;
+
+declare namespace Footer {
+    var displayName: string;
+}
+
+/** A layout wrapper for dialog action buttons, typically placed at the bottom. */
+declare function Footer_2({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Footer_2 {
+    var displayName: string;
+}
+
+/** A layout wrapper for sheet action buttons, typically placed at the bottom. */
+declare function Footer_3({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Footer_3 {
+    var displayName: string;
+}
+
 /**
  * Guard function type.
  * Guards are executed in order and stop on the first non-pass result.
@@ -926,6 +1067,13 @@ export declare type GuardResult =
     to: string;
 };
 
+/** A table header cell (`<th>`). */
+declare function Head({ className, ...props }: React_2.ComponentProps<"th">): JSX.Element;
+
+declare namespace Head {
+    var displayName: string;
+}
+
 /**
  * Layout.Header — Page-level header with title, actions, and an optional
  * full-width slot.
@@ -971,6 +1119,27 @@ declare namespace Header {
     var displayName: string;
 }
 
+/** The table header section (`<thead>`). */
+declare function Header_2({ className, ...props }: React_2.ComponentProps<"thead">): JSX.Element;
+
+declare namespace Header_2 {
+    var displayName: string;
+}
+
+/** A layout wrapper for the dialog title and description. */
+declare function Header_3({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Header_3 {
+    var displayName: string;
+}
+
+/** A layout wrapper for the sheet title and description. */
+declare function Header_4({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Header_4 {
+    var displayName: string;
+}
+
 /**
  * Deny access and show 404 Not Found.
  *
@@ -992,6 +1161,21 @@ export declare type I18nLabels<Def extends Record<string, LabelValue> = Record<s
     [K in L]: LabelDefinition<Def>;
 } & DynamicLocales<Def>;
 
+/**
+ * A styled input component.
+ *
+ * @example
+ * ```tsx
+ * import { Input } from "@tailor-platform/app-shell";
+ *
+ * <Input type="text" placeholder="Enter your name" />
+ * <Input type="email" disabled />
+ * ```
+ */
+export declare function Input({ className, type, ...props }: InputProps): JSX.Element;
+
+export declare type InputProps = React_2.ComponentProps<"input">;
+
 /**
  * Check if an object type has no keys.
  */
@@ -1049,7 +1233,7 @@ declare type LabelValue = string | ((props: any) => string);
  * </Layout>
  * ```
  */
-export declare function Layout({ columns, className, gap, title, actions, children }: LayoutProps): JSX.Element;
+export declare function Layout({ columns, className, style, gap, title, actions, children }: LayoutProps): JSX.Element;
 
 export declare namespace Layout {
     var Column: React_2.ForwardRefExoticComponent<ColumnProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -1080,6 +1264,8 @@ export declare interface LayoutProps {
     columns?: ColumnCount;
     /** Additional CSS classes */
     className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
     /**
      * Gap between columns (default: 4 = 16px)
      *
@@ -1170,6 +1356,17 @@ export declare type PageMeta = {
  */
 export declare const pass: () => GuardResult;
 
+/** Provides shared delay configuration for nested tooltips. */
+declare function Provider({ delay, children, ...props }: ProviderProps): JSX.Element;
+
+declare namespace Provider {
+    var displayName: string;
+}
+
+declare type ProviderProps = Pick<React_2.ComponentProps<typeof Tooltip_2.Provider>, "delay" | "closeDelay" | "timeout"> & {
+    children: React_2.ReactNode;
+};
+
 /**
  * Redirect to another path.
  *
@@ -1221,6 +1418,106 @@ declare type ResourceMeta = {
     breadcrumbTitle?: string | ((segment: string) => string);
 };
 
+/**
+ * The root table element with a horizontally scrollable container.
+ *
+ * Note: `className` targets the inner `<table>` element, while `containerClassName` targets the outer scrollable `<div>` wrapper.
+ *
+ * @example
+ * ```tsx
+ * <Table.Root>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head>Name</Table.Head>
+ *       <Table.Head>Status</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>Item 1</Table.Cell>
+ *       <Table.Cell>Active</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare function Root({ className, containerClassName, ...props }: RootProps): JSX.Element;
+
+declare namespace Root {
+    var displayName: string;
+}
+
+/**
+ * The root component that manages dialog open/close state.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Are you sure?</Dialog.Title>
+ *       <Dialog.Description>This action cannot be undone.</Dialog.Description>
+ *     </Dialog.Header>
+ *     <Dialog.Footer>
+ *       <Button variant="outline">Cancel</Button>
+ *       <Button>Confirm</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare function Root_2({ ...props }: DialogRootProps): JSX.Element;
+
+declare namespace Root_2 {
+    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_3({ side, ...props }: SheetRootProps): JSX.Element;
+
+declare namespace Root_3 {
+    var displayName: string;
+}
+
+/**
+ * The root component that manages tooltip open/close state.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger render={<Button variant="outline" />}>
+ *     Hover me
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Content>Helpful information</Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare function Root_4({ children, ...props }: TooltipRootProps): JSX.Element;
+
+declare namespace Root_4 {
+    var displayName: string;
+}
+
 declare type RootConfiguration = {
     modules: Modules;
     settingsResources: Resource[];
@@ -1229,6 +1526,11 @@ declare type RootConfiguration = {
     locale: string;
 };
 
+declare type RootProps = 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;
+};
+
 /**
  * Route parameters type inferred from AppShellRegister.
  * Falls back to Record<string, Record<string, string>> if not augmented.
@@ -1238,6 +1540,13 @@ export declare type RouteParams = AppShellRegister extends {
     routeParams: infer T;
 } ? T : Record<string, Record<string, string>>;
 
+/** A table row (`<tr>`). */
+declare function Row({ className, ...props }: React_2.ComponentProps<"tr">): JSX.Element;
+
+declare namespace Row {
+    var displayName: string;
+}
+
 declare type SharedAppShellProps = React.PropsWithChildren<{
     /**
      * App shell title
@@ -1327,6 +1636,24 @@ declare type SharedAppShellProps = React.PropsWithChildren<{
     contextData?: ContextData;
 }>;
 
+export declare const Sheet: {
+    Root: typeof Root_3;
+    Trigger: typeof Trigger_2;
+    Close: typeof Close_2;
+    Content: typeof Content_2;
+    Header: typeof Header_4;
+    Footer: typeof Footer_3;
+    Title: typeof Title_2;
+    Description: typeof Description_2;
+};
+
+declare type SheetRootProps = Pick<React_2.ComponentProps<typeof Drawer.Root>, "open" | "defaultOpen" | "onOpenChange" | "modal"> & {
+    children: React_2.ReactNode;
+    side?: Side;
+};
+
+declare type Side = "top" | "right" | "bottom" | "left";
+
 /**
  * A collapsible group for sidebar navigation.
  *
@@ -1507,6 +1834,17 @@ export declare type SidebarLayoutProps = {
  */
 export declare const SidebarSeparator: () => JSX.Element;
 
+export declare const Table: {
+    Root: typeof Root;
+    Header: typeof Header_2;
+    Body: typeof Body_2;
+    Footer: typeof Footer;
+    Row: typeof Row;
+    Head: typeof Head;
+    Cell: typeof Cell;
+    Caption: typeof Caption;
+};
+
 declare type Theme = "dark" | "light" | "system";
 
 declare type ThemeProviderState = {
@@ -1515,6 +1853,52 @@ 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 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;
+
+declare namespace Title_2 {
+    var displayName: string;
+}
+
+export declare const Tooltip: {
+    Root: typeof Root_4;
+    Trigger: typeof Trigger_3;
+    Content: typeof Content_3;
+    Provider: typeof Provider;
+};
+
+declare type TooltipRootProps = Pick<React_2.ComponentProps<typeof Tooltip_2.Root>, "open" | "defaultOpen" | "onOpenChange"> & {
+    children: React_2.ReactNode;
+};
+
+/** The element that opens the dialog when clicked. */
+declare function Trigger({ ...props }: React_2.ComponentProps<typeof Dialog_2.Trigger>): JSX.Element;
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+/** The element that opens the sheet when clicked. */
+declare function Trigger_2({ ...props }: React_2.ComponentProps<typeof Drawer.Trigger>): JSX.Element;
+
+declare namespace Trigger_2 {
+    var displayName: string;
+}
+
+/** The element that triggers the tooltip on hover or focus. */
+declare function Trigger_3({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Trigger>): JSX.Element;
+
+declare namespace Trigger_3 {
+    var displayName: string;
+}
+
 /**
  * Type-safe path builder interface.
  *