@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.
Files changed (51) hide show
  1. package/dist/components/Attribute/Attribute.d.ts +9 -0
  2. package/dist/components/Attribute/Attribute.js +33 -0
  3. package/dist/components/Attribute/AttributeLabel.d.ts +6 -0
  4. package/dist/components/Attribute/AttributeLabel.js +16 -0
  5. package/dist/components/Attribute/AttributeLabelDescription.d.ts +6 -0
  6. package/dist/components/Attribute/AttributeLabelDescription.js +16 -0
  7. package/dist/components/Attribute/AttributeLabelInfo.d.ts +7 -0
  8. package/dist/components/Attribute/AttributeLabelInfo.js +29 -0
  9. package/dist/components/Attribute/AttributeValue.d.ts +6 -0
  10. package/dist/components/Attribute/AttributeValue.js +25 -0
  11. package/dist/components/Attribute/index.d.ts +5 -0
  12. package/dist/components/Attribute/index.js +6 -0
  13. package/dist/components/CodeSnippet/CodeSnippetActions.js +1 -1
  14. package/dist/components/CodeSnippet/CodeSnippetCode.js +21 -16
  15. package/dist/components/CodeSnippet/CodeSnippetContent.js +10 -10
  16. package/dist/components/CodeSnippet/CodeSnippetContext.d.ts +8 -0
  17. package/dist/components/CodeSnippet/CodeSnippetLineNumbers.js +10 -7
  18. package/dist/components/CodeSnippet/CodeSnippetRoot.d.ts +4 -1
  19. package/dist/components/CodeSnippet/CodeSnippetRoot.js +54 -3
  20. package/dist/components/CodeSnippet/InlineCodeSnippet.js +1 -1
  21. package/dist/components/CodeSnippet/index.d.ts +2 -0
  22. package/dist/components/CodeSnippet/index.js +2 -1
  23. package/dist/components/CodeSnippet/internal/CodeSnippetHighlights.js +7 -8
  24. package/dist/components/CodeSnippet/internal/ColorStickColumn.d.ts +2 -2
  25. package/dist/components/CodeSnippet/internal/ColorStickColumn.js +8 -8
  26. package/dist/components/CodeSnippet/internal/FoldColumn.d.ts +3 -0
  27. package/dist/components/CodeSnippet/internal/FoldColumn.js +42 -0
  28. package/dist/components/CodeSnippet/internal/FoldSummaryLine.d.ts +8 -0
  29. package/dist/components/CodeSnippet/internal/FoldSummaryLine.js +20 -0
  30. package/dist/components/CodeSnippet/internal/FoldToggle.d.ts +7 -0
  31. package/dist/components/CodeSnippet/internal/FoldToggle.js +19 -0
  32. package/dist/components/CodeSnippet/internal/PrefixColumn.d.ts +2 -2
  33. package/dist/components/CodeSnippet/internal/PrefixColumn.js +8 -8
  34. package/dist/components/CodeSnippet/internal/ShowMoreButton.js +2 -2
  35. package/dist/components/CodeSnippet/lib/foldUtils.d.ts +28 -0
  36. package/dist/components/CodeSnippet/lib/foldUtils.js +80 -0
  37. package/dist/components/CodeSnippet/lib/httpFolds.d.ts +27 -0
  38. package/dist/components/CodeSnippet/lib/httpFolds.js +36 -0
  39. package/dist/components/Flex/Flex.d.ts +1 -1
  40. package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts +1 -1
  41. package/dist/components/Separator/Separator.d.ts +1 -1
  42. package/dist/components/Skeleton/Skeleton.d.ts +1 -1
  43. package/dist/components/Stack/Stack.d.ts +1 -1
  44. package/dist/hooks/useCopyTooltip.js +5 -1
  45. package/dist/index.d.ts +1 -0
  46. package/dist/index.js +2 -1
  47. package/dist/metadata/components.json +1496 -26
  48. package/dist/theme/index.css +1 -0
  49. package/dist/theme/semantic.css +32 -25
  50. package/dist/theme/utilities/code-snippet-bg.css +8 -0
  51. 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,8 @@
1
+ import type { FC } from 'react';
2
+ import type { FoldRegion } from '../lib/foldUtils';
3
+ export declare const FoldSummaryLine: FC<{
4
+ fold: FoldRegion;
5
+ lineCount: number;
6
+ lineHeightClass: string;
7
+ onToggle: () => void;
8
+ }>;
@@ -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,7 @@
1
+ import type { FC } from 'react';
2
+ import type { FoldRegion } from '../lib/foldUtils';
3
+ export declare const FoldToggle: FC<{
4
+ fold: FoldRegion;
5
+ isCollapsed: boolean;
6
+ onToggle: () => void;
7
+ }>;
@@ -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
- lineCount: number;
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 = ({ lineCount, startingLineNumber, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
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: Array.from({
8
- length: lineCount
9
- }, (_, index)=>{
10
- const lineNumber = startingLineNumber + index;
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 bg-bg-primary', colorStyles?.text, colorStyles?.bg),
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 { totalLines, maxLines, isExpanded, setIsExpanded } = useCodeSnippet();
9
- const hiddenLines = totalLines - maxLines;
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 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
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 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
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 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
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 | "full" | null | undefined;
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 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
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(()=>setKeepOpen(false), 2000);
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 };