@servicetitan/anvil2 1.44.1 → 1.45.0

package/dist/components/SideNav/SideNav.d.ts

@@ -1,118 +1,43 @@
-import { SideNavProps as CoreSideNavProps, SideNavCollapsibleProps as CoreSideNavCollapsibleProps, SideNavGroupProps as CoreSideNavGroupProps, SideNavLinkProps as CoreSideNavLinkProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types';
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps, DataTrackingId } from '../../types';
 /**
  * Props for the SideNav component
+ * @extends ComponentPropsWithoutRef<"nav">
+ * @extends LayoutUtilProps
  */
-export type SideNavProps = CoreSideNavProps & DataTrackingId;
+export type SideNavProps = ComponentPropsWithoutRef<"nav"> & LayoutUtilProps & DataTrackingId;
 /**
- * Props for the SideNavCollapsible component
- * @property {string} label - The label text displayed for the collapsible section
- * @property {boolean} [defaultExpanded] - Initial expansion state for uncontrolled usage
- * @property {boolean} [expanded] - Controlled expansion state
+ * Context props for the SideNav component
  */
-export type SideNavCollapsibleProps = CoreSideNavCollapsibleProps;
-/**
- * Props for the SideNavGroup component
- * @property {string} label - The label text displayed for the navigation group
- */
-export type SideNavGroupProps = CoreSideNavGroupProps;
-/**
- * SideNavCollapsible component for expandable navigation sections within a SideNav.
- *
- * Features:
- * - Expandable/collapsible navigation sections
- * - Controlled and uncontrolled expansion states
- * - Keyboard navigation with arrow keys for expansion
- * - Automatic expansion when child links are active
- * - Accessible with proper ARIA expanded states
- * - Visual indicators for active children
- * - Integration with SideNav keyboard navigation
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <SideNav.Collapsible label="Components">
- *   <SideNav.Link id="button" href="/components/button">
- *     Button
- *   </SideNav.Link>
- *   <SideNav.Link id="input" href="/components/input">
- *     Input
- *   </SideNav.Link>
- * </SideNav.Collapsible>
- */
-export declare const SideNavCollapsible: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "onClick"> & {
-    label: string;
-    onClick?: import('react').ComponentPropsWithoutRef<"button">["onClick"];
-    onKeyDown?: import('react').ComponentPropsWithoutRef<"button">["onKeyDown"];
-    defaultExpanded?: boolean;
-    expanded?: boolean;
-} & import('react').RefAttributes<HTMLLIElement>>;
-/**
- * SideNavGroup component for grouping related navigation links within a SideNav.
- *
- * Features:
- * - Groups related navigation links with labels
- * - Accessible with proper ARIA labeling
- * - Semantic grouping for screen readers
- * - Consistent styling and spacing
- * - Unique ID generation for accessibility
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <SideNav.Group label="Getting Started">
- *   <SideNav.Link id="intro" href="/intro">
- *     Introduction
- *   </SideNav.Link>
- *   <SideNav.Link id="installation" href="/installation">
- *     Installation
- *   </SideNav.Link>
- * </SideNav.Group>
- */
-export declare const SideNavGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    label: string;
-} & import('react').RefAttributes<HTMLLIElement>>;
-/**
- * Props for SideNavLink with routing support
- * @property {string} [href] - URL for the link (used when pathname is not provided)
- * @property {string} pathname - Pathname for client-side routing
- * @property {string} [search] - Optional search parameters for the URL
- * @property {boolean} [active] - When true, marks the link as the current active page
- * @property {boolean} [disabled] - When true, disables the link and prevents interaction
- * @extends CoreSideNavLinkProps
- */
-type SideNavLinkWithRoutingProps = CoreSideNavLinkProps & {
+export type SideNavContextProps = {
+    /**
+     * List of navigable elements in the side navigation
+     */
+    links: NodeListOf<Element> | undefined;
     /**
-     * Pathname for client-side routing
+     * Function to recalculate the list of navigable links
      */
-    pathname: string;
+    reCalculateLinks: () => void;
     /**
-     * Optional search parameters for the URL
+     * Set of currently active link IDs
      */
-    search?: string;
+    activeIds: Set<string>;
+    /**
+     * Function to add an ID to the active set
+     */
+    addActiveId: (id: string) => void;
+    /**
+     * Function to remove an ID from the active set
+     */
+    removeActiveId: (id: string) => void;
 };
+export declare const SideNavContext: import('react').Context<SideNavContextProps | null>;
 /**
- * SideNavLink component for individual navigation links within a SideNav.
- *
- * Features:
- * - Individual navigation links with active state support
- * - Keyboard navigation integration with arrow keys
- * - Focus management and tabindex handling
- * - Accessible with proper ARIA attributes
- * - Click and keyboard event handling
- * - Disabled state support
- * - Automatic active state tracking through context
- * - Client-side routing support with pathname prop
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <SideNav.Link id="intro" href="/intro" active>
- *   Introduction
- * </SideNav.Link>
- *
- * <SideNav.Link id="intro" pathname="/intro" active>
- *   Introduction (with routing)
- * </SideNav.Link>
+ * Custom hook for accessing the SideNav context.
+ * @returns The SideNav context with links, activeIds, and utility functions
+ * @throws Error if used outside of a SideNav component
  */
-export declare const SideNavLink: import('react').ForwardRefExoticComponent<(CoreSideNavLinkProps | SideNavLinkWithRoutingProps) & import('react').RefAttributes<HTMLLIElement>>;
+export declare const useSideNav: () => SideNavContextProps;
 /**
  * SideNav component for creating hierarchical navigation menus.
  *
@@ -124,8 +49,6 @@ export declare const SideNavLink: import('react').ForwardRefExoticComponent<(Cor
  * - Automatic link recalculation for dynamic content
  * - Context provider for child components
  * - Layout utility props for positioning and spacing
- * - Client-side routing integration
- * - Automatic tracking ID generation for analytics
  *
  * @example
  * <SideNav>
@@ -147,7 +70,7 @@ export declare const SideNavLink: import('react').ForwardRefExoticComponent<(Cor
  *   </SideNav.Collapsible>
  * </SideNav>
  */
-export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('@servicetitan/hammer-react').LayoutUtilProps & DataTrackingId & import('react').RefAttributes<HTMLDivElement>> & {
+export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & LayoutUtilProps & DataTrackingId & import('react').RefAttributes<HTMLElement>> & {
     /**
      * SideNavLink component for individual navigation links.
      *
@@ -158,15 +81,13 @@ export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<imp
      * - Accessible with proper ARIA attributes
      * - Click and keyboard event handling
      * - Disabled state support
-     * - Client-side routing support with pathname prop
-     * - Automatic tracking ID generation for analytics
      *
      * @example
      * <SideNav.Link id="intro" href="/intro" active>
      *   Introduction
      * </SideNav.Link>
      */
-    Link: import('react').ForwardRefExoticComponent<(CoreSideNavLinkProps | SideNavLinkWithRoutingProps) & import('react').RefAttributes<HTMLLIElement>>;
+    Link: import('react').ForwardRefExoticComponent<import('./SideNavLink').SideNavLinkProps & import('react').RefAttributes<HTMLLIElement>>;
     /**
      * SideNavCollapsible component for expandable navigation sections.
      *
@@ -177,7 +98,6 @@ export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<imp
      * - Automatic expansion when child links are active
      * - Accessible with proper ARIA expanded states
      * - Visual indicators for active children
-     * - Automatic tracking ID generation for analytics
      *
      * @example
      * <SideNav.Collapsible label="Components">
@@ -191,8 +111,8 @@ export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<imp
      */
     Collapsible: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "onClick"> & {
         label: string;
-        onClick?: import('react').ComponentPropsWithoutRef<"button">["onClick"];
-        onKeyDown?: import('react').ComponentPropsWithoutRef<"button">["onKeyDown"];
+        onClick?: ComponentPropsWithoutRef<"button">["onClick"];
+        onKeyDown?: ComponentPropsWithoutRef<"button">["onKeyDown"];
         defaultExpanded?: boolean;
         expanded?: boolean;
     } & import('react').RefAttributes<HTMLLIElement>>;
@@ -204,7 +124,6 @@ export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<imp
      * - Accessible with proper ARIA labeling
      * - Semantic grouping for screen readers
      * - Consistent styling and spacing
-     * - Automatic tracking ID generation for analytics
      *
      * @example
      * <SideNav.Group label="Getting Started">
@@ -220,4 +139,3 @@ export declare const SideNav: import('react').ForwardRefExoticComponent<Omit<imp
         label: string;
     } & import('react').RefAttributes<HTMLLIElement>>;
 };
-export {};

package/dist/components/SideNav/SideNavCollapsible.d.ts

@@ -0,0 +1,73 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the SideNavCollapsible component
+ * @extends Omit<ComponentPropsWithoutRef<"li">, "onClick">
+ */
+export type SideNavCollapsibleProps = Omit<ComponentPropsWithoutRef<"li">, "onClick"> & {
+    /**
+     * The label text displayed for the collapsible section
+     */
+    label: string;
+    /**
+     * Function called when the collapsible button is clicked
+     */
+    onClick?: ComponentPropsWithoutRef<"button">["onClick"];
+    /**
+     * Function called when a key is pressed on the collapsible button
+     */
+    onKeyDown?: ComponentPropsWithoutRef<"button">["onKeyDown"];
+    /**
+     * Initial expansion state for uncontrolled usage
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expansion state
+     */
+    expanded?: boolean;
+};
+/**
+ * SideNavCollapsible component for expandable navigation sections within a SideNav.
+ *
+ * Features:
+ * - Expandable/collapsible navigation sections
+ * - Controlled and uncontrolled expansion states
+ * - Keyboard navigation with arrow keys for expansion
+ * - Automatic expansion when child links are active
+ * - Accessible with proper ARIA expanded states
+ * - Visual indicators for active children
+ * - Integration with SideNav keyboard navigation
+ *
+ * @example
+ * <SideNav.Collapsible label="Components">
+ *   <SideNav.Link id="button" href="/components/button">
+ *     Button
+ *   </SideNav.Link>
+ *   <SideNav.Link id="input" href="/components/input">
+ *     Input
+ *   </SideNav.Link>
+ * </SideNav.Collapsible>
+ */
+export declare const SideNavCollapsible: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">, "onClick"> & {
+    /**
+     * The label text displayed for the collapsible section
+     */
+    label: string;
+    /**
+     * Function called when the collapsible button is clicked
+     */
+    onClick?: ComponentPropsWithoutRef<"button">["onClick"];
+    /**
+     * Function called when a key is pressed on the collapsible button
+     */
+    onKeyDown?: ComponentPropsWithoutRef<"button">["onKeyDown"];
+    /**
+     * Initial expansion state for uncontrolled usage
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expansion state
+     */
+    expanded?: boolean;
+} & import('react').RefAttributes<HTMLLIElement>>;

package/dist/components/SideNav/SideNavGroup.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the SideNavGroup component
+ * @extends ComponentPropsWithoutRef<"li">
+ */
+export type SideNavGroupProps = ComponentPropsWithoutRef<"li"> & {
+    /**
+     * The label text displayed for the navigation group
+     */
+    label: string;
+};
+/**
+ * SideNavGroup component for grouping related navigation links within a SideNav.
+ *
+ * Features:
+ * - Groups related navigation links with labels
+ * - Accessible with proper ARIA labeling
+ * - Semantic grouping for screen readers
+ * - Consistent styling and spacing
+ * - Unique ID generation for accessibility
+ *
+ * @example
+ * <SideNav.Group label="Getting Started">
+ *   <SideNav.Link id="intro" href="/intro">
+ *     Introduction
+ *   </SideNav.Link>
+ *   <SideNav.Link id="installation" href="/installation">
+ *     Installation
+ *   </SideNav.Link>
+ * </SideNav.Group>
+ */
+export declare const SideNavGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    /**
+     * The label text displayed for the navigation group
+     */
+    label: string;
+} & import('react').RefAttributes<HTMLLIElement>>;

package/dist/components/SideNav/SideNavLink.d.ts

@@ -0,0 +1,46 @@
+import { SideNavLinkProps as CoreSideNavLinkProps } from './internal/SideNavLink';
+/**
+ * Props for SideNavLink with routing support
+ * @property {string} [href] - URL for the link (used when pathname is not provided)
+ * @property {string} pathname - Pathname for client-side routing
+ * @property {string} [search] - Optional search parameters for the URL
+ * @property {boolean} [active] - When true, marks the link as the current active page
+ * @property {boolean} [disabled] - When true, disables the link and prevents interaction
+ * @extends CoreSideNavLinkProps
+ */
+type SideNavLinkWithRoutingProps = CoreSideNavLinkProps & {
+    /**
+     * Pathname for client-side routing
+     */
+    pathname: string;
+    /**
+     * Optional search parameters for the URL
+     */
+    search?: string;
+};
+export type SideNavLinkProps = CoreSideNavLinkProps | SideNavLinkWithRoutingProps;
+/**
+ * SideNavLink component for individual navigation links within a SideNav.
+ *
+ * Features:
+ * - Individual navigation links with active state support
+ * - Keyboard navigation integration with arrow keys
+ * - Focus management and tabindex handling
+ * - Accessible with proper ARIA attributes
+ * - Click and keyboard event handling
+ * - Disabled state support
+ * - Automatic active state tracking through context
+ * - Client-side routing support with pathname prop
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <SideNav.Link id="intro" href="/intro" active>
+ *   Introduction
+ * </SideNav.Link>
+ *
+ * <SideNav.Link id="intro" pathname="/intro" active>
+ *   Introduction (with routing)
+ * </SideNav.Link>
+ */
+export declare const SideNavLink: import('react').ForwardRefExoticComponent<SideNavLinkProps & import('react').RefAttributes<HTMLLIElement>>;
+export {};

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

@@ -1,2 +1,5 @@
-export * from './SideNav';
+export { SideNav, type SideNavProps } from './SideNav';
+export * from './SideNavLink';
+export * from './SideNavCollapsible';
+export * from './SideNavGroup';
 export { SideNav as default } from './SideNav';

package/dist/components/SideNav/internal/SideNavLink.d.ts

@@ -0,0 +1,74 @@
+import { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent } from 'react';
+/**
+ * Props for the SideNavLink component
+ * @extends Omit<ComponentPropsWithoutRef<"a">, "id" | "onClick" | "onKeyDown" | "onKeyUp">
+ */
+export type SideNavLinkProps = Omit<ComponentPropsWithoutRef<"a">, "id" | "onClick" | "onKeyDown" | "onKeyUp"> & {
+    /**
+     * Unique identifier for the navigation link
+     */
+    id: string;
+    /**
+     * When true, marks the link as the current active page
+     */
+    active?: boolean;
+    /**
+     * When true, disables the link and prevents interaction
+     */
+    disabled?: boolean;
+    /**
+     * Function called when the link is clicked
+     */
+    onClick?: (e: MouseEvent<HTMLAnchorElement>, id: SideNavLinkProps["id"]) => void;
+    /**
+     * Function called when a key is pressed down on the link
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLAnchorElement>, id: SideNavLinkProps["id"]) => void;
+    /**
+     * Function called when a key is released on the link
+     */
+    onKeyUp?: (e: KeyboardEvent<HTMLAnchorElement>, id: SideNavLinkProps["id"]) => void;
+};
+/**
+ * SideNavLink component for individual navigation links within a SideNav.
+ *
+ * Features:
+ * - Individual navigation links with active state support
+ * - Keyboard navigation integration with arrow keys
+ * - Focus management and tabindex handling
+ * - Accessible with proper ARIA attributes
+ * - Click and keyboard event handling
+ * - Disabled state support
+ * - Automatic active state tracking through context
+ *
+ * @example
+ * <SideNav.Link id="intro" href="/intro" active>
+ *   Introduction
+ * </SideNav.Link>
+ */
+export declare const SideNavLink: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "id" | "onKeyDown" | "onKeyUp" | "onClick"> & {
+    /**
+     * Unique identifier for the navigation link
+     */
+    id: string;
+    /**
+     * When true, marks the link as the current active page
+     */
+    active?: boolean;
+    /**
+     * When true, disables the link and prevents interaction
+     */
+    disabled?: boolean;
+    /**
+     * Function called when the link is clicked
+     */
+    onClick?: (e: MouseEvent<HTMLAnchorElement>, id: SideNavLinkProps["id"]) => void;
+    /**
+     * Function called when a key is pressed down on the link
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLAnchorElement>, id: SideNavLinkProps["id"]) => void;
+    /**
+     * Function called when a key is released on the link
+     */
+    onKeyUp?: (e: KeyboardEvent<HTMLAnchorElement>, id: SideNavLinkProps["id"]) => void;
+} & import('react').RefAttributes<HTMLLIElement>>;

package/dist/components/SideNav/internal/utils.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { SideNavContextProps } from '../SideNav';
+/**
+ * Handles keyboard navigation for SideNav components using arrow keys.
+ *
+ * This function manages focus movement between navigable elements in a SideNav,
+ * providing circular navigation (wrapping from last to first and vice versa).
+ * It updates tabindex attributes to maintain proper focus management and
+ * prevents default browser behavior for arrow key navigation.
+ *
+ * @param e - The keyboard event that triggered the navigation
+ * @param links - NodeList of all navigable elements in the SideNav
+ * @param current - Ref object pointing to the currently focused element
+ * @returns void
+ */
+export declare const sideNavKeyboardNavigation: (e: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>, links: SideNavContextProps["links"], current: RefObject<HTMLAnchorElement | HTMLButtonElement>) => void;

package/dist/components/Skeleton/SkeletonCircle.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the SkeletonCircle component
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "children">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
+export type SkeletonCircleProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
+    /**
+     * The diameter of the circular skeleton in CSS units.
+     * @default 32px
+     */
+    diameter?: string;
+};
+/**
+ * SkeletonCircle component for displaying circular loading placeholders.
+ *
+ * Features:
+ * - Circular skeleton placeholder with customizable diameter
+ * - Animated pulsing effect for loading indication
+ * - Accessible with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Customizable styling through className and style props
+ * - Progress bar role for screen readers
+ *
+ * @example
+ * <Skeleton.Circle diameter="40px" />
+ *
+ * <Skeleton.Circle
+ *   diameter="60px"
+ *   className="custom-skeleton"
+ *   aria-label="Loading avatar"
+ * />
+ */
+export declare const SkeletonCircle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+    /**
+     * The diameter of the circular skeleton in CSS units.
+     * @default 32px
+     */
+    diameter?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Skeleton/SkeletonPill.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the SkeletonPill component
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "children">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
+export type SkeletonPillProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
+    /**
+     * The width of the pill skeleton in CSS units.
+     */
+    width?: string;
+};
+/**
+ * SkeletonPill component for displaying pill-shaped loading placeholders.
+ *
+ * Features:
+ * - Pill-shaped skeleton placeholder with customizable width
+ * - Animated pulsing effect for loading indication
+ * - Accessible with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Customizable styling through className and style props
+ * - Progress bar role for screen readers
+ * - Large border radius for pill appearance
+ * - Fixed height for consistent styling
+ *
+ * @example
+ * <Skeleton.Pill width="120px" />
+ *
+ * <Skeleton.Pill
+ *   width="8rem"
+ *   className="custom-skeleton"
+ *   aria-label="Loading tag"
+ * />
+ */
+export declare const SkeletonPill: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+    /**
+     * The width of the pill skeleton in CSS units.
+     */
+    width?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Skeleton/SkeletonRectangle.d.ts

@@ -0,0 +1,42 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the SkeletonRectangle component
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "children">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
+export type SkeletonRectangleProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & {
+    /**
+     * The height of the rectangular skeleton in CSS units.
+     * @default 56px
+     */
+    height?: string;
+};
+/**
+ * SkeletonRectangle component for displaying rectangular loading placeholders.
+ *
+ * Features:
+ * - Rectangular skeleton placeholder with customizable height
+ * - Animated pulsing effect for loading indication
+ * - Accessible with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Customizable styling through className and style props
+ * - Progress bar role for screen readers
+ * - Medium border radius for consistent styling
+ *
+ * @example
+ * <Skeleton.Rectangle height="100px" />
+ *
+ * <Skeleton.Rectangle
+ *   height="2rem"
+ *   className="custom-skeleton"
+ *   aria-label="Loading image"
+ * />
+ */
+export declare const SkeletonRectangle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+    /**
+     * The height of the rectangular skeleton in CSS units.
+     * @default 56px
+     */
+    height?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,52 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the SkeletonText component
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "children">
+ * @extends Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink">
+ */
+export type SkeletonTextProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & Omit<LayoutUtilProps, "flex" | "flexBasis" | "flexGrow" | "flexShrink"> & ({
+    /**
+     * Text variant for body text skeleton.
+     * @default body
+     */
+    variant?: "body";
+    /**
+     * Number of text lines to display.
+     * @default 1
+     */
+    rows?: number;
+} | {
+    /**
+     * Text variant for headline text skeleton.
+     */
+    variant?: "headline";
+    /**
+     * Rows prop is not available for headline variant.
+     */
+    rows?: never;
+});
+/**
+ * SkeletonText component for displaying text loading placeholders.
+ *
+ * Features:
+ * - Text skeleton placeholder with body and headline variants
+ * - Configurable number of rows for body variant
+ * - Animated pulsing effect for loading indication
+ * - Accessible with proper ARIA attributes
+ * - Layout utility props for positioning and spacing
+ * - Customizable styling through className and style props
+ * - Progress bar role for screen readers
+ * - Different line heights for body vs headline variants
+ * - Last line shorter for body variant to simulate natural text
+ *
+ * @example
+ * <Skeleton.Text variant="body" rows={3} />
+ *
+ * <Skeleton.Text
+ *   variant="headline"
+ *   className="custom-skeleton"
+ *   aria-label="Loading title"
+ * />
+ */
+export declare const SkeletonText: import('react').ForwardRefExoticComponent<SkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;