@dbcdk/react-components 0.0.211 → 0.0.213

package/README.md

@@ -100,6 +100,11 @@ export default function Header() {
 }
 ```
 
+Light is the default color scheme, including before hydration. `ThemeScript`,
+`useColorScheme()`, and the color scheme controls preserve saved Dark or System
+preferences. To default to the OS preference explicitly, use
+`<ThemeScript defaultColorScheme="system" />` and `useColorScheme('system')`.
+
 The hook updates `data-product-theme`, applies the selected product theme's
 token overrides, and persists the selection.
 
@@ -150,7 +155,7 @@ elsewhere it's the `storageKey` option passed to `useColorScheme`):
 
 ```tsx
 const { theme, switchTheme } = useTheme({ defaultTheme: 'dbc', storageKey: 'my-app-theme' })
-const { colorScheme, switchColorScheme } = useColorScheme('system', {
+const { colorScheme, switchColorScheme } = useColorScheme(undefined, {
   storageKey: 'my-app-color-scheme',
 })
 ```

package/dist/components/button/Button.cjs

@@ -54,7 +54,8 @@ const Button = React__namespace.forwardRef(function Button2({
   const computedClassName = cx(
     styles__default.default.button,
     styles__default.default[variant],
-    styles__default.default[size],
+    // A class name can't start with a digit.
+    size === "2xs" ? styles__default.default.size2xs : styles__default.default[size],
     fullWidth ? styles__default.default.fullWidth : "",
     active ? styles__default.default.active : "",
     loading ? styles__default.default.loading : "",

package/dist/components/button/Button.d.ts

@@ -7,7 +7,12 @@ export type ButtonSize = Exclude<Size, 'xl'>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     shape?: 'default' | 'rounded' | 'round';
-    size?: ButtonSize;
+    /**
+     * `2xs`: an icon button that fits within a line of text, e.g. next to a form label - no
+     * border or padding, so it doesn't make the line taller. Use it with `variant="inline"`
+     * and an `aria-label`. Its click target is small, so keep other controls at a distance.
+     */
+    size?: ButtonSize | '2xs';
     fullWidth?: boolean;
     icon?: React.ReactNode;
     loading?: boolean;

package/dist/components/button/Button.js

@@ -30,7 +30,8 @@ const Button = React.forwardRef(function Button2({
   const computedClassName = cx(
     styles.button,
     styles[variant],
-    styles[size],
+    // A class name can't start with a digit.
+    size === "2xs" ? styles.size2xs : styles[size],
     fullWidth ? styles.fullWidth : "",
     active ? styles.active : "",
     loading ? styles.loading : "",

package/dist/components/button/Button.module.css

@@ -292,3 +292,17 @@
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
 }
+
+/* Fits within a line of text: no border or padding to make the line taller. */
+.button.size2xs {
+  height: auto;
+  min-block-size: 0;
+  padding: 0;
+  border-width: 0;
+  line-height: 1;
+}
+
+.button.size2xs svg {
+  inline-size: var(--icon-size-xs);
+  block-size: var(--icon-size-xs);
+}

package/dist/components/color-scheme-button/ColorSchemeButton.cjs

@@ -16,7 +16,7 @@ const COLOR_SCHEME_OPTIONS = [
 function ColorSchemeMenuSection({
   storageKey
 } = {}) {
-  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
     COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -37,7 +37,7 @@ function ColorSchemeButton({
   variant = "outlined",
   storageKey
 }) {
-  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {

package/dist/components/color-scheme-button/ColorSchemeButton.js

@@ -14,7 +14,7 @@ const COLOR_SCHEME_OPTIONS = [
 function ColorSchemeMenuSection({
   storageKey
 } = {}) {
-  const { colorScheme, switchColorScheme } = useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
     COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
@@ -35,7 +35,7 @@ function ColorSchemeButton({
   variant = "outlined",
   storageKey
 }) {
-  const { colorScheme, switchColorScheme } = useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsx(
     Popover,
     {

package/dist/components/forms/file-upload/FileUpload.cjs

@@ -22,6 +22,8 @@ const FileUpload = react.forwardRef(function FileUpload2({
   fullWidth = false,
   required,
   modified,
+  modifiedLabel,
+  labelAlignment,
   onChange,
   children,
   hint,
@@ -78,6 +80,8 @@ const FileUpload = react.forwardRef(function FileUpload2({
       fullWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {

package/dist/components/forms/file-upload/FileUpload.js

@@ -16,6 +16,8 @@ const FileUpload = forwardRef(function FileUpload2({
   fullWidth = false,
   required,
   modified,
+  modifiedLabel,
+  labelAlignment,
   onChange,
   children,
   hint,
@@ -72,6 +74,8 @@ const FileUpload = forwardRef(function FileUpload2({
       fullWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxs(
         "label",
         {

package/dist/components/forms/form-select/FormSelect.cjs

@@ -67,6 +67,8 @@ function FormSelect({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // FormSelect props
   id,
   name,
@@ -130,6 +132,8 @@ function FormSelect({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -31,5 +31,5 @@ export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor
      */
     allowClearWhenRequired?: boolean;
 };
-export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, modifiedLabel, labelAlignment, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/form-select/FormSelect.js

@@ -42,6 +42,8 @@ function FormSelect({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // FormSelect props
   id,
   name,
@@ -105,6 +107,8 @@ function FormSelect({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/components/forms/input/Input.cjs

@@ -36,6 +36,8 @@ const Input = react.forwardRef(function Input2({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   icon,
   autoFocus,
   minWidth,
@@ -104,6 +106,8 @@ const Input = react.forwardRef(function Input2({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {

package/dist/components/forms/input/Input.js

@@ -30,6 +30,8 @@ const Input = forwardRef(function Input2({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   icon,
   autoFocus,
   minWidth,
@@ -98,6 +100,8 @@ const Input = forwardRef(function Input2({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/components/forms/input-container/InputContainer.cjs

@@ -34,7 +34,7 @@ function InputContainer({
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.required, children: " *" })
     ] }),
     withModifiedTag && modifiedTag,
-    labelAction && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-input-container-label-action": "true", children: labelAction })
+    labelAction && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.labelAction, "data-input-container-label-action": "true", children: labelAction })
   ] });
   const renderLabelRow = orientation === "vertical" ? labelRow(true) : modifiedTag ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.horizontalLabel, children: [
     labelRow(false),

package/dist/components/forms/input-container/InputContainer.js

@@ -28,7 +28,7 @@ function InputContainer({
       required && /* @__PURE__ */ jsx("span", { className: styles.required, children: " *" })
     ] }),
     withModifiedTag && modifiedTag,
-    labelAction && /* @__PURE__ */ jsx("span", { "data-input-container-label-action": "true", children: labelAction })
+    labelAction && /* @__PURE__ */ jsx("span", { className: styles.labelAction, "data-input-container-label-action": "true", children: labelAction })
   ] });
   const renderLabelRow = orientation === "vertical" ? labelRow(true) : modifiedTag ? /* @__PURE__ */ jsxs("div", { className: styles.horizontalLabel, children: [
     labelRow(false),

package/dist/components/forms/input-container/InputContainer.module.css

@@ -16,6 +16,15 @@
   font-weight: var(--font-weight-medium);
 }
 
+/* Fills the rest of the label row like Headline's addition, so the content can
+   position itself, e.g. <Stack grow justify="end"> or dbc-ms-auto. */
+.labelAction {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+}
+
 .horizontal .errorText,
 .horizontal .helpText {
   margin-left: calc(var(--label-width) + var(--gap));
@@ -38,7 +47,9 @@
   white-space: nowrap;
 }
 
-.horizontal label {
+/* Only the field's own label: a bare `label` selector also sized labels inside
+   the control or the label action, e.g. a Switch's text. */
+.horizontal .label {
   width: var(--label-width);
 }
 

package/dist/components/forms/radio-buttons/RadioButtonGroup.cjs

@@ -4,8 +4,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var RadioButton = require('./RadioButton');
+var styles = require('./RadioButtons.module.css');
 var InputContainer = require('../input-container/InputContainer');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
 function RadioButtonGroup({
   name,
   value,
@@ -31,11 +36,7 @@ function RadioButtonGroup({
       role: "radiogroup",
       "aria-invalid": Boolean(error) || void 0,
       "data-cy": dataCy,
-      style: {
-        display: "flex",
-        flexDirection: direction,
-        gap: "8px"
-      },
+      className: [styles__default.default.group, direction === "row" ? styles__default.default.groupRow : void 0].filter(Boolean).join(" "),
       children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
         RadioButton.RadioButton,
         {

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import { RadioButton } from './RadioButton';
+import styles from './RadioButtons.module.css';
 import { InputContainer } from '../input-container/InputContainer';
 
 function RadioButtonGroup({
@@ -29,11 +30,7 @@ function RadioButtonGroup({
       role: "radiogroup",
       "aria-invalid": Boolean(error) || void 0,
       "data-cy": dataCy,
-      style: {
-        display: "flex",
-        flexDirection: direction,
-        gap: "8px"
-      },
+      className: [styles.group, direction === "row" ? styles.groupRow : void 0].filter(Boolean).join(" "),
       children: options.map((opt) => /* @__PURE__ */ jsx(
         RadioButton,
         {

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -129,3 +129,18 @@
   width: 12px;
   height: 12px;
 }
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.groupRow {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.groupRow > * {
+  flex-shrink: 0;
+}

package/dist/components/forms/select/Select.cjs

@@ -29,6 +29,8 @@ function Select({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   id,
   options,
   selectedValue,
@@ -199,6 +201,8 @@ function Select({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Popover.Popover,
         {

package/dist/components/forms/select/Select.d.ts

@@ -20,5 +20,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, modifiedLabel, labelAlignment, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js

@@ -23,6 +23,8 @@ function Select({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   id,
   options,
   selectedValue,
@@ -193,6 +195,8 @@ function Select({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsx(
         Popover,
         {

package/dist/components/forms/text-area/Textarea.cjs

@@ -26,6 +26,8 @@ const Textarea = function Textarea2({
   adjustHeight,
   id,
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // InputContainer props
   label,
   error,
@@ -97,6 +99,8 @@ const Textarea = function Textarea2({
     InputContainer.InputContainer,
     {
       modified,
+      modifiedLabel,
+      labelAlignment,
       label,
       htmlFor: textareaId,
       error,

package/dist/components/forms/text-area/Textarea.js

@@ -20,6 +20,8 @@ const Textarea = function Textarea2({
   adjustHeight,
   id,
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // InputContainer props
   label,
   error,
@@ -91,6 +93,8 @@ const Textarea = function Textarea2({
     InputContainer,
     {
       modified,
+      modifiedLabel,
+      labelAlignment,
       label,
       htmlFor: textareaId,
       error,