@trackunit/react-components 1.14.18 → 1.14.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.14.18",
+  "version": "1.14.19",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.10.15",
-    "@trackunit/css-class-variance-utilities": "1.10.15",
-    "@trackunit/shared-utils": "1.12.15",
-    "@trackunit/ui-icons": "1.10.15",
+    "@trackunit/ui-design-tokens": "1.10.16",
+    "@trackunit/css-class-variance-utilities": "1.10.16",
+    "@trackunit/shared-utils": "1.12.16",
+    "@trackunit/ui-icons": "1.10.16",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/components/Alert/Alert.d.ts

@@ -45,8 +45,66 @@ export interface AlertProps extends CommonProps {
     actionsInline?: boolean;
 }
 /**
- * The Alert component should be used to inform the user of important information.
+ * The Alert component should be used to inform the user of important information such as errors, warnings, success messages, or informational notices.
  *
+ * ### When to use
+ * Use alerts to communicate important information that requires user attention, such as form validation errors, action confirmations, or system status updates.
+ *
+ * ### When not to use
+ * Do not use alerts for non-critical information or marketing messages. Use Notice component for less urgent communications.
+ *
+ * @example Basic alert variants
+ * ```tsx
+ * import { Alert } from "@trackunit/react-components";
+ *
+ * const AlertExamples = () => {
+ *   return (
+ *     <div className="flex flex-col gap-4">
+ *       <Alert color="info" title="Information">
+ *         Your session will expire in 5 minutes.
+ *       </Alert>
+ *       <Alert color="success" title="Success">
+ *         Asset successfully updated.
+ *       </Alert>
+ *       <Alert color="warning" title="Warning">
+ *         Low battery detected on 3 assets.
+ *       </Alert>
+ *       <Alert color="danger" title="Error">
+ *         Failed to save changes. Please try again.
+ *       </Alert>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @example Alert with actions and close button
+ * ```tsx
+ * import { Alert } from "@trackunit/react-components";
+ * import { useState } from "react";
+ *
+ * const DismissibleAlert = () => {
+ *   const [visible, setVisible] = useState(true);
+ *
+ *   if (!visible) return null;
+ *
+ *   return (
+ *     <Alert
+ *       color="warning"
+ *       title="Unsaved Changes"
+ *       onClose={() => setVisible(false)}
+ *       primaryAction={{
+ *         label: "Save Now",
+ *         onClick: () => console.log("Saving..."),
+ *       }}
+ *       secondaryAction={{
+ *         label: "Discard",
+ *         onClick: () => setVisible(false),
+ *       }}
+ *     >
+ *       You have unsaved changes that will be lost if you leave this page.
+ *     </Alert>
+ *   );
+ * };
+ * ```
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */

package/src/components/Badge/Badge.d.ts

@@ -45,6 +45,27 @@ export type BadgeProps = BaseBadgeProps;
  * - Use a Badge to indicate notifications or counts of applied elements.
  * - Use a [Tag](https://design.iris.trackunit.com/?path=/docs/react-components-tag--docs) for labeling statuses, categories, or selections.
  *
+ * @example Badge with count and max value
+ * ```tsx
+ * import { Badge, Button } from "@trackunit/react-components";
+ *
+ * const NotificationButton = () => (
+ *   <Button variant="secondary">
+ *     Notifications <Badge count={15} max={9} color="danger" />
+ *   </Button>
+ * );
+ * ```
+ * @example Compact badge as status dot
+ * ```tsx
+ * import { Badge } from "@trackunit/react-components";
+ *
+ * const OnlineStatus = () => (
+ *   <div className="flex items-center gap-2">
+ *     <Badge compact color="primary" />
+ *     <span>Online</span>
+ *   </div>
+ * );
+ * ```
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -10,6 +10,26 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * Do not use on the first hierarchal level, such as a home page or a main page, as there is no previous step the user can get to.
  * Avoid using breadcrumbs to indicate forthcoming steps. For processes with sequential steps, use a wizard flow instead.
  *
+ * @example Basic breadcrumb navigation
+ * ```tsx
+ * import { Breadcrumb } from "@trackunit/react-components";
+ * import { useNavigate } from "@tanstack/react-router";
+ *
+ * const AssetDetailBreadcrumb = () => {
+ *   const navigate = useNavigate();
+ *
+ *   return (
+ *     <Breadcrumb
+ *       breadcrumbItems={[
+ *         { label: "Fleet", to: "/fleet" },
+ *         { label: "Assets", to: "/fleet/assets" },
+ *         { label: "Excavator 001", to: "/fleet/assets/123" },
+ *       ]}
+ *       back={() => navigate({ to: "/fleet/assets" })}
+ *     />
+ *   );
+ * };
+ * ```
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */

package/src/components/Card/Card.d.ts

@@ -24,9 +24,49 @@ export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivEleme
     onMouseLeave?: MouseEventHandler<HTMLDivElement>;
 }
 /**
- * The Card component is a container for UI elements, and is the main component of the modal.
+ * The Card component is a container for UI elements that groups related content together with a visual boundary.
  * To get the most out of the Card, use it in combination with the CardHeader, CardBody and CardFooter.
  *
+ * ### When to use
+ * Use cards to group related information and actions, such as in dashboards, list items, or content previews.
+ *
+ * ### When not to use
+ * Do not use cards for layout purposes only. Use standard containers or grid layouts instead.
+ *
+ * @example Basic card
+ * ```tsx
+ * import { Card, CardHeader, CardBody } from "@trackunit/react-components";
+ *
+ * const MyComponent = () => {
+ *   return (
+ *     <Card>
+ *       <CardHeader title="Asset Details" />
+ *       <CardBody>
+ *         <p>This card contains information about the asset.</p>
+ *       </CardBody>
+ *     </Card>
+ *   );
+ * };
+ * ```
+ * @example Clickable card with full content
+ * ```tsx
+ * import { Card, CardHeader, CardBody, CardFooter, Button } from "@trackunit/react-components";
+ *
+ * const AssetCard = () => {
+ *   return (
+ *     <Card onClick={() => console.log("Card clicked")}>
+ *       <CardHeader title="Excavator #1234" subtitle="Last updated: 2 hours ago" />
+ *       <CardBody>
+ *         <p>Operating hours: 1,234</p>
+ *         <p>Status: Active</p>
+ *       </CardBody>
+ *       <CardFooter>
+ *         <Button variant="secondary" size="small">View Details</Button>
+ *       </CardFooter>
+ *     </Card>
+ *   );
+ * };
+ * ```
  * @param {CardProps} props - The props for the Card component
  * @returns {ReactElement} Card component
  */

package/src/components/Collapse/Collapse.d.ts

@@ -41,7 +41,7 @@ export interface CollapseProps extends CommonProps {
  * The Collapse component is a container for additional information that adds context to various flows. It is used for displaying non-essential information that can be hidden away.
  *
  * ### When to use
- * - To keep content off the screen to shorten pages and reduce scrolling, while it’s still only a tap away. Remember that the users might choose not to interact with the component and won’t see the information within.
+ * - To keep content off the screen to shorten pages and reduce scrolling, while it's still only a tap away. Remember that the users might choose not to interact with the component and won't see the information within.
  * - To display additional details that are not essential or necessary in the main flow/page.
  *
  * ### When not to use
@@ -51,6 +51,35 @@ export interface CollapseProps extends CommonProps {
  * - To hide errors or information that is relevant for a user within a flow.
  * - To creating hierarchy levels by nesting them within each other.
  *
+ * @example Basic collapse section
+ * ```tsx
+ * import { Collapse, Text } from "@trackunit/react-components";
+ *
+ * const AdditionalDetails = () => (
+ *   <Collapse id="details" label="Additional Details">
+ *     <Text>
+ *       This content is hidden by default and can be expanded by clicking the header.
+ *       Use this for supplementary information that isn't critical to the main flow.
+ *     </Text>
+ *   </Collapse>
+ * );
+ * ```
+ * @example Collapse with header addon and initial expanded state
+ * ```tsx
+ * import { Collapse, Badge } from "@trackunit/react-components";
+ *
+ * const NotificationsSection = () => (
+ *   <Collapse
+ *     id="notifications"
+ *     label="Notifications"
+ *     initialExpanded={true}
+ *     headerAddon={<Badge count={5} color="primary" />}
+ *     onToggle={(e, expanded) => console.log("Expanded:", expanded)}
+ *   >
+ *     <div>Notification list content here</div>
+ *   </Collapse>
+ * );
+ * ```
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */

package/src/components/EmptyState/EmptyState.d.ts

@@ -23,13 +23,52 @@ export interface EmptyStateProps extends CommonProps {
 }
 /**
  *
- * Empty states serve as placeholders when there's no content to display in either a table or card. They guide users out of the empty state towards actionable steps, highlighting ways to progress. It’s recommended to suggest simple actions that can help the users move out of the empty states towards the content that fits their goals.
+ * Empty states serve as placeholders when there's no content to display in either a table or card. They guide users out of the empty state towards actionable steps, highlighting ways to progress. It's recommended to suggest simple actions that can help the users move out of the empty states towards the content that fits their goals.
  * ## **When to Use**
  * - When user actions yield no results (e.g., empty search results or unfilled data).
  * - To offer guidance on navigating out of the empty state.
  * - In cases of errors (e.g., failed content loading, unexpected errors).
  * - For guidance purposes (e.g., onboarding, adjusting filters, exploring alternative approaches).
  * - In celebratory instances (e.g., no new notifications, services up to date).
+ *
+ * @example Empty state with actions for no search results
+ * ```tsx
+ * import { EmptyState } from "@trackunit/react-components";
+ *
+ * const NoSearchResults = () => (
+ *   <EmptyState
+ *     image="SEARCH_DOCUMENT"
+ *     description="No assets match your search criteria"
+ *     primaryAction={{
+ *       title: "Clear filters",
+ *       onClick: () => console.log("Clear filters"),
+ *     }}
+ *     secondaryAction={{
+ *       title: "Add new asset",
+ *       onClick: () => console.log("Add asset"),
+ *     }}
+ *   />
+ * );
+ * ```
+ * @example Empty state for error with help link
+ * ```tsx
+ * import { EmptyState } from "@trackunit/react-components";
+ *
+ * const ErrorState = () => (
+ *   <EmptyState
+ *     image="BUILDING_ERROR"
+ *     description="Something went wrong while loading your data"
+ *     primaryAction={{
+ *       title: "Try again",
+ *       onClick: () => window.location.reload(),
+ *     }}
+ *     additionalHelpAction={{
+ *       title: "Contact support",
+ *       to: { pathname: "https://support.trackunit.com", target: "_blank" },
+ *     }}
+ *   />
+ * );
+ * ```
  */
 export declare const EmptyState: ({ description, altText, image, customImageSrc, loading, "data-testid": dataTestId, className, primaryAction, secondaryAction, additionalHelpAction, }: EmptyStateProps) => ReactElement;
 export {};

package/src/components/EmptyState/states/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./AnatomySVG";
 export * from "./BuildingErrorSVG";
 export * from "./PhoneLockSecuritySVG";
 export * from "./RoadBlockSVG";

package/src/components/Indicator/Indicator.d.ts

@@ -43,7 +43,32 @@ export interface IndicatorProps extends CommonProps {
  * _**Do use** indicators to communicate essential aspects of the state of an asset._
  *
  * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
- 
+ *
+ * @example Asset status indicator with icon
+ * ```tsx
+ * import { Indicator, Icon } from "@trackunit/react-components";
+ *
+ * const AssetStatusIndicator = () => (
+ *   <Indicator
+ *     icon={<Icon name="Bolt" size="small" />}
+ *     color="success"
+ *     label="Running"
+ *   />
+ * );
+ * ```
+ * @example Pinging indicator for alerts
+ * ```tsx
+ * import { Indicator, Icon } from "@trackunit/react-components";
+ *
+ * const AlertIndicator = () => (
+ *   <Indicator
+ *     icon={<Icon name="ExclamationTriangle" size="small" />}
+ *     color="danger"
+ *     label="Critical Alert"
+ *     ping={true}
+ *   />
+ * );
+ * ```
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */

package/src/components/KPI/KPI.d.ts

@@ -24,8 +24,43 @@ export interface KPIProps extends CommonProps, Styleable {
     variant?: "small" | "default" | "condensed";
 }
 /**
- * The KPI component is used to display KPIs.
+ * The KPI component displays a key performance indicator with a title, value, and unit.
+ * It's ideal for showing important metrics at a glance in dashboards and summary views.
  *
+ * ### When to use
+ * - To display important numeric metrics that users need to monitor
+ * - In dashboard headers, cards, or page summaries
+ * - When you need a compact way to show a labeled value with units
+ *
+ * ### When not to use
+ * - For detailed data that requires charts or tables
+ * - When the metric needs interactive elements (use KPICard instead)
+ *
+ * @example Basic KPI display
+ * ```tsx
+ * import { KPI } from "@trackunit/react-components";
+ *
+ * const FleetUtilization = () => (
+ *   <KPI
+ *     title="Fleet Utilization"
+ *     value={87}
+ *     unit="%"
+ *     tooltipLabel="Average utilization across all assets"
+ *   />
+ * );
+ * ```
+ * @example KPI variants
+ * ```tsx
+ * import { KPI } from "@trackunit/react-components";
+ *
+ * const MetricsRow = () => (
+ *   <div className="flex gap-4">
+ *     <KPI title="Total Assets" value={156} unit="units" variant="default" />
+ *     <KPI title="Active" value={142} unit="" variant="small" />
+ *     <KPI title="Idle Time" value="2.5" unit="hrs" variant="condensed" />
+ *   </div>
+ * );
+ * ```
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */

package/src/components/KPICard/KPICard.d.ts

@@ -41,8 +41,54 @@ export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
     valueBar?: Omit<ValueBarProps, "className" | "dataTestId" | "size" | "valueColor">;
 }
 /**
- * The KPICard component is used to display KPIs.
+ * The KPICard component displays a key performance indicator in an interactive card format.
+ * It extends the basic KPI with additional features like icons, trends, value bars, and notices.
  *
+ * ### When to use
+ * - When KPIs need to be clickable or selectable
+ * - To show trends or progress alongside the metric value
+ * - When you need a richer visual representation of a KPI
+ *
+ * ### When not to use
+ * - For simple metric display without interaction (use KPI instead)
+ * - When space is very limited
+ *
+ * @example KPI card with trend indicator
+ * ```tsx
+ * import { KPICard } from "@trackunit/react-components";
+ *
+ * const UtilizationCard = () => (
+ *   <KPICard
+ *     title="Utilization"
+ *     value={87}
+ *     unit="%"
+ *     iconName="ChartBar"
+ *     iconColor="success"
+ *     trends={[
+ *       { value: 5, direction: "up", label: "vs last week" },
+ *     ]}
+ *     onClick={() => console.log("Navigate to details")}
+ *   />
+ * );
+ * ```
+ * @example KPI card with value bar and notice
+ * ```tsx
+ * import { KPICard } from "@trackunit/react-components";
+ *
+ * const StorageCard = () => (
+ *   <KPICard
+ *     title="Storage Used"
+ *     value={75}
+ *     unit="GB"
+ *     valueBar={{ value: 75, max: 100 }}
+ *     notice={{
+ *       label: "25 GB remaining",
+ *       iconName: "InformationCircle",
+ *       iconColor: "info",
+ *     }}
+ *   />
+ * );
+ * ```
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */

package/src/components/Menu/MenuList/MenuList.d.ts

@@ -28,8 +28,53 @@ export interface MenuListProps extends CommonProps {
  * **When to use**
  * - Use the MenuList if you have limited space and need to display overflow actions in a list.
  * - Use the MenuList for actions that are not essential to completing workflows.
- * - Don’t use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
+ * - Don't use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
  *
+ * @example MenuList with action items
+ * ```tsx
+ * import { MenuList, MenuItem, MoreMenu, Icon } from "@trackunit/react-components";
+ *
+ * const ActionsMenu = () => (
+ *   <MoreMenu>
+ *     {(close) => (
+ *       <MenuList onClick={close}>
+ *         <MenuItem id="edit" prefix={<Icon name="PencilSquare" size="small" />}>
+ *           Edit
+ *         </MenuItem>
+ *         <MenuItem id="duplicate" prefix={<Icon name="DocumentDuplicate" size="small" />}>
+ *           Duplicate
+ *         </MenuItem>
+ *         <MenuItem id="delete" prefix={<Icon name="Trash" size="small" />} destructive>
+ *           Delete
+ *         </MenuItem>
+ *       </MenuList>
+ *     )}
+ *   </MoreMenu>
+ * );
+ * ```
+ * @example Multi-select MenuList
+ * ```tsx
+ * import { MenuList, MenuItem, MoreMenu } from "@trackunit/react-components";
+ * import { useState } from "react";
+ *
+ * const FilterMenu = () => {
+ *   const [selected, setSelected] = useState<string[]>(["active"]);
+ *
+ *   return (
+ *     <MoreMenu label="Filter by status">
+ *       <MenuList
+ *         isMulti
+ *         selectedItems={selected}
+ *         onSelectionChange={setSelected}
+ *       >
+ *         <MenuItem id="active">Active</MenuItem>
+ *         <MenuItem id="idle">Idle</MenuItem>
+ *         <MenuItem id="offline">Offline</MenuItem>
+ *       </MenuList>
+ *     </MoreMenu>
+ *   );
+ * };
+ * ```
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */

package/src/components/PageHeader/PageHeader.d.ts

@@ -7,6 +7,45 @@ import { PageHeaderProps } from "./types";
  * PageHeader can be used to highlight the page topic, display helpful information about the page, and carry the action items related to the current page.
  * Tabs can be added to the PageHeader to allow users to navigate between different sections of the page.
  *
+ * @example Page header with actions
+ * ```tsx
+ * import { PageHeader } from "@trackunit/react-components";
+ *
+ * const AssetPage = () => (
+ *   <PageHeader
+ *     title="Asset Management"
+ *     description="Manage and monitor your fleet assets"
+ *     accessoryType="actions"
+ *     primaryAction={{
+ *       actionText: "Add Asset",
+ *       actionCallback: () => console.log("Add asset"),
+ *       prefixIconName: "Plus",
+ *       variant: "primary",
+ *     }}
+ *     secondaryActions={[
+ *       { actionText: "Export", actionCallback: () => {}, variant: "secondary" },
+ *     ]}
+ *   />
+ * );
+ * ```
+ * @example Page header with KPI metrics
+ * ```tsx
+ * import { PageHeader } from "@trackunit/react-components";
+ *
+ * const DashboardHeader = () => (
+ *   <PageHeader
+ *     title="Fleet Overview"
+ *     tagLabel="Live"
+ *     tagColor="success"
+ *     accessoryType="kpi-metrics"
+ *     kpiMetrics={[
+ *       { header: "Total Assets", value: 156, unit: "" },
+ *       { header: "Active", value: 142, unit: "assets" },
+ *       { header: "Utilization", value: 87, unit: "%" },
+ *     ]}
+ *   />
+ * );
+ * ```
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */

package/src/components/Popover/Popover.d.ts

@@ -23,6 +23,45 @@ type ModalCallback = {
  *
  * To render the content of the popover, use the `<PopoverContent />` component.
  *
+ * @example Basic popover with trigger
+ * ```tsx
+ * import { Popover, PopoverTrigger, PopoverContent, Button, Text } from "@trackunit/react-components";
+ *
+ * const InfoPopover = () => (
+ *   <Popover placement="bottom-start">
+ *     <PopoverTrigger>
+ *       <Button variant="secondary">Show Info</Button>
+ *     </PopoverTrigger>
+ *     <PopoverContent>
+ *       <div className="p-4 max-w-xs">
+ *         <Text weight="bold">Asset Information</Text>
+ *         <Text size="small">Additional details about this asset appear here.</Text>
+ *       </div>
+ *     </PopoverContent>
+ *   </Popover>
+ * );
+ * ```
+ * @example Controlled popover with render prop
+ * ```tsx
+ * import { Popover, PopoverTrigger, PopoverContent, Button } from "@trackunit/react-components";
+ *
+ * const ControlledPopover = () => (
+ *   <Popover placement="right">
+ *     {({ isOpen, setIsOpen }) => (
+ *       <>
+ *         <PopoverTrigger>
+ *           <Button onClick={() => setIsOpen(!isOpen)}>
+ *             {isOpen ? "Close" : "Open"} Menu
+ *           </Button>
+ *         </PopoverTrigger>
+ *         <PopoverContent>
+ *           <div className="p-4">Popover content</div>
+ *         </PopoverContent>
+ *       </>
+ *     )}
+ *   </Popover>
+ * );
+ * ```
  * @param {PopoverProps} props The props for the popover
  * @returns {ReactElement} A Popover Context Provider containing the children
  */

package/src/components/Sidebar/Sidebar.d.ts

@@ -51,6 +51,27 @@ export interface SidebarProps extends CommonProps {
  *
  * When using this component make sure to add `setupIntersectionObserver();` to your jest.setup.ts file.
  *
+ * @example Responsive sidebar with navigation items
+ * ```tsx
+ * import { Sidebar, Button } from "@trackunit/react-components";
+ *
+ * const NavigationSidebar = () => (
+ *   <Sidebar breakpoint="lg">
+ *     <Button id="overview" variant="ghost-neutral" className="min-w-[100px]">
+ *       Overview
+ *     </Button>
+ *     <Button id="assets" variant="ghost-neutral" className="min-w-[100px]">
+ *       Assets
+ *     </Button>
+ *     <Button id="reports" variant="ghost-neutral" className="min-w-[100px]">
+ *       Reports
+ *     </Button>
+ *     <Button id="settings" variant="ghost-neutral" className="min-w-[100px]">
+ *       Settings
+ *     </Button>
+ *   </Sidebar>
+ * );
+ * ```
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {ReactElement} Sidebar component
  */

package/src/components/Tabs/Tabs.d.ts

@@ -24,5 +24,38 @@ export interface TabsProps extends TabsRootProps {
 }
 /**
  * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
+ *
+ * @example Basic tabs with content panels
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabContent } from "@trackunit/react-components";
+ *
+ * const MyTabs = () => (
+ *   <Tabs defaultValue="tab1">
+ *     <TabList>
+ *       <Tab value="tab1">Overview</Tab>
+ *       <Tab value="tab2">Details</Tab>
+ *       <Tab value="tab3">Settings</Tab>
+ *     </TabList>
+ *     <TabContent value="tab1">Overview content goes here</TabContent>
+ *     <TabContent value="tab2">Details content goes here</TabContent>
+ *     <TabContent value="tab3">Settings content goes here</TabContent>
+ *   </Tabs>
+ * );
+ * ```
+ * @example Full width tabs with icons
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabContent } from "@trackunit/react-components";
+ *
+ * const FullWidthTabs = () => (
+ *   <Tabs defaultValue="assets" fullWidth>
+ *     <TabList>
+ *       <Tab value="assets" iconName="Truck" isFullWidth>Assets</Tab>
+ *       <Tab value="sites" iconName="MapPin" isFullWidth>Sites</Tab>
+ *     </TabList>
+ *     <TabContent value="assets">Asset list</TabContent>
+ *     <TabContent value="sites">Site list</TabContent>
+ *   </Tabs>
+ * );
+ * ```
  */
 export declare const Tabs: ({ children, forceRender, className, "data-testid": dataTestId, fullWidth, ...rest }: TabsProps) => ReactElement;