@wallarm-org/design-system 0.22.0 → 0.23.0
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/dist/components/Attribute/Attribute.d.ts +9 -0
- package/dist/components/Attribute/Attribute.js +33 -0
- package/dist/components/Attribute/AttributeLabel.d.ts +6 -0
- package/dist/components/Attribute/AttributeLabel.js +16 -0
- package/dist/components/Attribute/AttributeLabelDescription.d.ts +6 -0
- package/dist/components/Attribute/AttributeLabelDescription.js +16 -0
- package/dist/components/Attribute/AttributeLabelInfo.d.ts +7 -0
- package/dist/components/Attribute/AttributeLabelInfo.js +29 -0
- package/dist/components/Attribute/AttributeValue.d.ts +6 -0
- package/dist/components/Attribute/AttributeValue.js +25 -0
- package/dist/components/Attribute/index.d.ts +5 -0
- package/dist/components/Attribute/index.js +6 -0
- package/dist/components/CodeSnippet/CodeSnippetActions.js +1 -1
- package/dist/components/CodeSnippet/CodeSnippetCode.js +21 -16
- package/dist/components/CodeSnippet/CodeSnippetContent.js +10 -10
- package/dist/components/CodeSnippet/CodeSnippetContext.d.ts +8 -0
- package/dist/components/CodeSnippet/CodeSnippetLineNumbers.js +10 -7
- package/dist/components/CodeSnippet/CodeSnippetRoot.d.ts +4 -1
- package/dist/components/CodeSnippet/CodeSnippetRoot.js +54 -3
- package/dist/components/CodeSnippet/InlineCodeSnippet.js +1 -1
- package/dist/components/CodeSnippet/index.d.ts +2 -0
- package/dist/components/CodeSnippet/index.js +2 -1
- package/dist/components/CodeSnippet/internal/CodeSnippetHighlights.js +7 -8
- package/dist/components/CodeSnippet/internal/ColorStickColumn.d.ts +2 -2
- package/dist/components/CodeSnippet/internal/ColorStickColumn.js +8 -8
- package/dist/components/CodeSnippet/internal/FoldColumn.d.ts +3 -0
- package/dist/components/CodeSnippet/internal/FoldColumn.js +42 -0
- package/dist/components/CodeSnippet/internal/FoldSummaryLine.d.ts +8 -0
- package/dist/components/CodeSnippet/internal/FoldSummaryLine.js +20 -0
- package/dist/components/CodeSnippet/internal/FoldToggle.d.ts +7 -0
- package/dist/components/CodeSnippet/internal/FoldToggle.js +19 -0
- package/dist/components/CodeSnippet/internal/PrefixColumn.d.ts +2 -2
- package/dist/components/CodeSnippet/internal/PrefixColumn.js +8 -8
- package/dist/components/CodeSnippet/internal/ShowMoreButton.js +2 -2
- package/dist/components/CodeSnippet/lib/foldUtils.d.ts +28 -0
- package/dist/components/CodeSnippet/lib/foldUtils.js +80 -0
- package/dist/components/CodeSnippet/lib/httpFolds.d.ts +27 -0
- package/dist/components/CodeSnippet/lib/httpFolds.js +36 -0
- package/dist/components/Flex/Flex.d.ts +1 -1
- package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts +1 -1
- package/dist/components/Separator/Separator.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/Stack/Stack.d.ts +1 -1
- package/dist/hooks/useCopyTooltip.js +5 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -1
- package/dist/metadata/components.json +1496 -26
- package/dist/theme/index.css +1 -0
- package/dist/theme/semantic.css +32 -25
- package/dist/theme/utilities/code-snippet-bg.css +8 -0
- package/package.json +1 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { cn } from "../../../utils/cn.js";
|
|
4
|
+
import { useCodeSnippet } from "../hooks/index.js";
|
|
5
|
+
import { LINE_COLOR_STYLES, SIZE_LINE_HEIGHT_CLASSES } from "../lib/lineStyles.js";
|
|
6
|
+
import { FoldToggle } from "./FoldToggle.js";
|
|
7
|
+
const FoldColumn = ()=>{
|
|
8
|
+
const { visibleDisplayItems, folds, collapsedFolds, toggleFold, size, lines } = useCodeSnippet();
|
|
9
|
+
const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
|
|
10
|
+
const foldByStartLine = useMemo(()=>new Map(folds.map((f)=>[
|
|
11
|
+
f.startLine,
|
|
12
|
+
f
|
|
13
|
+
])), [
|
|
14
|
+
folds
|
|
15
|
+
]);
|
|
16
|
+
return /*#__PURE__*/ jsx("div", {
|
|
17
|
+
className: "flex flex-col select-none",
|
|
18
|
+
"data-slot": "code-snippet-fold",
|
|
19
|
+
children: visibleDisplayItems.map((item)=>{
|
|
20
|
+
if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
|
|
21
|
+
className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-4'),
|
|
22
|
+
children: /*#__PURE__*/ jsx(FoldToggle, {
|
|
23
|
+
fold: item.fold,
|
|
24
|
+
isCollapsed: true,
|
|
25
|
+
onToggle: ()=>toggleFold(item.fold.id)
|
|
26
|
+
})
|
|
27
|
+
}, `fold-${item.fold.id}`);
|
|
28
|
+
const fold = foldByStartLine.get(item.lineNumber);
|
|
29
|
+
const lineConfig = lines.get(item.lineNumber);
|
|
30
|
+
const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
|
|
31
|
+
return /*#__PURE__*/ jsx("span", {
|
|
32
|
+
className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-4', colorStyles?.bg),
|
|
33
|
+
children: fold && !collapsedFolds.has(fold.id) ? /*#__PURE__*/ jsx(FoldToggle, {
|
|
34
|
+
fold: fold,
|
|
35
|
+
isCollapsed: false,
|
|
36
|
+
onToggle: ()=>toggleFold(fold.id)
|
|
37
|
+
}) : null
|
|
38
|
+
}, item.lineNumber);
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
export { FoldColumn };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../../utils/cn.js";
|
|
3
|
+
import { getFoldSummaryLabel } from "../lib/foldUtils.js";
|
|
4
|
+
const FoldSummaryLine = ({ fold, lineCount, lineHeightClass, onToggle })=>{
|
|
5
|
+
const label = getFoldSummaryLabel(fold, lineCount);
|
|
6
|
+
const ariaLabel = `Collapsed region: ${label}, ${lineCount} lines`;
|
|
7
|
+
return /*#__PURE__*/ jsx("button", {
|
|
8
|
+
type: "button",
|
|
9
|
+
className: cn(lineHeightClass, 'flex w-full items-center gap-4 px-4 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer select-none text-left'),
|
|
10
|
+
"aria-expanded": false,
|
|
11
|
+
"aria-label": ariaLabel,
|
|
12
|
+
onClick: onToggle,
|
|
13
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
14
|
+
className: "inline-flex items-center rounded-2 border border-border-secondary px-6 text-xs leading-sm",
|
|
15
|
+
children: label
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
FoldSummaryLine.displayName = 'FoldSummaryLine';
|
|
20
|
+
export { FoldSummaryLine };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ChevronDown } from "../../../icons/ChevronDown.js";
|
|
3
|
+
import { ChevronRight } from "../../../icons/ChevronRight.js";
|
|
4
|
+
import { getFoldSummaryLabel } from "../lib/foldUtils.js";
|
|
5
|
+
const FoldToggle = ({ fold, isCollapsed, onToggle })=>{
|
|
6
|
+
const lineCount = fold.endLine - fold.startLine + 1;
|
|
7
|
+
const label = getFoldSummaryLabel(fold, lineCount);
|
|
8
|
+
const ariaLabel = isCollapsed ? `Expand ${label}` : `Collapse ${label}`;
|
|
9
|
+
return /*#__PURE__*/ jsx("button", {
|
|
10
|
+
type: "button",
|
|
11
|
+
className: "flex items-center justify-center w-16 h-16 rounded-2 text-text-secondary hover:text-text-primary hover:bg-bg-secondary-hover transition-colors cursor-pointer",
|
|
12
|
+
"aria-expanded": !isCollapsed,
|
|
13
|
+
"aria-label": ariaLabel,
|
|
14
|
+
onClick: onToggle,
|
|
15
|
+
children: isCollapsed ? /*#__PURE__*/ jsx(ChevronRight, {}) : /*#__PURE__*/ jsx(ChevronDown, {})
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
FoldToggle.displayName = 'FoldToggle';
|
|
19
|
+
export { FoldToggle };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { FC } from 'react';
|
|
2
2
|
import type { LineConfig } from '../CodeSnippetContext';
|
|
3
|
+
import type { DisplayItem } from '../lib/foldUtils';
|
|
3
4
|
/** Prefix column component - renders all line prefixes in a separate column */
|
|
4
5
|
export declare const PrefixColumn: FC<{
|
|
5
|
-
|
|
6
|
-
startingLineNumber: number;
|
|
6
|
+
visibleDisplayItems: DisplayItem[];
|
|
7
7
|
lines: Map<number, LineConfig>;
|
|
8
8
|
lineHeightClass: string;
|
|
9
9
|
}>;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../../../utils/cn.js";
|
|
3
3
|
import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
|
|
4
|
-
const PrefixColumn = ({
|
|
4
|
+
const PrefixColumn = ({ visibleDisplayItems, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
|
|
5
5
|
className: "flex flex-col select-none",
|
|
6
6
|
"data-slot": "code-snippet-prefix",
|
|
7
|
-
children:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const lineConfig = lines.get(lineNumber);
|
|
7
|
+
children: visibleDisplayItems.map((item)=>{
|
|
8
|
+
if ('fold-summary' === item.type) return /*#__PURE__*/ jsx("span", {
|
|
9
|
+
className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8')
|
|
10
|
+
}, `fold-${item.fold.id}`);
|
|
11
|
+
const lineConfig = lines.get(item.lineNumber);
|
|
12
12
|
const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
|
|
13
13
|
return /*#__PURE__*/ jsx("span", {
|
|
14
|
-
className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8
|
|
14
|
+
className: cn(lineHeightClass, 'flex h-lh items-center justify-center px-8', colorStyles?.text, colorStyles?.bg),
|
|
15
15
|
children: lineConfig?.prefix
|
|
16
|
-
}, lineNumber);
|
|
16
|
+
}, item.lineNumber);
|
|
17
17
|
})
|
|
18
18
|
});
|
|
19
19
|
export { PrefixColumn };
|
|
@@ -5,8 +5,8 @@ import { Button } from "../../Button/index.js";
|
|
|
5
5
|
import { MIN_HIDDEN_LINES_THRESHOLD } from "../CodeSnippetContext.js";
|
|
6
6
|
import { useCodeSnippet } from "../hooks/index.js";
|
|
7
7
|
const ShowMoreButton = ()=>{
|
|
8
|
-
const {
|
|
9
|
-
const hiddenLines =
|
|
8
|
+
const { displayItems, maxLines, isExpanded, setIsExpanded } = useCodeSnippet();
|
|
9
|
+
const hiddenLines = displayItems.length - maxLines;
|
|
10
10
|
if (maxLines <= 0 || hiddenLines < MIN_HIDDEN_LINES_THRESHOLD) return null;
|
|
11
11
|
return /*#__PURE__*/ jsx("div", {
|
|
12
12
|
"data-slot": "code-snippet-show-more",
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type FoldRegion = {
|
|
2
|
+
/** Unique identifier for this fold region */
|
|
3
|
+
id: string;
|
|
4
|
+
/** Inclusive start line number (1-based) */
|
|
5
|
+
startLine: number;
|
|
6
|
+
/** Inclusive end line number */
|
|
7
|
+
endLine: number;
|
|
8
|
+
/** Optional label for the collapsed summary. When omitted, auto-generated from line count. */
|
|
9
|
+
label?: string;
|
|
10
|
+
/** Whether the fold starts collapsed. Default: true */
|
|
11
|
+
defaultCollapsed?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export type DisplayItem = {
|
|
14
|
+
type: 'line';
|
|
15
|
+
index: number;
|
|
16
|
+
lineNumber: number;
|
|
17
|
+
} | {
|
|
18
|
+
type: 'fold-summary';
|
|
19
|
+
fold: FoldRegion;
|
|
20
|
+
lineCount: number;
|
|
21
|
+
};
|
|
22
|
+
export declare function getFoldSummaryLabel(fold: FoldRegion, lineCount: number): string;
|
|
23
|
+
/**
|
|
24
|
+
* Validates fold regions and returns a clean, sorted list.
|
|
25
|
+
* Dev: logs warnings for invalid folds. Prod: silently filters them out.
|
|
26
|
+
*/
|
|
27
|
+
export declare function validateFolds(folds: FoldRegion[], totalLines: number, startingLineNumber?: number): FoldRegion[];
|
|
28
|
+
export declare function buildDisplayItems(totalLines: number, folds: FoldRegion[], collapsedFolds: Set<string>, startingLineNumber: number): DisplayItem[];
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
function getFoldSummaryLabel(fold, lineCount) {
|
|
2
|
+
return fold.label ?? `${lineCount} lines`;
|
|
3
|
+
}
|
|
4
|
+
function validateFolds(folds, totalLines, startingLineNumber = 1) {
|
|
5
|
+
const isDev = 'production' !== process.env.NODE_ENV;
|
|
6
|
+
const valid = [];
|
|
7
|
+
const seenIds = new Set();
|
|
8
|
+
const lastLine = startingLineNumber + totalLines - 1;
|
|
9
|
+
const sorted = [
|
|
10
|
+
...folds
|
|
11
|
+
].sort((a, b)=>a.startLine - b.startLine);
|
|
12
|
+
for (const fold of sorted){
|
|
13
|
+
if (fold.startLine > fold.endLine) {
|
|
14
|
+
if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": startLine (${fold.startLine}) > endLine (${fold.endLine}). Skipping.`);
|
|
15
|
+
continue;
|
|
16
|
+
}
|
|
17
|
+
if (fold.startLine < startingLineNumber || fold.endLine > lastLine) {
|
|
18
|
+
if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": out of bounds (lines ${fold.startLine}-${fold.endLine}, total ${totalLines}). Skipping.`);
|
|
19
|
+
continue;
|
|
20
|
+
}
|
|
21
|
+
if (seenIds.has(fold.id)) {
|
|
22
|
+
if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": duplicate id. Skipping.`);
|
|
23
|
+
continue;
|
|
24
|
+
}
|
|
25
|
+
const overlaps = valid.some((existing)=>fold.startLine <= existing.endLine && fold.endLine >= existing.startLine);
|
|
26
|
+
if (overlaps) {
|
|
27
|
+
if (isDev) console.warn(`[CodeSnippet] Fold "${fold.id}": overlaps with an existing fold. Skipping.`);
|
|
28
|
+
continue;
|
|
29
|
+
}
|
|
30
|
+
seenIds.add(fold.id);
|
|
31
|
+
valid.push(fold);
|
|
32
|
+
}
|
|
33
|
+
return valid;
|
|
34
|
+
}
|
|
35
|
+
function buildDisplayItems(totalLines, folds, collapsedFolds, startingLineNumber) {
|
|
36
|
+
if (0 === folds.length) return Array.from({
|
|
37
|
+
length: totalLines
|
|
38
|
+
}, (_, index)=>({
|
|
39
|
+
type: 'line',
|
|
40
|
+
index,
|
|
41
|
+
lineNumber: startingLineNumber + index
|
|
42
|
+
}));
|
|
43
|
+
const items = [];
|
|
44
|
+
let currentIndex = 0;
|
|
45
|
+
for (const fold of folds){
|
|
46
|
+
const foldStartIndex = fold.startLine - startingLineNumber;
|
|
47
|
+
const foldEndIndex = fold.endLine - startingLineNumber;
|
|
48
|
+
while(currentIndex < foldStartIndex){
|
|
49
|
+
items.push({
|
|
50
|
+
type: 'line',
|
|
51
|
+
index: currentIndex,
|
|
52
|
+
lineNumber: startingLineNumber + currentIndex
|
|
53
|
+
});
|
|
54
|
+
currentIndex++;
|
|
55
|
+
}
|
|
56
|
+
if (collapsedFolds.has(fold.id)) {
|
|
57
|
+
const lineCount = fold.endLine - fold.startLine + 1;
|
|
58
|
+
items.push({
|
|
59
|
+
type: 'fold-summary',
|
|
60
|
+
fold,
|
|
61
|
+
lineCount
|
|
62
|
+
});
|
|
63
|
+
} else for(let i = foldStartIndex; i <= foldEndIndex; i++)items.push({
|
|
64
|
+
type: 'line',
|
|
65
|
+
index: i,
|
|
66
|
+
lineNumber: startingLineNumber + i
|
|
67
|
+
});
|
|
68
|
+
currentIndex = foldEndIndex + 1;
|
|
69
|
+
}
|
|
70
|
+
while(currentIndex < totalLines){
|
|
71
|
+
items.push({
|
|
72
|
+
type: 'line',
|
|
73
|
+
index: currentIndex,
|
|
74
|
+
lineNumber: startingLineNumber + currentIndex
|
|
75
|
+
});
|
|
76
|
+
currentIndex++;
|
|
77
|
+
}
|
|
78
|
+
return items;
|
|
79
|
+
}
|
|
80
|
+
export { buildDisplayItems, getFoldSummaryLabel, validateFolds };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { FoldRegion } from './foldUtils';
|
|
2
|
+
export declare const HTTP_FOLD_ID: {
|
|
3
|
+
readonly headers: "http-headers";
|
|
4
|
+
readonly body: "http-body";
|
|
5
|
+
};
|
|
6
|
+
export type HttpFoldSectionOptions = {
|
|
7
|
+
label?: string;
|
|
8
|
+
defaultCollapsed?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export type HttpFoldOptions = {
|
|
11
|
+
headers?: HttpFoldSectionOptions;
|
|
12
|
+
body?: HttpFoldSectionOptions;
|
|
13
|
+
/** Must match the startingLineNumber passed to CodeSnippetRoot. Default: 1 */
|
|
14
|
+
startingLineNumber?: number;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Detects header and body sections in an HTTP request/response and returns fold regions.
|
|
18
|
+
*
|
|
19
|
+
* Expected structure:
|
|
20
|
+
* - Line 1: Request line (e.g. `GET /path HTTP/1.1`) or status line (e.g. `HTTP/1.1 200 OK`)
|
|
21
|
+
* - Lines 2–N: Headers (key: value)
|
|
22
|
+
* - Empty line: separator
|
|
23
|
+
* - Remaining lines: Body (optional)
|
|
24
|
+
*
|
|
25
|
+
* Returns up to two fold regions (headers, body). Sections that don't exist are omitted.
|
|
26
|
+
*/
|
|
27
|
+
export declare function getHttpFolds(code: string, options?: HttpFoldOptions): FoldRegion[];
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
const HTTP_FOLD_ID = {
|
|
2
|
+
headers: 'http-headers',
|
|
3
|
+
body: 'http-body'
|
|
4
|
+
};
|
|
5
|
+
function getHttpFolds(code, options) {
|
|
6
|
+
const lines = code.split('\n');
|
|
7
|
+
const folds = [];
|
|
8
|
+
const offset = (options?.startingLineNumber ?? 1) - 1;
|
|
9
|
+
let separatorIndex = -1;
|
|
10
|
+
for(let i = 1; i < lines.length; i++)if (lines[i]?.trim() === '') {
|
|
11
|
+
separatorIndex = i;
|
|
12
|
+
break;
|
|
13
|
+
}
|
|
14
|
+
const headersStart = 2 + offset;
|
|
15
|
+
const headersEnd = (-1 === separatorIndex ? lines.length : separatorIndex) + offset;
|
|
16
|
+
if (headersEnd >= headersStart) folds.push({
|
|
17
|
+
id: HTTP_FOLD_ID.headers,
|
|
18
|
+
startLine: headersStart,
|
|
19
|
+
endLine: headersEnd,
|
|
20
|
+
label: options?.headers?.label ?? 'Headers',
|
|
21
|
+
defaultCollapsed: options?.headers?.defaultCollapsed
|
|
22
|
+
});
|
|
23
|
+
if (-1 !== separatorIndex) {
|
|
24
|
+
const bodyStart = separatorIndex + 2 + offset;
|
|
25
|
+
const bodyEnd = lines.length + offset;
|
|
26
|
+
if (bodyEnd >= bodyStart) folds.push({
|
|
27
|
+
id: HTTP_FOLD_ID.body,
|
|
28
|
+
startLine: bodyStart,
|
|
29
|
+
endLine: bodyEnd,
|
|
30
|
+
label: options?.body?.label ?? 'Body',
|
|
31
|
+
defaultCollapsed: options?.body?.defaultCollapsed
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
return folds;
|
|
35
|
+
}
|
|
36
|
+
export { HTTP_FOLD_ID, getHttpFolds };
|
|
@@ -7,7 +7,7 @@ declare const flexVariants: (props?: ({
|
|
|
7
7
|
align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
|
|
8
8
|
justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
|
|
9
9
|
wrap?: "reverse" | "wrap" | "nowrap" | null | undefined;
|
|
10
|
-
gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 |
|
|
10
|
+
gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
11
11
|
grow?: boolean | null | undefined;
|
|
12
12
|
shrink?: boolean | null | undefined;
|
|
13
13
|
fullWidth?: boolean | null | undefined;
|
|
@@ -2,7 +2,7 @@ import type { ComponentRef, FC, Ref } from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
import { Separator, type SeparatorProps } from '../Separator';
|
|
4
4
|
declare const segmentedControlSeparatorVariants: (props?: ({
|
|
5
|
-
mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 |
|
|
5
|
+
mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
|
|
8
8
|
/**
|
|
@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
3
3
|
import type { TestableProps } from '../../utils/testId';
|
|
4
4
|
declare const separatorVariants: (props?: ({
|
|
5
5
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
6
|
-
spacing?: 1 | 2 | 4 | 6 | 8 | 12 | 16 |
|
|
6
|
+
spacing?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
export type SeparatorProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof separatorVariants> & TestableProps & {
|
|
9
9
|
ref?: Ref<HTMLDivElement>;
|
|
@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
3
3
|
import type { TestableProps } from '../../utils/testId';
|
|
4
4
|
declare const skeletonVariants: (props?: ({
|
|
5
5
|
transparent?: boolean | null | undefined;
|
|
6
|
-
rounded?: "none" | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 |
|
|
6
|
+
rounded?: "none" | 2 | 4 | 6 | 8 | "full" | 12 | 16 | 24 | 32 | null | undefined;
|
|
7
7
|
withDimensions?: boolean | null | undefined;
|
|
8
8
|
withChildren?: boolean | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -10,7 +10,7 @@ declare const stackVariants: (props?: ({
|
|
|
10
10
|
fullWidth?: boolean | null | undefined;
|
|
11
11
|
flexGrow?: boolean | null | undefined;
|
|
12
12
|
flexShrink?: boolean | null | undefined;
|
|
13
|
-
gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 |
|
|
13
|
+
gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | 20 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
14
14
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
15
|
type StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
|
|
16
16
|
type StackVariantProps = VariantProps<typeof stackVariants>;
|
|
@@ -22,7 +22,10 @@ function useCopyTooltip({ text, enabled = true }) {
|
|
|
22
22
|
setCopied(true);
|
|
23
23
|
setKeepOpen(true);
|
|
24
24
|
clearTimer();
|
|
25
|
-
timerRef.current = setTimeout(()=>
|
|
25
|
+
timerRef.current = setTimeout(()=>{
|
|
26
|
+
setKeepOpen(false);
|
|
27
|
+
setCopied(false);
|
|
28
|
+
}, 2000);
|
|
26
29
|
}, [
|
|
27
30
|
enabled,
|
|
28
31
|
text,
|
|
@@ -33,6 +36,7 @@ function useCopyTooltip({ text, enabled = true }) {
|
|
|
33
36
|
let listenerAdded = false;
|
|
34
37
|
const dismiss = ()=>{
|
|
35
38
|
setKeepOpen(false);
|
|
39
|
+
setCopied(false);
|
|
36
40
|
clearTimer();
|
|
37
41
|
};
|
|
38
42
|
const frame = requestAnimationFrame(()=>{
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent, type AlertContentProps, AlertControls, type AlertControlsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, } from './components/Alert';
|
|
2
|
+
export { Attribute, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
|
|
2
3
|
export { Badge, type BadgeProps } from './components/Badge';
|
|
3
4
|
export { Button, type ButtonProps } from './components/Button';
|
|
4
5
|
export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from "./components/Alert/index.js";
|
|
2
|
+
import { Attribute, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
|
|
2
3
|
import { Badge } from "./components/Badge/index.js";
|
|
3
4
|
import { Button } from "./components/Button/index.js";
|
|
4
5
|
import { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, useCalendarContext } from "./components/Calendar/index.js";
|
|
@@ -47,4 +48,4 @@ import { ToggleButton } from "./components/ToggleButton/index.js";
|
|
|
47
48
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
|
|
48
49
|
import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
|
|
49
50
|
import { TestIdProvider, useTestId } from "./utils/testId.js";
|
|
50
|
-
export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useCalendarContext, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
|
|
51
|
+
export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Attribute, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useCalendarContext, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
|