@trackunit/react-components 1.17.27 → 1.17.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +0 -48
- package/index.esm.js +0 -48
- package/package.json +1 -1
- package/src/components/Icon/Icon.variants.d.ts +0 -4
- package/src/components/ListItem/ListItemSkeleton.d.ts +0 -10
- package/src/components/Portal/shared.d.ts +0 -11
- package/src/components/Skeleton/Skeleton.helpers.d.ts +0 -1
- package/src/components/SkeletonLines/SkeletonLines.variants.d.ts +0 -1
- package/src/components/Tooltip/Tooltip.variants.d.ts +0 -1
package/index.cjs.js
CHANGED
|
@@ -82,28 +82,6 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
|
|
|
82
82
|
size: "medium",
|
|
83
83
|
},
|
|
84
84
|
});
|
|
85
|
-
cssClassVarianceUtilities.cvaMerge([], {
|
|
86
|
-
variants: {
|
|
87
|
-
iconType: {
|
|
88
|
-
solid: "fill-current stroke-transparent",
|
|
89
|
-
outline: "fill-transparent stroke-current",
|
|
90
|
-
},
|
|
91
|
-
},
|
|
92
|
-
});
|
|
93
|
-
cssClassVarianceUtilities.cvaMerge([
|
|
94
|
-
"relative",
|
|
95
|
-
"aspect-square",
|
|
96
|
-
"after:content-['']",
|
|
97
|
-
"after:absolute",
|
|
98
|
-
"after:h-2",
|
|
99
|
-
"after:w-2",
|
|
100
|
-
"after:bg-current",
|
|
101
|
-
"after:rounded-full",
|
|
102
|
-
"after:inset-1/2",
|
|
103
|
-
"after:-translate-x-1/2",
|
|
104
|
-
"after:-translate-y-1/2",
|
|
105
|
-
"after:opacity-50",
|
|
106
|
-
]);
|
|
107
85
|
|
|
108
86
|
const iconPalette = {
|
|
109
87
|
...uiDesignTokens.intentPalette,
|
|
@@ -4518,7 +4496,6 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
|
|
|
4518
4496
|
return (jsxRuntime.jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
|
|
4519
4497
|
};
|
|
4520
4498
|
|
|
4521
|
-
cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
|
|
4522
4499
|
const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
|
|
4523
4500
|
variants: {
|
|
4524
4501
|
color: {
|
|
@@ -6602,31 +6579,6 @@ const PRESET_CONFIGURATIONS = {
|
|
|
6602
6579
|
};
|
|
6603
6580
|
|
|
6604
6581
|
const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
|
|
6605
|
-
cssClassVarianceUtilities.cvaMerge([
|
|
6606
|
-
"relative",
|
|
6607
|
-
"overflow-hidden",
|
|
6608
|
-
"rounded-lg",
|
|
6609
|
-
// Gradient background
|
|
6610
|
-
"bg-gradient-to-r",
|
|
6611
|
-
"from-neutral-200/80",
|
|
6612
|
-
"via-neutral-300/60",
|
|
6613
|
-
"to-neutral-200/80",
|
|
6614
|
-
// Pulse animation
|
|
6615
|
-
"animate-pulse",
|
|
6616
|
-
// Shimmer overlay
|
|
6617
|
-
"before:absolute",
|
|
6618
|
-
"before:inset-0",
|
|
6619
|
-
"before:bg-gradient-to-r",
|
|
6620
|
-
"before:from-transparent",
|
|
6621
|
-
"before:via-white/50",
|
|
6622
|
-
"before:to-transparent",
|
|
6623
|
-
"before:opacity-0",
|
|
6624
|
-
"before:animate-pulse",
|
|
6625
|
-
// Smooth transitions for accessibility
|
|
6626
|
-
"transition-all",
|
|
6627
|
-
"duration-300",
|
|
6628
|
-
"ease-in-out",
|
|
6629
|
-
]);
|
|
6630
6582
|
|
|
6631
6583
|
/**
|
|
6632
6584
|
* SkeletonLines renders multiple animated placeholder text lines before data loads.
|
package/index.esm.js
CHANGED
|
@@ -80,28 +80,6 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"
|
|
|
80
80
|
size: "medium",
|
|
81
81
|
},
|
|
82
82
|
});
|
|
83
|
-
cvaMerge([], {
|
|
84
|
-
variants: {
|
|
85
|
-
iconType: {
|
|
86
|
-
solid: "fill-current stroke-transparent",
|
|
87
|
-
outline: "fill-transparent stroke-current",
|
|
88
|
-
},
|
|
89
|
-
},
|
|
90
|
-
});
|
|
91
|
-
cvaMerge([
|
|
92
|
-
"relative",
|
|
93
|
-
"aspect-square",
|
|
94
|
-
"after:content-['']",
|
|
95
|
-
"after:absolute",
|
|
96
|
-
"after:h-2",
|
|
97
|
-
"after:w-2",
|
|
98
|
-
"after:bg-current",
|
|
99
|
-
"after:rounded-full",
|
|
100
|
-
"after:inset-1/2",
|
|
101
|
-
"after:-translate-x-1/2",
|
|
102
|
-
"after:-translate-y-1/2",
|
|
103
|
-
"after:opacity-50",
|
|
104
|
-
]);
|
|
105
83
|
|
|
106
84
|
const iconPalette = {
|
|
107
85
|
...intentPalette,
|
|
@@ -4516,7 +4494,6 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
|
|
|
4516
4494
|
return (jsx(Button, { "data-state": context.isOpen === true ? "open" : "closed", ref: ref, type: "button", ...context.getReferenceProps(props), children: children }));
|
|
4517
4495
|
};
|
|
4518
4496
|
|
|
4519
|
-
cvaMerge(["flex", "leading-5"]);
|
|
4520
4497
|
const cvaTooltipIcon = cvaMerge(["text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
|
|
4521
4498
|
variants: {
|
|
4522
4499
|
color: {
|
|
@@ -6600,31 +6577,6 @@ const PRESET_CONFIGURATIONS = {
|
|
|
6600
6577
|
};
|
|
6601
6578
|
|
|
6602
6579
|
const cvaSkeletonContainer = cvaMerge(["flex", "flex-col"]);
|
|
6603
|
-
cvaMerge([
|
|
6604
|
-
"relative",
|
|
6605
|
-
"overflow-hidden",
|
|
6606
|
-
"rounded-lg",
|
|
6607
|
-
// Gradient background
|
|
6608
|
-
"bg-gradient-to-r",
|
|
6609
|
-
"from-neutral-200/80",
|
|
6610
|
-
"via-neutral-300/60",
|
|
6611
|
-
"to-neutral-200/80",
|
|
6612
|
-
// Pulse animation
|
|
6613
|
-
"animate-pulse",
|
|
6614
|
-
// Shimmer overlay
|
|
6615
|
-
"before:absolute",
|
|
6616
|
-
"before:inset-0",
|
|
6617
|
-
"before:bg-gradient-to-r",
|
|
6618
|
-
"before:from-transparent",
|
|
6619
|
-
"before:via-white/50",
|
|
6620
|
-
"before:to-transparent",
|
|
6621
|
-
"before:opacity-0",
|
|
6622
|
-
"before:animate-pulse",
|
|
6623
|
-
// Smooth transitions for accessibility
|
|
6624
|
-
"transition-all",
|
|
6625
|
-
"duration-300",
|
|
6626
|
-
"ease-in-out",
|
|
6627
|
-
]);
|
|
6628
6580
|
|
|
6629
6581
|
/**
|
|
6630
6582
|
* SkeletonLines renders multiple animated placeholder text lines before data loads.
|
package/package.json
CHANGED
|
@@ -3,7 +3,3 @@ export declare const cvaIcon: (props?: ({
|
|
|
3
3
|
size?: "small" | "medium" | "large" | null | undefined;
|
|
4
4
|
fontSize?: boolean | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
6
|
-
export declare const cvaIconComponent: (props?: ({
|
|
7
|
-
iconType?: "solid" | "outline" | null | undefined;
|
|
8
|
-
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
9
|
-
export declare const cvaLoadingDot: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
import { ReactElement } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Default property values for ListItemSkeleton component.
|
|
4
|
-
*/
|
|
5
|
-
export declare const DEFAULT_SKELETON_LIST_ITEM_PROPS: {
|
|
6
|
-
readonly hasThumbnail: true;
|
|
7
|
-
readonly thumbnailShape: "circle";
|
|
8
|
-
readonly hasDescription: true;
|
|
9
|
-
readonly hasMeta: false;
|
|
10
|
-
readonly hasDetails: false;
|
|
11
|
-
};
|
|
12
2
|
export interface ListItemSkeletonProps {
|
|
13
3
|
/** Whether to show a thumbnail skeleton */
|
|
14
4
|
hasThumbnail?: boolean;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { UseFloatingPortalNodeProps } from "@floating-ui/react";
|
|
2
1
|
/** @internal */
|
|
3
2
|
export declare const PORTAL_CONTAINER = "portal-container";
|
|
4
3
|
/**
|
|
@@ -7,13 +6,3 @@ export declare const PORTAL_CONTAINER = "portal-container";
|
|
|
7
6
|
* @internal
|
|
8
7
|
*/
|
|
9
8
|
export declare const getDefaultPortalContainer: () => HTMLElement;
|
|
10
|
-
/**
|
|
11
|
-
* Hook that creates or retrieves a portal node for floating UI components
|
|
12
|
-
*
|
|
13
|
-
* @param props - The portal node props
|
|
14
|
-
* @param props.root - The root element to attach the portal to
|
|
15
|
-
* @param props.id - The ID for the portal node
|
|
16
|
-
* @returns {HTMLElement | null} The portal node props
|
|
17
|
-
* @internal
|
|
18
|
-
*/
|
|
19
|
-
export declare const usePortalNode: (props?: UseFloatingPortalNodeProps) => HTMLElement | null;
|
|
@@ -3,7 +3,6 @@ export type CSSLength = `${number}px` | `${number}rem` | `${number}em` | `${numb
|
|
|
3
3
|
export type CSSLengthUnit = "px" | "rem" | "em" | "ch" | "ex" | "%";
|
|
4
4
|
export type TextSizeKey = `text-${fontSizeKeys}`;
|
|
5
5
|
export type SkeletonVariant = "text" | "block";
|
|
6
|
-
export declare const VALID_SIZE_KEYS: ReadonlyArray<fontSizeKeys>;
|
|
7
6
|
/**
|
|
8
7
|
* Extract the size key from a text size string (e.g., "text-base" → "base").
|
|
9
8
|
*
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export declare const cvaTooltipContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
|
|
2
1
|
export declare const cvaTooltipIcon: (props?: ({
|
|
3
2
|
color?: "light" | "dark" | null | undefined;
|
|
4
3
|
defaultVariants?: "color" | null | undefined;
|