@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.38.1 → 0.5.0-beta.40.1

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import { HoverCard as HoverCard_2 } from 'radix-ui';
 import { JSX } from 'react/jsx-runtime';
 import { Label as Label_2 } from 'radix-ui';
 import { Locale } from 'react-day-picker';
+import { LucideIcon } from 'lucide-react';
 import { Menubar as Menubar_2 } from 'radix-ui';
 import { NavigationMenu as NavigationMenu_2 } from 'radix-ui';
 import { OnChange } from '@monaco-editor/react';
@@ -215,6 +216,15 @@ export declare function BreadcrumbEllipsis({ className, ...props }: React_2.Comp
 
 export declare function BreadcrumbItem({ className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
 
+export declare interface BreadcrumbItemConfig {
+    /** Display label */
+    label: string;
+    /** If provided, renders as a link */
+    href?: string;
+    /** Click handler (used when no href is provided) */
+    onClick?: () => void;
+}
+
 export declare function BreadcrumbLink({ asChild, className, ...props }: React_2.ComponentProps<"a"> & {
     asChild?: boolean;
 }): JSX.Element;
@@ -256,7 +266,7 @@ export declare const buttonGroupVariants: (props?: ({
 
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "sm" | "default" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React_2.ComponentProps<typeof DayPicker> & {
@@ -662,6 +672,41 @@ export declare function ContextMenuSubTrigger({ className, inset, children, ...p
 
 export declare function ContextMenuTrigger({ className, ...props }: React_2.ComponentProps<typeof ContextMenu_2.Trigger>): JSX.Element;
 
+export declare function DataAppShell({ appName, appFullName, appIcon, version, navGroups, onAppNameClick, backToPlatformPath, onBackToPlatform, userMenu, breadcrumbs, onHelpClick, headerActions, sidebarPanel, children, className, }: DataAppShellProps): JSX.Element;
+
+export declare interface DataAppShellProps {
+    /** Application name/abbreviation shown in the logo button */
+    appName: string;
+    /** Full application name shown in the app dropdown and mobile nav header */
+    appFullName?: string;
+    /** Custom icon element shown in the logo area */
+    appIcon?: React_2.ReactNode;
+    /** Optional version string shown below the app name/icon in the sidebar header */
+    version?: string;
+    /** Navigation groups; each group contains one or more pages */
+    navGroups: NavGroup[];
+    /** Callback when the app name / icon is clicked in the dropdown */
+    onAppNameClick?: () => void;
+    /** TDP path to navigate to when "Back to TDP Platform" is clicked (uses TDPLink — requires TdpNavigationProvider) */
+    backToPlatformPath?: string;
+    /** Fallback callback when "Back to TDP Platform" is clicked and no backToPlatformPath is set */
+    onBackToPlatform?: () => void;
+    /** Slot rendered at the bottom of the sidebar (e.g. user avatar + menu) */
+    userMenu?: React_2.ReactNode;
+    /** Breadcrumb items from root to current page */
+    breadcrumbs?: BreadcrumbItemConfig[];
+    /** Callback when the help button is clicked; omit to hide the button */
+    onHelpClick?: () => void;
+    /** Slot for right-side actions in the top nav (e.g. data count pills, next button) */
+    headerActions?: React_2.ReactNode;
+    /** Slot rendered between the icon rail and the content (e.g. WorkflowPanel) */
+    sidebarPanel?: React_2.ReactNode;
+    /** Main content area */
+    children: React_2.ReactNode;
+    /** Additional className for the root container */
+    className?: string;
+}
+
 export declare function DataTable<TData, TValue>({ columns, data, toolbar, enableSorting, enableColumnVisibility, children, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, columnLabels: controlledColumnLabels, onColumnLabelChange, enablePagination, defaultPageSize, pagination: controlledPagination, onPaginationChange, enableColumnReorder, density, className, variant, containerClassName, }: DataTableProps<TData, TValue>): JSX.Element;
 
 export declare function DataTableColumnToggle({ className }: DataTableColumnToggleProps): JSX.Element | null;
@@ -956,7 +1001,7 @@ declare const inputGroupAddonVariants: (props?: ({
 export declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React_2.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): JSX.Element;
 
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function InputGroupInput({ className, ...props }: React_2.ComponentProps<"input">): JSX.Element;
@@ -996,7 +1041,7 @@ export declare function ItemHeader({ className, ...props }: React_2.ComponentPro
 export declare function ItemMedia({ className, variant, ...props }: React_2.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): JSX.Element;
 
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function ItemSeparator({ className, ...props }: React_2.ComponentProps<typeof Separator>): JSX.Element;
@@ -1005,7 +1050,7 @@ export declare function ItemTitle({ className, ...props }: React_2.ComponentProp
 
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "sm" | "default" | "xs" | null | undefined;
+    size?: "default" | "xs" | "sm" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): JSX.Element;
@@ -1175,6 +1220,13 @@ export declare function MenubarSubTrigger({ className, inset, children, ...props
 
 export declare function MenubarTrigger({ className, ...props }: React_2.ComponentProps<typeof Menubar_2.Trigger>): JSX.Element;
 
+export declare interface NavGroup {
+    /** Optional group label shown as a section header in expanded nav */
+    label?: string;
+    /** Page entries in this group */
+    pages: NavPage[];
+}
+
 /**
  * Navigate to a TDP URL.
  *
@@ -1207,6 +1259,19 @@ export declare const navigationMenuTriggerStyle: (props?: ClassProp | undefined)
 
 export declare function NavigationMenuViewport({ className, ...props }: React_2.ComponentProps<typeof NavigationMenu_2.Viewport>): JSX.Element;
 
+export declare interface NavPage {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Lucide icon or custom React SVG component */
+    icon?: LucideIcon | React_2.FC<React_2.SVGProps<SVGSVGElement>>;
+    /** Whether this page is currently active */
+    isActive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+}
+
 /**
  * Peak annotation for labeling peaks on the chromatogram.
  * Used for both user-provided annotations and auto-detected peaks.
@@ -1593,7 +1658,7 @@ export declare function SidebarMenuButton({ asChild, isActive, variant, size, to
 
 declare const sidebarMenuButtonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function SidebarMenuItem({ className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
@@ -1631,7 +1696,7 @@ export declare function Slider({ className, defaultValue, value, min, max, ...pr
 export declare function Spinner({ className, size, ...props }: React.ComponentProps<"svg"> & VariantProps<typeof spinnerVariants>): JSX.Element;
 
 export declare const spinnerVariants: (props?: ({
-    size?: "sm" | "default" | "lg" | "md" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Switch({ className, size, ...props }: React_2.ComponentProps<typeof Switch_2.Root> & {
@@ -1678,7 +1743,7 @@ export declare function TabsContent({ className, ...props }: React_2.ComponentPr
 export declare function TabsList({ className, variant, ...props }: React_2.ComponentProps<typeof Tabs_2.List> & VariantProps<typeof tabsListVariants>): JSX.Element;
 
 export declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | null | undefined;
+    variant?: "default" | "line" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function TabsTrigger({ className, ...props }: React_2.ComponentProps<typeof Tabs_2.Trigger>): JSX.Element;
@@ -1890,7 +1955,7 @@ export declare function ToggleGroupItem({ className, children, variant, size, ..
 
 export declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Tooltip({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Root>): JSX.Element;