@utilitywarehouse/hearth-react 0.28.7 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -20
- package/SKILL.md +355 -0
- package/dist/{chunk-TLCA3FQZ.js → chunk-ABES5BZY.js} +2 -2
- package/dist/{chunk-OHPQ5IRM.cjs → chunk-Y2CHQFKQ.cjs} +2 -2
- package/dist/{chunk-OHPQ5IRM.cjs.map → chunk-Y2CHQFKQ.cjs.map} +1 -1
- package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
- package/dist/components/ProgressBar/ProgressBar.cjs +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +1 -1
- package/dist/helpers/get-classname-styles.d.ts.map +1 -1
- package/dist/helpers/logger.d.ts.map +1 -1
- package/dist/helpers/merge-ids.d.ts.map +1 -1
- package/dist/hooks/use-ids.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +14 -10
- package/public/llms/components/accordion.md +321 -0
- package/public/llms/components/alert.md +217 -0
- package/public/llms/components/avatar.md +112 -0
- package/public/llms/components/badge.md +158 -0
- package/public/llms/components/body-text.md +200 -0
- package/public/llms/components/box.md +148 -0
- package/public/llms/components/breadcrumbs.md +97 -0
- package/public/llms/components/button.md +595 -0
- package/public/llms/components/card-accordion.md +277 -0
- package/public/llms/components/card.md +985 -0
- package/public/llms/components/checkbox-group.md +193 -0
- package/public/llms/components/checkbox-tile.md +116 -0
- package/public/llms/components/checkbox.md +108 -0
- package/public/llms/components/combobox.md +360 -0
- package/public/llms/components/container.md +162 -0
- package/public/llms/components/currency-input.md +85 -0
- package/public/llms/components/date-input.md +90 -0
- package/public/llms/components/date-picker.md +159 -0
- package/public/llms/components/description-list.md +149 -0
- package/public/llms/components/detail-text.md +89 -0
- package/public/llms/components/divider.md +88 -0
- package/public/llms/components/em.md +43 -0
- package/public/llms/components/expandable-card.md +231 -0
- package/public/llms/components/flex.md +197 -0
- package/public/llms/components/grid.md +244 -0
- package/public/llms/components/heading.md +65 -0
- package/public/llms/components/helper-text.md +27 -0
- package/public/llms/components/highlight-banner.md +94 -0
- package/public/llms/components/icon-button.md +516 -0
- package/public/llms/components/icon-container.md +247 -0
- package/public/llms/components/inline-link.md +190 -0
- package/public/llms/components/label.md +28 -0
- package/public/llms/components/link.md +236 -0
- package/public/llms/components/list.md +715 -0
- package/public/llms/components/menu.md +270 -0
- package/public/llms/components/modal.md +328 -0
- package/public/llms/components/pagination.md +138 -0
- package/public/llms/components/password-input.md +93 -0
- package/public/llms/components/progress-bar.md +139 -0
- package/public/llms/components/progress-stepper.md +147 -0
- package/public/llms/components/radio-group.md +487 -0
- package/public/llms/components/search-input.md +132 -0
- package/public/llms/components/section-header.md +82 -0
- package/public/llms/components/select.md +148 -0
- package/public/llms/components/skeleton.md +282 -0
- package/public/llms/components/spinner.md +59 -0
- package/public/llms/components/strong.md +49 -0
- package/public/llms/components/switch.md +106 -0
- package/public/llms/components/table.md +230 -0
- package/public/llms/components/tabs.md +320 -0
- package/public/llms/components/text-area.md +141 -0
- package/public/llms/components/text-input.md +228 -0
- package/public/llms/components/toast.md +323 -0
- package/public/llms/components/toggle-button-card.md +513 -0
- package/public/llms/components/tooltip.md +188 -0
- package/public/llms/components/unstyled-icon-button.md +175 -0
- package/public/llms/components/validation-text.md +29 -0
- package/public/llms/components/verification-input.md +96 -0
- package/public/llms/docs/changelog.md +1430 -0
- package/public/llms/docs/common-props/align-self.md +90 -0
- package/public/llms/docs/common-props/border.md +308 -0
- package/public/llms/docs/common-props/colour.md +221 -0
- package/public/llms/docs/common-props/flex-items.md +91 -0
- package/public/llms/docs/common-props/gap.md +111 -0
- package/public/llms/docs/common-props/grid-items.md +96 -0
- package/public/llms/docs/common-props/margin.md +105 -0
- package/public/llms/docs/common-props/opacity.md +100 -0
- package/public/llms/docs/common-props/order.md +90 -0
- package/public/llms/docs/common-props/overflow.md +89 -0
- package/public/llms/docs/common-props/padding.md +102 -0
- package/public/llms/docs/common-props/position.md +92 -0
- package/public/llms/docs/common-props/size.md +93 -0
- package/public/llms/docs/common-props/spacing.md +97 -0
- package/public/llms/docs/common-props/text.md +35 -0
- package/public/llms/docs/common-props/z-index.md +88 -0
- package/public/llms/docs/design-tokens.md +72 -0
- package/public/llms/docs/getting-started.md +117 -0
- package/public/llms/docs/layout.md +135 -0
- package/public/llms/docs/migrating.md +302 -0
- package/public/llms/docs/responsive-design/breakpoints.md +119 -0
- package/public/llms/docs/responsive-design/media-queries.md +89 -0
- package/public/llms/docs/responsive-design/responsive-props.md +37 -0
- package/public/llms.txt +97 -0
- package/scripts/init-ai.js +142 -0
- package/styles.css +1 -1
- /package/dist/{chunk-TLCA3FQZ.js.map → chunk-ABES5BZY.js.map} +0 -0
package/README.md
CHANGED
|
@@ -10,34 +10,49 @@ changes per minor release kept to a minimum. All breaking changes will be
|
|
|
10
10
|
documented with guidelines for how to update your code, and, if necessary,
|
|
11
11
|
will be accompanied by a codemod.
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## AI Assistant Setup
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
changes from the pull request.
|
|
15
|
+
`@utilitywarehouse/hearth-react` ships with an AI skill file that gives your
|
|
16
|
+
coding assistant deep knowledge of the component library — including component
|
|
17
|
+
APIs, usage patterns, design tokens, and best practices.
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
## Setup
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
After installing the package, run the init command to wire it up for your AI tool:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npx @utilitywarehouse/hearth-react init-ai
|
|
24
25
|
```
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
This detects your AI tool's config file and adds the skill reference automatically.
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
add the following to your `package.json` also:
|
|
29
|
+
### Manual setup
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
If you prefer to add it yourself, append the appropriate line to your project's AI config file:
|
|
32
|
+
|
|
33
|
+
| Tool | Config file | Line to add |
|
|
34
|
+
| --------------------- | --------------------------------- | ------------------------------------------------------------------------------------------ |
|
|
35
|
+
| Claude Code | `CLAUDE.md` | `@node_modules/@utilitywarehouse/hearth-react/SKILL.md` |
|
|
36
|
+
| Cursor | `.cursorrules` | `@node_modules/@utilitywarehouse/hearth-react/SKILL.md` |
|
|
37
|
+
| Windsurf | `.windsurfrules` | `@node_modules/@utilitywarehouse/hearth-react/SKILL.md` |
|
|
38
|
+
| Codex / OpenAI agents | `AGENTS.md` | `See node_modules/@utilitywarehouse/hearth-react/SKILL.md for component usage guidelines.` |
|
|
39
|
+
| GitHub Copilot | `.github/copilot-instructions.md` | `See node_modules/@utilitywarehouse/hearth-react/SKILL.md for component usage guidelines.` |
|
|
40
|
+
| Cline / Roo | `.clinerules` | `@node_modules/@utilitywarehouse/hearth-react/SKILL.md` |
|
|
36
41
|
|
|
37
|
-
|
|
38
|
-
previously.
|
|
42
|
+
## What the skill covers
|
|
39
43
|
|
|
40
|
-
|
|
44
|
+
- Component inventory and when to use each one
|
|
45
|
+
- Props, variants, and composition patterns
|
|
46
|
+
- Design token usage and theming
|
|
47
|
+
- Accessibility requirements and patterns
|
|
48
|
+
- Common mistakes and anti-patterns
|
|
49
|
+
- Migration guidance between versions
|
|
50
|
+
|
|
51
|
+
## Keeping it up to date
|
|
52
|
+
|
|
53
|
+
The skill file is versioned with the package — upgrading
|
|
54
|
+
`@utilitywarehouse/hearth-react` automatically updates the skill. No changes
|
|
55
|
+
needed to your config file after the initial setup.
|
|
41
56
|
|
|
42
57
|
## Figma Code Connect
|
|
43
58
|
|
|
@@ -69,4 +84,3 @@ When you have done this, you can run the following command to publish the compon
|
|
|
69
84
|
```bash
|
|
70
85
|
pnpm exec figma connect publish
|
|
71
86
|
```
|
|
72
|
-
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: hearth-react
|
|
3
|
+
description: Use when building any UI component or page with the Hearth React library. Use this implicitly whenever building any UI component or page in an app that has Hearth React installed — Hearth React is the default. Do not wait for an explicit mention of "Hearth React" — if it's UI work in an app with Hearth React, use this skill. Triggers when creating components, implementing Figma designs, adding UI features, or writing any frontend code in the app.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Building with Hearth React
|
|
7
|
+
|
|
8
|
+
You are acting as a frontend engineer. Your job is to turn requirements—either
|
|
9
|
+
Figma designs or written requirements—into UI React code using Hearth — Utility
|
|
10
|
+
Warehouse's Design Systems libraries.
|
|
11
|
+
|
|
12
|
+
## Package imports
|
|
13
|
+
|
|
14
|
+
| Purpose | Package |
|
|
15
|
+
| ---------------------- | -------------------------------------- |
|
|
16
|
+
| Components | `@utilitywarehouse/hearth-react` |
|
|
17
|
+
| Icons | `@utilitywarehouse/hearth-react-icons` |
|
|
18
|
+
| SVG illustrations | `@utilitywarehouse/hearth-svg-assets` |
|
|
19
|
+
| Animated illustrations | `@utilitywarehouse/hearth-json-assets` |
|
|
20
|
+
|
|
21
|
+
## Before you implement: discover what exists
|
|
22
|
+
|
|
23
|
+
There are 2 options for discovering existing components and documentation:
|
|
24
|
+
|
|
25
|
+
- MCP server: `hearth-react` MCP hosted on a remote URL
|
|
26
|
+
- Raw markdown files: located in the `public` folder of the `hearth-react` package
|
|
27
|
+
|
|
28
|
+
**Default to the raw markdown files.** They are local, always available, and
|
|
29
|
+
version-matched to what the app actually has installed — so the API you read is
|
|
30
|
+
the API you get.
|
|
31
|
+
|
|
32
|
+
**Use the MCP server for richer exploration** — searching across components,
|
|
33
|
+
fetching story code, or discovering what exists when you're not sure where to
|
|
34
|
+
start. It's worth reaching for when the markdown files don't give you enough
|
|
35
|
+
context, but it requires the server to be configured and reachable.
|
|
36
|
+
|
|
37
|
+
Whatever source you use, review what is available before writing any code.
|
|
38
|
+
|
|
39
|
+
The library is broad — always check whether an existing component covers the
|
|
40
|
+
need before implementing anything custom.
|
|
41
|
+
|
|
42
|
+
### Raw markdown files
|
|
43
|
+
|
|
44
|
+
Full component API reference is available in:
|
|
45
|
+
|
|
46
|
+
- `node_modules/@utilitywarehouse/hearth-react/public/llms/components/` — one file per component
|
|
47
|
+
- `node_modules/@utilitywarehouse/hearth-react/public/llms/docs/` — design tokens, layout, responsive design, getting started
|
|
48
|
+
- `node_modules/@utilitywarehouse/hearth-react/public/llms.txt` — index of all available docs
|
|
49
|
+
|
|
50
|
+
### MCP Server
|
|
51
|
+
|
|
52
|
+
You can use the **`hearth-react`** MCP server if available:
|
|
53
|
+
|
|
54
|
+
1. `list-all-documentation` — get an index of all Hearth React components
|
|
55
|
+
2. `get-documentation` — get props, API, and usage examples for a specific component
|
|
56
|
+
3. `get-documentation-for-story` — get story code and docs for a specific story
|
|
57
|
+
|
|
58
|
+
## Plan before writing
|
|
59
|
+
|
|
60
|
+
For anything beyond a trivial change — a new page, a multi-component feature, an
|
|
61
|
+
unfamiliar part of the codebase — share a brief plan before writing code:
|
|
62
|
+
|
|
63
|
+
- Which Hearth components you'll use and why
|
|
64
|
+
- Any local components you'll need
|
|
65
|
+
- The output folder/file structure
|
|
66
|
+
- Any decisions where multiple reasonable options exist
|
|
67
|
+
|
|
68
|
+
For small, self-contained tasks (adding a button, tweaking a layout) you can
|
|
69
|
+
proceed directly. Use your judgement: if you'd want sign-off as a developer
|
|
70
|
+
pairing with someone, ask for it here too.
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
# Principles
|
|
75
|
+
|
|
76
|
+
1. **Use Hearth React.** (`@utilitywarehouse/hearth-react`) This is the default
|
|
77
|
+
component library for Utility Warehouse web applications. Use it for all UI
|
|
78
|
+
work unless explicitly told otherwise.
|
|
79
|
+
2. **Use available components first.** Check documentation for what is available
|
|
80
|
+
before writing custom UI, or using native HTML elements.
|
|
81
|
+
3. **Compose, don't reinvent.** Most pages can be built by composing existing
|
|
82
|
+
layout and UI components and utilising style props. Only create new
|
|
83
|
+
components or custom styles when absolutely necessary.
|
|
84
|
+
4. **Use built-in variants and style props, before custom styles.**
|
|
85
|
+
`variant="outline"`, `size="sm"`, `padding="200"`, `borderRadius="lg"` — only
|
|
86
|
+
use custom styles if these don't achieve the desired result.
|
|
87
|
+
5. **Use semantic colors.** `semantic.background.primary`, `semantic.text.brand`
|
|
88
|
+
— never raw values like `color.energyblue[500]`.
|
|
89
|
+
6. **CSS tokens for CSS files, Browser tokens for JS/TS/JSX/TSX files.** Do not
|
|
90
|
+
import and use JS tokens for UI, only if needed for calculations.
|
|
91
|
+
7. **Space tokens are for spacing only** — do not use tokens like `200` or `400`
|
|
92
|
+
for `width`, `height`, or font sizes
|
|
93
|
+
|
|
94
|
+
# Critical Rules
|
|
95
|
+
|
|
96
|
+
## Use layout components
|
|
97
|
+
|
|
98
|
+
Use layout components to structure and space content. Do not add margin to
|
|
99
|
+
individual UI elements to achieve spacing — keep spacing decisions at the layout
|
|
100
|
+
level so UI components stay composable.
|
|
101
|
+
|
|
102
|
+
Four layout primitives, all built on design tokens:
|
|
103
|
+
|
|
104
|
+
| Component | Use for |
|
|
105
|
+
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
106
|
+
| `Box` | Generic block container; supports all style props; spacing, sizing, colour, flex/grid child behaviour, show/hide responsively etc. |
|
|
107
|
+
| `Flex` | Flexbox layouts — rows, columns, centring, wrapping |
|
|
108
|
+
| `Grid` | Grid layouts — columns and rows |
|
|
109
|
+
| `Container` | Page-width container with responsive gutters and vertical spacing |
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
// Flex column with responsive gap
|
|
113
|
+
<Flex direction="column" gap={{ mobile: '200', desktop: '400' }}>
|
|
114
|
+
<Heading>Title</Heading>
|
|
115
|
+
<BodyText>Content</BodyText>
|
|
116
|
+
</Flex>
|
|
117
|
+
|
|
118
|
+
// Grid with responsive columns
|
|
119
|
+
<Grid defaultResponsiveColumns gap="200">
|
|
120
|
+
<Box gridColumnSpan={{ mobile: '4', tablet: '4', desktop: '6' }}>...</Box>
|
|
121
|
+
<Box gridColumnSpan={{ mobile: '4', tablet: '4', desktop: '6' }}>...</Box>
|
|
122
|
+
</Grid>
|
|
123
|
+
|
|
124
|
+
// Box to hide on mobile, show on tablet+
|
|
125
|
+
<Box display={{ mobile: 'none', tablet: 'block' }}>Desktop only</Box>
|
|
126
|
+
|
|
127
|
+
// Page container
|
|
128
|
+
<Container spacing="xl">...</Container>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Use `gap` on the parent container to space children. For distribution and alignment, use
|
|
132
|
+
`justifyContent`/`alignItems` on a Flex wrapper. Don't put `margin` on individual sibling
|
|
133
|
+
components or wrap them in an extra `Box` just for positioning.
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
// ❌ WRONG — margin for spacing
|
|
137
|
+
<Flex>
|
|
138
|
+
<Button marginRight="100">Cancel</Button>
|
|
139
|
+
<Button>Submit</Button>
|
|
140
|
+
</Flex>
|
|
141
|
+
|
|
142
|
+
// ✅ CORRECT — gap on parent
|
|
143
|
+
<Flex gap="100">
|
|
144
|
+
<Button>Cancel</Button>
|
|
145
|
+
<Button>Submit</Button>
|
|
146
|
+
</Flex>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// ❌ WRONG — margin hack for alignment
|
|
151
|
+
<Flex>
|
|
152
|
+
<BodyText>Summary</BodyText>
|
|
153
|
+
<Button marginLeft="auto">Edit</Button>
|
|
154
|
+
</Flex>
|
|
155
|
+
|
|
156
|
+
// ✅ CORRECT — justifyContent on the Flex wrapper
|
|
157
|
+
<Flex justifyContent="space-between" alignItems="center">
|
|
158
|
+
<BodyText>Summary</BodyText>
|
|
159
|
+
<Button variant="ghost" colorScheme="functional">Edit</Button>
|
|
160
|
+
</Flex>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Use predefined responsive spacing values when specified in design
|
|
164
|
+
|
|
165
|
+
When layout, padding, or margin are defined in a Figma design using a `spacing`
|
|
166
|
+
value, use the built-in `spacing` prop; do not replace it with responsive `gap`
|
|
167
|
+
values. If spacing is not explicitly defined in the design, or specified by the
|
|
168
|
+
user, use `gap` for spacing between elements; if unsure, check with the user.
|
|
169
|
+
|
|
170
|
+
## Use style props first
|
|
171
|
+
|
|
172
|
+
Style props are the primary way to apply styling. In most cases they map
|
|
173
|
+
directly to design tokens — prefer them over raw CSS values.
|
|
174
|
+
|
|
175
|
+
Check the common props documentation and component reference files for available
|
|
176
|
+
style props.
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
// ✅ CORRECT
|
|
180
|
+
<Box padding="200" />
|
|
181
|
+
<Flex gap="300" />
|
|
182
|
+
<Box marginBottom="400" />
|
|
183
|
+
<Box backgroundColor="primary" />
|
|
184
|
+
|
|
185
|
+
// ❌ WRONG — "3" is not a valid token (the token is "300")
|
|
186
|
+
<Flex gap="3" />
|
|
187
|
+
// ❌ WRONG — numeric values are not valid
|
|
188
|
+
<Flex gap={3} />
|
|
189
|
+
// ❌ WRONG — raw px values bypass the token system
|
|
190
|
+
<Box style={{ padding: '16px' }} />
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
Token strings map to CSS custom properties: `"200"` → `var(--h-space-200)`.
|
|
194
|
+
|
|
195
|
+
## Browser tokens in JS/TS, CSS variables in CSS
|
|
196
|
+
|
|
197
|
+
When using token values from hearth-tokens, only use browser tokens in
|
|
198
|
+
JavaScript/JSX/TypeScript/TSX code, including when using styled components. CSS
|
|
199
|
+
variables should only be used in CSS. When using browser tokens, always check
|
|
200
|
+
the token exists in the `@utilitywarehouse/hearth-tokens/browser` package before
|
|
201
|
+
using it.
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
// ✅ CORRECT
|
|
205
|
+
import { semantic, border, space } from '@utilitywarehouse/hearth-tokens/browser';
|
|
206
|
+
|
|
207
|
+
const CardHighlightHeader = styled(Box)({
|
|
208
|
+
backgroundColor: semantic.surface.highlight.subtle,
|
|
209
|
+
borderBottom: `${border.width[2]} solid ${semantic.border.strong}`,
|
|
210
|
+
padding: space[200],
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
// ❌ WRONG — Don't use CSS variables in JS/JSX/TS/TSX code, use browser tokens instead
|
|
214
|
+
const CardHighlightHeader = styled(Box)({
|
|
215
|
+
backgroundColor: 'var(--h-surface-highlight-subtle)',
|
|
216
|
+
borderBottom: '2px solid var(--h-border-strong)',
|
|
217
|
+
padding: 'var(--h-space-200)',
|
|
218
|
+
});
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
## CSS variables in `.css` files
|
|
222
|
+
|
|
223
|
+
CSS custom properties are always in scope from the `hearth-react` stylesheet —
|
|
224
|
+
no import needed.
|
|
225
|
+
|
|
226
|
+
```css
|
|
227
|
+
.myComponent {
|
|
228
|
+
padding: var(--h-spacing-200);
|
|
229
|
+
color: var(--h-color-brand-purple-500);
|
|
230
|
+
border-radius: var(--h-border-radius-md);
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
## Responsive props
|
|
235
|
+
|
|
236
|
+
Many props accept a `Responsive` object with breakpoint keys. Breakpoints are
|
|
237
|
+
**mobile-first**: a value applies from that breakpoint upward until overridden.
|
|
238
|
+
|
|
239
|
+
Breakpoints: `mobile` | `tablet` | `desktop` | `wide`
|
|
240
|
+
|
|
241
|
+
```tsx
|
|
242
|
+
// All four breakpoints
|
|
243
|
+
<Box padding={{ mobile: '100', tablet: '200', desktop: '300', wide: '400' }} />
|
|
244
|
+
|
|
245
|
+
// Only specify breakpoints that change — mobile-first means smaller values cascade up
|
|
246
|
+
<Box padding={{ mobile: '100', desktop: '200' }} /> // tablet inherits mobile value
|
|
247
|
+
|
|
248
|
+
// Responsive direction and gap
|
|
249
|
+
<Flex
|
|
250
|
+
direction={{ mobile: 'column', tablet: 'row' }}
|
|
251
|
+
gap={{ mobile: '200', desktop: '400' }}
|
|
252
|
+
>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
**Never omit `mobile`** when using a responsive prop object — values don't cascade down
|
|
256
|
+
from larger breakpoints. An object without `mobile` applies nothing at mobile size.
|
|
257
|
+
|
|
258
|
+
```tsx
|
|
259
|
+
// ❌ WRONG — no style applied at mobile
|
|
260
|
+
<Flex direction={{ tablet: 'column' }} />
|
|
261
|
+
|
|
262
|
+
// ✅ CORRECT
|
|
263
|
+
<Flex direction={{ mobile: 'row', tablet: 'column' }} />
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
## Use asChild to change the underlying HTML element without breaking semantics
|
|
267
|
+
|
|
268
|
+
`asChild` clones the child element and forwards all props and behaviour onto it, using the
|
|
269
|
+
Radix Slot pattern. Use it to change the underlying HTML element without breaking semantics.
|
|
270
|
+
|
|
271
|
+
```tsx
|
|
272
|
+
// ✅ CORRECT - Button that renders as a Next.js Link (correct HTML — one <a> element)
|
|
273
|
+
import NextLink from 'next/link';
|
|
274
|
+
<Button asChild variant="solid" colorScheme="highlight">
|
|
275
|
+
<NextLink href="/next-page">Continue</NextLink>
|
|
276
|
+
</Button>
|
|
277
|
+
|
|
278
|
+
// ❌ WRONG — Without asChild — <button> wrapping <a>, invalid HTML
|
|
279
|
+
<Button variant="solid" colorScheme="highlight">
|
|
280
|
+
<NextLink href="/next-page">Continue</NextLink>
|
|
281
|
+
</Button>
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
Box, Flex, and Grid default to `div`. If you need a `span` (e.g., inside a paragraph):
|
|
285
|
+
|
|
286
|
+
```tsx
|
|
287
|
+
// ❌ WRONG — renders a div inside a paragraph
|
|
288
|
+
<BodyText>Click <Box className="highlight">here</Box></BodyText>
|
|
289
|
+
|
|
290
|
+
// ✅ CORRECT
|
|
291
|
+
<BodyText>Click <Box as="span" className="highlight">here</Box></BodyText>
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
To apply style props to an element that doesn't natively support them, use `Box`
|
|
295
|
+
& `asChild`. This avoids adding an extra DOM node.
|
|
296
|
+
|
|
297
|
+
```tsx
|
|
298
|
+
<Box asChild padding="300">
|
|
299
|
+
<section>...</section>
|
|
300
|
+
</Box>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
You can also use this pattern to apply styles to Hearth React and custom
|
|
304
|
+
components.
|
|
305
|
+
|
|
306
|
+
## Compound components
|
|
307
|
+
|
|
308
|
+
Many components have sub-components that must be used together. Read the
|
|
309
|
+
reference file before composing. Examples:
|
|
310
|
+
|
|
311
|
+
- `Card` → `CardContent`, `CardActions`, `CardActionLink`
|
|
312
|
+
- `Modal` → `ModalRoot`, `ModalTrigger`, `ModalContent`, `ModalFooter`, `ModalClose`
|
|
313
|
+
- `Accordion` → `AccordionItem`, `AccordionTrigger`, `AccordionContent`
|
|
314
|
+
|
|
315
|
+
### Accessibility
|
|
316
|
+
|
|
317
|
+
Accessibility is not optional — the UW product is used by customers across a
|
|
318
|
+
wide range of abilities, and assistive technology support is a product
|
|
319
|
+
requirement. Hearth wires ARIA where it can, so in most cases you just need to
|
|
320
|
+
use the components correctly and avoid undermining what they do. Concretely:
|
|
321
|
+
|
|
322
|
+
- Always set `as` on `Heading` for correct semantic hierarchy
|
|
323
|
+
- Add `title` + `titleId` to standalone icons, not decorative ones
|
|
324
|
+
- Use `asChild` to avoid wrapper elements when a specific HTML element is needed
|
|
325
|
+
- Use a `null` alt tag on images that are purely decorative
|
|
326
|
+
|
|
327
|
+
## Common patterns
|
|
328
|
+
|
|
329
|
+
### Full-width button on mobile, auto-width on desktop
|
|
330
|
+
|
|
331
|
+
Control `Button` width with parent layout components.
|
|
332
|
+
|
|
333
|
+
```tsx
|
|
334
|
+
<Flex direction="column" alignItems={{ mobile: 'stretch', desktop: 'start' }}>
|
|
335
|
+
<Button variant="solid" colorScheme="highlight">
|
|
336
|
+
Submit
|
|
337
|
+
</Button>
|
|
338
|
+
</Flex>
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
## Responsive two-column grid
|
|
342
|
+
|
|
343
|
+
```tsx
|
|
344
|
+
<Grid defaultResponsiveColumns gap={{ mobile: '200', desktop: '400' }}>
|
|
345
|
+
<Box gridColumnSpan={{ mobile: '4', tablet: '4', desktop: '6' }}>
|
|
346
|
+
<BodyText>Column one</BodyText>
|
|
347
|
+
</Box>
|
|
348
|
+
<Box gridColumnSpan={{ mobile: '4', tablet: '4', desktop: '6' }}>
|
|
349
|
+
<BodyText>Column two</BodyText>
|
|
350
|
+
</Box>
|
|
351
|
+
</Grid>
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
`defaultResponsiveColumns` sets 4 columns on mobile, 8 on tablet, 12 on desktop+wide.
|
|
355
|
+
`gridColumnSpan` takes a string value from `'1'` to `'12'`.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import{a as
|
|
4
|
-
//# sourceMappingURL=chunk-
|
|
3
|
+
import{a as B}from"./chunk-TX5FO3XR.js";import{a as v}from"./chunk-SDUTFZGJ.js";import{a as g}from"./chunk-7YDX3DDW.js";import{a as u}from"./chunk-KBX2N5VR.js";import{a as P}from"./chunk-7X24J4CX.js";import{a as d}from"./chunk-32MOX6DL.js";import{a as f}from"./chunk-UWZUYMW4.js";import{a as n}from"./chunk-J3AJBV4B.js";import{b as c}from"./chunk-PDEVCIQ3.js";import{forwardRef as R}from"react";import{jsx as b,jsxs as I}from"react/jsx-runtime";var N="ProgressBar",x=c(N),D=R((h,y)=>{let{className:C,variant:o="linear",colorScheme:s="default",value:T,min:e=0,max:r=100,label:E,formatValueText:t,"aria-valuetext":M,hideLabel:V,...w}=f(h,g,u),{labelId:l}=P({prefix:"progress"}),a=s==="success"?r:Math.max(e,Math.min(T,r)),m=d(a,e,r),i=t?t(a):`${m}%`,p={value:m,label:E,valueText:i,labelId:l,hideLabel:V};return I("div",{ref:y,className:n(x,C),role:"progressbar","aria-valuenow":a,"aria-valuemin":e,"aria-valuemax":r,"aria-valuetext":M||i,"aria-labelledby":l,"data-colorscheme":s,"data-testid":x,...w,children:[o==="linear"?b(v,{...p}):null,o==="circular"?b(B,{...p}):null]})});D.displayName=N;export{D as a};
|
|
4
|
+
//# sourceMappingURL=chunk-ABES5BZY.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
//# sourceMappingURL=chunk-
|
|
3
|
+
var _chunkAJM56WHOcjs = require('./chunk-AJM56WHO.cjs');var _chunkQNOIUXC5cjs = require('./chunk-QNOIUXC5.cjs');var _chunkQIHDQL6Qcjs = require('./chunk-QIHDQL6Q.cjs');var _chunkHI7GZDRAcjs = require('./chunk-HI7GZDRA.cjs');var _chunkRIHABKWYcjs = require('./chunk-RIHABKWY.cjs');var _chunkEDOOI4SYcjs = require('./chunk-EDOOI4SY.cjs');var _chunkMV7VYPO6cjs = require('./chunk-MV7VYPO6.cjs');var _chunkONNSZMWFcjs = require('./chunk-ONNSZMWF.cjs');var _chunk4Q432K4Wcjs = require('./chunk-4Q432K4W.cjs');var _react = require('react');var _jsxruntime = require('react/jsx-runtime');var N="ProgressBar",x=_chunk4Q432K4Wcjs.b.call(void 0, N),D= exports.a =_react.forwardRef.call(void 0, (h,y)=>{let{className:C,variant:o="linear",colorScheme:s="default",value:T,min:e=0,max:r=100,label:E,formatValueText:t,"aria-valuetext":M,hideLabel:V,...w}=_chunkMV7VYPO6cjs.a.call(void 0, h,_chunkQIHDQL6Qcjs.a,_chunkHI7GZDRAcjs.a),{labelId:l}=_chunkRIHABKWYcjs.a.call(void 0, {prefix:"progress"}),a=s==="success"?r:Math.max(e,Math.min(T,r)),m=_chunkEDOOI4SYcjs.a.call(void 0, a,e,r),i=t?t(a):`${m}%`,p={value:m,label:E,valueText:i,labelId:l,hideLabel:V};return _jsxruntime.jsxs.call(void 0, "div",{ref:y,className:_chunkONNSZMWFcjs.a.call(void 0, x,C),role:"progressbar","aria-valuenow":a,"aria-valuemin":e,"aria-valuemax":r,"aria-valuetext":M||i,"aria-labelledby":l,"data-colorscheme":s,"data-testid":x,...w,children:[o==="linear"?_jsxruntime.jsx.call(void 0, _chunkQNOIUXC5cjs.a,{...p}):null,o==="circular"?_jsxruntime.jsx.call(void 0, _chunkAJM56WHOcjs.a,{...p}):null]})});D.displayName=N;exports.a = D;
|
|
4
|
+
//# sourceMappingURL=chunk-Y2CHQFKQ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/hearth/hearth/packages/react/dist/chunk-Y2CHQFKQ.cjs","../src/components/ProgressBar/ProgressBar.tsx"],"names":["COMPONENT_NAME","componentClassName","withGlobalPrefix","ProgressBar","forwardRef","props","ref","className","variant","colorScheme","value","min","max","label","formatValueText","ariaValueText","hideLabel","progressBarProps","extractProps","progressBarPropDefs","marginPropDefs","labelId","useIds","effectiveValue","percentValue","valueToPercent","valueText"],"mappings":"AAAA,qFAAY;AACZ;AACA,wDAAwC,wDAAyC,wDAAyC,wDAAyC,wDAAyC,wDAAyC,wDAAyC,wDAAyC,wDAAyC,8BCUrV,+CA0CvB,IAvCEA,CAAAA,CAAiB,aAAA,CACjBC,CAAAA,CAAqBC,iCAAAA,CAA+B,CAAA,CAI7CC,CAAAA,aAAcC,+BAAAA,CAAkDC,CAAAA,CAAOC,CAAAA,CAAAA,EAAQ,CAC1F,GAAM,CACJ,SAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CAAU,QAAA,CACV,WAAA,CAAAC,CAAAA,CAAc,SAAA,CACd,KAAA,CAAAC,CAAAA,CACA,GAAA,CAAAC,CAAAA,CAAM,CAAA,CACN,GAAA,CAAAC,CAAAA,CAAM,GAAA,CACN,KAAA,CAAAC,CAAAA,CACA,eAAA,CAAAC,CAAAA,CACA,gBAAA,CAAkBC,CAAAA,CAClB,SAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,CAAA,CAAIC,iCAAAA,CAAab,CAAOc,mBAAAA,CAAqBC,mBAAc,CAAA,CAErD,CAAE,OAAA,CAAAC,CAAQ,CAAA,CAAIC,iCAAAA,CAAS,MAAA,CAAQ,UAAW,CAAC,CAAA,CAI3CC,CAAAA,CAAiBd,CAAAA,GAAgB,SAAA,CAAYG,CAAAA,CAAM,IAAA,CAAK,GAAA,CAAID,CAAAA,CAAK,IAAA,CAAK,GAAA,CAAID,CAAAA,CAAOE,CAAG,CAAC,CAAA,CAErFY,CAAAA,CAAeC,iCAAAA,CAAeF,CAAgBZ,CAAAA,CAAKC,CAAG,CAAA,CAEtDc,CAAAA,CAAYZ,CAAAA,CAAkBA,CAAAA,CAAgBS,CAAc,CAAA,CAAI,CAAA,EAAA","file":"/home/runner/work/hearth/hearth/packages/react/dist/chunk-Y2CHQFKQ.cjs","sourcesContent":[null,"'use client';\n\nimport { cn } from '../../helpers/cn';\nimport { withGlobalPrefix } from '../../helpers/with-global-prefix';\nimport { extractProps } from '../../helpers/extract-props';\nimport { marginPropDefs } from '../../props/margin.props';\nimport { progressBarPropDefs } from './ProgressBar.props';\nimport type { ProgressBarProps } from './ProgressBar.props';\nimport { ProgressBarLinear } from './ProgressBarLinear';\nimport { valueToPercent } from '../../helpers/value-to-percent';\nimport { useIds } from '../../hooks/use-ids';\nimport { ProgressBarCircular } from './ProgressBarCircular';\nimport { forwardRef } from 'react';\nimport type { ComponentRef } from 'react';\n\nconst COMPONENT_NAME = 'ProgressBar';\nconst componentClassName = withGlobalPrefix(COMPONENT_NAME);\n\ntype ProgressBarElement = ComponentRef<'div'>;\n\nexport const ProgressBar = forwardRef<ProgressBarElement, ProgressBarProps>((props, ref) => {\n const {\n className,\n variant = 'linear',\n colorScheme = 'default',\n value,\n min = 0,\n max = 100,\n label,\n formatValueText,\n 'aria-valuetext': ariaValueText,\n hideLabel,\n ...progressBarProps\n } = extractProps(props, progressBarPropDefs, marginPropDefs);\n\n const { labelId } = useIds({ prefix: 'progress' });\n\n // Determine the logical value based on status\n // If 'success', we force 100% (max); otherwise, we clamp the actual value.\n const effectiveValue = colorScheme === 'success' ? max : Math.max(min, Math.min(value, max));\n // Get the whole number percentage\n const percentValue = valueToPercent(effectiveValue, min, max);\n // Determine the text display\n const valueText = formatValueText ? formatValueText(effectiveValue) : `${percentValue}%`;\n\n const internalProgressBarProps = {\n value: percentValue,\n label,\n valueText,\n labelId,\n hideLabel,\n };\n\n return (\n <div\n ref={ref}\n className={cn(componentClassName, className)}\n role=\"progressbar\"\n aria-valuenow={effectiveValue}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuetext={ariaValueText || valueText}\n aria-labelledby={labelId}\n data-colorscheme={colorScheme}\n data-testid={componentClassName}\n {...progressBarProps}\n >\n {variant === 'linear' ? <ProgressBarLinear {...internalProgressBarProps} /> : null}\n {variant === 'circular' ? <ProgressBarCircular {...internalProgressBarProps} /> : null}\n </div>\n );\n});\n\nProgressBar.displayName = COMPONENT_NAME;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardAccordion.context.d.ts","sourceRoot":"","sources":["../../../src/components/CardAccordion/CardAccordion.context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC9D,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,gEAAkE,CAAC;AAEpG,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"CardAccordion.context.d.ts","sourceRoot":"","sources":["../../../src/components/CardAccordion/CardAccordion.context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACtE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC9D,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,gEAAkE,CAAC;AAEpG,eAAO,MAAM,qBAAqB,GAAI,sDAKnC;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,4CAoCA,CAAC;AAEF,eAAO,MAAM,gBAAgB,iCAM5B,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
"use client";var _chunkCLJ4WATDcjs = require('../../chunk-CLJ4WATD.cjs');require('../../chunk-TFBOTZBI.cjs');require('../../chunk-FSSCKU3Y.cjs');require('../../chunk-QASA33PK.cjs');require('../../chunk-
|
|
3
|
+
"use client";var _chunkCLJ4WATDcjs = require('../../chunk-CLJ4WATD.cjs');require('../../chunk-TFBOTZBI.cjs');require('../../chunk-FSSCKU3Y.cjs');require('../../chunk-QASA33PK.cjs');require('../../chunk-R7JGZXZ7.cjs');require('../../chunk-LYHXMFNX.cjs');require('../../chunk-JS6RPUT5.cjs');require('../../chunk-TVVHDQIW.cjs');require('../../chunk-WLF7IHWP.cjs');require('../../chunk-XND7IASV.cjs');require('../../chunk-NONBWXLG.cjs');require('../../chunk-TZC7VV6Q.cjs');require('../../chunk-3LILTOSK.cjs');require('../../chunk-RZCMHO55.cjs');require('../../chunk-HXU2WP2D.cjs');require('../../chunk-HI7GZDRA.cjs');require('../../chunk-SLQGPZQG.cjs');require('../../chunk-K7DZ64UC.cjs');require('../../chunk-LLSM7RUP.cjs');require('../../chunk-C7MGXYJV.cjs');require('../../chunk-Y3LG2TQD.cjs');require('../../chunk-ON67HB3Z.cjs');require('../../chunk-IBAWC5PZ.cjs');require('../../chunk-YXZUIAEJ.cjs');require('../../chunk-JIOYPZ76.cjs');require('../../chunk-3MENRMUM.cjs');require('../../chunk-JI3B3RZQ.cjs');require('../../chunk-X74TIAAW.cjs');require('../../chunk-IJ5FOSMX.cjs');require('../../chunk-DYPN6YUP.cjs');require('../../chunk-KO262ZYV.cjs');require('../../chunk-M4J4J2PD.cjs');require('../../chunk-QYZWAV35.cjs');require('../../chunk-H2UGCCK3.cjs');require('../../chunk-PEK32LCD.cjs');require('../../chunk-PF66C53N.cjs');require('../../chunk-MV7VYPO6.cjs');require('../../chunk-3JGXAGA3.cjs');require('../../chunk-ONNSZMWF.cjs');require('../../chunk-JZ25MWK4.cjs');require('../../chunk-NCWQKNBN.cjs');require('../../chunk-4Q432K4W.cjs');require('../../chunk-YTWPY5YH.cjs');require('../../chunk-VG6TEMXX.cjs');exports.ExpandableCard = _chunkCLJ4WATDcjs.a;
|
|
4
4
|
//# sourceMappingURL=ExpandableCard.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
"use client";import{a}from"../../chunk-AP7MZWTH.js";import"../../chunk-LMTMAERO.js";import"../../chunk-VDDGHMVO.js";import"../../chunk-SIGMDWZB.js";import"../../chunk-
|
|
3
|
+
"use client";import{a}from"../../chunk-AP7MZWTH.js";import"../../chunk-LMTMAERO.js";import"../../chunk-VDDGHMVO.js";import"../../chunk-SIGMDWZB.js";import"../../chunk-TNRHOO5R.js";import"../../chunk-P22N5ZWP.js";import"../../chunk-EMSTAFTP.js";import"../../chunk-GIHKXHC4.js";import"../../chunk-UQQDP4AB.js";import"../../chunk-4GHTI3AF.js";import"../../chunk-EMHUBNCX.js";import"../../chunk-WTIWKIHP.js";import"../../chunk-YLFIGDDW.js";import"../../chunk-QYM256EH.js";import"../../chunk-I3ZPPVMC.js";import"../../chunk-KBX2N5VR.js";import"../../chunk-BNI7YI3P.js";import"../../chunk-SBBW7ATB.js";import"../../chunk-BTAM2LOC.js";import"../../chunk-UFFVTQ5Q.js";import"../../chunk-Q3P6FLFE.js";import"../../chunk-W7T3GEHF.js";import"../../chunk-4HMFDKPP.js";import"../../chunk-B2NZFXUU.js";import"../../chunk-GJWSFJK7.js";import"../../chunk-O4TEFQDC.js";import"../../chunk-3UW4VBYZ.js";import"../../chunk-SBMUJGKK.js";import"../../chunk-IIJPWR54.js";import"../../chunk-TVLZJN3R.js";import"../../chunk-RH5FXMPM.js";import"../../chunk-ZLYH3KFV.js";import"../../chunk-AQQUAVLF.js";import"../../chunk-WNJK4JDH.js";import"../../chunk-TY7CLZHO.js";import"../../chunk-CU7FTKBX.js";import"../../chunk-UWZUYMW4.js";import"../../chunk-7PGIEYDD.js";import"../../chunk-J3AJBV4B.js";import"../../chunk-MHDXUNFS.js";import"../../chunk-JH7NHQH7.js";import"../../chunk-PDEVCIQ3.js";import"../../chunk-4O5VTIJK.js";import"../../chunk-TBXNDML6.js";export{a as ExpandableCard};
|
|
4
4
|
//# sourceMappingURL=ExpandableCard.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
|
|
2
2
|
|
|
3
|
-
"use client";var
|
|
3
|
+
"use client";var _chunkY2CHQFKQcjs = require('../../chunk-Y2CHQFKQ.cjs');require('../../chunk-AJM56WHO.cjs');require('../../chunk-QNOIUXC5.cjs');require('../../chunk-ORRNPJTP.cjs');require('../../chunk-MAI4XPIG.cjs');require('../../chunk-QIHDQL6Q.cjs');require('../../chunk-TVVHDQIW.cjs');require('../../chunk-WLF7IHWP.cjs');require('../../chunk-NONBWXLG.cjs');require('../../chunk-TZC7VV6Q.cjs');require('../../chunk-3LILTOSK.cjs');require('../../chunk-HI7GZDRA.cjs');require('../../chunk-3MENRMUM.cjs');require('../../chunk-IJ5FOSMX.cjs');require('../../chunk-RIHABKWY.cjs');require('../../chunk-EDOOI4SY.cjs');require('../../chunk-MV7VYPO6.cjs');require('../../chunk-3JGXAGA3.cjs');require('../../chunk-ONNSZMWF.cjs');require('../../chunk-JZ25MWK4.cjs');require('../../chunk-NCWQKNBN.cjs');require('../../chunk-4Q432K4W.cjs');require('../../chunk-YTWPY5YH.cjs');require('../../chunk-VG6TEMXX.cjs');exports.ProgressBar = _chunkY2CHQFKQcjs.a;
|
|
4
4
|
//# sourceMappingURL=ProgressBar.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
"use client";import{a}from"../../chunk-
|
|
3
|
+
"use client";import{a}from"../../chunk-ABES5BZY.js";import"../../chunk-TX5FO3XR.js";import"../../chunk-SDUTFZGJ.js";import"../../chunk-ZLDV7EGY.js";import"../../chunk-QQQEB3QI.js";import"../../chunk-7YDX3DDW.js";import"../../chunk-GIHKXHC4.js";import"../../chunk-UQQDP4AB.js";import"../../chunk-EMHUBNCX.js";import"../../chunk-WTIWKIHP.js";import"../../chunk-YLFIGDDW.js";import"../../chunk-KBX2N5VR.js";import"../../chunk-O4TEFQDC.js";import"../../chunk-IIJPWR54.js";import"../../chunk-7X24J4CX.js";import"../../chunk-32MOX6DL.js";import"../../chunk-UWZUYMW4.js";import"../../chunk-7PGIEYDD.js";import"../../chunk-J3AJBV4B.js";import"../../chunk-MHDXUNFS.js";import"../../chunk-JH7NHQH7.js";import"../../chunk-PDEVCIQ3.js";import"../../chunk-4O5VTIJK.js";import"../../chunk-TBXNDML6.js";export{a as ProgressBar};
|
|
4
4
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-classname-styles.d.ts","sourceRoot":"","sources":["../../src/helpers/get-classname-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKnE;;GAEG;AACH,KAAK,yBAAyB,GAAG;IAC/B;;;;;OAKG;IACH,KAAK,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,EAAE,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"get-classname-styles.d.ts","sourceRoot":"","sources":["../../src/helpers/get-classname-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKnE;;GAEG;AACH,KAAK,yBAAyB,GAAG;IAC/B;;;;;OAKG;IACH,KAAK,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC;IAC/C;;OAEG;IACH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,EAAE,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,SAAS,CAAC;IACnD;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,eAAO,MAAM,kBAAkB,GAAI,wDAMhC,yBAAyB;;;;;;;;aAkF3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/helpers/logger.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/helpers/logger.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,GAAI,WAAW,OAAO,EAAE,SAAS,MAAM,SAIvD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-ids.d.ts","sourceRoot":"","sources":["../../src/helpers/merge-ids.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"merge-ids.d.ts","sourceRoot":"","sources":["../../src/helpers/merge-ids.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,GAAI,GAAG,KAAK,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,uBAQzD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-ids.d.ts","sourceRoot":"","sources":["../../src/hooks/use-ids.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"use-ids.d.ts","sourceRoot":"","sources":["../../src/hooks/use-ids.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,GAAI,0GAMpB,WAAW;;;;;CASb,CAAC"}
|