@bcgov/design-system-react-components 0.8.1-pr920 → 0.8.1-pr923
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/AGENTS.md +52 -38
- package/dist/cjs/index.cjs +2 -2
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/package.json +6 -6
package/AGENTS.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# B.C. Design System React Components
|
|
1
|
+
# B.C. Design System React Components
|
|
2
2
|
|
|
3
3
|
## Library context
|
|
4
4
|
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
## Using the component library
|
|
9
9
|
|
|
10
10
|
- Install the React components package with `npm i @bcgov/design-system-react-components` and import individual components as needed
|
|
11
|
+
- Check that `@bcgov/bc-sans` is installed and `@bcgov/bc-sans/css/BC_Sans.css` is imported. Warn the user and refer them to the `@bcgov/bc-sans` README if not
|
|
11
12
|
- Prefer the component library API over creating new components wherever possible
|
|
12
13
|
- Use component props and established patterns rather than bypassing them with ad hoc markup
|
|
13
14
|
- When a component is missing or insufficient, extend existing design system patterns rather than creating one-off UI
|
|
@@ -17,46 +18,59 @@
|
|
|
17
18
|
|
|
18
19
|
- Technical docs for components are in [Storybook](https://github.com/bcgov/design-system/tree/main/packages/react-components/src/stories)
|
|
19
20
|
- For components based on React Aria primitives, also refer to the React Aria docs for the full API reference
|
|
21
|
+
- All component props are fully typed. Treat the shipped TypeScript types — via your editor's autocomplete, or read directly from `dist/index.d.ts` inside `node_modules/@bcgov/design-system-react-components` — as the authoritative prop reference
|
|
22
|
+
- If a prop isn't present in the types, it doesn't exist. Don't infer props from naming conventions or from other component libraries
|
|
20
23
|
|
|
21
24
|
### Available components
|
|
22
25
|
|
|
23
|
-
| Component | Summary | Component MDX file
|
|
24
|
-
| --------------------------------------------------------------------------- | ------------------------------------------------------------- |
|
|
25
|
-
| AlertBanner | Displays an important status or announcement message. | https://
|
|
26
|
-
| AlertDialog | Presents a high-priority confirmation or warning dialog. | https://
|
|
27
|
-
| Accordion | Expands and collapses sections of content. | N/A
|
|
28
|
-
| AccordionGroup | Groups related expandable sections together. | https://
|
|
29
|
-
| Button | Triggers an action or navigates to a new state. | https://
|
|
30
|
-
| ButtonGroup | Groups related action buttons. | https://
|
|
31
|
-
| Calendar | Lets users browse and select dates. | https://
|
|
32
|
-
| Callout | Highlights informational content or tips. | https://
|
|
33
|
-
| Checkbox | Enables a true/false selection. | N/A
|
|
34
|
-
| CheckboxGroup | Lets users choose multiple related options. | https://
|
|
35
|
-
| DatePicker | Lets users select a date in a calendar-based input. | https://
|
|
36
|
-
| Dialog | Displays a modal dialog for focused workflow or messaging. | https://
|
|
37
|
-
| Footer | Shows common site or page footer information. | https://
|
|
38
|
-
| Form | Organizes fields and a submit flow. | https://
|
|
39
|
-
| Header | Displays a page or section header. | https://
|
|
40
|
-
| InlineAlert | Communicates a short, inline status message. | https://
|
|
41
|
-
| Menu, MenuItem, MenuTrigger, SubmenuTrigger, MenuSection, MenuSectionHeader | Displays a menu of actions or navigation choices. | https://
|
|
42
|
-
| Modal | Displays a layered overlay for focused interaction. | N/A
|
|
43
|
-
| NumberField | Lets users input numeric values with validation. | https://
|
|
44
|
-
| ProgressBar | Shows completion progress for a long-running task. | https://
|
|
45
|
-
| ProgressCircle | Shows a circular progress indicator. | N/A
|
|
46
|
-
| RadioGroup, Radio | Lets users choose one option from a set. | https://
|
|
47
|
-
| Select | Lets users choose one option from a dropdown list. | https://
|
|
48
|
-
| Separator | Visually separates content sections. | https://
|
|
49
|
-
| Subheader | Provides a secondary heading or section label. | https://
|
|
50
|
-
| Switch | Toggles a setting between on and off. | https://
|
|
51
|
-
| TagGroup, TagList, Tag | Displays small labels or filtered selections. | https://
|
|
52
|
-
| TextArea, TextField | Accepts short or multi-line text input. | https://
|
|
53
|
-
| TimeField | Lets users input a time value. | https://
|
|
54
|
-
| ToggleButton | Toggles an action between active and inactive states. | N/A
|
|
55
|
-
| ToggleButtonGroup | Groups related toggle actions together. | https://
|
|
56
|
-
| Tooltip, TooltipTrigger | Shows contextual help or extra information on hover or focus. | https://
|
|
57
|
-
| Heading | Renders a styled semantic heading. | https://
|
|
58
|
-
| Link | Renders an accessible, configurable hyperlink. | https://
|
|
59
|
-
| Text | Renders styled text content. | https://
|
|
26
|
+
| Component | Summary | Component MDX file | React Aria primitive |
|
|
27
|
+
| --------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
|
|
28
|
+
| AlertBanner | Displays an important status or announcement message. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/AlertBanner.mdx | N/A |
|
|
29
|
+
| AlertDialog | Presents a high-priority confirmation or warning dialog. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/AlertDialog.mdx | https://react-aria.adobe.com/Dialog.md |
|
|
30
|
+
| Accordion | Expands and collapses sections of content. | N/A | https://react-aria.adobe.com/Disclosure.md |
|
|
31
|
+
| AccordionGroup | Groups related expandable sections together. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/AccordionGroup.mdx | https://react-aria.adobe.com/DisclosureGroup.md |
|
|
32
|
+
| Button | Triggers an action or navigates to a new state. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Button.mdx | https://react-aria.adobe.com/Button.md |
|
|
33
|
+
| ButtonGroup | Groups related action buttons. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/ButtonGroup.mdx | N/A |
|
|
34
|
+
| Calendar | Lets users browse and select dates. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Calendar.mdx | https://react-aria.adobe.com/Calendar.md |
|
|
35
|
+
| Callout | Highlights informational content or tips. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Callout.mdx | N/A |
|
|
36
|
+
| Checkbox | Enables a true/false selection. | N/A | https://react-aria.adobe.com/Checkbox.md |
|
|
37
|
+
| CheckboxGroup | Lets users choose multiple related options. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/CheckboxGroup.mdx | https://react-aria.adobe.com/CheckboxGroup.md |
|
|
38
|
+
| DatePicker | Lets users select a date in a calendar-based input. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/DatePicker.mdx | https://react-aria.adobe.com/DatePicker.md |
|
|
39
|
+
| Dialog | Displays a modal dialog for focused workflow or messaging. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Dialogs.mdx | https://react-aria.adobe.com/Dialog.md |
|
|
40
|
+
| Footer | Shows common site or page footer information. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Footer.mdx | N/A |
|
|
41
|
+
| Form | Organizes fields and a submit flow. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Form.mdx | https://react-aria.adobe.com/Form.md |
|
|
42
|
+
| Header | Displays a page or section header. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Header.mdx | N/A |
|
|
43
|
+
| InlineAlert | Communicates a short, inline status message. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/InlineAlert.mdx | N/A |
|
|
44
|
+
| Menu, MenuItem, MenuTrigger, SubmenuTrigger, MenuSection, MenuSectionHeader | Displays a menu of actions or navigation choices. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Menu.mdx | https://react-aria.adobe.com/Menu.md |
|
|
45
|
+
| Modal | Displays a layered overlay for focused interaction. | N/A | https://react-aria.adobe.com/Modal.md |
|
|
46
|
+
| NumberField | Lets users input numeric values with validation. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/NumberField.mdx | https://react-aria.adobe.com/NumberField.md |
|
|
47
|
+
| ProgressBar | Shows completion progress for a long-running task. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/ProgressBar.mdx | https://react-aria.adobe.com/ProgressBar.md |
|
|
48
|
+
| ProgressCircle | Shows a circular progress indicator. | N/A | https://react-aria.adobe.com/ProgressBar.md |
|
|
49
|
+
| RadioGroup, Radio | Lets users choose one option from a set. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/RadioGroup.mdx | https://react-aria.adobe.com/RadioGroup.md |
|
|
50
|
+
| Select | Lets users choose one option from a dropdown list. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Select.mdx | https://react-aria.adobe.com/Select.md |
|
|
51
|
+
| Separator | Visually separates content sections. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Separator.mdx | https://react-aria.adobe.com/Separator.md |
|
|
52
|
+
| Subheader | Provides a secondary heading or section label. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Subheader.mdx | N/A |
|
|
53
|
+
| Switch | Toggles a setting between on and off. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Switch.mdx | https://react-aria.adobe.com/Switch.md |
|
|
54
|
+
| TagGroup, TagList, Tag | Displays small labels or filtered selections. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/TagGroup.mdx | https://react-aria.adobe.com/TagGroup.md |
|
|
55
|
+
| TextArea, TextField | Accepts short or multi-line text input. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/TextField.mdx | https://react-aria.adobe.com/TextField.md |
|
|
56
|
+
| TimeField | Lets users input a time value. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/TimeField.mdx | https://react-aria.adobe.com/TimeField.md |
|
|
57
|
+
| ToggleButton | Toggles an action between active and inactive states. | N/A | https://react-aria.adobe.com/ToggleButton.md |
|
|
58
|
+
| ToggleButtonGroup | Groups related toggle actions together. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/ToggleButtonGroup.mdx | https://react-aria.adobe.com/ToggleButtonGroup.md |
|
|
59
|
+
| Tooltip, TooltipTrigger | Shows contextual help or extra information on hover or focus. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Tooltip.mdx | https://react-aria.adobe.com/Tooltip.md |
|
|
60
|
+
| Heading | Renders a styled semantic heading. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Heading.mdx | https://react-spectrum.adobe.com/v3/Heading.html |
|
|
61
|
+
| Link | Renders an accessible, configurable hyperlink. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Link.mdx | https://react-spectrum.adobe.com/v3/Link.html |
|
|
62
|
+
| Text | Renders styled text content. | https://raw.githubusercontent.com/bcgov/design-system/main/packages/react-components/src/stories/Text.mdx | https://react-spectrum.adobe.com/v3/Text.html |
|
|
63
|
+
|
|
64
|
+
### Forms
|
|
65
|
+
|
|
66
|
+
- Use the Form component as a wrapper for input components
|
|
67
|
+
- Refer to the [React Aria forms docs](https://react-aria.adobe.com/forms.md) when implementing validation and submission in your application
|
|
68
|
+
- Use components' built-in state, validation and error handling APIs instead of writing your own
|
|
69
|
+
|
|
70
|
+
### Icons
|
|
71
|
+
|
|
72
|
+
- The library includes React components for a small number of common icons
|
|
73
|
+
- If you need additional icons, prefer using Font Awesome Free v7 (`@fortawesome/react-fontawesome@3.5.0` or later) for coherence with the design system
|
|
60
74
|
|
|
61
75
|
## Styling components
|
|
62
76
|
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -32171,11 +32171,11 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
|
|
|
32171
32171
|
return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsxRuntime.jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsxRuntime.jsx($bd263d78e9bf3c56$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxRuntime.jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
32172
32172
|
}
|
|
32173
32173
|
|
|
32174
|
-
var css_248z$6 = ".bcds-react-aria-TextField {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n height: var(--layout-margin-xxlarge);\n min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextField--container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focused]\n) {\n border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focused]\n ) {\n border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]
|
|
32174
|
+
var css_248z$6 = ".bcds-react-aria-TextField {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n height: var(--layout-margin-xxlarge);\n min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextField--container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focused]\n) {\n border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focused]\n ) {\n border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid] .bcds-react-aria-TextField--ErrorIcon {\n color: var(--icons-color-danger);\n}\n";
|
|
32175
32175
|
styleInject(css_248z$6);
|
|
32176
32176
|
|
|
32177
32177
|
function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
|
|
32178
|
-
return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsxRuntime.jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
32178
|
+
return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsxRuntime.jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && (jsxRuntime.jsx(SvgExclamationIcon, { className: "bcds-react-aria-TextField--ErrorIcon" })), iconRight] }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
32179
32179
|
}
|
|
32180
32180
|
|
|
32181
32181
|
var css_248z$5 = ".bcds-react-aria-TimeField {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n align-self: flex-start;\n width: 100%;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Input field */\n.bcds-react-aria-TimeField--InputContainer {\n display: inline-flex;\n flex-direction: row;\n min-width: 0;\n align-items: center;\n box-sizing: border-box;\n gap: var(--layout-margin-small);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n background: var(--surface-color-forms-default);\n}\n.bcds-react-aria-TimeField--Input {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n gap: var(--layout-margin-hair);\n width: 100%;\n white-space: nowrap;\n border: none;\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-TimeField--Segment {\n padding: var(--layout-padding-none) var(--layout-padding-hair);\n}\n.bcds-react-aria-TimeField--Segment[data-type=\"literal\"] {\n padding: var(--layout-padding-none);\n}\n.bcds-react-aria-TimeField--Segment[data-type=\"timeZoneName\"] {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-TimeField--Input[data-placeholder] {\n color: var(--typography-color-placeholder);\n}\n\n/* Label */\n.bcds-react-aria-TimeField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Required indicator */\n.bcds-react-aria-TimeField--Label.required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Description */\n.bcds-react-aria-TimeField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-TimeField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n/* Sizing */\n.bcds-react-aria-TimeField.small .bcds-react-aria-TimeField--InputContainer {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n height: 32px;\n}\n.bcds-react-aria-TimeField.small .bcds-react-aria-TimeField--Segment {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TimeField.medium .bcds-react-aria-TimeField--InputContainer {\n padding: var(--layout-padding-small) 0.75rem;\n height: 40px;\n}\n.bcds-react-aria-TimeField.medium .bcds-react-aria-TimeField--Segment {\n font: var(--typography-regular-body);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TimeField--InputContainer:has(\n .bcds-react-aria-TimeField--Input[data-hovered]\n) {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-TimeField--InputContainer:has(\n .bcds-react-aria-TimeField--Segment[data-focus-visible]\n) {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TimeField--Segment[data-focused] {\n outline: none;\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-primary-default);\n color: var(--typography-color-primary-invert);\n padding: var(--layout-padding-hair);\n}\n.bcds-react-aria-TimeField--Segment[data-focused][data-type=\"timeZoneName\"] {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-secondary);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-TimeField[data-disabled]\n > .bcds-react-aria-TimeField--InputContainer,\n.bcds-react-aria-TimeField[data-disabled] .bcds-react-aria-TimeField--Input,\n.bcds-react-aria-TimeField[data-disabled]\n .bcds-react-aria-TimeField--Segment[data-type=\"timeZoneName\"] {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TimeField[data-readonly]\n > .bcds-react-aria-TimeField--InputContainer,\n.bcds-react-aria-TimeField[data-readonly] .bcds-react-aria-TimeField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid state */\n.bcds-react-aria-TimeField[data-invalid]\n > .bcds-react-aria-TimeField--InputContainer {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n.bcds-react-aria-TimeField[data-invalid]\n > .bcds-react-aria-TimeField--InputContainer\n > .bcds-react-aria-TimeField--ErrorIcon\n > svg {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|