@servicetitan/anvil2 1.44.2 → 1.45.0

package/dist/components/Stepper/StepperPanel.d.ts

@@ -0,0 +1,52 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the StepperPanel component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
+export type StepperPanelProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> & LayoutUtilProps & {
+    /**
+     * Unique identifier for the panel.
+     * Must match the controls prop of the corresponding Stepper.Step.
+     */
+    id: string;
+};
+/**
+ * Content panel component for displaying step content in the Stepper.
+ *
+ * Features:
+ * - Displays content for the current step only
+ * - Smooth fade-in/fade-out animations
+ * - Automatic overflow handling with scroll support
+ * - Accessible with proper ARIA roles
+ * - Layout utilities for positioning and spacing
+ * - Motion animations for smooth transitions
+ * - Focus management for keyboard navigation
+ * - Responsive design with flexible layout
+ * - Context-based visibility control
+ *
+ * @example
+ * <Stepper.Panel id="step1">
+ *   <h2>Personal Information</h2>
+ *   <form>
+ *     <label htmlFor="name">Name:</label>
+ *     <input id="name" type="text" />
+ *   </form>
+ * </Stepper.Panel>
+ *
+ * @example
+ * <Stepper.Panel id="step2" className="custom-panel">
+ *   <div className="step-content">
+ *     <h2>Contact Details</h2>
+ *     <p>Please provide your contact information.</p>
+ *   </div>
+ * </Stepper.Panel>
+ */
+export declare const StepperPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
+    /**
+     * Unique identifier for the panel.
+     * Must match the controls prop of the corresponding Stepper.Step.
+     */
+    id: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/StepperPrevButton.d.ts

@@ -0,0 +1,44 @@
+import { DataTrackingId } from '../../types';
+import { ButtonProps } from '../Button';
+/**
+ * Props for the StepperPrevButton component
+ * @extends ButtonProps
+ */
+export type StepperPrevButtonProps = Omit<ButtonProps, "children"> & {
+    /**
+     * Label for the previous button.
+     * @default "Previous"
+     */
+    label?: string;
+} & DataTrackingId;
+/**
+ * Previous button component for navigating to the previous step in the Stepper.
+ *
+ * Features:
+ * - Navigates to the previous step when available
+ * - Hides when on the first step
+ * - Restores navigation when returning from completion
+ * - Accessible with proper button semantics
+ * - Customizable label and styling
+ * - Integration with stepper context
+ * - Automatic focus management
+ * - Support for completion state handling
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Stepper.PrevButton label="Go Back" />
+ *
+ * @example
+ * <Stepper.PrevButton
+ *   label="Previous Step"
+ *   appearance="secondary"
+ *   onClick={(e) => console.log('Going back')}
+ * />
+ */
+export declare const StepperPrevButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "children"> & {
+    /**
+     * Label for the previous button.
+     * @default "Previous"
+     */
+    label?: string;
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Stepper/StepperStep.d.ts

@@ -0,0 +1,58 @@
+import { MouseEvent, ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the StepperStep component
+ * @extends ComponentPropsWithoutRef<"button">
+ */
+export type StepperStepProps = Omit<ComponentPropsWithoutRef<"button">, "onClick" | "disabled"> & {
+    /**
+     * ID of the panel that this step is controlling.
+     * Must match the id prop of the corresponding Stepper.Panel.
+     */
+    controls: string;
+    /**
+     * Called when the step is clicked.
+     * @param e Mouse event object
+     * @param index Index of the step in the stepper
+     */
+    onClick?: (e: MouseEvent<HTMLButtonElement>, index?: number) => void;
+};
+/**
+ * Individual step component for the Stepper.
+ *
+ * Features:
+ * - Visual progress indicator with animated bar
+ * - Check icon for completed steps
+ * - Keyboard navigation support
+ * - Accessible with proper ARIA attributes
+ * - Click handling for step navigation
+ * - Visual states for current, completed, and future steps
+ * - Responsive design with mobile-friendly layout
+ * - Focus management for keyboard users
+ * - Custom styling support
+ *
+ * @example
+ * <Stepper.Step controls="step1">
+ *   Personal Information
+ * </Stepper.Step>
+ *
+ * @example
+ * <Stepper.Step
+ *   controls="step2"
+ *   onClick={(e, index) => console.log(`Clicked step ${index}`)}
+ * >
+ *   Contact Details
+ * </Stepper.Step>
+ */
+export declare const StepperStep: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
+    /**
+     * ID of the panel that this step is controlling.
+     * Must match the id prop of the corresponding Stepper.Panel.
+     */
+    controls: string;
+    /**
+     * Called when the step is clicked.
+     * @param e Mouse event object
+     * @param index Index of the step in the stepper
+     */
+    onClick?: (e: MouseEvent<HTMLButtonElement>, index?: number) => void;
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Stepper/index.d.ts

@@ -1,2 +1,8 @@
 export * from './Stepper';
+export * from './StepperFinalPanel';
+export * from './StepperList';
+export * from './StepperNextButton';
+export * from './StepperPanel';
+export * from './StepperPrevButton';
+export * from './StepperStep';
 export { Stepper as default } from './Stepper';

package/dist/components/Stepper/internal/StepperContext.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, SetStateAction } from 'react';
+export type StepperContextProps = {
+    current: number;
+    setCurrent: Dispatch<SetStateAction<number>>;
+    currentId: string;
+    setCurrentId: Dispatch<SetStateAction<string>>;
+    focus: number;
+    setFocus: Dispatch<SetStateAction<number>>;
+    onComplete?: () => void;
+    items?: NodeListOf<HTMLElement>;
+    allCompleted?: boolean;
+    setAllCompleted?: Dispatch<SetStateAction<boolean>>;
+    allowNavigateToPrevStep?: boolean;
+};
+export declare const StepperContext: import('react').Context<StepperContextProps>;

package/dist/components/Switch/Switch.d.ts

@@ -1,16 +1,40 @@
-import { SwitchProps as CoreSwitchProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ChangeEvent, ComponentPropsWithoutRef, ReactElement } from 'react';
+import { DataTrackingId, LayoutUtilProps } from '../../types';
+/**
+ * State object returned by the Switch onChange callback
+ */
+export type SwitchState = {
+    /**
+     * Whether the switch is currently checked
+     */
+    checked: boolean;
+    /**
+     * The value of the switch input
+     */
+    value?: string | number | readonly string[];
+};
 /**
  * Props for the Switch component
- * @property {function} [onChange] - Callback when switch is changed
- * @property {ReactElement | string} [label] - Label for the switch
- * @property {boolean} [checked] - Controlled checked state
- * @property {boolean} [defaultChecked] - Default checked state
  * @extends ComponentPropsWithoutRef<"input">
  * @extends LayoutUtilProps
- * @extends DataTrackingId
  */
-export type SwitchProps = CoreSwitchProps & DataTrackingId;
+export type SwitchProps = Omit<ComponentPropsWithoutRef<"input">, "onChange"> & LayoutUtilProps & {
+    /**
+     * Callback when switch is changed.
+     * @param e Change event object
+     * @param state Current switch state with checked status and value
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>, state: SwitchState) => void;
+    /**
+     * Label for the switch.
+     * @remarks This should either be a string or have text content inside for accessibility
+     */
+    label?: ReactElement | string;
+    /**
+     * Description text to display below the label
+     */
+    description?: string;
+} & DataTrackingId;
 /**
  * Switch component for toggling between on/off states.
  *
@@ -33,8 +57,20 @@ export type SwitchProps = CoreSwitchProps & DataTrackingId;
  *   onChange={(e, state) => console.log('Switch toggled:', state.checked)}
  * />
  */
-export declare const Switch: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
-    onChange?: (e: import('react').ChangeEvent<HTMLInputElement>, state: import('@servicetitan/hammer-react/dist/components/Switch/Switch').SwitchState) => void;
-    label?: import('react').ReactElement | string;
+export declare const Switch: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange"> & LayoutUtilProps & {
+    /**
+     * Callback when switch is changed.
+     * @param e Change event object
+     * @param state Current switch state with checked status and value
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>, state: SwitchState) => void;
+    /**
+     * Label for the switch.
+     * @remarks This should either be a string or have text content inside for accessibility
+     */
+    label?: ReactElement | string;
+    /**
+     * Description text to display below the label
+     */
     description?: string;
 } & DataTrackingId & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Tab/Tab.d.ts

@@ -1,94 +1,21 @@
-import { TabProps as CoreTabProps, TabListProps as CoreTabListProps, TabButtonProps as CoreTabButtonProps, TabPanelProps as CoreTabPanelProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
 /**
  * Props for the Tab component
- * @property {number} defaultIndex - The index of the tab that should be active by default
- * @property {boolean} [fill] - Whether the tabs should fill the available width
  * @extends Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag">
  * @extends LayoutUtilProps
  */
-export type TabProps = CoreTabProps;
-/**
- * Props for the TabList component
- * @extends ComponentPropsWithoutRef<"div">
- */
-export type TabListProps = CoreTabListProps;
-/**
- * Props for the TabButton component
- * @property {string} id - Unique identifier for the tab button
- * @property {string} controls - ID of the tab panel that this button controls
- * @property {(e: MouseEvent<HTMLButtonElement>, index?: number) => void} [onClick] - Callback function called when the tab button is clicked
- * @extends Omit<ComponentPropsWithoutRef<"button">, "onClick" | "disabled">
- */
-export type TabButtonProps = CoreTabButtonProps & DataTrackingId;
-/**
- * Props for the TabPanel component
- * @property {string} id - Unique identifier for the tab panel
- * @extends Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag">
- */
-export type TabPanelProps = CoreTabPanelProps;
-/**
- * TabButton component for individual tab navigation buttons.
- *
- * Features:
- * - Automatic ARIA attributes for accessibility
- * - Visual indicator for active state
- * - Keyboard navigation support
- * - Smooth animations with reduced motion support
- * - Proper focus management
- * - RTL language support
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
- *   First Tab
- * </Tab.Button>
- */
-export declare const TabButton: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
-    id: string;
-    controls: string;
-    onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
-/**
- * TabList component for containing and managing tab buttons.
- *
- * Features:
- * - Horizontal scrolling for overflow tabs
- * - Navigation arrows for overflow content
- * - RTL language support
- * - Automatic overflow detection
- * - Proper ARIA roles for accessibility
- * - Smooth scrolling behavior
- * - Visual indicator positioning
- *
- * @example
- * <Tab.List>
- *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
- *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
- *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
- * </Tab.List>
- */
-export declare const TabList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * TabPanel component for displaying tab content.
- *
- * Features:
- * - Automatic visibility based on active tab
- * - Smooth fade animations
- * - Proper ARIA attributes for accessibility
- * - Automatic association with tab buttons
- * - Focus management
- * - Layout animations
- *
- * @example
- * <Tab.Panel id="panel1">
- *   <h2>First Tab Content</h2>
- *   <p>This is the content for the first tab.</p>
- * </Tab.Panel>
- */
-export declare const TabPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & {
-    id: string;
-} & import('react').RefAttributes<HTMLDivElement>>;
+export type TabProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> & LayoutUtilProps & {
+    /**
+     * The index of the tab that should be active by default.
+     */
+    defaultIndex: number;
+    /**
+     * Whether the tabs should fill the available width.
+     * @default false
+     */
+    fill?: boolean;
+};
 /**
  * Tab component for organizing content into multiple sections with navigation.
  *
@@ -112,8 +39,15 @@ export declare const TabPanel: import('react').ForwardRefExoticComponent<Omit<Om
  *   <Tab.Panel id="panel2">Content for second tab</Tab.Panel>
  * </Tab>
  */
-export declare const Tab: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
+export declare const Tab: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
+    /**
+     * The index of the tab that should be active by default.
+     */
     defaultIndex: number;
+    /**
+     * Whether the tabs should fill the available width.
+     * @default false
+     */
     fill?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>> & {
     /**
@@ -137,7 +71,7 @@ export declare const Tab: import('react').ForwardRefExoticComponent<Omit<Omit<im
         id: string;
         controls: string;
         onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
-    } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
     /**
      * TabList component for containing and managing tab buttons.
      *

package/dist/components/Tab/TabButton.d.ts

@@ -0,0 +1,54 @@
+import { MouseEvent, ComponentPropsWithoutRef } from 'react';
+import { DataTrackingId } from '../../types';
+/**
+ * Props for the TabButton component
+ * @extends Omit<ComponentPropsWithoutRef<"button">, "onClick" | "disabled">
+ */
+export type TabButtonProps = Omit<ComponentPropsWithoutRef<"button">, "onClick" | "disabled"> & {
+    /**
+     * Unique identifier for the tab button.
+     */
+    id: string;
+    /**
+     * ID of the tab panel that this button controls.
+     */
+    controls: string;
+    /**
+     * Callback function called when the tab button is clicked.
+     * @param e The mouse event
+     * @param index The index of the tab button
+     */
+    onClick?: (e: MouseEvent<HTMLButtonElement>, index?: number) => void;
+} & DataTrackingId;
+/**
+ * TabButton component for individual tab navigation buttons.
+ *
+ * Features:
+ * - Automatic ARIA attributes for accessibility
+ * - Visual indicator for active state
+ * - Keyboard navigation support
+ * - Smooth animations with reduced motion support
+ * - Proper focus management
+ * - RTL language support
+ *
+ * @example
+ * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
+ *   First Tab
+ * </Tab.Button>
+ */
+export declare const TabButton: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
+    /**
+     * Unique identifier for the tab button.
+     */
+    id: string;
+    /**
+     * ID of the tab panel that this button controls.
+     */
+    controls: string;
+    /**
+     * Callback function called when the tab button is clicked.
+     * @param e The mouse event
+     * @param index The index of the tab button
+     */
+    onClick?: (e: MouseEvent<HTMLButtonElement>, index?: number) => void;
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Tab/TabList.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the TabList component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
+export type TabListProps = ComponentPropsWithoutRef<"div">;
+/**
+ * TabList component for containing and managing tab buttons.
+ *
+ * Features:
+ * - Horizontal scrolling for overflow tabs
+ * - Navigation arrows for overflow content
+ * - RTL language support
+ * - Automatic overflow detection
+ * - Proper ARIA roles for accessibility
+ * - Smooth scrolling behavior
+ * - Visual indicator positioning
+ *
+ * @example
+ * <Tab.List>
+ *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
+ *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
+ *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
+ * </Tab.List>
+ */
+export declare const TabList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tab/TabPanel.d.ts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the TabPanel component
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag">
+ */
+export type TabPanelProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> & {
+    /**
+     * Unique identifier for the tab panel.
+     */
+    id: string;
+};
+/**
+ * TabPanel component for displaying tab content.
+ *
+ * Features:
+ * - Automatic visibility based on active tab
+ * - Smooth fade animations
+ * - Proper ARIA attributes for accessibility
+ * - Automatic association with tab buttons
+ * - Focus management
+ * - Layout animations
+ *
+ * @example
+ * <Tab.Panel id="panel1">
+ *   <h2>First Tab Content</h2>
+ *   <p>This is the content for the first tab.</p>
+ * </Tab.Panel>
+ */
+export declare const TabPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & {
+    /**
+     * Unique identifier for the tab panel.
+     */
+    id: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tab/index.d.ts

@@ -1,2 +1,5 @@
 export * from './Tab';
 export { Tab as default } from './Tab';
+export { TabButton, type TabButtonProps } from './TabButton';
+export { TabList, type TabListProps } from './TabList';
+export { TabPanel, type TabPanelProps } from './TabPanel';

package/dist/components/Tab/internal/TabContext.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, KeyboardEvent, SetStateAction } from 'react';
+type TabContextProps = {
+    current: number;
+    setCurrent?: Dispatch<SetStateAction<number>>;
+    focus: number;
+    setFocus?: Dispatch<SetStateAction<number>>;
+    items?: NodeListOf<HTMLElement>;
+    uid?: string;
+    onKeyDownHandler?: (e: KeyboardEvent<HTMLButtonElement>) => void;
+    gotoNext?: (refocus?: boolean) => void;
+    goToPrev?: (refocus?: boolean) => void;
+    dir?: string;
+};
+export declare const TabContext: import('react').Context<TabContextProps>;
+export {};

package/dist/components/Text/Text.d.ts

@@ -1,17 +1,12 @@
-import { TextProps as CoreTextProps } from '@servicetitan/hammer-react';
+import { BodyTextInlineProps, BodyTextProps, EyebrowProps, HeadlineProps } from './types';
 /**
  * Props for the Text component
- * @property {"headline"} [variant] - Headline text variant
- * @property {"eyebrow"} [variant] - Eyebrow text variant
- * @property {"body"} [variant] - Body text variant (default)
- * @property {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} [el] - Set the wrapping element's tagname for headlines
- * @property {"small" | "medium" | "large" | "xlarge"} [size] - Size of the text
- * @property {boolean} [subdued] - Deemphasized text styling
- * @property {boolean} [inline] - Inline flag used for nesting BodyText inside BodyText
- * @extends ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">
- * @extends LayoutUtilProps
+ * @extends HeadlineProps<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">
+ * @extends EyebrowProps
+ * @extends BodyTextProps
+ * @extends BodyTextInlineProps
  */
-export type TextProps = CoreTextProps;
+export type TextProps = HeadlineProps<"h1"> | HeadlineProps<"h2"> | HeadlineProps<"h3"> | HeadlineProps<"h4"> | HeadlineProps<"h5"> | HeadlineProps<"h6"> | EyebrowProps | BodyTextProps | BodyTextInlineProps;
 /**
  * Text component for displaying various types of text content with consistent styling.
  *
@@ -19,11 +14,6 @@ export type TextProps = CoreTextProps;
  * - Multiple text variants (headline, eyebrow, body)
  * - Semantic HTML elements (h1-h6, p, span)
  * - Multiple size options for each variant
- * - Deemphasized text styling option
- * - Inline text support for nesting
- * - Supports layout utilities for positioning and spacing
- * - Accessible with proper semantic markup
- * - Responsive typography scaling
  *
  * @example
  * <Text variant="headline" el="h1" size="large">Main Heading</Text>
@@ -37,4 +27,4 @@ export type TextProps = CoreTextProps;
  * <Text subdued>Deemphasized text</Text>
  * <Text inline>Inline text within other text</Text>
  */
-export declare const Text: import('react').ForwardRefExoticComponent<CoreTextProps & import('react').RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement>>;
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement>>;

package/dist/components/Text/types.d.ts

@@ -0,0 +1,93 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps, Size } from '../../types';
+/**
+ * Props for headline text variants
+ * @extends ComponentPropsWithoutRef<T>
+ * @extends LayoutUtilProps
+ */
+export type HeadlineProps<T extends "h1" | "h2" | "h3" | "h4" | "h5" | "h6"> = ComponentPropsWithoutRef<T> & LayoutUtilProps & {
+    /**
+     * Headline text variant
+     */
+    variant: "headline";
+    /**
+     * Size of the headline text
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large" | "xlarge">;
+    /**
+     * Set the wrapping element's tagname
+     */
+    el: T;
+    inline?: never;
+    subdued?: never;
+};
+/**
+ * Props for eyebrow text variant
+ * @extends ComponentPropsWithoutRef<"span">
+ * @extends LayoutUtilProps
+ */
+export type EyebrowProps = ComponentPropsWithoutRef<"span"> & LayoutUtilProps & {
+    /**
+     * Eyebrow text variant
+     */
+    variant: "eyebrow";
+    /**
+     * Size of the eyebrow text
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    el?: never;
+    inline?: never;
+    subdued?: never;
+};
+/**
+ * Props for body text variant
+ * @extends ComponentPropsWithoutRef<"p">
+ * @extends LayoutUtilProps
+ */
+export type BodyTextProps = ComponentPropsWithoutRef<"p"> & LayoutUtilProps & {
+    /**
+     * Body text variant
+     * @default body
+     */
+    variant?: "body";
+    /**
+     * Size of the body text
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large" | "xlarge">;
+    /**
+     * Deemphasized text styling
+     * @default false
+     */
+    subdued?: boolean;
+    inline?: never;
+    el?: never;
+};
+/**
+ * Props for inline body text variant
+ * @extends ComponentPropsWithoutRef<"span">
+ * @extends LayoutUtilProps
+ */
+export type BodyTextInlineProps = ComponentPropsWithoutRef<"span"> & LayoutUtilProps & {
+    /**
+     * Body text variant
+     */
+    variant?: "body";
+    /**
+     * Size of the body text
+     * @default medium
+     */
+    size?: Extract<Size, "small" | "medium" | "large" | "xlarge">;
+    /**
+     * Inline flag used for nesting BodyText inside BodyText
+     */
+    inline: true;
+    /**
+     * Deemphasized text styling
+     * @default false
+     */
+    subdued?: boolean;
+    el?: never;
+};