lucent-ui 0.9.1 → 0.9.2
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/index.cjs +43 -36
- package/dist/index.d.ts +11 -1
- package/dist/index.js +1540 -1334
- package/dist-server/src/components/molecules/Card/Card.manifest.js +14 -1
- package/package.json +1 -1
|
@@ -4,12 +4,16 @@ export const COMPONENT_MANIFEST = {
|
|
|
4
4
|
tier: 'molecule',
|
|
5
5
|
domain: 'neutral',
|
|
6
6
|
specVersion: '0.1',
|
|
7
|
-
description: 'A surface container with optional header, body, and footer slots, configurable padding, shadow, and radius.',
|
|
7
|
+
description: 'A surface container with optional header, body, and footer slots, configurable padding, shadow, and radius. Includes a CardBleed sub-component for edge-to-edge content.',
|
|
8
8
|
designIntent: 'Card provides a consistent elevated surface for grouping related content. The header and footer slots ' +
|
|
9
9
|
'are separated from the body by a border-default divider, giving visual structure without requiring ' +
|
|
10
10
|
'the consumer to manage spacing. Padding, shadow, and radius are all configurable to accommodate ' +
|
|
11
11
|
'flat/ghost cards, modal-like surfaces, and compact data-dense layouts. The overflow: hidden ensures ' +
|
|
12
12
|
'children respect the border-radius without needing additional clipping.\n\n' +
|
|
13
|
+
'CardBleed is a companion component that allows specific children within the Card body to stretch ' +
|
|
14
|
+
'edge-to-edge, cancelling the horizontal padding via negative margins. Text inside CardBleed stays ' +
|
|
15
|
+
'aligned with the rest of the card content thanks to matching inner padding. Use it for dividers, ' +
|
|
16
|
+
'full-width lists, or bordered sections that need to reach the card edges.\n\n' +
|
|
13
17
|
'Token rule: Card uses surface for its background. Never use bgBase or bgSubtle on a Card — ' +
|
|
14
18
|
'those tokens are reserved for the page canvas (body, sidebar, layout regions). Content nested ' +
|
|
15
19
|
'inside a Card that needs a tinted fill (e.g. a footer, inset panel, or disabled input) should use ' +
|
|
@@ -84,6 +88,15 @@ export const COMPONENT_MANIFEST = {
|
|
|
84
88
|
title: 'Flat variant',
|
|
85
89
|
code: `<Card shadow="none" radius="sm" padding="sm">
|
|
86
90
|
<Text size="sm">Compact flat card</Text>
|
|
91
|
+
</Card>`,
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
title: 'Edge-to-edge content with CardBleed',
|
|
95
|
+
code: `<Card>
|
|
96
|
+
<Text weight="semibold">Settings</Text>
|
|
97
|
+
<CardBleed style={{ borderTop: '1px solid var(--lucent-border-default)', marginTop: 'var(--lucent-space-4)' }}>
|
|
98
|
+
<Text color="secondary">This section stretches to the card edges.</Text>
|
|
99
|
+
</CardBleed>
|
|
87
100
|
</Card>`,
|
|
88
101
|
},
|
|
89
102
|
],
|