lucent-ui 0.19.1 → 0.20.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.
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
export const COMPONENT_MANIFEST = {
|
|
2
|
+
id: 'row',
|
|
3
|
+
name: 'Row',
|
|
4
|
+
tier: 'atom',
|
|
5
|
+
domain: 'neutral',
|
|
6
|
+
specVersion: '0.1',
|
|
7
|
+
description: 'Horizontal flex layout primitive that spaces children using design-system gap tokens.',
|
|
8
|
+
designIntent: 'Row is the primary horizontal layout container. Use it any time you need to arrange elements ' +
|
|
9
|
+
'side by side — button groups, label-value pairs, icon + text combos, toolbar actions. ' +
|
|
10
|
+
'Default align is "center" (vertical centering), which is the most common horizontal layout need. ' +
|
|
11
|
+
'Use justify="between" for space-between patterns like a header with title on the left and actions ' +
|
|
12
|
+
'on the right. Set wrap=true when items should flow to the next line on narrow screens. ' +
|
|
13
|
+
'Row does not add padding — wrap it in a Card or apply padding on a parent container instead. ' +
|
|
14
|
+
'For vertical arrangement, use Stack instead.',
|
|
15
|
+
props: [
|
|
16
|
+
{
|
|
17
|
+
name: 'gap',
|
|
18
|
+
type: 'enum',
|
|
19
|
+
required: false,
|
|
20
|
+
default: '3',
|
|
21
|
+
description: 'Spacing between children. Maps to --lucent-space-{n} tokens.',
|
|
22
|
+
enumValues: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16', '20', '24'],
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
name: 'align',
|
|
26
|
+
type: 'enum',
|
|
27
|
+
required: false,
|
|
28
|
+
default: 'center',
|
|
29
|
+
description: 'Cross-axis alignment (alignItems). "center" vertically centers items, which is the most common need.',
|
|
30
|
+
enumValues: ['start', 'center', 'end', 'stretch', 'baseline'],
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: 'justify',
|
|
34
|
+
type: 'enum',
|
|
35
|
+
required: false,
|
|
36
|
+
default: 'start',
|
|
37
|
+
description: 'Main-axis distribution (justifyContent). Use "between" for label/action pairs.',
|
|
38
|
+
enumValues: ['start', 'center', 'end', 'between', 'around'],
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: 'as',
|
|
42
|
+
type: 'enum',
|
|
43
|
+
required: false,
|
|
44
|
+
default: 'div',
|
|
45
|
+
description: 'HTML element to render. Use semantic elements when appropriate (nav for navigation, form for forms).',
|
|
46
|
+
enumValues: ['div', 'section', 'nav', 'form', 'fieldset', 'ul', 'ol'],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
name: 'wrap',
|
|
50
|
+
type: 'boolean',
|
|
51
|
+
required: false,
|
|
52
|
+
default: 'false',
|
|
53
|
+
description: 'Whether children should wrap to the next line when they exceed the container width.',
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
name: 'children',
|
|
57
|
+
type: 'ReactNode',
|
|
58
|
+
required: true,
|
|
59
|
+
description: 'The elements to arrange horizontally.',
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: 'style',
|
|
63
|
+
type: 'object',
|
|
64
|
+
required: false,
|
|
65
|
+
description: 'Inline style overrides. Applied after computed layout styles.',
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
name: 'className',
|
|
69
|
+
type: 'string',
|
|
70
|
+
required: false,
|
|
71
|
+
description: 'CSS class name passthrough.',
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
|
+
usageExamples: [
|
|
75
|
+
{
|
|
76
|
+
title: 'Settings toggle',
|
|
77
|
+
code: `<Row gap="3" justify="between">\n <Text size="sm">Push notifications</Text>\n <Toggle />\n</Row>`,
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
title: 'Button group',
|
|
81
|
+
code: `<Row gap="2">\n <Button variant="primary">Save</Button>\n <Button variant="outline">Cancel</Button>\n</Row>`,
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
title: 'Stats row',
|
|
85
|
+
code: `<Row gap="6" wrap>\n <Stack gap="1">\n <Text size="2xl" weight="bold">1,234</Text>\n <Text size="xs" color="secondary">Users</Text>\n </Stack>\n <Stack gap="1">\n <Text size="2xl" weight="bold">56.7%</Text>\n <Text size="xs" color="secondary">Conversion</Text>\n </Stack>\n</Row>`,
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
title: 'Icon + text',
|
|
89
|
+
code: `<Row gap="2" align="center">\n <Icon name="check" size={16} />\n <Text size="sm" color="success">Verified</Text>\n</Row>`,
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
title: 'Header with actions',
|
|
93
|
+
code: `<Row justify="between">\n <Text as="h2" size="xl" weight="semibold">Dashboard</Text>\n <Row gap="2">\n <Button variant="outline" size="sm">Export</Button>\n <Button variant="primary" size="sm">New report</Button>\n </Row>\n</Row>`,
|
|
94
|
+
},
|
|
95
|
+
],
|
|
96
|
+
compositionGraph: [],
|
|
97
|
+
accessibility: {
|
|
98
|
+
notes: 'Row renders a <div> by default, which has no implicit ARIA role. Use the `as` prop to render ' +
|
|
99
|
+
'semantic elements (nav, section) when the content has a specific structural purpose. ' +
|
|
100
|
+
'For toolbar patterns, consider adding role="toolbar" via the role prop.',
|
|
101
|
+
},
|
|
102
|
+
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
export const COMPONENT_MANIFEST = {
|
|
2
|
+
id: 'stack',
|
|
3
|
+
name: 'Stack',
|
|
4
|
+
tier: 'atom',
|
|
5
|
+
domain: 'neutral',
|
|
6
|
+
specVersion: '0.1',
|
|
7
|
+
description: 'Vertical flex layout primitive that spaces children using design-system gap tokens.',
|
|
8
|
+
designIntent: 'Stack is the primary vertical layout container. Use it any time you need to arrange elements ' +
|
|
9
|
+
'in a column with consistent spacing — form fields, card content, page sections, sidebar navigation. ' +
|
|
10
|
+
'The gap prop maps to spacing tokens (--lucent-space-*), enforcing consistent vertical rhythm ' +
|
|
11
|
+
'without manual margin management. Prefer Stack over raw inline flex styles for maintainability ' +
|
|
12
|
+
'and readability. Use Row (the horizontal counterpart) when items should flow left-to-right. ' +
|
|
13
|
+
'Stack does not add padding — wrap it in a Card or apply padding on a parent container instead.',
|
|
14
|
+
props: [
|
|
15
|
+
{
|
|
16
|
+
name: 'gap',
|
|
17
|
+
type: 'enum',
|
|
18
|
+
required: false,
|
|
19
|
+
default: '4',
|
|
20
|
+
description: 'Spacing between children. Maps to --lucent-space-{n} tokens.',
|
|
21
|
+
enumValues: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16', '20', '24'],
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
name: 'align',
|
|
25
|
+
type: 'enum',
|
|
26
|
+
required: false,
|
|
27
|
+
default: 'stretch',
|
|
28
|
+
description: 'Cross-axis alignment (alignItems). "stretch" fills the container width.',
|
|
29
|
+
enumValues: ['start', 'center', 'end', 'stretch', 'baseline'],
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: 'justify',
|
|
33
|
+
type: 'enum',
|
|
34
|
+
required: false,
|
|
35
|
+
default: 'start',
|
|
36
|
+
description: 'Main-axis distribution (justifyContent).',
|
|
37
|
+
enumValues: ['start', 'center', 'end', 'between', 'around'],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
name: 'as',
|
|
41
|
+
type: 'enum',
|
|
42
|
+
required: false,
|
|
43
|
+
default: 'div',
|
|
44
|
+
description: 'HTML element to render. Use semantic elements when appropriate (nav for navigation, form for forms).',
|
|
45
|
+
enumValues: ['div', 'section', 'nav', 'form', 'fieldset', 'ul', 'ol'],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'wrap',
|
|
49
|
+
type: 'boolean',
|
|
50
|
+
required: false,
|
|
51
|
+
default: 'false',
|
|
52
|
+
description: 'Whether children should wrap to the next line when they exceed the container width.',
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: 'children',
|
|
56
|
+
type: 'ReactNode',
|
|
57
|
+
required: true,
|
|
58
|
+
description: 'The elements to arrange vertically.',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: 'style',
|
|
62
|
+
type: 'object',
|
|
63
|
+
required: false,
|
|
64
|
+
description: 'Inline style overrides. Applied after computed layout styles.',
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: 'className',
|
|
68
|
+
type: 'string',
|
|
69
|
+
required: false,
|
|
70
|
+
description: 'CSS class name passthrough.',
|
|
71
|
+
},
|
|
72
|
+
],
|
|
73
|
+
usageExamples: [
|
|
74
|
+
{
|
|
75
|
+
title: 'Form layout',
|
|
76
|
+
code: `<Stack gap="4">\n <FormField label="Name"><Input /></FormField>\n <FormField label="Email"><Input type="email" /></FormField>\n <Button variant="primary">Submit</Button>\n</Stack>`,
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
title: 'Card content',
|
|
80
|
+
code: `<Card padding="lg">\n <Stack gap="3">\n <Text as="h3" size="lg" weight="semibold">Title</Text>\n <Text size="sm" color="secondary">Description goes here.</Text>\n <Button variant="outline" size="sm">Learn more</Button>\n </Stack>\n</Card>`,
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
title: 'Tight spacing',
|
|
84
|
+
code: `<Stack gap="1">\n <Text size="sm" weight="medium">Label</Text>\n <Text size="xs" color="secondary">Helper text</Text>\n</Stack>`,
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
title: 'Centered content',
|
|
88
|
+
code: `<Stack gap="4" align="center" justify="center" style={{ minHeight: 200 }}>\n <Spinner />\n <Text color="secondary">Loading...</Text>\n</Stack>`,
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
title: 'Semantic nav',
|
|
92
|
+
code: `<Stack as="nav" gap="1">\n <NavLink href="/home">Home</NavLink>\n <NavLink href="/settings">Settings</NavLink>\n</Stack>`,
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
compositionGraph: [],
|
|
96
|
+
accessibility: {
|
|
97
|
+
notes: 'Stack renders a <div> by default, which has no implicit ARIA role. Use the `as` prop to render ' +
|
|
98
|
+
'semantic elements (nav, section, form) when the content has a specific structural purpose. ' +
|
|
99
|
+
'Add aria-label or aria-labelledby when using landmark elements.',
|
|
100
|
+
},
|
|
101
|
+
};
|