shelving 1.256.0 → 1.256.1

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.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/ui/form/CheckboxInput.js +5 -2
  4. package/ui/form/CheckboxInput.tsx +8 -5
  5. package/ui/form/RadioInput.js +5 -2
  6. package/ui/form/RadioInput.tsx +8 -5
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Shelving
2
2
 
3
- [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org) [![Release](https://github.com/dhoulb/shelving/actions/workflows/release.yaml/badge.svg)](https://github.com/dhoulb/shelving/actions/workflows/release.yaml) [![npm](https://img.shields.io/npm/dm/shelving.svg)](https://www.npmjs.com/package/shelving)
3
+ [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://www.conventionalcommits.org/) [![Release](https://github.com/dhoulb/shelving/actions/workflows/release.yaml/badge.svg)](https://github.com/dhoulb/shelving/actions/workflows/release.yaml) [![npm](https://img.shields.io/npm/dm/shelving.svg)](https://www.npmjs.com/package/shelving)
4
4
 
5
5
  TypeScript data toolkit — schema validation, database and API providers, observable state stores, React integration, and typed utility functions.
6
6
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shelving",
3
- "version": "1.256.0",
3
+ "version": "1.256.1",
4
4
  "author": "Dave Houlbrooke <dave@shax.com>",
5
5
  "repository": {
6
6
  "type": "git",
package/ui/form/CheckboxInput.js CHANGED
@@ -4,6 +4,8 @@ import { getFlexClass } from "../style/Flex.js";
4
4
  import { getClass, getModuleClass } from "../util/css.js";
5
5
  import { getInputClass } from "./Input.js";
6
6
  import INPUT_CSS from "./Input.module.css";
7
+ const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
8
+ const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
7
9
  /**
8
10
  * Checkbox input bound to a `boolean` value, rendered as a labelled `<input type="checkbox">`.
9
11
  * - The label content comes from `children`, falling back to `placeholder`/`title`.
@@ -12,7 +14,8 @@ import INPUT_CSS from "./Input.module.css";
12
14
  * @example <CheckboxInput name="agree" value={agree} onValue={setAgree}>I agree</CheckboxInput>
13
15
  * @see https://shelving.cc/ui/CheckboxInput
14
16
  */
15
- export function CheckboxInput({ name, title, placeholder = title || "Yes", required = false, disabled = false, message = "", value = false, onValue, children, ...variants }) {
17
+ export function CheckboxInput({ name, title, placeholder = "Yes", required = false, disabled = false, message = "", value = false, onValue, children = title, ...variants }) {
16
18
  const hasChildren = notNullish(children);
17
- return (_jsxs("label", { className: getClass(getInputClass(variants), getModuleClass(INPUT_CSS, "label"), getFlexClass(variants), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: getModuleClass(INPUT_CSS, "radio") }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
19
+ return (_jsxs("label", { className: getClass(getInputClass(variants), //
20
+ getFlexClass(variants), INPUT_LABEL_CLASS, !hasChildren && INPUT_PLACEHOLDER_CLASS), "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: getModuleClass(INPUT_CSS, "radio") }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
18
21
  }
package/ui/form/CheckboxInput.tsx CHANGED
@@ -6,6 +6,9 @@ import type { OptionalChildProps } from "../util/props.js";
6
6
  import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
7
7
  import INPUT_CSS from "./Input.module.css";
8
8
 
9
+ const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
10
+ const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
11
+
9
12
  /**
10
13
  * Props for `CheckboxInput`, a boolean-valued checkbox input.
11
14
  *
@@ -24,23 +27,23 @@ export interface CheckboxProps extends ValueInputProps<boolean>, OptionalChildPr
24
27
  export function CheckboxInput({
25
28
  name,
26
29
  title,
27
- placeholder = title || "Yes",
30
+ placeholder = "Yes",
28
31
  required = false,
29
32
  disabled = false,
30
33
  message = "",
31
34
  value = false,
32
35
  onValue,
33
- children,
36
+ children = title,
34
37
  ...variants
35
38
  }: CheckboxProps): ReactElement {
36
39
  const hasChildren = notNullish(children);
37
40
  return (
38
41
  <label
39
42
  className={getClass(
40
- getInputClass(variants),
41
- getModuleClass(INPUT_CSS, "label"),
43
+ getInputClass(variants), //
42
44
  getFlexClass(variants),
43
- hasChildren && getModuleClass(INPUT_CSS, "placeholder"),
45
+ INPUT_LABEL_CLASS,
46
+ !hasChildren && INPUT_PLACEHOLDER_CLASS,
44
47
  )}
45
48
  aria-invalid={!!message}
46
49
  >
package/ui/form/RadioInput.js CHANGED
@@ -4,6 +4,8 @@ import { getFlexClass } from "../style/Flex.js";
4
4
  import { getClass, getModuleClass } from "../util/css.js";
5
5
  import { getInputClass } from "./Input.js";
6
6
  import INPUT_CSS from "./Input.module.css";
7
+ const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
8
+ const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
7
9
  /**
8
10
  * Single `<input type="radio">` wrapped in a `<label>` styled as an `<Input>`.
9
11
  * - Calls `onValue(true)` when selected; label content comes from `children`, falling back to `placeholder`/`title`.
@@ -12,7 +14,8 @@ import INPUT_CSS from "./Input.module.css";
12
14
  * @example <RadioInput name="plan" value={isPro} onValue={selectPro}>Pro</RadioInput>
13
15
  * @see https://shelving.cc/ui/RadioInput
14
16
  */
15
- export function RadioInput({ name, title, placeholder = title || "Choose", required = false, disabled = false, message = "", value = false, onValue, children, ...props }) {
17
+ export function RadioInput({ name, title, placeholder = "Choose", required = false, disabled = false, message = "", value = false, onValue, children = title, ...props }) {
16
18
  const hasChildren = notNullish(children);
17
- return (_jsxs("label", { className: getClass(getInputClass(props), getModuleClass(INPUT_CSS, "label"), getFlexClass(props), hasChildren && getModuleClass(INPUT_CSS, "placeholder")), children: [_jsx("input", { className: getModuleClass(INPUT_CSS, "radio"), type: "radio", name: name, defaultChecked: value, onChange: () => onValue(true), disabled: disabled, required: required, "aria-invalid": !!message }), hasChildren ? children : placeholder] }));
19
+ return (_jsxs("label", { className: getClass(getInputClass(props), //
20
+ getFlexClass(props), INPUT_LABEL_CLASS, !hasChildren && INPUT_PLACEHOLDER_CLASS), children: [_jsx("input", { className: getModuleClass(INPUT_CSS, "radio"), type: "radio", name: name, defaultChecked: value, onChange: () => onValue(true), disabled: disabled, required: required, "aria-invalid": !!message }), hasChildren ? children : placeholder] }));
18
21
  }
package/ui/form/RadioInput.tsx CHANGED
@@ -6,6 +6,9 @@ import type { OptionalChildProps } from "../util/props.js";
6
6
  import { getInputClass, type InputVariants, type ValueInputProps } from "./Input.js";
7
7
  import INPUT_CSS from "./Input.module.css";
8
8
 
9
+ const INPUT_LABEL_CLASS = getModuleClass(INPUT_CSS, "label");
10
+ const INPUT_PLACEHOLDER_CLASS = getModuleClass(INPUT_CSS, "placeholder");
11
+
9
12
  /**
10
13
  * Props for `RadioInput`, a single labelled radio button styled as an input.
11
14
  *
@@ -24,23 +27,23 @@ export interface RadioInputProps extends ValueInputProps<boolean>, OptionalChild
24
27
  export function RadioInput({
25
28
  name,
26
29
  title,
27
- placeholder = title || "Choose",
30
+ placeholder = "Choose",
28
31
  required = false,
29
32
  disabled = false,
30
33
  message = "",
31
34
  value = false,
32
35
  onValue,
33
- children,
36
+ children = title,
34
37
  ...props
35
38
  }: RadioInputProps): ReactElement {
36
39
  const hasChildren = notNullish(children);
37
40
  return (
38
41
  <label
39
42
  className={getClass(
40
- getInputClass(props),
41
- getModuleClass(INPUT_CSS, "label"),
43
+ getInputClass(props), //
42
44
  getFlexClass(props),
43
- hasChildren && getModuleClass(INPUT_CSS, "placeholder"),
45
+ INPUT_LABEL_CLASS,
46
+ !hasChildren && INPUT_PLACEHOLDER_CLASS,
44
47
  )}
45
48
  >
46
49
  <input