@wallarm-org/design-system 0.4.1-rc-fix-table-width.4 → 0.4.1-rc-fix-table-width.6
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/DropdownMenu/DropdownMenuItemContent.js +1 -1
- package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.js +1 -1
- package/dist/components/Stack/Stack.d.ts +1 -1
- package/dist/components/Stack/Stack.js +3 -3
- package/dist/components/Stack/VStack.js +1 -2
- package/dist/components/Table/TableActionBar/TableActionBar.js +2 -2
- package/dist/components/Table/TableActionBar/TableActionBarSelection.js +1 -1
- package/dist/components/Table/TableHead.js +1 -1
- package/dist/components/Table/TableHeadCell.js +4 -3
- package/dist/components/Table/TableInner/TableInnerContainer.js +0 -10
- package/dist/components/Table/TableInner/TableInnerWindow.js +0 -10
- package/dist/components/Table/TableSettingsMenu/TableSettingsMenu.js +1 -1
- package/dist/components/Table/mocks.js +10 -10
- package/dist/metadata/components.json +49 -50
- package/package.json +1 -1
|
@@ -21,7 +21,7 @@ const SelectInputOverflowRenderer = (items)=>/*#__PURE__*/ jsxs(Popover, {
|
|
|
21
21
|
minHeight: "auto",
|
|
22
22
|
maxWidth: POPOVER_MAX_WIDTH,
|
|
23
23
|
children: /*#__PURE__*/ jsx(HStack, {
|
|
24
|
-
|
|
24
|
+
gap: 4,
|
|
25
25
|
wrap: "wrap",
|
|
26
26
|
children: items.map((item)=>/*#__PURE__*/ jsx(Tag, {
|
|
27
27
|
size: "large",
|
|
@@ -9,7 +9,7 @@ declare const stackVariants: (props?: ({
|
|
|
9
9
|
fullWidth?: boolean | null | undefined;
|
|
10
10
|
flexGrow?: boolean | null | undefined;
|
|
11
11
|
flexShrink?: boolean | null | undefined;
|
|
12
|
-
|
|
12
|
+
gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 32 | 24 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
|
|
13
13
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
14
|
type StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
|
|
15
15
|
type StackVariantProps = VariantProps<typeof stackVariants>;
|
|
@@ -46,7 +46,7 @@ const stackVariants = cva('', {
|
|
|
46
46
|
true: 'shrink',
|
|
47
47
|
false: 'shrink-0'
|
|
48
48
|
},
|
|
49
|
-
|
|
49
|
+
gap: {
|
|
50
50
|
0: '',
|
|
51
51
|
1: 'gap-1',
|
|
52
52
|
2: 'gap-2',
|
|
@@ -73,7 +73,7 @@ const stackVariants = cva('', {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
});
|
|
76
|
-
const Stack = ({ inline = false, direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap',
|
|
76
|
+
const Stack = ({ inline = false, direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', gap = 4, fullWidth, flexGrow, flexShrink, asChild = false, children, ...props })=>{
|
|
77
77
|
const clones = useMemo(()=>getValidChildren(children).map((child, index)=>{
|
|
78
78
|
const key = void 0 !== child.key ? child.key : index;
|
|
79
79
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
@@ -91,7 +91,7 @@ const Stack = ({ inline = false, direction = 'column', align = 'stretch', justif
|
|
|
91
91
|
align,
|
|
92
92
|
justify,
|
|
93
93
|
wrap,
|
|
94
|
-
|
|
94
|
+
gap,
|
|
95
95
|
fullWidth,
|
|
96
96
|
flexGrow,
|
|
97
97
|
flexShrink
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Stack } from "./Stack.js";
|
|
3
|
-
const VStack = ({
|
|
3
|
+
const VStack = ({ ref, ...props })=>/*#__PURE__*/ jsx(Stack, {
|
|
4
4
|
ref: ref,
|
|
5
|
-
align: align,
|
|
6
5
|
direction: "column",
|
|
7
6
|
...props
|
|
8
7
|
});
|
|
@@ -12,12 +12,12 @@ const TableActionBar = ({ children })=>/*#__PURE__*/ jsx(Portal, {
|
|
|
12
12
|
children: /*#__PURE__*/ jsx(Popover.Content, {
|
|
13
13
|
className: cn('bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom'),
|
|
14
14
|
children: /*#__PURE__*/ jsxs(HStack, {
|
|
15
|
-
|
|
15
|
+
gap: 40,
|
|
16
16
|
align: "center",
|
|
17
17
|
children: [
|
|
18
18
|
/*#__PURE__*/ jsx(TableActionBarSelection, {}),
|
|
19
19
|
/*#__PURE__*/ jsx(HStack, {
|
|
20
|
-
|
|
20
|
+
gap: 8,
|
|
21
21
|
align: "center",
|
|
22
22
|
children: children
|
|
23
23
|
})
|
|
@@ -5,7 +5,7 @@ import { TableHeadCell } from "./TableHeadCell.js";
|
|
|
5
5
|
const TableHead = ()=>{
|
|
6
6
|
const { table } = useTableContext();
|
|
7
7
|
return /*#__PURE__*/ jsx(THead, {
|
|
8
|
-
className: "sticky top-0 z-30",
|
|
8
|
+
className: "sticky top-0 z-30 h-32",
|
|
9
9
|
children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(Tr, {
|
|
10
10
|
children: headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHeadCell, {
|
|
11
11
|
header: header
|
|
@@ -51,11 +51,12 @@ const TableHeadCell = ({ header })=>{
|
|
|
51
51
|
tabIndex: -1,
|
|
52
52
|
children: [
|
|
53
53
|
isNotBasicColumn && content,
|
|
54
|
-
!header.isPlaceholder && !isNotBasicColumn && /*#__PURE__*/ jsxs(
|
|
55
|
-
|
|
54
|
+
!header.isPlaceholder && !isNotBasicColumn && /*#__PURE__*/ jsxs(HStack, {
|
|
55
|
+
align: "center",
|
|
56
56
|
children: [
|
|
57
57
|
/*#__PURE__*/ jsxs(HStack, {
|
|
58
|
-
|
|
58
|
+
gap: 2,
|
|
59
|
+
fullWidth: true,
|
|
59
60
|
children: [
|
|
60
61
|
/*#__PURE__*/ jsx(Text, {
|
|
61
62
|
size: "xs",
|
|
@@ -35,16 +35,6 @@ const TableInnerContainer = ({ isEmpty, virtualized, showSettings, ariaLabel, ch
|
|
|
35
35
|
}, [
|
|
36
36
|
containerRef
|
|
37
37
|
]);
|
|
38
|
-
useEffect(()=>{
|
|
39
|
-
const viewport = containerRef.current;
|
|
40
|
-
if (!viewport || !isLoading || isEmpty || onEndReached) return;
|
|
41
|
-
viewport.scrollTop = viewport.scrollHeight;
|
|
42
|
-
}, [
|
|
43
|
-
containerRef,
|
|
44
|
-
isLoading,
|
|
45
|
-
isEmpty,
|
|
46
|
-
onEndReached
|
|
47
|
-
]);
|
|
48
38
|
const totalSize = table.getTotalSize();
|
|
49
39
|
const tableWidth = Math.max(containerWidth, totalSize);
|
|
50
40
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
@@ -48,16 +48,6 @@ const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
|
|
|
48
48
|
}, [
|
|
49
49
|
syncScroll
|
|
50
50
|
]);
|
|
51
|
-
useEffect(()=>{
|
|
52
|
-
if (!isLoading || isEmpty || onEndReached) return;
|
|
53
|
-
window.scrollTo({
|
|
54
|
-
top: document.documentElement.scrollHeight
|
|
55
|
-
});
|
|
56
|
-
}, [
|
|
57
|
-
isLoading,
|
|
58
|
-
isEmpty,
|
|
59
|
-
onEndReached
|
|
60
|
-
]);
|
|
61
51
|
const totalSize = table.getTotalSize();
|
|
62
52
|
const tableWidth = Math.max(containerWidth, totalSize);
|
|
63
53
|
const tableStyles = 'table-fixed border-separate border-spacing-0';
|
|
@@ -241,7 +241,7 @@ const securityColumns = [
|
|
|
241
241
|
sortType: 'text'
|
|
242
242
|
},
|
|
243
243
|
cell: ({ row })=>/*#__PURE__*/ jsxs(VStack, {
|
|
244
|
-
|
|
244
|
+
gap: 4,
|
|
245
245
|
children: [
|
|
246
246
|
/*#__PURE__*/ jsxs(OverflowTooltip, {
|
|
247
247
|
children: [
|
|
@@ -260,7 +260,7 @@ const securityColumns = [
|
|
|
260
260
|
]
|
|
261
261
|
}),
|
|
262
262
|
/*#__PURE__*/ jsxs(HStack, {
|
|
263
|
-
|
|
263
|
+
gap: 4,
|
|
264
264
|
children: [
|
|
265
265
|
row.original.isActive && /*#__PURE__*/ jsxs("span", {
|
|
266
266
|
className: "flex items-center gap-4",
|
|
@@ -305,10 +305,10 @@ const securityColumns = [
|
|
|
305
305
|
sortType: 'text'
|
|
306
306
|
},
|
|
307
307
|
cell: ({ row })=>/*#__PURE__*/ jsxs(HStack, {
|
|
308
|
-
|
|
308
|
+
gap: 8,
|
|
309
309
|
children: [
|
|
310
310
|
/*#__PURE__*/ jsxs(HStack, {
|
|
311
|
-
|
|
311
|
+
gap: 4,
|
|
312
312
|
children: [
|
|
313
313
|
/*#__PURE__*/ jsx("span", {
|
|
314
314
|
className: "text-sm",
|
|
@@ -370,7 +370,7 @@ const securityColumns = [
|
|
|
370
370
|
cell: ({ getValue })=>{
|
|
371
371
|
const { date, time } = formatDate(getValue());
|
|
372
372
|
return /*#__PURE__*/ jsxs(VStack, {
|
|
373
|
-
|
|
373
|
+
gap: 0,
|
|
374
374
|
children: [
|
|
375
375
|
/*#__PURE__*/ jsx(Text, {
|
|
376
376
|
size: "sm",
|
|
@@ -418,7 +418,7 @@ const securityColumns = [
|
|
|
418
418
|
header: 'Endpoints',
|
|
419
419
|
size: 220,
|
|
420
420
|
cell: ({ row })=>/*#__PURE__*/ jsxs(HStack, {
|
|
421
|
-
|
|
421
|
+
gap: 6,
|
|
422
422
|
children: [
|
|
423
423
|
/*#__PURE__*/ jsx(Badge, {
|
|
424
424
|
color: METHOD_COLORS[row.original.endpointMethod] ?? 'slate',
|
|
@@ -528,10 +528,10 @@ const headerColumns = [
|
|
|
528
528
|
sortType: 'text'
|
|
529
529
|
},
|
|
530
530
|
cell: ({ row })=>/*#__PURE__*/ jsxs(HStack, {
|
|
531
|
-
|
|
531
|
+
gap: 8,
|
|
532
532
|
children: [
|
|
533
533
|
/*#__PURE__*/ jsxs(HStack, {
|
|
534
|
-
|
|
534
|
+
gap: 4,
|
|
535
535
|
children: [
|
|
536
536
|
/*#__PURE__*/ jsx("span", {
|
|
537
537
|
className: "text-sm",
|
|
@@ -607,7 +607,7 @@ const headerColumns = [
|
|
|
607
607
|
header: 'Version',
|
|
608
608
|
size: 140,
|
|
609
609
|
cell: ({ row })=>/*#__PURE__*/ jsxs(HStack, {
|
|
610
|
-
|
|
610
|
+
gap: 4,
|
|
611
611
|
align: "center",
|
|
612
612
|
children: [
|
|
613
613
|
/*#__PURE__*/ jsx(Check, {
|
|
@@ -804,7 +804,7 @@ const fullFeaturedColumns = headerColumns.map((col)=>{
|
|
|
804
804
|
children: [
|
|
805
805
|
/*#__PURE__*/ jsx(DropdownMenuContextTrigger, {
|
|
806
806
|
children: /*#__PURE__*/ jsxs(HStack, {
|
|
807
|
-
|
|
807
|
+
gap: 8,
|
|
808
808
|
children: [
|
|
809
809
|
/*#__PURE__*/ jsx("span", {
|
|
810
810
|
className: "text-sm",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "0.4.0",
|
|
3
|
-
"generatedAt": "2026-02-25T08:
|
|
3
|
+
"generatedAt": "2026-02-25T08:54:43.003Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Alert",
|
|
@@ -2442,27 +2442,27 @@
|
|
|
2442
2442
|
},
|
|
2443
2443
|
{
|
|
2444
2444
|
"name": "Sizes",
|
|
2445
|
-
"code": "({ ...args }) => (\n <HStack align='center'
|
|
2445
|
+
"code": "({ ...args }) => (\n <HStack align='center' gap={8}>\n <Badge {...args} size='medium'>\n Medium\n </Badge>\n <Badge {...args} size='large'>\n Large\n </Badge>\n </HStack>\n)"
|
|
2446
2446
|
},
|
|
2447
2447
|
{
|
|
2448
2448
|
"name": "Types",
|
|
2449
|
-
"code": "({ ...args }) => (\n <HStack
|
|
2449
|
+
"code": "({ ...args }) => (\n <HStack gap={8}>\n <Badge {...args} type='solid'>\n Solid\n </Badge>\n <Badge {...args} type='secondary'>\n Secondary\n </Badge>\n <Badge {...args} type='outline'>\n Outline\n </Badge>\n <Badge {...args} type='text'>\n Text\n </Badge>\n <Badge {...args} type='text-color'>\n Text Color\n </Badge>\n </HStack>\n)"
|
|
2450
2450
|
},
|
|
2451
2451
|
{
|
|
2452
2452
|
"name": "TextVariants",
|
|
2453
|
-
"code": "({ ...args }) => (\n <HStack
|
|
2453
|
+
"code": "({ ...args }) => (\n <HStack gap={8}>\n <Badge {...args} textVariant='default'>\n Default Text\n </Badge>\n <Badge {...args} textVariant='code'>\n Code Text\n </Badge>\n </HStack>\n)"
|
|
2454
2454
|
},
|
|
2455
2455
|
{
|
|
2456
2456
|
"name": "WithIconsLeft",
|
|
2457
|
-
"code": "({ ...args }) => (\n <HStack
|
|
2457
|
+
"code": "({ ...args }) => (\n <HStack gap={8}>\n <Badge {...args}>\n <Check size='sm' />\n Success\n </Badge>\n <Badge {...args}>\n <X size='sm' />\n Error\n </Badge>\n <Badge {...args}>\n <Info size='sm' />\n Info\n </Badge>\n <Badge {...args}>\n <CircleCheck size='sm' />\n Verified\n </Badge>\n <Badge {...args}>\n <Check size='sm' />\n Complete\n </Badge>\n </HStack>\n)"
|
|
2458
2458
|
},
|
|
2459
2459
|
{
|
|
2460
2460
|
"name": "WithIconsRight",
|
|
2461
|
-
"code": "({ ...args }) => (\n <HStack
|
|
2461
|
+
"code": "({ ...args }) => (\n <HStack gap={8}>\n <Badge {...args}>\n Success\n <Check size='sm' />\n </Badge>\n <Badge {...args}>\n Error\n <X size='sm' />\n </Badge>\n <Badge {...args}>\n Info\n <Info size='sm' />\n </Badge>\n <Badge {...args}>\n Verified\n <CircleCheck size='sm' />\n </Badge>\n <Badge {...args}>\n Complete\n <Check size='sm' />\n </Badge>\n </HStack>\n)"
|
|
2462
2462
|
},
|
|
2463
2463
|
{
|
|
2464
2464
|
"name": "IconsOnly",
|
|
2465
|
-
"code": "({ ...args }) => (\n <HStack
|
|
2465
|
+
"code": "({ ...args }) => (\n <HStack gap={8}>\n <Badge {...args}>\n <Check size='sm' />\n </Badge>\n <Badge {...args}>\n <X size='sm' />\n </Badge>\n <Badge {...args}>\n <Info size='sm' />\n </Badge>\n <Badge {...args}>\n <CircleCheck size='sm' />\n </Badge>\n <Badge {...args}>\n <Check size='sm' />\n </Badge>\n </HStack>\n)"
|
|
2466
2466
|
},
|
|
2467
2467
|
{
|
|
2468
2468
|
"name": "ColorVariants",
|
|
@@ -4840,7 +4840,7 @@
|
|
|
4840
4840
|
},
|
|
4841
4841
|
{
|
|
4842
4842
|
"name": "FormField",
|
|
4843
|
-
"code": "() => (\n <HStack align='start'
|
|
4843
|
+
"code": "() => (\n <HStack align='start' gap={40}>\n <Field>\n <FieldLabel>\n Label{' '}\n <Tooltip>\n <TooltipTrigger>\n <Info />\n </TooltipTrigger>\n <TooltipContent>Additional information</TooltipContent>\n </Tooltip>\n </FieldLabel>\n\n <FieldDescription>This is an input description.</FieldDescription>\n\n <CheckboxGroup name='framework' defaultValue={['vue']}>\n <Checkbox value='react'>\n <CheckboxIndicator />\n <CheckboxLabel>React</CheckboxLabel>\n </Checkbox>\n\n <Checkbox value='solid'>\n <CheckboxIndicator />\n <CheckboxLabel>Solid</CheckboxLabel>\n </Checkbox>\n\n <Checkbox value='vue'>\n <CheckboxIndicator />\n <CheckboxLabel>Vue</CheckboxLabel>\n </Checkbox>\n\n <Checkbox value='svelte'>\n <CheckboxIndicator />\n <CheckboxLabel>Svelte</CheckboxLabel>\n </Checkbox>\n </CheckboxGroup>\n </Field>\n\n <Field>\n <FieldLabel>\n Label\n <Tooltip>\n <TooltipTrigger>\n <Info />\n </TooltipTrigger>\n <TooltipContent>Additional information</TooltipContent>\n </Tooltip>\n </FieldLabel>\n\n <FieldDescription>This is an input description.</FieldDescription>\n\n <CheckboxGroup variant='card' name='framework' defaultValue={['vue']}>\n <Checkbox value='react'>\n <CheckboxIndicator />\n <CheckboxLabel>React</CheckboxLabel>\n </Checkbox>\n\n <Checkbox value='solid'>\n <CheckboxIndicator />\n <CheckboxLabel>Solid</CheckboxLabel>\n </Checkbox>\n\n <Checkbox value='vue'>\n <CheckboxIndicator />\n <CheckboxLabel>Vue</CheckboxLabel>\n </Checkbox>\n\n <Checkbox value='svelte'>\n <CheckboxIndicator />\n <CheckboxLabel>Svelte</CheckboxLabel>\n </Checkbox>\n </CheckboxGroup>\n </Field>\n </HStack>\n)"
|
|
4844
4844
|
}
|
|
4845
4845
|
]
|
|
4846
4846
|
},
|
|
@@ -8647,7 +8647,7 @@
|
|
|
8647
8647
|
},
|
|
8648
8648
|
{
|
|
8649
8649
|
"name": "Sizes",
|
|
8650
|
-
"code": "() => (\n <VStack
|
|
8650
|
+
"code": "() => (\n <VStack gap={16}>\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>sm</span>\n <CodeSnippetRoot code={bashCode} language='text' size='sm'>\n <CodeSnippetContent>\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </VStack>\n\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>md (default)</span>\n <CodeSnippetRoot code={bashCode} language='text' size='md'>\n <CodeSnippetContent>\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </VStack>\n\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>lg</span>\n <CodeSnippetRoot code={bashCode} language='text' size='lg'>\n <CodeSnippetContent>\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </VStack>\n </VStack>\n)",
|
|
8651
8651
|
"description": "Different size variants: sm, md (default), lg."
|
|
8652
8652
|
},
|
|
8653
8653
|
{
|
|
@@ -8677,7 +8677,7 @@
|
|
|
8677
8677
|
},
|
|
8678
8678
|
{
|
|
8679
8679
|
"name": "LineWrapping",
|
|
8680
|
-
"code": "() => {\n const longCode = `const veryLongVariableName = \"This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width\";\nconsole.log(veryLongVariableName);`;\n\n return (\n <VStack
|
|
8680
|
+
"code": "() => {\n const longCode = `const veryLongVariableName = \"This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width\";\nconsole.log(veryLongVariableName);`;\n\n return (\n <VStack gap={16}>\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>Without wrapping</span>\n <div style={{ maxWidth: '600px' }}>\n <CodeSnippetRoot code={longCode} language='text'>\n <CodeSnippetContent>\n <CodeSnippetLineNumbers />\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </div>\n </VStack>\n\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>With wrapping</span>\n <div style={{ maxWidth: '600px' }}>\n <CodeSnippetRoot code={longCode} language='text' wrapLines>\n <CodeSnippetContent>\n <CodeSnippetLineNumbers />\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </div>\n </VStack>\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>\n Without wrapping with annotations\n </span>\n <div style={{ maxWidth: '600px' }}>\n <CodeSnippetRoot\n code={longCode}\n language='text'\n lines={{\n 1: { color: 'danger', prefix: '-' },\n 2: { color: 'success', prefix: '+' },\n }}\n >\n <CodeSnippetContent>\n <CodeSnippetLineNumbers />\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </div>\n </VStack>\n <VStack align='start' gap={4}>\n <span className='text-xs text-text-secondary font-medium'>Wrapping with annotations</span>\n <div style={{ maxWidth: '600px' }}>\n <CodeSnippetRoot\n code={longCode}\n language='text'\n wrapLines\n lines={{\n 1: { color: 'danger', prefix: '-' },\n 2: { color: 'success', prefix: '+' },\n }}\n >\n <CodeSnippetContent>\n <CodeSnippetLineNumbers />\n <CodeSnippetCode />\n </CodeSnippetContent>\n </CodeSnippetRoot>\n </div>\n </VStack>\n </VStack>\n );\n}",
|
|
8681
8681
|
"description": "Line wrapping enabled for long lines."
|
|
8682
8682
|
},
|
|
8683
8683
|
{
|
|
@@ -8756,12 +8756,12 @@
|
|
|
8756
8756
|
},
|
|
8757
8757
|
{
|
|
8758
8758
|
"name": "Sizes",
|
|
8759
|
-
"code": "() => (\n <HStack
|
|
8759
|
+
"code": "() => (\n <HStack gap={8} justify='center'>\n <Dialog width={DIALOG_SIZES.small}>\n <DialogTrigger asChild>\n <Button>Open Small ({DIALOG_SIZES.small}px)</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Small Dialog ({DIALOG_SIZES.small}px)</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <ContentPlaceholder />\n </DialogBody>\n </DialogContent>\n </Dialog>\n\n <Dialog width={DIALOG_SIZES.medium}>\n <DialogTrigger asChild>\n <Button>Open Medium ({DIALOG_SIZES.medium}px)</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Medium Dialog ({DIALOG_SIZES.medium}px)</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <ContentPlaceholder />\n </DialogBody>\n </DialogContent>\n </Dialog>\n\n <Dialog width={DIALOG_SIZES.large}>\n <DialogTrigger asChild>\n <Button>Open Large ({DIALOG_SIZES.large}px)</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Large Dialog ({DIALOG_SIZES.large}px)</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <ContentPlaceholder />\n </DialogBody>\n </DialogContent>\n </Dialog>\n </HStack>\n)",
|
|
8760
8760
|
"description": "Dialog with different sizes - Small"
|
|
8761
8761
|
},
|
|
8762
8762
|
{
|
|
8763
8763
|
"name": "CustomSizes",
|
|
8764
|
-
"code": "() => {\n return (\n <HStack
|
|
8764
|
+
"code": "() => {\n return (\n <HStack gap={8} justify='center'>\n <Dialog width='50%'>\n <DialogTrigger asChild>\n <Button>50% Width</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>50% Width Dialog</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <div className='py-12'>\n <p>This dialog takes 50% of the viewport width.</p>\n </div>\n </DialogBody>\n </DialogContent>\n </Dialog>\n\n <Dialog width={1000}>\n <DialogTrigger asChild>\n <Button>1000px Width</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>1000px Width Dialog</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <div className='py-12'>\n <p>This dialog has a fixed width of 1000px.</p>\n </div>\n </DialogBody>\n </DialogContent>\n </Dialog>\n </HStack>\n );\n}",
|
|
8765
8765
|
"description": "Custom width with percentage"
|
|
8766
8766
|
},
|
|
8767
8767
|
{
|
|
@@ -8781,12 +8781,12 @@
|
|
|
8781
8781
|
},
|
|
8782
8782
|
{
|
|
8783
8783
|
"name": "NoOverlay",
|
|
8784
|
-
"code": "() => {\n return (\n <VStack
|
|
8784
|
+
"code": "() => {\n return (\n <VStack gap={12}>\n <Text>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n galley of type and scrambled it to make a type specimen book. It has survived not only five\n centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum\n passages, and more recently with desktop publishing software like Aldus PageMaker including\n versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will\n be distracted by the readable content of a page when looking at its layout. The point of\n using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed\n to using 'Content here, content here', making it look like readable English. Many desktop\n publishing packages and web page editors now use Lorem Ipsum as their default model text,\n and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various\n versions have evolved over the years, sometimes by accident, sometimes on purpose (injected\n humour and the like).\n </Text>\n\n <Dialog overlay={false}>\n <DialogTrigger asChild>\n <Button>Open without Overlay</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>No Overlay</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <div className='py-12'>\n <p>This dialog has no overlay backdrop.</p>\n </div>\n </DialogBody>\n </DialogContent>\n </Dialog>\n\n <Text>\n Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text.\n It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years\n old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up\n one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going\n through the cites of the word in classical literature, discovered the undoubtable source.\n Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The\n Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the\n theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem\n ipsum dolor sit amet..\", comes from a line in section 1.10.32. The standard chunk of Lorem\n Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and\n 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact\n original form, accompanied by English versions from the 1914 translation by H. Rackham.\n </Text>\n </VStack>\n );\n}",
|
|
8785
8785
|
"description": "Without overlay"
|
|
8786
8786
|
},
|
|
8787
8787
|
{
|
|
8788
8788
|
"name": "WithNested",
|
|
8789
|
-
"code": "() => {\n return (\n <Dialog>\n <DialogTrigger asChild>\n <Button>1st level dialog</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n\n {/* Level 2 dialog */}\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 2nd level dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 2] Detail View</DialogTitle>\n {/* Level 3 dialog */}\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 3nd level dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 3] Deep Nested</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <VStack
|
|
8789
|
+
"code": "() => {\n return (\n <Dialog>\n <DialogTrigger asChild>\n <Button>1st level dialog</Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 1] Main Dialog</DialogTitle>\n\n {/* Level 2 dialog */}\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 2nd level dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 2] Detail View</DialogTitle>\n {/* Level 3 dialog */}\n <Dialog>\n <DialogTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 3nd level dialog\n </Button>\n </DialogTrigger>\n\n <DialogContent>\n <DialogHeader>\n <DialogTitle>[Level 3] Deep Nested</DialogTitle>\n </DialogHeader>\n\n <DialogBody>\n <VStack gap={12} align='start'>\n <Text>Level 3! Unlimited nesting works.</Text>\n <ContentPlaceholder height={150} />\n </VStack>\n </DialogBody>\n\n <DialogFooter>\n <DialogClose asChild>\n <Button size='large' variant='ghost' color='neutral'>\n Back\n </Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </DialogHeader>\n\n <DialogBody>\n <VStack gap={12} align='start'>\n <Text>This is Level 2 dialog. Main dialog is pushed back.</Text>\n\n <ContentPlaceholder height={150} />\n </VStack>\n </DialogBody>\n\n <DialogFooter>\n <DialogClose asChild>\n <Button variant='ghost' color='neutral' size='large'>\n Back\n </Button>\n </DialogClose>\n <Button variant='primary' color='brand' size='large'>\n Apply\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </DialogHeader>\n\n <DialogBody>\n <VStack gap={12} align='start'>\n <Text>This is Level 1 dialog. Click above to open nested dialogs:</Text>\n\n <ContentPlaceholder height={150} />\n </VStack>\n </DialogBody>\n\n <DialogFooter>\n <DialogClose asChild>\n <Button variant='ghost' color='neutral' size='large'>\n Cancel\n </Button>\n </DialogClose>\n <Button variant='primary' color='brand' size='large'>\n Save\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n );\n}",
|
|
8790
8790
|
"description": "Nested dialogs with push-back effect"
|
|
8791
8791
|
},
|
|
8792
8792
|
{
|
|
@@ -8945,17 +8945,17 @@
|
|
|
8945
8945
|
},
|
|
8946
8946
|
{
|
|
8947
8947
|
"name": "Sizes",
|
|
8948
|
-
"code": "() => (\n <HStack
|
|
8948
|
+
"code": "() => (\n <HStack gap={8} justify='center'>\n <Drawer width={DRAWER_SIZES.small}>\n <DrawerTrigger asChild>\n <Button>Open Small ({DRAWER_SIZES.small}px)</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>Small Drawer ({DRAWER_SIZES.small}px)</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <ContentPlaceholder fillHeight />\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n\n <Drawer width={DRAWER_SIZES.medium}>\n <DrawerTrigger asChild>\n <Button>Open Medium ({DRAWER_SIZES.medium}px)</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>Medium Drawer ({DRAWER_SIZES.medium}px)</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <ContentPlaceholder fillHeight />\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n\n <Drawer width={DRAWER_SIZES.large}>\n <DrawerTrigger asChild>\n <Button>Open Large ({DRAWER_SIZES.large}px)</Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>Large Drawer ({DRAWER_SIZES.large}px)</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <ContentPlaceholder fillHeight />\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n </HStack>\n)",
|
|
8949
8949
|
"description": "Drawer with different sizes - Small"
|
|
8950
8950
|
},
|
|
8951
8951
|
{
|
|
8952
8952
|
"name": "CustomSizes",
|
|
8953
|
-
"code": "() => {\n return (\n <HStack
|
|
8953
|
+
"code": "() => {\n return (\n <HStack gap={8} justify='center'>\n <Drawer width='50%'>\n <DrawerTrigger asChild>\n <Button>50% Width</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>50% Width Drawer</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <div className='py-12'>\n <p>This drawer takes 50% of the viewport width.</p>\n </div>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n\n <Drawer width={1000}>\n <DrawerTrigger asChild>\n <Button>1000px Width</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>1000px Width Drawer</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <div className='py-12'>\n <p>This drawer has a fixed width of 1000px.</p>\n </div>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n </HStack>\n );\n}",
|
|
8954
8954
|
"description": "Custom width with percentage"
|
|
8955
8955
|
},
|
|
8956
8956
|
{
|
|
8957
8957
|
"name": "Resizable",
|
|
8958
|
-
"code": "() => {\n return (\n <VStack
|
|
8958
|
+
"code": "() => {\n return (\n <VStack gap={12}>\n <Drawer width={800}>\n <DrawerTrigger asChild>\n <Button>Open Resizable Drawer (as number)</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerResizeHandle />\n <DrawerHeader>\n <DrawerTitle>Resizable Drawer</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <div className='py-12'>\n <p className='mb-16'>Drag the left edge to resize this drawer.</p>\n <ContentPlaceholder height={300} />\n </div>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n\n <Drawer width='900px'>\n <DrawerTrigger asChild>\n <Button>Open Resizable Drawer (900px)</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerResizeHandle />\n <DrawerHeader>\n <DrawerTitle>Resizable Drawer with \"900px\" width</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <div className='py-12'>\n <p className='mb-16'>Width is set as \"900px\" string. Drag the left edge to resize.</p>\n <ContentPlaceholder height={300} />\n </div>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n\n <Drawer width='50%'>\n <DrawerTrigger asChild>\n <Button>Open Resizable Drawer (50%)</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerResizeHandle />\n <DrawerHeader>\n <DrawerTitle>Resizable Drawer with 50% width</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <div className='py-12'>\n <p className='mb-16'>\n Width is set as \"50%\". Drag the left edge to resize - it will convert to pixels.\n </p>\n <ContentPlaceholder height={300} />\n </div>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n </VStack>\n );\n}",
|
|
8959
8959
|
"description": "Resizable drawer"
|
|
8960
8960
|
},
|
|
8961
8961
|
{
|
|
@@ -8980,7 +8980,7 @@
|
|
|
8980
8980
|
},
|
|
8981
8981
|
{
|
|
8982
8982
|
"name": "WithNested",
|
|
8983
|
-
"code": "() => {\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button>1st level drawer</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 1] Main Drawer</DrawerTitle>\n\n {/* Level 2 drawer */}\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 2nd level drawer\n </Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 2] Detail View</DrawerTitle>\n {/* Level 3 drawer */}\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 3nd level drawer\n </Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 3] Deep Nested</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <VStack
|
|
8983
|
+
"code": "() => {\n return (\n <Drawer>\n <DrawerTrigger asChild>\n <Button>1st level drawer</Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 1] Main Drawer</DrawerTitle>\n\n {/* Level 2 drawer */}\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 2nd level drawer\n </Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 2] Detail View</DrawerTitle>\n {/* Level 3 drawer */}\n <Drawer>\n <DrawerTrigger asChild>\n <Button variant='ghost' color='neutral' size='small'>\n <PanelRight />\n 3nd level drawer\n </Button>\n </DrawerTrigger>\n\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>[Level 3] Deep Nested</DrawerTitle>\n </DrawerHeader>\n\n <DrawerBody>\n <VStack gap={12} align='start'>\n <Text>Level 3! Unlimited nesting works.</Text>\n <ContentPlaceholder height={150} />\n </VStack>\n </DrawerBody>\n\n <DrawerFooter>\n <DrawerClose asChild>\n <Button size='large' variant='ghost' color='neutral'>\n Back\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </DrawerHeader>\n\n <DrawerBody>\n <VStack gap={12} align='start'>\n <Text>\n This is Level 2 drawer. Main drawer is pushed back. You can go deeper:\n </Text>\n\n <ContentPlaceholder height={150} />\n </VStack>\n </DrawerBody>\n\n <DrawerFooter>\n <DrawerClose asChild>\n <Button variant='ghost' color='neutral' size='large'>\n Back\n </Button>\n </DrawerClose>\n <Button variant='primary' color='brand' size='large'>\n Apply\n </Button>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </DrawerHeader>\n\n <DrawerBody>\n <VStack gap={12} align='start'>\n <Text>This is Level 1 drawer. Click below to open nested drawers:</Text>\n\n <ContentPlaceholder height={300} />\n </VStack>\n </DrawerBody>\n\n <DrawerFooter>\n <DrawerClose asChild>\n <Button variant='ghost' color='neutral' size='large'>\n Cancel\n </Button>\n </DrawerClose>\n <Button variant='primary' color='brand' size='large'>\n Save\n </Button>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n );\n}",
|
|
8984
8984
|
"description": "Nested drawers with push-back effect"
|
|
8985
8985
|
},
|
|
8986
8986
|
{
|
|
@@ -10196,15 +10196,15 @@
|
|
|
10196
10196
|
"examples": [
|
|
10197
10197
|
{
|
|
10198
10198
|
"name": "Basic",
|
|
10199
|
-
"code": "() => (\n <VStack
|
|
10199
|
+
"code": "() => (\n <VStack gap={12}>\n <InputGroup>\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupInput placeholder='Enter' />\n <InputGroupAddon align='inline-end'>\n <Info />\n </InputGroupAddon>\n </InputGroup>\n\n <InputGroup>\n <InputGroupAddon variant='outline'>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupInput placeholder='Enter' value='wallarm/user-settings' />\n <InputGroupAddon variant='outline' align='inline-end'>\n <InputGroupText>.com</InputGroupText>\n </InputGroupAddon>\n </InputGroup>\n </VStack>\n)"
|
|
10200
10200
|
},
|
|
10201
10201
|
{
|
|
10202
10202
|
"name": "Disabled",
|
|
10203
|
-
"code": "() => (\n <VStack
|
|
10203
|
+
"code": "() => (\n <VStack gap={12}>\n <InputGroup>\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupInput placeholder='Enter' disabled />\n <InputGroupAddon align='inline-end'>\n <Info />\n </InputGroupAddon>\n </InputGroup>\n\n <InputGroup>\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupInput placeholder='Enter' value='wallarm/user-settings' disabled />\n <InputGroupAddon align='inline-end'>\n <InputGroupText>.com</InputGroupText>\n </InputGroupAddon>\n </InputGroup>\n </VStack>\n)"
|
|
10204
10204
|
},
|
|
10205
10205
|
{
|
|
10206
10206
|
"name": "WithError",
|
|
10207
|
-
"code": "() => (\n <VStack
|
|
10207
|
+
"code": "() => (\n <VStack gap={12}>\n <InputGroup>\n <InputGroupAddon>\n <Search />\n </InputGroupAddon>\n <InputGroupInput placeholder='Enter' error />\n <InputGroupAddon align='inline-end'>\n <Info />\n </InputGroupAddon>\n </InputGroup>\n\n <InputGroup>\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupInput placeholder='Enter' value='wallarm/user-settings' error />\n <InputGroupAddon align='inline-end'>\n <InputGroupText>.com</InputGroupText>\n </InputGroupAddon>\n </InputGroup>\n </VStack>\n)"
|
|
10208
10208
|
},
|
|
10209
10209
|
{
|
|
10210
10210
|
"name": "WithLoader",
|
|
@@ -10220,7 +10220,7 @@
|
|
|
10220
10220
|
},
|
|
10221
10221
|
{
|
|
10222
10222
|
"name": "WithSelect",
|
|
10223
|
-
"code": "() => {\n const collection = createListCollection({\n items: [\n {\n label: 'React',\n value: 'react',\n icon: LayoutGrid,\n category: 'Frontend',\n },\n {\n label: 'Vue',\n value: 'vue',\n icon: LayoutTemplate,\n category: 'Frontend',\n },\n {\n label: 'Angular',\n value: 'angular',\n icon: Search,\n category: 'Frontend',\n },\n ],\n });\n\n return (\n <VStack
|
|
10223
|
+
"code": "() => {\n const collection = createListCollection({\n items: [\n {\n label: 'React',\n value: 'react',\n icon: LayoutGrid,\n category: 'Frontend',\n },\n {\n label: 'Vue',\n value: 'vue',\n icon: LayoutTemplate,\n category: 'Frontend',\n },\n {\n label: 'Angular',\n value: 'angular',\n icon: Search,\n category: 'Frontend',\n },\n ],\n });\n\n return (\n <VStack gap={12}>\n <InputGroup>\n <InputGroupAddon variant='outline'>\n <Select collection={collection}>\n <SelectButton />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </InputGroupAddon>\n\n <InputGroupInput placeholder='Enter' />\n </InputGroup>\n\n <InputGroup>\n <InputGroupInput placeholder='Enter' />\n <InputGroupAddon align='inline-end' variant='outline'>\n <Select collection={collection}>\n <SelectButton />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </InputGroupAddon>\n </InputGroup>\n\n <InputGroup>\n <InputGroupAddon>\n <Select collection={collection}>\n <SelectButton />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </InputGroupAddon>\n\n <InputGroupInput placeholder='Enter' />\n </InputGroup>\n\n <InputGroup>\n <InputGroupInput placeholder='Enter' />\n <InputGroupAddon align='inline-end'>\n <Select collection={collection}>\n <SelectButton />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </InputGroupAddon>\n </InputGroup>\n </VStack>\n );\n}"
|
|
10224
10224
|
}
|
|
10225
10225
|
]
|
|
10226
10226
|
},
|
|
@@ -11871,15 +11871,15 @@
|
|
|
11871
11871
|
"examples": [
|
|
11872
11872
|
{
|
|
11873
11873
|
"name": "Basic",
|
|
11874
|
-
"code": "() => (\n <Popover>\n <PopoverTrigger asChild>\n <Button variant='outline' color='neutral'>\n Click me\n </Button>\n </PopoverTrigger>\n <PopoverContent>\n <VStack
|
|
11874
|
+
"code": "() => (\n <Popover>\n <PopoverTrigger asChild>\n <Button variant='outline' color='neutral'>\n Click me\n </Button>\n </PopoverTrigger>\n <PopoverContent>\n <VStack gap={12}>\n <Text size='sm'>This action will remove all and every bit!</Text>\n\n <Alert color='warning'>\n <AlertIcon />\n <AlertContent>\n <AlertTitle>Message goes here</AlertTitle>\n <AlertDescription>\n {'Description goes here \\nDescription goes here \\nDescription goes here'}\n </AlertDescription>\n <AlertControls>\n <Button variant='secondary' color='neutral' size='small'>\n Button\n </Button>\n <Button variant='secondary' color='neutral' size='small'>\n Button\n </Button>\n </AlertControls>\n </AlertContent>\n </Alert>\n </VStack>\n </PopoverContent>\n </Popover>\n)"
|
|
11875
11875
|
},
|
|
11876
11876
|
{
|
|
11877
11877
|
"name": "MinMaxWidth",
|
|
11878
|
-
"code": "() => (\n <VStack
|
|
11878
|
+
"code": "() => (\n <VStack gap={32}>\n <Popover>\n <PopoverTrigger asChild>\n <Button variant='outline' color='neutral'>\n Min Width\n </Button>\n </PopoverTrigger>\n <PopoverContent>\n <Text size='xs' weight='medium'>\n Lorem Ipsum\n </Text>\n </PopoverContent>\n </Popover>\n\n <Popover>\n <PopoverTrigger asChild>\n <Button variant='outline' color='neutral'>\n Max Width\n </Button>\n </PopoverTrigger>\n <PopoverContent>\n <Text size='xs' weight='medium'>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n been the industry's standard dummy text ever since the 1500s, when an unknown printer took\n a galley of type and scrambled it to make a type specimen book. It has survived not only\n five centuries, but also the leap into electronic typesetting, remaining essentially\n unchanged. It was popularised in the 1960s with the release of Letraset sheets containing\n Lorem Ipsum passages, and more recently with desktop publishing software like Aldus\n PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established\n fact that a reader will be distracted by the readable content of a page when looking at\n its layout.\n </Text>\n </PopoverContent>\n </Popover>\n </VStack>\n)"
|
|
11879
11879
|
},
|
|
11880
11880
|
{
|
|
11881
11881
|
"name": "MinMaxHeight",
|
|
11882
|
-
"code": "() => (\n <VStack
|
|
11882
|
+
"code": "() => (\n <VStack gap={32}>\n <Popover>\n <PopoverTrigger asChild>\n <Button variant='outline' color='neutral'>\n Min Height\n </Button>\n </PopoverTrigger>\n <PopoverContent>\n <Text size='xs' weight='medium'>\n Lorem Ipsum\n </Text>\n </PopoverContent>\n </Popover>\n\n <Popover>\n <PopoverTrigger asChild>\n <Button variant='outline' color='neutral'>\n Max Height\n </Button>\n </PopoverTrigger>\n <PopoverContent>\n <VStack gap={12}>\n <Text size='xs' weight='medium'>\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n has been the industry's standard dummy text ever since the 1500s, when an unknown\n printer took a galley of type and scrambled it to make a type specimen book. It has\n survived not only five centuries, but also the leap into electronic typesetting,\n remaining essentially unchanged. It was popularised in the 1960s with the release of\n Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we\n use it? It is a long established fact that a reader will be distracted by the readable\n content of a page when looking at its layout. The point of using Lorem Ipsum is that it\n has a more-or-less normal distribution of letters, as opposed to using 'Content here,\n content here', making it look like readable English. Many desktop publishing packages\n and web page editors now use Lorem Ipsum as their default model text, and a search for\n 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have\n evolved over the years, sometimes by accident, sometimes on purpose (injected humour and\n the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not\n simply random text. It has roots in a piece of classical Latin literature from 45 BC,\n making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney\n College in Virginia, looked up one of the more obscure Latin words, consectetur, from a\n Lorem Ipsum passage, and going through the cites of the word in classical literature,\n discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33\n of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in\n 45 BC. This book is a treatise on the theory of ethics, very popular during the\n Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a\n line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is\n reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus\n Bonorum et Malorum\" by Cicero are also reproduced in their exact original form,\n accompanied by English versions from the 1914 translation by H. Rackham.\n </Text>\n\n <Text size='xs' weight='medium'>\n Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random\n text. It has roots in a piece of classical Latin literature from 45 BC, making it over\n 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in\n Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum\n passage, and going through the cites of the word in classical literature, discovered the\n undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus\n Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This\n book is a treatise on the theory of ethics, very popular during the Renaissance. The\n first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section\n 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for\n those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by\n Cicero are also reproduced in their exact original form, accompanied by English versions\n from the 1914 translation by H. Rackham.\n </Text>\n </VStack>\n </PopoverContent>\n </Popover>\n </VStack>\n)"
|
|
11883
11883
|
}
|
|
11884
11884
|
]
|
|
11885
11885
|
},
|
|
@@ -13102,7 +13102,7 @@
|
|
|
13102
13102
|
},
|
|
13103
13103
|
{
|
|
13104
13104
|
"name": "FormField",
|
|
13105
|
-
"code": "() => (\n <HStack align='start'
|
|
13105
|
+
"code": "() => (\n <HStack align='start' gap={40}>\n <Field>\n <FieldLabel>\n Label\n <Tooltip>\n <TooltipTrigger>\n <Info />\n </TooltipTrigger>\n <TooltipContent>Additional information</TooltipContent>\n </Tooltip>\n </FieldLabel>\n\n <FieldDescription>This is an input description.</FieldDescription>\n\n <RadioGroup name='framework' defaultValue='svelte'>\n <Radio value='react'>\n <RadioIndicator />\n <RadioLabel>React</RadioLabel>\n <RadioDescription>\n By selected this value, you agree to the terms and conditions.\n </RadioDescription>\n </Radio>\n\n <Radio value='solid'>\n <RadioIndicator />\n <RadioLabel>Solid</RadioLabel>\n </Radio>\n\n <Radio value='vue' disabled>\n <RadioIndicator />\n <RadioLabel>Vue</RadioLabel>\n </Radio>\n\n <Radio value='svelte'>\n <RadioIndicator />\n <RadioLabel>Svelte</RadioLabel>\n </Radio>\n </RadioGroup>\n </Field>\n\n <Field>\n <FieldLabel>\n Label\n <Tooltip>\n <TooltipTrigger>\n <Info />\n </TooltipTrigger>\n <TooltipContent>Additional information</TooltipContent>\n </Tooltip>\n </FieldLabel>\n\n <FieldDescription>This is an input description.</FieldDescription>\n\n <RadioGroup variant='card' name='framework' defaultValue='svelte'>\n <Radio value='react'>\n <RadioIndicator />\n <RadioLabel>React</RadioLabel>\n <RadioDescription>\n By selected this value, you agree to the terms and conditions.\n </RadioDescription>\n </Radio>\n\n <Radio value='solid'>\n <RadioIndicator />\n <RadioLabel>Solid</RadioLabel>\n </Radio>\n\n <Radio value='vue' disabled>\n <RadioIndicator />\n <RadioLabel>Vue</RadioLabel>\n </Radio>\n\n <Radio value='svelte'>\n <RadioIndicator />\n <RadioLabel>Svelte</RadioLabel>\n </Radio>\n </RadioGroup>\n </Field>\n </HStack>\n)"
|
|
13106
13106
|
}
|
|
13107
13107
|
]
|
|
13108
13108
|
},
|
|
@@ -15327,7 +15327,7 @@
|
|
|
15327
15327
|
},
|
|
15328
15328
|
{
|
|
15329
15329
|
"name": "DifferentButtons",
|
|
15330
|
-
"code": "() => {\n const collection = createListCollection({\n items: skillsWithoutIcons,\n });\n\n return (\n <div className='w-800'>\n <VStack
|
|
15330
|
+
"code": "() => {\n const collection = createListCollection({\n items: skillsWithoutIcons,\n });\n\n return (\n <div className='w-800'>\n <VStack gap={16}>\n <HStack gap={8}>\n <Select collection={collection}>\n <SelectButton placeholder='Default' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection}>\n <SelectButton variant='ghost' placeholder='Ghost + Neutral' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection}>\n <SelectButton variant='ghost' color='brand' placeholder='Ghost + Brand' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection}>\n <SelectButton variant='secondary' placeholder='Secondary + Neutral' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection}>\n <SelectButton variant='secondary' color='brand' placeholder='Ghost + Brand' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </HStack>\n\n <HStack gap={8}>\n <Select collection={collection} disabled>\n <SelectButton placeholder='Default' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} disabled>\n <SelectButton variant='ghost' placeholder='Ghost + Neutral' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} disabled>\n <SelectButton variant='ghost' color='brand' placeholder='Ghost + Brand' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} disabled>\n <SelectButton variant='secondary' placeholder='Secondary + Neutral' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} disabled>\n <SelectButton variant='secondary' color='brand' placeholder='Ghost + Brand' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </HStack>\n\n <HStack gap={8}>\n <Select collection={collection} loading>\n <SelectButton placeholder='Default' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} loading>\n <SelectButton variant='ghost' placeholder='Ghost + Neutral' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} loading>\n <SelectButton variant='ghost' color='brand' placeholder='Ghost + Brand' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} loading>\n <SelectButton variant='secondary' placeholder='Secondary + Neutral' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection} loading>\n <SelectButton variant='secondary' color='brand' placeholder='Ghost + Brand' />\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </HStack>\n </VStack>\n </div>\n );\n}"
|
|
15331
15331
|
},
|
|
15332
15332
|
{
|
|
15333
15333
|
"name": "Multiple",
|
|
@@ -15711,7 +15711,7 @@
|
|
|
15711
15711
|
"examples": [
|
|
15712
15712
|
{
|
|
15713
15713
|
"name": "Basic",
|
|
15714
|
-
"code": "() => (\n <VStack>\n <Heading>Separator examples</Heading>\n <Text>Wallarm Design System component library.</Text>\n <Separator spacing={16} />\n <HStack
|
|
15714
|
+
"code": "() => (\n <VStack>\n <Heading>Separator examples</Heading>\n <Text>Wallarm Design System component library.</Text>\n <Separator spacing={16} />\n <HStack gap={0}>\n <Text>Blog</Text>\n <Separator decorative orientation='vertical' spacing={16} />\n <Text>Docs</Text>\n <Separator decorative orientation='vertical' spacing={16} />\n <Text>Source</Text>\n </HStack>\n </VStack>\n)"
|
|
15715
15715
|
}
|
|
15716
15716
|
]
|
|
15717
15717
|
},
|
|
@@ -16376,7 +16376,7 @@
|
|
|
16376
16376
|
"required": false
|
|
16377
16377
|
},
|
|
16378
16378
|
{
|
|
16379
|
-
"name": "
|
|
16379
|
+
"name": "gap",
|
|
16380
16380
|
"type": "complex",
|
|
16381
16381
|
"required": false,
|
|
16382
16382
|
"defaultValue": "4"
|
|
@@ -16454,7 +16454,7 @@
|
|
|
16454
16454
|
]
|
|
16455
16455
|
},
|
|
16456
16456
|
{
|
|
16457
|
-
"name": "
|
|
16457
|
+
"name": "gap",
|
|
16458
16458
|
"options": [
|
|
16459
16459
|
"0",
|
|
16460
16460
|
"1",
|
|
@@ -16794,7 +16794,7 @@
|
|
|
16794
16794
|
"required": false
|
|
16795
16795
|
},
|
|
16796
16796
|
{
|
|
16797
|
-
"name": "
|
|
16797
|
+
"name": "gap",
|
|
16798
16798
|
"type": "complex",
|
|
16799
16799
|
"required": false
|
|
16800
16800
|
},
|
|
@@ -17086,8 +17086,7 @@
|
|
|
17086
17086
|
{
|
|
17087
17087
|
"name": "align",
|
|
17088
17088
|
"type": "{ start: string; center: string; end: string; stretch: string; baseline: string; }",
|
|
17089
|
-
"required": false
|
|
17090
|
-
"defaultValue": "start"
|
|
17089
|
+
"required": false
|
|
17091
17090
|
},
|
|
17092
17091
|
{
|
|
17093
17092
|
"name": "justify",
|
|
@@ -17115,7 +17114,7 @@
|
|
|
17115
17114
|
"required": false
|
|
17116
17115
|
},
|
|
17117
17116
|
{
|
|
17118
|
-
"name": "
|
|
17117
|
+
"name": "gap",
|
|
17119
17118
|
"type": "complex",
|
|
17120
17119
|
"required": false
|
|
17121
17120
|
},
|
|
@@ -17130,11 +17129,11 @@
|
|
|
17130
17129
|
"examples": [
|
|
17131
17130
|
{
|
|
17132
17131
|
"name": "Basic",
|
|
17133
|
-
"code": "({ ...args }) => (\n <Stack {...args}
|
|
17132
|
+
"code": "({ ...args }) => (\n <Stack {...args} gap={4}>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n </Stack>\n)"
|
|
17134
17133
|
},
|
|
17135
17134
|
{
|
|
17136
17135
|
"name": "Direction",
|
|
17137
|
-
"code": "({ ...args }) => (\n <Flex direction='column' gap={8}>\n <Flex direction='column'>\n <Heading>VStack (Vertical)</Heading>\n <VStack {...args}
|
|
17136
|
+
"code": "({ ...args }) => (\n <Flex direction='column' gap={8}>\n <Flex direction='column'>\n <Heading>VStack (Vertical)</Heading>\n <VStack {...args} gap={4}>\n <Box>1</Box>\n <Box>2</Box>\n <Box>3</Box>\n </VStack>\n </Flex>\n\n <Flex direction='column'>\n <Heading>HStack (Horizontal)</Heading>\n <HStack {...args} gap={4}>\n <Box>1</Box>\n <Box>2</Box>\n <Box>3</Box>\n </HStack>\n </Flex>\n </Flex>\n)"
|
|
17138
17137
|
},
|
|
17139
17138
|
{
|
|
17140
17139
|
"name": "Alignment",
|
|
@@ -17142,15 +17141,15 @@
|
|
|
17142
17141
|
},
|
|
17143
17142
|
{
|
|
17144
17143
|
"name": "Spacing",
|
|
17145
|
-
"code": "({ ...args }) => (\n <Flex direction='column' gap={8}>\n <Flex direction='column'>\n <Heading>Spacing 2</Heading>\n <VStack {...args}
|
|
17144
|
+
"code": "({ ...args }) => (\n <Flex direction='column' gap={8}>\n <Flex direction='column'>\n <Heading>Spacing 2</Heading>\n <VStack {...args} gap={2}>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n </VStack>\n </Flex>\n\n <Flex direction='column'>\n <Heading>Spacing 4</Heading>\n <VStack {...args} gap={4}>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n </VStack>\n </Flex>\n\n <Flex direction='column'>\n <Heading>Spacing 8</Heading>\n <VStack {...args} gap={8}>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n </VStack>\n </Flex>\n </Flex>\n)"
|
|
17146
17145
|
},
|
|
17147
17146
|
{
|
|
17148
17147
|
"name": "Wrap",
|
|
17149
|
-
"code": "({ ...args }) => (\n <Flex direction='column'>\n <Heading>Wrap enabled (width: 12rem)</Heading>\n <HStack {...args}
|
|
17148
|
+
"code": "({ ...args }) => (\n <Flex direction='column'>\n <Heading>Wrap enabled (width: 12rem)</Heading>\n <HStack {...args} gap={2} wrap='wrap'>\n {new Array(40).fill(null).map((_, index) => {\n const key = `${index + 1}`;\n\n return <Box key={key}>{key}</Box>;\n })}\n </HStack>\n </Flex>\n)"
|
|
17150
17149
|
},
|
|
17151
17150
|
{
|
|
17152
17151
|
"name": "FlexBehavior",
|
|
17153
|
-
"code": "({ ...args }) => (\n <Flex direction='column' gap={8}>\n <Flex direction='column'>\n <Heading>Default (no grow, no full width)</Heading>\n <HStack {...args}
|
|
17152
|
+
"code": "({ ...args }) => (\n <Flex direction='column' gap={8}>\n <Flex direction='column'>\n <Heading>Default (no grow, no full width)</Heading>\n <HStack {...args} gap={4}>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n </HStack>\n </Flex>\n\n <Flex direction='column'>\n <Heading>fullWidth</Heading>\n <HStack {...args} gap={4} fullWidth>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n </HStack>\n </Flex>\n\n <Flex direction='column'>\n <Heading>flexGrow</Heading>\n <HStack>\n <VStack {...args} gap={4} flexGrow>\n <Box>A</Box>\n <Box>B</Box>\n </VStack>\n <VStack {...args} gap={4}>\n <Box>C</Box>\n </VStack>\n </HStack>\n </Flex>\n\n <Flex direction='column'>\n <Heading>flexShrink=false (no shrink)</Heading>\n <div className='w-48 overflow-hidden border border-gray-300 rounded'>\n <HStack {...args} gap={4} flexShrink={false}>\n <Box>A</Box>\n <Box>B</Box>\n <Box>C</Box>\n <Box>D</Box>\n <Box>E</Box>\n </HStack>\n </div>\n </Flex>\n </Flex>\n)"
|
|
17154
17153
|
}
|
|
17155
17154
|
]
|
|
17156
17155
|
},
|
|
@@ -18286,7 +18285,7 @@
|
|
|
18286
18285
|
},
|
|
18287
18286
|
{
|
|
18288
18287
|
"name": "EmptyState",
|
|
18289
|
-
"code": "() => (\n <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n <TableEmptyState>\n <VStack align='center' justify='center'
|
|
18288
|
+
"code": "() => (\n <Table data={[]} columns={securityColumns} getRowId={row => row.id}>\n <TableEmptyState>\n <VStack align='center' justify='center' gap={8}>\n <Text size='sm' weight='medium' color='primary'>\n No results found\n </Text>\n <Text size='sm' color='secondary'>\n Try to apply different filter or reset it.\n </Text>\n </VStack>\n </TableEmptyState>\n </Table>\n)"
|
|
18290
18289
|
},
|
|
18291
18290
|
{
|
|
18292
18291
|
"name": "ColumnResizing",
|
|
@@ -18314,7 +18313,7 @@
|
|
|
18314
18313
|
},
|
|
18315
18314
|
{
|
|
18316
18315
|
"name": "RowExpanding",
|
|
18317
|
-
"code": "() => {\n const [expanded, setExpanded] = useState<TableExpandedState>({});\n\n return (\n <Table\n data={securityEvents}\n columns={securityColumns}\n getRowId={row => row.id}\n expanded={expanded}\n onExpandedChange={setExpanded}\n renderExpandedRow={row => (\n <div className='p-16 bg-states-primary-default-alt rounded-8'>\n <Text size='sm' weight='medium'>\n Event Details\n </Text>\n <div className='grid grid-cols-3 gap-8 mt-8'>\n <VStack
|
|
18316
|
+
"code": "() => {\n const [expanded, setExpanded] = useState<TableExpandedState>({});\n\n return (\n <Table\n data={securityEvents}\n columns={securityColumns}\n getRowId={row => row.id}\n expanded={expanded}\n onExpandedChange={setExpanded}\n renderExpandedRow={row => (\n <div className='p-16 bg-states-primary-default-alt rounded-8'>\n <Text size='sm' weight='medium'>\n Event Details\n </Text>\n <div className='grid grid-cols-3 gap-8 mt-8'>\n <VStack gap={2}>\n <Text size='xs' color='secondary'>\n Source IP\n </Text>\n <Text size='sm'>{row.original.sourceIp}</Text>\n </VStack>\n <VStack gap={2}>\n <Text size='xs' color='secondary'>\n Provider\n </Text>\n <Text size='sm'>{row.original.sourceProvider}</Text>\n </VStack>\n <VStack gap={2}>\n <Text size='xs' color='secondary'>\n Endpoint\n </Text>\n <HStack gap={4}>\n <Badge\n color={METHOD_COLORS[row.original.endpointMethod] ?? 'slate'}\n type='secondary'\n size='medium'\n textVariant='code'\n >\n {row.original.endpointMethod}\n </Badge>\n <Text size='sm'>{row.original.endpointPath}</Text>\n </HStack>\n </VStack>\n </div>\n </div>\n )}\n />\n );\n}"
|
|
18318
18317
|
},
|
|
18319
18318
|
{
|
|
18320
18319
|
"name": "ContextMenu",
|
|
@@ -18334,11 +18333,11 @@
|
|
|
18334
18333
|
},
|
|
18335
18334
|
{
|
|
18336
18335
|
"name": "InfiniteScroll",
|
|
18337
|
-
"code": "() => {\n const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();\n\n return (\n <VStack
|
|
18336
|
+
"code": "() => {\n const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();\n\n return (\n <VStack gap={8}>\n <Text size='sm' color='secondary'>\n Loaded {data.length} of {totalItems} rows {isFetching && '— loading...'}\n {!hasMore && ' — all loaded'}\n </Text>\n <Table\n className='h-500'\n data={data}\n columns={securityColumns}\n getRowId={row => row.id}\n virtualized='container'\n isLoading={isFetching}\n onEndReached={fetchNextPage}\n onEndReachedThreshold={200}\n />\n </VStack>\n );\n}"
|
|
18338
18337
|
},
|
|
18339
18338
|
{
|
|
18340
18339
|
"name": "InfiniteScrollWindow",
|
|
18341
|
-
"code": "() => {\n const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();\n\n return (\n <VStack
|
|
18340
|
+
"code": "() => {\n const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();\n\n return (\n <VStack gap={8}>\n <Text size='sm' color='secondary'>\n Loaded {data.length} of {totalItems} rows {isFetching && '— loading...'}\n {!hasMore && ' — all loaded'}\n </Text>\n <Table\n data={data}\n columns={securityColumns}\n getRowId={row => row.id}\n virtualized='window'\n isLoading={isFetching}\n onEndReached={fetchNextPage}\n onEndReachedThreshold={300}\n />\n </VStack>\n );\n}"
|
|
18342
18341
|
},
|
|
18343
18342
|
{
|
|
18344
18343
|
"name": "FullFeatured",
|
|
@@ -18368,7 +18367,7 @@
|
|
|
18368
18367
|
},
|
|
18369
18368
|
{
|
|
18370
18369
|
"name": "Variants",
|
|
18371
|
-
"code": "() => (\n <div className='w-600'>\n <VStack
|
|
18370
|
+
"code": "() => (\n <div className='w-600'>\n <VStack gap={32}>\n <Tabs defaultValue='1'>\n <TabsList>\n <TabsTrigger value='1'>Tab 1 (Default)</TabsTrigger>\n <TabsTrigger value='2'>Tab 2 (Default)</TabsTrigger>\n <TabsTrigger value='3'>Tab 3 (Default)</TabsTrigger>\n </TabsList>\n <TabsContent value='1'>Content for Tab 1</TabsContent>\n <TabsContent value='2'>Content for Tab 2</TabsContent>\n <TabsContent value='3'>Content for Tab 3</TabsContent>\n </Tabs>\n\n <Tabs defaultValue='1' variant='grayscale'>\n <TabsList>\n <TabsTrigger value='1'>Tab 1 (Grayscale)</TabsTrigger>\n <TabsTrigger value='2'>Tab 2 (Grayscale)</TabsTrigger>\n <TabsTrigger value='3'>Tab 3 (Grayscale)</TabsTrigger>\n </TabsList>\n <TabsContent value='1'>Content for Tab 1</TabsContent>\n <TabsContent value='2'>Content for Tab 2</TabsContent>\n <TabsContent value='3'>Content for Tab 3</TabsContent>\n </Tabs>\n </VStack>\n </div>\n)"
|
|
18372
18371
|
},
|
|
18373
18372
|
{
|
|
18374
18373
|
"name": "Icons",
|
|
@@ -18384,7 +18383,7 @@
|
|
|
18384
18383
|
},
|
|
18385
18384
|
{
|
|
18386
18385
|
"name": "Sizes",
|
|
18387
|
-
"code": "() => (\n <div className='w-600'>\n <VStack
|
|
18386
|
+
"code": "() => (\n <div className='w-600'>\n <VStack gap={32}>\n <Tabs defaultValue='1' size='medium'>\n <TabsList>\n <TabsTrigger value='1'>Tab 1</TabsTrigger>\n <TabsTrigger value='2'>Tab 2</TabsTrigger>\n <TabsTrigger value='3'>Tab 3</TabsTrigger>\n </TabsList>\n <TabsContent value='1'>Content for Tab 1</TabsContent>\n <TabsContent value='2'>Content for Tab 2</TabsContent>\n <TabsContent value='3'>Content for Tab 3</TabsContent>\n </Tabs>\n\n <Tabs defaultValue='1' size='small'>\n <TabsList>\n <TabsTrigger value='1'>Tab 1</TabsTrigger>\n <TabsTrigger value='2'>Tab 2</TabsTrigger>\n <TabsTrigger value='3'>Tab 3</TabsTrigger>\n </TabsList>\n <TabsContent value='1'>Content for Tab 1</TabsContent>\n <TabsContent value='2'>Content for Tab 2</TabsContent>\n <TabsContent value='3'>Content for Tab 3</TabsContent>\n </Tabs>\n </VStack>\n </div>\n)"
|
|
18388
18387
|
},
|
|
18389
18388
|
{
|
|
18390
18389
|
"name": "Scrollable",
|
|
@@ -18718,11 +18717,11 @@
|
|
|
18718
18717
|
},
|
|
18719
18718
|
{
|
|
18720
18719
|
"name": "Sizes",
|
|
18721
|
-
"code": "({ ...args }) => (\n <HStack align='center'
|
|
18720
|
+
"code": "({ ...args }) => (\n <HStack align='center' gap={8}>\n <Tag {...args} size='medium'>\n Medium Tag\n </Tag>\n <Tag {...args} size='large'>\n Large Tag\n </Tag>\n </HStack>\n)"
|
|
18722
18721
|
},
|
|
18723
18722
|
{
|
|
18724
18723
|
"name": "Disabled",
|
|
18725
|
-
"code": "({ ...args }) => (\n <HStack
|
|
18724
|
+
"code": "({ ...args }) => (\n <HStack gap={8}>\n <Tag {...args} size='medium' disabled>\n Disabled Medium\n </Tag>\n <Tag {...args} size='large' disabled>\n Disabled Large\n </Tag>\n </HStack>\n)"
|
|
18726
18725
|
},
|
|
18727
18726
|
{
|
|
18728
18727
|
"name": "Closable",
|
|
@@ -18730,11 +18729,11 @@
|
|
|
18730
18729
|
},
|
|
18731
18730
|
{
|
|
18732
18731
|
"name": "Selectable",
|
|
18733
|
-
"code": "() => {\n const collection = createListCollection<SelectDataItem>({\n items: [\n {\n value: 'UTC',\n label: 'UTC',\n },\n {\n value: 'UTC+1',\n label: 'UTC+1',\n },\n {\n value: 'UTC+2',\n label: 'UTC+2',\n },\n {\n value: 'UTC+3',\n label: 'UTC+3',\n },\n {\n value: 'UTC+4',\n label: 'UTC+4',\n },\n {\n value: 'UTC+5',\n label: 'UTC+5',\n },\n {\n value: 'UTC+6',\n label: 'UTC+6',\n },\n {\n value: 'UTC+7',\n label: 'UTC+7',\n },\n ],\n isItemDisabled: item => item.value === 'UTC+2',\n });\n\n return (\n <VStack
|
|
18732
|
+
"code": "() => {\n const collection = createListCollection<SelectDataItem>({\n items: [\n {\n value: 'UTC',\n label: 'UTC',\n },\n {\n value: 'UTC+1',\n label: 'UTC+1',\n },\n {\n value: 'UTC+2',\n label: 'UTC+2',\n },\n {\n value: 'UTC+3',\n label: 'UTC+3',\n },\n {\n value: 'UTC+4',\n label: 'UTC+4',\n },\n {\n value: 'UTC+5',\n label: 'UTC+5',\n },\n {\n value: 'UTC+6',\n label: 'UTC+6',\n },\n {\n value: 'UTC+7',\n label: 'UTC+7',\n },\n ],\n isItemDisabled: item => item.value === 'UTC+2',\n });\n\n return (\n <VStack gap={8}>\n <Select collection={collection}>\n <SelectButtonTag>\n <Earth />\n <SelectButtonTagValue placeholder='Timezone' />\n </SelectButtonTag>\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n\n <Select collection={collection}>\n <SelectButtonTag size='large'>\n <Earth />\n <SelectButtonTagValue placeholder='Timezone' />\n </SelectButtonTag>\n\n <SelectPositioner>\n <SelectContent>\n {collection.items.map(skill => (\n <SelectOption key={skill.value} item={skill}>\n <SelectOptionText>{skill.label}</SelectOptionText>\n <SelectOptionIndicator />\n </SelectOption>\n ))}\n </SelectContent>\n </SelectPositioner>\n </Select>\n </VStack>\n );\n}"
|
|
18734
18733
|
},
|
|
18735
18734
|
{
|
|
18736
18735
|
"name": "WithIcons",
|
|
18737
|
-
"code": "({ ...args }) => (\n <VStack
|
|
18736
|
+
"code": "({ ...args }) => (\n <VStack gap={12} align='stretch'>\n <VStack gap={8}>\n <Heading size='sm'>Medium Size</Heading>\n <HStack gap={8}>\n <Tag {...args} size='medium'>\n <Earth />\n Tag with left icon\n </Tag>\n <Tag {...args} size='medium'>\n Tag with right icon\n <Info />\n </Tag>\n <Tag {...args} size='medium'>\n <Earth />\n Tag with left and right icons\n <Info />\n </Tag>\n </HStack>\n </VStack>\n <VStack gap={8}>\n <Heading size='sm'>Large Size</Heading>\n <HStack gap={8}>\n <Tag {...args} size='large'>\n <Earth />\n Tag with left icon\n </Tag>\n <Tag {...args} size='large'>\n Tag with right icon\n <Info />\n </Tag>\n <Tag {...args} size='large'>\n <Earth />\n Tag with left and right icons\n <Info />\n </Tag>\n </HStack>\n </VStack>\n </VStack>\n)"
|
|
18738
18737
|
},
|
|
18739
18738
|
{
|
|
18740
18739
|
"name": "WithOnClick",
|
|
@@ -19512,7 +19511,7 @@
|
|
|
19512
19511
|
},
|
|
19513
19512
|
{
|
|
19514
19513
|
"name": "Sizes",
|
|
19515
|
-
"code": "({ ...args }) => (\n <HStack
|
|
19514
|
+
"code": "({ ...args }) => (\n <HStack gap={16} align='start'>\n <Textarea {...args} size='default' />\n <Textarea {...args} size='medium' />\n <Textarea {...args} size='small' />\n </HStack>\n)"
|
|
19516
19515
|
},
|
|
19517
19516
|
{
|
|
19518
19517
|
"name": "Focused",
|
package/package.json
CHANGED