@bcgov/design-system-react-components 0.8.0-pr772 → 0.8.0-pr773

package/dist/cjs/index.cjs

@@ -32265,8 +32265,8 @@ function Tooltip(props) {
 var css_248z = ".bcds-react-aria-NumberField {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-margin-hair);\n  background-color: var(--surface-color-forms-default);\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/* Input and controls */\n.bcds-react-aria-NumberField--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\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}\n/* Decrement button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child {\n  border-right: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child\n  > .bcds-react-aria-Button {\n  border-top-right-radius: var(--layout-border-radius-none);\n  border-bottom-right-radius: var(--layout-border-radius-none);\n}\n/* Increment button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child {\n  border-left: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child\n  > .bcds-react-aria-Button {\n  border-top-left-radius: var(--layout-border-radius-none);\n  border-bottom-left-radius: var(--layout-border-radius-none);\n}\n/* Button icons */\n.bcds-react-aria-NumberField--Group > button > svg {\n  color: var(--icons-color-primary);\n}\n/* Input container */\n.bcds-react-aria-NumberField--InputContainer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-width: 0;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-small) 0.75rem;\n}\n/* Input field */\n.bcds-react-aria-NumberField--Input {\n  box-sizing: border-box;\n  border: none;\n  width: 100%;\n}\n\n/* Sizing */\n.bcds-react-aria-NumberField.medium > .bcds-react-aria-NumberField--Group {\n  height: 40px;\n}\n.bcds-react-aria-NumberField.medium .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-NumberField.small > .bcds-react-aria-NumberField--Group {\n  height: 32px;\n}\n.bcds-react-aria-NumberField.small .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-small-body);\n}\n\n/* Label above the input field */\n.bcds-react-aria-NumberField--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\" label */\n.bcds-react-aria-NumberField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-small) var(--layout-padding-xsmall);\n}\n\n/* Description below the input field */\n.bcds-react-aria-NumberField--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/* Hover state */\n.bcds-react-aria-NumberField--Group[data-hovered],\n.bcds-react-aria-NumberField--Group[data-hovered][data-disabled],\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Focus state */\n.bcds-react-aria-NumberField--Group[data-focus-within],\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button,\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  .bcds-react-aria-NumberField--Input,\n.bcds-react-aria-NumberField--Group[data-focus-visible]\n  .bcds-react-aria-NumberField--Input {\n  outline: none;\n}\n.bcds-react-aria-NumberField--Group[data-focus-visible] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Error state */\n.bcds-react-aria-NumberField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  .bcds-react-aria-NumberField--InputContainer\n  > svg {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-NumberField[data-disabled]\n  > .bcds-react-aria-NumberField--Group,\n.bcds-react-aria-NumberField[data-disabled]\n  .bcds-react-aria-NumberField--Input {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n}\n/* BCDS Button style tweaks */\n/* Hover/focus states */\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n}\n/* Disabled/read-only states */\n.bcds-react-aria-NumberField--Group[data-disabled],\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n/* Error state */\n.bcds-react-aria-NumberField--Group[data-invalid]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled],\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n";
 styleInject(css_248z);
 
-function NumberField({ size = "medium", label, description, errorMessage, ...props }) {
-    return (jsxRuntime.jsx($10076bcc592bc574$export$63c5fa0b2fdccd2e, { className: `bcds-react-aria-NumberField ${size}`, minValue: 0, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-NumberField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-NumberField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs($3a442827418ebe87$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-NumberField--Group", children: [jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) }), jsxRuntime.jsxs("div", { className: "bcds-react-aria-NumberField--InputContainer", children: [jsxRuntime.jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-NumberField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {})] }), jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) })] }), description && (jsxRuntime.jsx(Text, { className: "bcds-react-aria-NumberField--Description", slot: "description", children: description })), isInvalid && (jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-NumberField--Error", children: errorMessage }))] })) }));
+function NumberField({ size = "medium", label, description, minValue = 0, errorMessage, ...props }) {
+    return (jsxRuntime.jsx($10076bcc592bc574$export$63c5fa0b2fdccd2e, { className: `bcds-react-aria-NumberField ${size}`, minValue: minValue, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-NumberField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-NumberField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs($3a442827418ebe87$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-NumberField--Group", children: [jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) }), jsxRuntime.jsxs("div", { className: "bcds-react-aria-NumberField--InputContainer", children: [jsxRuntime.jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-NumberField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {})] }), jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) })] }), description && (jsxRuntime.jsx(Text, { className: "bcds-react-aria-NumberField--Description", slot: "description", children: description })), isInvalid && (jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-NumberField--Error", children: errorMessage }))] })) }));
 }
 
 exports.Accordion = Accordion;