@trackunit/react-components 1.13.10 → 1.13.11

package/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,115 @@
+import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
+import { fontSizeKeys } from "@trackunit/ui-design-tokens";
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+type CSSLength = `${number}px` | `${number}rem` | `${number}em` | `${number}ch` | `${number}ex` | `${number}%`;
+type TextSizeKey = `text-${fontSizeKeys}`;
+export type SkeletonVariant = "text" | "block";
+/**
+ * Props for Skeleton when using text variant.
+ *
+ * Reduces height and adds vertical margins to match the visual space text occupies within its line-height.
+ * Must be used with text-size keys for height.
+ */
+type SkeletonTextProps = {
+    /**
+     * Visual variant: "text"
+     *
+     * @default "text"
+     */
+    variant?: "text";
+    /**
+     * The height of the skeleton using text size keys.
+     *
+     * Text size keys: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl
+     *
+     * Height uses font-size × 0.7 to approximate visual cap-height, while margins are calculated as (line-height - cap-height) / 2
+     * using CSS variables. For large text sizes (5xl+), margins may be negative, allowing the skeleton to extend beyond the
+     * line-height box just like actual text does.
+     *
+     * @default "text-base"
+     */
+    height?: TextSizeKey;
+};
+/**
+ * Props for Skeleton when using block variant.
+ *
+ * Fills the full height (for images, badges, buttons, and other shape-based elements).
+ * Must be used with numbers or CSS length values for height.
+ */
+type SkeletonBlockProps = {
+    /**
+     * Visual variant: "block"
+     */
+    variant: "block";
+    /**
+     * The height of the skeleton.
+     *
+     * - Number: treated as pixels (e.g., 24 → "24px")
+     * - CSS length: any CSS length value (e.g., "1.5rem", "2em")
+     */
+    height?: number | StringWithAutocompleteOptions<CSSLength>;
+};
+/**
+ * Props for Skeleton component using discriminated union for type safety.
+ *
+ * - Use `variant="text"` with text-size keys (text-xs, text-sm, etc.) for text placeholders
+ * - Use `variant="block"` with numbers or CSS lengths for shape-based elements (images, badges, buttons, etc.)
+ */
+export type SkeletonProps = CommonProps & (SkeletonTextProps | SkeletonBlockProps) & {
+    /**
+     * The width of the skeleton.
+     *
+     * - Number: treated as pixels (e.g., 200 → "200px")
+     * - CSS length: any CSS length value or percentage (e.g., "50%", "20rem")
+     *
+     * @default "100%"
+     */
+    width?: number | StringWithAutocompleteOptions<CSSLength>;
+    /**
+     * Whether the width can shrink to fit within its container.
+     *
+     * - `true`: Uses max-width pattern - width can shrink if container is smaller
+     * - `false`: Uses exact width - width is fixed and won't shrink
+     *
+     * @default true for text variant, false for block variant
+     */
+    flexibleWidth?: boolean;
+    /**
+     * Optional children to render inside the skeleton.
+     * Useful for custom skeleton layouts with specific content.
+     */
+    children?: ReactNode;
+};
+/**
+ * Extract the size key from a text size string (e.g., "text-base" → "base").
+ *
+ * @param value - The text size string to parse
+ * @returns {fontSizeKeys | null} The extracted size key or null if invalid
+ */
+export declare const extractSizeKey: (value: string) => fontSizeKeys | null;
+/**
+ * Calculate the height value based on the height prop and variant.
+ *
+ * @param height - The height value (number, CSS length, or text size key)
+ * @param variant - The skeleton variant ("text" or "block")
+ * @returns {string} The calculated CSS height value
+ */
+export declare const getHeightValue: (height: TextSizeKey | number | string, variant: SkeletonVariant) => string;
+/**
+ * Calculate the vertical margin value for text variant to align with text baseline.
+ * Formula: (line-height - cap-height) / 2, where cap-height = font-size × 0.7
+ *
+ * @param height - The height value (number, CSS length, or text size key)
+ * @returns {string} The calculated CSS margin value
+ */
+export declare const getMarginValue: (height: TextSizeKey | number | string) => string;
+/**
+ * Display a single placeholder line before data gets loaded to reduce load-time frustration.
+ *
+ * Use `variant="text"` with text-size keys for text placeholders.
+ * Use `variant="block"` with numbers/CSS for images, badges, buttons, and other shape-based elements.
+ * Pass children to create custom skeleton layouts.
+ */
+export declare const Skeleton: import("react").NamedExoticComponent<SkeletonProps>;
+export {};

package/src/components/Skeleton/Skeleton.variants.d.ts

@@ -0,0 +1 @@
+export declare const cvaSkeleton: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./Skeleton";

package/src/index.d.ts

@@ -20,6 +20,10 @@ export * from "./components/EmptyState/EmptyState";
 export * from "./components/EmptyState/EmptyState.variants";
 export * from "./components/EmptyValue/EmptyValue";
 export * from "./components/ExternalLink/ExternalLink";
+export { createGrid } from "./components/GridAreas/createGrid";
+export { GridAreas, type GridAreasProps } from "./components/GridAreas/GridAreas";
+export type { GridAreasResult, GridConfig, SlotProps } from "./components/GridAreas/types";
+export { useGridAreas } from "./components/GridAreas/useGridAreas";
 export * from "./components/Heading";
 export * from "./components/Highlight/Highlight";
 export * from "./components/HorizontalOverflowScroller/HorizontalOverflowScroller";
@@ -47,10 +51,14 @@ export * from "./components/Polygon/Polygon";
 export * from "./components/Popover";
 export * from "./components/Popover/Popover";
 export * from "./components/Portal/Portal";
+export * from "./components/PreferenceCard/PreferenceCard";
+export * from "./components/PreferenceCard/PreferenceCard.variants";
+export * from "./components/PreferenceCard/PreferenceCardSkeleton";
 export * from "./components/Prompt";
 export * from "./components/SectionHeader";
 export * from "./components/Sidebar/Sidebar";
 export * from "./components/Sidebar/useOverflowItems";
+export * from "./components/Skeleton";
 export * from "./components/SkeletonLines";
 export * from "./components/Spacer";
 export * from "./components/Spinner";