@bcgov/design-system-react-components 0.2.3-rc3 → 0.2.3
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 +1 -0
- package/dist/cjs/index.cjs +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -78,6 +78,7 @@ export default function App() {
|
|
|
78
78
|
| Form | https://react-spectrum.adobe.com/react-aria/Form.html |
|
|
79
79
|
| Header | N/A |
|
|
80
80
|
| InlineAlert | N/A |
|
|
81
|
+
| RadioGroup, Radio | https://react-spectrum.adobe.com/react-aria/RadioGroup.html |
|
|
81
82
|
| Select | https://react-spectrum.adobe.com/react-aria/Select.html |
|
|
82
83
|
| Switch | https://react-spectrum.adobe.com/react-aria/Switch.html |
|
|
83
84
|
| TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -15010,7 +15010,7 @@ function TextField({ size, label, description, errorMessage, iconLeft, iconRight
|
|
|
15010
15010
|
return (jsxRuntime.jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$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($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
15011
15011
|
}
|
|
15012
15012
|
|
|
15013
|
-
var css_248z$1 = ".bcds-react-aria-Switch {\n display: flex;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n align-items: center;\n width: var(--layout-margin-xxlarge);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-primary-disabled);\n border-radius: var(--icons-size-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /*
|
|
15013
|
+
var css_248z$1 = ".bcds-react-aria-Switch {\n display: flex;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n align-items: center;\n width: var(--layout-margin-xxlarge);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-primary-disabled);\n border-radius: var(--icons-size-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /* No animation on Switch container color if user has reduced motion set */\n .bcds-react-aria-Switch > .indicator {\n transition: none;\n }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n content: \"\";\n display: block;\n box-sizing: border-box;\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-secondary-default);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-medium);\n border-radius: var(--icons-size-small);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /* No animation on Switch circle indicator if user has reduced motion set */\n .bcds-react-aria-Switch > .indicator::before {\n transition: none;\n }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n transform: translateX(100%);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n border: var(--layout-border-width-medium) solid\n var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\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 */\n.bcds-react-aria-Switch[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n background-color: var(--theme-gray-10);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n cursor: not-allowed;\n}\n";
|
|
15014
15014
|
styleInject(css_248z$1);
|
|
15015
15015
|
|
|
15016
15016
|
function Switch({ labelPosition = "right", children, ...props }) {
|
package/dist/esm/index.js
CHANGED
|
@@ -15008,7 +15008,7 @@ function TextField({ size, label, description, errorMessage, iconLeft, iconRight
|
|
|
15008
15008
|
return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
15009
15009
|
}
|
|
15010
15010
|
|
|
15011
|
-
var css_248z$1 = ".bcds-react-aria-Switch {\n display: flex;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n align-items: center;\n width: var(--layout-margin-xxlarge);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-primary-disabled);\n border-radius: var(--icons-size-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /*
|
|
15011
|
+
var css_248z$1 = ".bcds-react-aria-Switch {\n display: flex;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Container */\n.bcds-react-aria-Switch > .indicator {\n align-items: center;\n width: var(--layout-margin-xxlarge);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-primary-disabled);\n border-radius: var(--icons-size-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /* No animation on Switch container color if user has reduced motion set */\n .bcds-react-aria-Switch > .indicator {\n transition: none;\n }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n content: \"\";\n display: block;\n box-sizing: border-box;\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n background-color: var(--surface-color-secondary-default);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-medium);\n border-radius: var(--icons-size-small);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n /* No animation on Switch circle indicator if user has reduced motion set */\n .bcds-react-aria-Switch > .indicator::before {\n transition: none;\n }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n transform: translateX(100%);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n border: var(--layout-border-width-medium) solid\n var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\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 */\n.bcds-react-aria-Switch[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n background-color: var(--theme-gray-10);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n cursor: not-allowed;\n}\n";
|
|
15012
15012
|
styleInject(css_248z$1);
|
|
15013
15013
|
|
|
15014
15014
|
function Switch({ labelPosition = "right", children, ...props }) {
|