@trackunit/react-components 1.14.18 → 1.14.20

package/src/components/Tag/Tag.d.ts

@@ -55,6 +55,33 @@ export interface TagProps extends CommonProps {
  * - Use a [Badge](https://design.iris.trackunit.com/?path=/docs/react-components-badge--docs) to indicate notifications or counts of applied elements, such as filters.
  * - Use a [Highlight](https://design.iris.trackunit.com/?path=/docs/react-components-highlight--docs) to draw attention to values in plain text that require special attention or have crossed a threshold.
  *
+ * @example Status tags with different colors
+ * ```tsx
+ * import { Tag } from "@trackunit/react-components";
+ *
+ * const AssetStatus = () => (
+ *   <div className="flex gap-2">
+ *     <Tag color="success">Active</Tag>
+ *     <Tag color="warning">Idle</Tag>
+ *     <Tag color="danger">Offline</Tag>
+ *     <Tag color="info">Beta</Tag>
+ *   </div>
+ * );
+ * ```
+ * @example Dismissible tag for selections
+ * ```tsx
+ * import { Tag, Icon } from "@trackunit/react-components";
+ *
+ * const SelectedFilter = ({ label, onRemove }: { label: string; onRemove: () => void }) => (
+ *   <Tag
+ *     color="primary"
+ *     icon={<Icon name="Funnel" size="small" />}
+ *     onClose={onRemove}
+ *   >
+ *     {label}
+ *   </Tag>
+ * );
+ * ```
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */

package/src/components/Tooltip/Tooltip.d.ts

@@ -43,6 +43,35 @@ export interface TooltipProps extends CommonProps, Styleable {
  *
  * **Do not use** tooltips to include information that is necessary for the user to complete their task. Use helper text that is always visible and accessible for vital information.
  *
+ * @example Tooltip on an icon button
+ * ```tsx
+ * import { Tooltip, IconButton, Icon } from "@trackunit/react-components";
+ *
+ * const SettingsButton = () => (
+ *   <Tooltip label="Open settings" placement="bottom">
+ *     <IconButton
+ *       icon={<Icon name="Cog6Tooth" size="small" />}
+ *       variant="ghost-neutral"
+ *       onClick={() => console.log("Settings clicked")}
+ *     />
+ *   </Tooltip>
+ * );
+ * ```
+ * @example Standalone tooltip icon for explanations
+ * ```tsx
+ * import { Tooltip } from "@trackunit/react-components";
+ *
+ * const FieldWithHelp = () => (
+ *   <div className="flex items-center gap-2">
+ *     <span>Utilization Rate</span>
+ *     <Tooltip
+ *       label="The percentage of time the asset was actively in use during the selected period"
+ *       placement="right"
+ *       mode="light"
+ *     />
+ *   </div>
+ * );
+ * ```
  * @param {TooltipProps} props - The props for the Tooltip component
  * @returns {ReactElement} Tooltip component
  */

package/src/components/buttons/Button/Button.d.ts

@@ -50,8 +50,39 @@ export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
  * Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
  *
  * ### When not to use
- * Do not use buttons as navigational elements. Instead, use [Links](https://www.notion.so/Links-49638788b6c042698b40b94a318361f1?pvs=21) when the desired action is to take the user to a new page.
+ * Do not use buttons as navigational elements. Instead, use [Links](?path=/docs/components-link--docs) when the desired action is to take the user to a new page.
  *
+ * @example Basic button with click handler
+ * ```tsx
+ * import { Button } from "@trackunit/react-components";
+ *
+ * const MyComponent = () => {
+ *   return (
+ *     <Button onClick={() => console.log('clicked')}>
+ *       Click me
+ *     </Button>
+ *   );
+ * };
+ * ```
+ * @example Button variants and sizes
+ * ```tsx
+ * import { Button, Icon } from "@trackunit/react-components";
+ *
+ * const ButtonExamples = () => {
+ *   return (
+ *     <div className="flex gap-2">
+ *       <Button variant="primary">Primary</Button>
+ *       <Button variant="secondary">Secondary</Button>
+ *       <Button variant="ghost">Ghost</Button>
+ *       <Button variant="primary-danger">Danger</Button>
+ *       <Button size="small">Small</Button>
+ *       <Button prefix={<Icon name="Plus" size="small" />}>With Icon</Button>
+ *       <Button loading>Loading</Button>
+ *       <Button disabled>Disabled</Button>
+ *     </div>
+ *   );
+ * };
+ * ```
  * @param {ButtonProps} props - The props for the Button component
  * @returns {ReactElement} Button component
  */

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -24,6 +24,45 @@ export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
 }
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.
+ *
+ * ### When to use
+ * Use icon buttons for actions that are well-understood through the icon alone, such as close, delete, or settings buttons. Always provide a `title` prop for accessibility.
+ *
+ * ### When not to use
+ * Do not use icon buttons when the action is not immediately clear from the icon. Use a regular Button with text instead.
+ *
+ * @example Basic icon button
+ * ```tsx
+ * import { IconButton, Icon } from "@trackunit/react-components";
+ *
+ * const MyComponent = () => {
+ *   return (
+ *     <IconButton
+ *       icon={<Icon name="Trash" />}
+ *       onClick={() => console.log('delete')}
+ *       title="Delete item"
+ *     />
+ *   );
+ * };
+ * ```
+ * @example Icon button variants
+ * ```tsx
+ * import { IconButton, Icon } from "@trackunit/react-components";
+ *
+ * const IconButtonExamples = () => {
+ *   return (
+ *     <div className="flex gap-2">
+ *       <IconButton icon={<Icon name="Plus" />} variant="primary" title="Add" />
+ *       <IconButton icon={<Icon name="Cog" />} variant="secondary" title="Settings" />
+ *       <IconButton icon={<Icon name="XMark" />} variant="ghost" title="Close" />
+ *       <IconButton icon={<Icon name="Trash" />} variant="primary-danger" title="Delete" />
+ *       <IconButton icon={<Icon name="Plus" />} size="small" title="Small add" />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @param {IconButtonProps} props - The props for the IconButton component
+ * @returns {ReactElement} IconButton component
  */
 export declare const IconButton: {
     ({ icon, size, square, loading, disabled, className, ref, ...rest }: IconButtonProps): ReactElement;

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

@@ -1,5 +0,0 @@
-import { type SVGProps } from "react";
-/**
- * The Graphic for the Anatomy EmptyState
- */
-export declare const AnatomySVG: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;