@negative-space/radio 1.4.0 → 1.5.0

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 (7) hide show
  1. package/dist/index.d.mts +17 -5
  2. package/dist/index.d.ts +17 -5
  3. package/dist/index.js +124 -142
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +124 -138
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +4 -4
package/dist/index.d.mts CHANGED
@@ -1,7 +1,8 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
1
2
  import React from 'react';
2
- import { FlexProps } from '@negative-space/flex';
3
+ import { CollectionItemProps, CollectionProps } from '@negative-space/collection';
3
4
 
4
- interface RadioOptionProps extends Omit<FlexProps<'label'>, 'as' | 'className' | 'style' | 'onClick'> {
5
+ interface RadioOptionProps extends Omit<CollectionItemProps, 'onClick' | 'selected' | 'value' | 'role' | 'classNames' | 'styles'> {
5
6
  classNames?: {
6
7
  label?: string;
7
8
  radio?: string;
@@ -15,11 +16,14 @@ interface RadioOptionProps extends Omit<FlexProps<'label'>, 'as' | 'className' |
15
16
  disabled?: boolean;
16
17
  value: string;
17
18
  label: React.ReactNode;
18
- isPopDisabled?: boolean;
19
19
  }
20
20
 
21
- interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
21
+ interface RadioGroupProps extends Omit<CollectionProps, 'rovingOptions'> {
22
22
  classNames?: {
23
+ field?: {
24
+ root?: string;
25
+ error?: string;
26
+ };
23
27
  root?: string;
24
28
  option?: {
25
29
  label?: string;
@@ -28,6 +32,10 @@ interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
28
32
  };
29
33
  };
30
34
  styles?: {
35
+ field?: {
36
+ root?: React.CSSProperties;
37
+ error?: React.CSSProperties;
38
+ };
31
39
  root?: React.CSSProperties;
32
40
  option?: {
33
41
  label?: React.CSSProperties;
@@ -38,9 +46,13 @@ interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
38
46
  name?: string;
39
47
  disabled?: boolean;
40
48
  options?: RadioOptionProps[];
49
+ error?: string;
41
50
  defaultValue?: string;
42
51
  onValueChange?: (value: string) => void;
43
52
  }
44
- declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
53
+ declare function RadioGroup({ classNames, styles, disabled, options, error, name: nameProp, defaultValue, onValueChange, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
54
+ declare namespace RadioGroup {
55
+ var displayName: string;
56
+ }
45
57
 
46
58
  export { RadioGroup, type RadioGroupProps };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,8 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
1
2
  import React from 'react';
2
- import { FlexProps } from '@negative-space/flex';
3
+ import { CollectionItemProps, CollectionProps } from '@negative-space/collection';
3
4
 
4
- interface RadioOptionProps extends Omit<FlexProps<'label'>, 'as' | 'className' | 'style' | 'onClick'> {
5
+ interface RadioOptionProps extends Omit<CollectionItemProps, 'onClick' | 'selected' | 'value' | 'role' | 'classNames' | 'styles'> {
5
6
  classNames?: {
6
7
  label?: string;
7
8
  radio?: string;
@@ -15,11 +16,14 @@ interface RadioOptionProps extends Omit<FlexProps<'label'>, 'as' | 'className' |
15
16
  disabled?: boolean;
16
17
  value: string;
17
18
  label: React.ReactNode;
18
- isPopDisabled?: boolean;
19
19
  }
20
20
 
21
- interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
21
+ interface RadioGroupProps extends Omit<CollectionProps, 'rovingOptions'> {
22
22
  classNames?: {
23
+ field?: {
24
+ root?: string;
25
+ error?: string;
26
+ };
23
27
  root?: string;
24
28
  option?: {
25
29
  label?: string;
@@ -28,6 +32,10 @@ interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
28
32
  };
29
33
  };
30
34
  styles?: {
35
+ field?: {
36
+ root?: React.CSSProperties;
37
+ error?: React.CSSProperties;
38
+ };
31
39
  root?: React.CSSProperties;
32
40
  option?: {
33
41
  label?: React.CSSProperties;
@@ -38,9 +46,13 @@ interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
38
46
  name?: string;
39
47
  disabled?: boolean;
40
48
  options?: RadioOptionProps[];
49
+ error?: string;
41
50
  defaultValue?: string;
42
51
  onValueChange?: (value: string) => void;
43
52
  }
44
- declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
53
+ declare function RadioGroup({ classNames, styles, disabled, options, error, name: nameProp, defaultValue, onValueChange, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
54
+ declare namespace RadioGroup {
55
+ var displayName: string;
56
+ }
45
57
 
46
58
  export { RadioGroup, type RadioGroupProps };
package/dist/index.js CHANGED
@@ -1,162 +1,144 @@
1
1
  'use strict';
2
2
 
3
- var React = require('react');
3
+ var react = require('react');
4
4
  var system = require('@negative-space/system');
5
- var flex = require('@negative-space/flex');
6
- var rovingFocus = require('@negative-space/roving-focus');
5
+ var field = require('@negative-space/field');
6
+ var collection = require('@negative-space/collection');
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
 
9
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
10
-
11
- var React__default = /*#__PURE__*/_interopDefault(React);
12
-
13
9
  // src/RadioGroup.tsx
14
- var RadioContext = React.createContext(null);
10
+ var RadioContext = react.createContext(null);
15
11
 
16
12
  // src/useRadioContext.ts
17
13
  var useRadioContext = () => {
18
- const ctx = React.useContext(RadioContext);
14
+ const ctx = react.useContext(RadioContext);
19
15
  if (!ctx) {
20
16
  throw new Error("Radio must be used within RadioGroup");
21
17
  }
22
18
  return ctx;
23
19
  };
24
- var RadioOption = React__default.default.forwardRef(
25
- ({ value, label, disabled, classNames, styles, ...props }) => {
26
- const { global } = system.useNSUI();
27
- const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext();
28
- const ref = React.useRef(null);
29
- const isDisabled = disabled ?? groupDisabled;
30
- const checked = selectedValue === value;
31
- React.useEffect(() => {
32
- roving.registerItem({
33
- id: value,
34
- ref,
35
- disabled: isDisabled
36
- });
37
- return () => roving.unregisterItem(value);
38
- }, [value, isDisabled, roving]);
39
- return /* @__PURE__ */ jsxRuntime.jsxs(
40
- flex.Flex,
41
- {
42
- ...props,
43
- as: "label",
44
- alignItems: "center",
45
- className: system.cn(
46
- `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,
20
+ function RadioOption({
21
+ value,
22
+ label,
23
+ disabled,
24
+ classNames,
25
+ styles,
26
+ ...props
27
+ }) {
28
+ const { global } = system.useNSUI();
29
+ const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext();
30
+ const isDisabled = disabled ?? groupDisabled ?? false;
31
+ const checked = selectedValue === value;
32
+ const select = () => {
33
+ if (!isDisabled) onChange?.(value);
34
+ };
35
+ return /* @__PURE__ */ jsxRuntime.jsxs(
36
+ collection.CollectionItem,
37
+ {
38
+ ...props,
39
+ role: "radio",
40
+ value,
41
+ disabled: isDisabled,
42
+ onClick: select,
43
+ onSelect: select,
44
+ "data-checked": checked,
45
+ "aria-checked": checked,
46
+ classNames: {
47
+ root: system.cn(
48
+ `${global.prefixCls}-radio-label`,
49
+ `${global.prefixCls}-clickable`,
47
50
  classNames?.label
48
- ),
49
- style: styles?.label,
50
- children: [
51
- /* @__PURE__ */ jsxRuntime.jsx(
52
- "div",
53
- {
54
- ref,
55
- role: "radio",
56
- "aria-checked": checked,
57
- "data-checked": checked,
58
- tabIndex: roving.hasInteracted && roving.activeId === value ? 0 : -1,
59
- "data-disabled": isDisabled,
60
- onClick: () => {
61
- if (!isDisabled) {
62
- roving.focusItem(value);
63
- onChange?.(value);
64
- }
65
- },
66
- onKeyDown: (e) => roving.handleItemKeyDown(e, value, onChange),
67
- className: system.cn(`${global.prefixCls}-radio`, classNames?.radio),
68
- style: {
69
- borderRadius: "50%",
70
- display: "flex",
71
- alignItems: "center",
72
- justifyContent: "center",
73
- overflow: "hidden",
74
- ...styles?.radio
75
- },
76
- children: /* @__PURE__ */ jsxRuntime.jsx(
77
- "div",
78
- {
79
- "data-visible": checked,
80
- className: system.cn(
81
- `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,
82
- classNames?.inner
83
- ),
84
- style: {
85
- borderRadius: "50%",
86
- ...styles?.inner
87
- }
88
- }
89
- )
90
- }
91
- ),
92
- label
93
- ]
94
- }
95
- );
96
- }
97
- );
98
- RadioOption.displayName = "RadioOption";
99
- var RadioGroup = React__default.default.forwardRef(
100
- ({
101
- classNames,
102
- styles,
103
- disabled = false,
104
- options,
105
- direction = "column",
106
- name: nameProp,
107
- defaultValue,
108
- onValueChange,
109
- ...props
110
- }, ref) => {
111
- const { global } = system.useNSUI();
112
- const autoName = React.useId();
113
- const name = nameProp ?? autoName;
114
- const [selectedValue, setSelectedValue] = React.useState(defaultValue);
115
- const roving = rovingFocus.useRovingFocus();
116
- const handleChange = React.useCallback(
117
- (value) => {
118
- setSelectedValue(value);
119
- roving.setActiveId(value);
120
- onValueChange?.(value);
51
+ )
121
52
  },
122
- [onValueChange, roving]
123
- );
124
- const contextValue = React.useMemo(
125
- () => ({
126
- name,
127
- disabled,
128
- selectedValue,
129
- onChange: handleChange,
130
- roving
131
- }),
132
- [name, disabled, selectedValue, handleChange, roving]
133
- );
134
- return /* @__PURE__ */ jsxRuntime.jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
135
- flex.Flex,
136
- {
137
- ...props,
138
- as: "fieldset",
139
- ref,
140
- direction,
141
- role: "radiogroup",
142
- tabIndex: roving.hasInteracted ? -1 : 0,
143
- onKeyDown: roving.handleGroupKeyDown,
144
- onBlur: roving.handleGroupBlur,
145
- className: system.cn(`${global.prefixCls}-radio-group`, classNames?.root),
146
- style: styles?.root,
147
- children: options?.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
148
- RadioOption,
53
+ styles: { root: styles?.label },
54
+ children: [
55
+ /* @__PURE__ */ jsxRuntime.jsx(
56
+ "div",
149
57
  {
150
- ...option,
151
- classNames: system.mergeClassNames(classNames?.option, option.classNames),
152
- styles: { ...styles?.option, ...option.styles }
153
- },
154
- option.value ?? index
155
- ))
156
- }
157
- ) });
158
- }
159
- );
58
+ "data-checked": checked,
59
+ className: system.cn(`${global.prefixCls}-radio`, classNames?.radio),
60
+ style: {
61
+ borderRadius: "50%",
62
+ display: "flex",
63
+ alignItems: "center",
64
+ justifyContent: "center",
65
+ overflow: "hidden",
66
+ ...styles?.radio
67
+ },
68
+ children: /* @__PURE__ */ jsxRuntime.jsx(
69
+ "div",
70
+ {
71
+ "data-visible": checked,
72
+ className: system.cn(
73
+ `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,
74
+ classNames?.inner
75
+ ),
76
+ style: {
77
+ borderRadius: "50%",
78
+ ...styles?.inner
79
+ }
80
+ }
81
+ )
82
+ }
83
+ ),
84
+ label
85
+ ]
86
+ }
87
+ );
88
+ }
89
+ RadioOption.displayName = "RadioOption";
90
+ function RadioGroup({
91
+ classNames,
92
+ styles,
93
+ disabled = false,
94
+ options,
95
+ error,
96
+ name: nameProp,
97
+ defaultValue,
98
+ onValueChange,
99
+ ...props
100
+ }) {
101
+ const { global } = system.useNSUI();
102
+ const autoName = react.useId();
103
+ const name = nameProp ?? autoName;
104
+ const [selectedValue, setSelectedValue] = react.useState(defaultValue);
105
+ const handleChange = react.useCallback(
106
+ (value) => {
107
+ setSelectedValue(value);
108
+ onValueChange?.(value);
109
+ },
110
+ [onValueChange]
111
+ );
112
+ const contextValue = react.useMemo(
113
+ () => ({
114
+ name,
115
+ disabled,
116
+ selectedValue,
117
+ onChange: handleChange
118
+ }),
119
+ [name, disabled, selectedValue, handleChange]
120
+ );
121
+ return /* @__PURE__ */ jsxRuntime.jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(field.Field, { classNames: classNames?.field, styles: styles?.field, error, children: /* @__PURE__ */ jsxRuntime.jsx(
122
+ collection.Collection,
123
+ {
124
+ ...props,
125
+ role: "radiogroup",
126
+ disabled,
127
+ rovingOptions: { containerRole: "radiogroup" },
128
+ className: system.cn(`${global.prefixCls}-radio-group`, classNames?.root),
129
+ style: styles?.root,
130
+ children: options?.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
131
+ RadioOption,
132
+ {
133
+ ...option,
134
+ classNames: system.mergeCn(classNames?.option, option.classNames),
135
+ styles: { ...styles?.option, ...option.styles }
136
+ },
137
+ option.value ?? index
138
+ ))
139
+ }
140
+ ) }) });
141
+ }
160
142
  RadioGroup.displayName = "RadioGroup";
161
143
 
162
144
  exports.RadioGroup = RadioGroup;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/RadioContext.ts","../src/useRadioContext.ts","../src/RadioOption.tsx","../src/RadioGroup.tsx"],"names":["createContext","useContext","React","useNSUI","useRef","useEffect","jsxs","Flex","cn","jsx","useId","useState","useRovingFocus","useCallback","useMemo","mergeClassNames"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext } from 'react'\nimport type { useRovingFocus } from '@negative-space/roving-focus'\n\nexport interface RadioContextValue {\n name: string\n disabled?: boolean\n selectedValue?: string\n onChange?: (value: string) => void\n roving: ReturnType<typeof useRovingFocus>\n}\n\nexport const RadioContext = createContext<RadioContextValue | null>(null)\n","import { useContext } from 'react'\nimport { RadioContext, type RadioContextValue } from './RadioContext'\n\nexport const useRadioContext = (): RadioContextValue => {\n const ctx = useContext(RadioContext)\n\n if (!ctx) {\n throw new Error('Radio must be used within RadioGroup')\n }\n\n return ctx\n}\n","import React, { useEffect, useRef } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioOptionProps extends Omit<\n FlexProps<'label'>,\n 'as' | 'className' | 'style' | 'onClick'\n> {\n classNames?: {\n label?: string\n radio?: string\n inner?: string\n }\n styles?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n disabled?: boolean\n value: string\n label: React.ReactNode\n isPopDisabled?: boolean\n}\n\nexport const RadioOption = React.forwardRef<HTMLDivElement, RadioOptionProps>(\n ({ value, label, disabled, classNames, styles, ...props }) => {\n const { global } = useNSUI()\n const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext()\n\n const ref = useRef<HTMLDivElement>(null)\n const isDisabled = disabled ?? groupDisabled\n const checked = selectedValue === value\n\n useEffect(() => {\n roving.registerItem({\n id: value,\n ref: ref as React.RefObject<HTMLElement>,\n disabled: isDisabled\n })\n return () => roving.unregisterItem(value)\n }, [value, isDisabled, roving])\n\n return (\n <Flex\n {...props}\n as=\"label\"\n alignItems=\"center\"\n className={cn(\n `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,\n classNames?.label\n )}\n style={styles?.label}\n >\n <div\n ref={ref}\n role=\"radio\"\n aria-checked={checked}\n data-checked={checked}\n tabIndex={roving.hasInteracted && roving.activeId === value ? 0 : -1}\n data-disabled={isDisabled}\n onClick={() => {\n if (!isDisabled) {\n roving.focusItem(value)\n onChange?.(value)\n }\n }}\n onKeyDown={(e) => roving.handleItemKeyDown(e, value, onChange)}\n className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n style={{\n borderRadius: '50%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n ...styles?.radio\n }}\n >\n <div\n data-visible={checked}\n className={cn(\n `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,\n classNames?.inner\n )}\n style={{\n borderRadius: '50%',\n ...styles?.inner\n }}\n />\n </div>\n {label}\n </Flex>\n )\n }\n)\n\nRadioOption.displayName = 'RadioOption'\n","import React, { useCallback, useMemo, useState, useId } from 'react'\nimport { cn, mergeClassNames, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRovingFocus } from '@negative-space/roving-focus'\nimport { RadioOption, type RadioOptionProps } from './RadioOption'\nimport { RadioContext } from './RadioContext'\n\nexport interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {\n classNames?: {\n root?: string\n option?: {\n label?: string\n radio?: string\n inner?: string\n }\n }\n styles?: {\n root?: React.CSSProperties\n option?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n }\n name?: string\n disabled?: boolean\n options?: RadioOptionProps[]\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n classNames,\n styles,\n disabled = false,\n options,\n direction = 'column',\n name: nameProp,\n defaultValue,\n onValueChange,\n ...props\n },\n ref\n ) => {\n const { global } = useNSUI()\n const autoName = useId()\n const name = nameProp ?? autoName\n\n const [selectedValue, setSelectedValue] = useState(defaultValue)\n const roving = useRovingFocus()\n\n const handleChange = useCallback(\n (value: string) => {\n setSelectedValue(value)\n roving.setActiveId(value)\n onValueChange?.(value)\n },\n [onValueChange, roving]\n )\n\n const contextValue = useMemo(\n () => ({\n name,\n disabled,\n selectedValue,\n onChange: handleChange,\n roving\n }),\n [name, disabled, selectedValue, handleChange, roving]\n )\n\n return (\n <RadioContext.Provider value={contextValue}>\n <Flex\n {...props}\n as=\"fieldset\"\n ref={ref}\n direction={direction}\n role=\"radiogroup\"\n tabIndex={roving.hasInteracted ? -1 : 0}\n onKeyDown={roving.handleGroupKeyDown}\n onBlur={roving.handleGroupBlur}\n className={cn(`${global.prefixCls}-radio-group`, classNames?.root)}\n style={styles?.root}\n >\n {options?.map((option, index) => (\n <RadioOption\n key={option.value ?? index}\n {...option}\n classNames={mergeClassNames(classNames?.option, option.classNames)}\n styles={{ ...styles?.option, ...option.styles }}\n />\n ))}\n </Flex>\n </RadioContext.Provider>\n )\n }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"]}
1
+ {"version":3,"sources":["../src/RadioContext.ts","../src/useRadioContext.ts","../src/RadioOption.tsx","../src/RadioGroup.tsx"],"names":["createContext","useContext","useNSUI","jsxs","CollectionItem","cn","jsx","useId","useState","useCallback","useMemo","Field","Collection","mergeCn"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext } from 'react'\n\nexport interface RadioContextValue {\n name: string\n disabled?: boolean\n selectedValue?: string\n onChange?: (value: string) => void\n}\n\nexport const RadioContext = createContext<RadioContextValue | null>(null)\n","import { useContext } from 'react'\nimport { RadioContext, type RadioContextValue } from './RadioContext'\n\nexport const useRadioContext = (): RadioContextValue => {\n const ctx = useContext(RadioContext)\n\n if (!ctx) {\n throw new Error('Radio must be used within RadioGroup')\n }\n\n return ctx\n}\n","import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { CollectionItem, type CollectionItemProps } from '@negative-space/collection'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioOptionProps extends Omit<\n CollectionItemProps,\n 'onClick' | 'selected' | 'value' | 'role' | 'classNames' | 'styles'\n> {\n classNames?: {\n label?: string\n radio?: string\n inner?: string\n }\n styles?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n disabled?: boolean\n value: string\n label: React.ReactNode\n}\n\nexport function RadioOption({\n value,\n label,\n disabled,\n classNames,\n styles,\n ...props\n}: RadioOptionProps) {\n const { global } = useNSUI()\n const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext()\n\n const isDisabled = disabled ?? groupDisabled ?? false\n const checked = selectedValue === value\n\n const select = () => {\n if (!isDisabled) onChange?.(value)\n }\n\n return (\n <CollectionItem\n {...props}\n role=\"radio\"\n value={value}\n disabled={isDisabled}\n onClick={select}\n onSelect={select}\n data-checked={checked}\n aria-checked={checked}\n classNames={{\n root: cn(\n `${global.prefixCls}-radio-label`,\n `${global.prefixCls}-clickable`,\n classNames?.label\n )\n }}\n styles={{ root: styles?.label }}\n >\n <div\n data-checked={checked}\n className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n style={{\n borderRadius: '50%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n ...styles?.radio\n }}\n >\n <div\n data-visible={checked}\n className={cn(\n `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,\n classNames?.inner\n )}\n style={{\n borderRadius: '50%',\n ...styles?.inner\n }}\n />\n </div>\n\n {label}\n </CollectionItem>\n )\n}\n\nRadioOption.displayName = 'RadioOption'\n","import React, { useCallback, useMemo, useState, useId } from 'react'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport { Field } from '@negative-space/field'\nimport { Collection, type CollectionProps } from '@negative-space/collection'\nimport { RadioOption, type RadioOptionProps } from './RadioOption'\nimport { RadioContext } from './RadioContext'\n\nexport interface RadioGroupProps extends Omit<CollectionProps, 'rovingOptions'> {\n classNames?: {\n field?: {\n root?: string\n error?: string\n }\n root?: string\n option?: {\n label?: string\n radio?: string\n inner?: string\n }\n }\n styles?: {\n field?: {\n root?: React.CSSProperties\n error?: React.CSSProperties\n }\n root?: React.CSSProperties\n option?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n }\n name?: string\n disabled?: boolean\n options?: RadioOptionProps[]\n error?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\nexport function RadioGroup({\n classNames,\n styles,\n disabled = false,\n options,\n error,\n name: nameProp,\n defaultValue,\n onValueChange,\n ...props\n}: RadioGroupProps) {\n const { global } = useNSUI()\n const autoName = useId()\n const name = nameProp ?? autoName\n\n const [selectedValue, setSelectedValue] = useState(defaultValue)\n\n const handleChange = useCallback(\n (value: string) => {\n setSelectedValue(value)\n onValueChange?.(value)\n },\n [onValueChange]\n )\n\n const contextValue = useMemo(\n () => ({\n name,\n disabled,\n selectedValue,\n onChange: handleChange\n }),\n [name, disabled, selectedValue, handleChange]\n )\n\n return (\n <RadioContext.Provider value={contextValue}>\n <Field classNames={classNames?.field} styles={styles?.field} error={error}>\n <Collection\n {...props}\n role=\"radiogroup\"\n disabled={disabled}\n rovingOptions={{ containerRole: 'radiogroup' }}\n className={cn(`${global.prefixCls}-radio-group`, classNames?.root)}\n style={styles?.root}\n >\n {options?.map((option, index) => (\n <RadioOption\n key={option.value ?? index}\n {...option}\n classNames={mergeCn(classNames?.option, option.classNames)}\n styles={{ ...styles?.option, ...option.styles }}\n />\n ))}\n </Collection>\n </Field>\n </RadioContext.Provider>\n )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"]}
package/dist/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
- import React, { createContext, useRef, useEffect, useId, useState, useCallback, useMemo, useContext } from 'react';
2
- import { useNSUI, cn, mergeClassNames } from '@negative-space/system';
3
- import { Flex } from '@negative-space/flex';
4
- import { useRovingFocus } from '@negative-space/roving-focus';
5
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { createContext, useId, useState, useCallback, useMemo, useContext } from 'react';
2
+ import { useNSUI, cn, mergeCn } from '@negative-space/system';
3
+ import { Field } from '@negative-space/field';
4
+ import { Collection, CollectionItem } from '@negative-space/collection';
5
+ import { jsx, jsxs } from 'react/jsx-runtime';
6
6
 
7
7
  // src/RadioGroup.tsx
8
8
  var RadioContext = createContext(null);
@@ -15,142 +15,128 @@ var useRadioContext = () => {
15
15
  }
16
16
  return ctx;
17
17
  };
18
- var RadioOption = React.forwardRef(
19
- ({ value, label, disabled, classNames, styles, ...props }) => {
20
- const { global } = useNSUI();
21
- const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext();
22
- const ref = useRef(null);
23
- const isDisabled = disabled ?? groupDisabled;
24
- const checked = selectedValue === value;
25
- useEffect(() => {
26
- roving.registerItem({
27
- id: value,
28
- ref,
29
- disabled: isDisabled
30
- });
31
- return () => roving.unregisterItem(value);
32
- }, [value, isDisabled, roving]);
33
- return /* @__PURE__ */ jsxs(
34
- Flex,
35
- {
36
- ...props,
37
- as: "label",
38
- alignItems: "center",
39
- className: cn(
40
- `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,
18
+ function RadioOption({
19
+ value,
20
+ label,
21
+ disabled,
22
+ classNames,
23
+ styles,
24
+ ...props
25
+ }) {
26
+ const { global } = useNSUI();
27
+ const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext();
28
+ const isDisabled = disabled ?? groupDisabled ?? false;
29
+ const checked = selectedValue === value;
30
+ const select = () => {
31
+ if (!isDisabled) onChange?.(value);
32
+ };
33
+ return /* @__PURE__ */ jsxs(
34
+ CollectionItem,
35
+ {
36
+ ...props,
37
+ role: "radio",
38
+ value,
39
+ disabled: isDisabled,
40
+ onClick: select,
41
+ onSelect: select,
42
+ "data-checked": checked,
43
+ "aria-checked": checked,
44
+ classNames: {
45
+ root: cn(
46
+ `${global.prefixCls}-radio-label`,
47
+ `${global.prefixCls}-clickable`,
41
48
  classNames?.label
42
- ),
43
- style: styles?.label,
44
- children: [
45
- /* @__PURE__ */ jsx(
46
- "div",
47
- {
48
- ref,
49
- role: "radio",
50
- "aria-checked": checked,
51
- "data-checked": checked,
52
- tabIndex: roving.hasInteracted && roving.activeId === value ? 0 : -1,
53
- "data-disabled": isDisabled,
54
- onClick: () => {
55
- if (!isDisabled) {
56
- roving.focusItem(value);
57
- onChange?.(value);
58
- }
59
- },
60
- onKeyDown: (e) => roving.handleItemKeyDown(e, value, onChange),
61
- className: cn(`${global.prefixCls}-radio`, classNames?.radio),
62
- style: {
63
- borderRadius: "50%",
64
- display: "flex",
65
- alignItems: "center",
66
- justifyContent: "center",
67
- overflow: "hidden",
68
- ...styles?.radio
69
- },
70
- children: /* @__PURE__ */ jsx(
71
- "div",
72
- {
73
- "data-visible": checked,
74
- className: cn(
75
- `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,
76
- classNames?.inner
77
- ),
78
- style: {
79
- borderRadius: "50%",
80
- ...styles?.inner
81
- }
82
- }
83
- )
84
- }
85
- ),
86
- label
87
- ]
88
- }
89
- );
90
- }
91
- );
92
- RadioOption.displayName = "RadioOption";
93
- var RadioGroup = React.forwardRef(
94
- ({
95
- classNames,
96
- styles,
97
- disabled = false,
98
- options,
99
- direction = "column",
100
- name: nameProp,
101
- defaultValue,
102
- onValueChange,
103
- ...props
104
- }, ref) => {
105
- const { global } = useNSUI();
106
- const autoName = useId();
107
- const name = nameProp ?? autoName;
108
- const [selectedValue, setSelectedValue] = useState(defaultValue);
109
- const roving = useRovingFocus();
110
- const handleChange = useCallback(
111
- (value) => {
112
- setSelectedValue(value);
113
- roving.setActiveId(value);
114
- onValueChange?.(value);
49
+ )
115
50
  },
116
- [onValueChange, roving]
117
- );
118
- const contextValue = useMemo(
119
- () => ({
120
- name,
121
- disabled,
122
- selectedValue,
123
- onChange: handleChange,
124
- roving
125
- }),
126
- [name, disabled, selectedValue, handleChange, roving]
127
- );
128
- return /* @__PURE__ */ jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
129
- Flex,
130
- {
131
- ...props,
132
- as: "fieldset",
133
- ref,
134
- direction,
135
- role: "radiogroup",
136
- tabIndex: roving.hasInteracted ? -1 : 0,
137
- onKeyDown: roving.handleGroupKeyDown,
138
- onBlur: roving.handleGroupBlur,
139
- className: cn(`${global.prefixCls}-radio-group`, classNames?.root),
140
- style: styles?.root,
141
- children: options?.map((option, index) => /* @__PURE__ */ jsx(
142
- RadioOption,
51
+ styles: { root: styles?.label },
52
+ children: [
53
+ /* @__PURE__ */ jsx(
54
+ "div",
143
55
  {
144
- ...option,
145
- classNames: mergeClassNames(classNames?.option, option.classNames),
146
- styles: { ...styles?.option, ...option.styles }
147
- },
148
- option.value ?? index
149
- ))
150
- }
151
- ) });
152
- }
153
- );
56
+ "data-checked": checked,
57
+ className: cn(`${global.prefixCls}-radio`, classNames?.radio),
58
+ style: {
59
+ borderRadius: "50%",
60
+ display: "flex",
61
+ alignItems: "center",
62
+ justifyContent: "center",
63
+ overflow: "hidden",
64
+ ...styles?.radio
65
+ },
66
+ children: /* @__PURE__ */ jsx(
67
+ "div",
68
+ {
69
+ "data-visible": checked,
70
+ className: cn(
71
+ `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,
72
+ classNames?.inner
73
+ ),
74
+ style: {
75
+ borderRadius: "50%",
76
+ ...styles?.inner
77
+ }
78
+ }
79
+ )
80
+ }
81
+ ),
82
+ label
83
+ ]
84
+ }
85
+ );
86
+ }
87
+ RadioOption.displayName = "RadioOption";
88
+ function RadioGroup({
89
+ classNames,
90
+ styles,
91
+ disabled = false,
92
+ options,
93
+ error,
94
+ name: nameProp,
95
+ defaultValue,
96
+ onValueChange,
97
+ ...props
98
+ }) {
99
+ const { global } = useNSUI();
100
+ const autoName = useId();
101
+ const name = nameProp ?? autoName;
102
+ const [selectedValue, setSelectedValue] = useState(defaultValue);
103
+ const handleChange = useCallback(
104
+ (value) => {
105
+ setSelectedValue(value);
106
+ onValueChange?.(value);
107
+ },
108
+ [onValueChange]
109
+ );
110
+ const contextValue = useMemo(
111
+ () => ({
112
+ name,
113
+ disabled,
114
+ selectedValue,
115
+ onChange: handleChange
116
+ }),
117
+ [name, disabled, selectedValue, handleChange]
118
+ );
119
+ return /* @__PURE__ */ jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Field, { classNames: classNames?.field, styles: styles?.field, error, children: /* @__PURE__ */ jsx(
120
+ Collection,
121
+ {
122
+ ...props,
123
+ role: "radiogroup",
124
+ disabled,
125
+ rovingOptions: { containerRole: "radiogroup" },
126
+ className: cn(`${global.prefixCls}-radio-group`, classNames?.root),
127
+ style: styles?.root,
128
+ children: options?.map((option, index) => /* @__PURE__ */ jsx(
129
+ RadioOption,
130
+ {
131
+ ...option,
132
+ classNames: mergeCn(classNames?.option, option.classNames),
133
+ styles: { ...styles?.option, ...option.styles }
134
+ },
135
+ option.value ?? index
136
+ ))
137
+ }
138
+ ) }) });
139
+ }
154
140
  RadioGroup.displayName = "RadioGroup";
155
141
 
156
142
  export { RadioGroup };
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/RadioContext.ts","../src/useRadioContext.ts","../src/RadioOption.tsx","../src/RadioGroup.tsx"],"names":["React","useNSUI","jsx","Flex","cn"],"mappings":"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","file":"index.mjs","sourcesContent":["import { createContext } from 'react'\nimport type { useRovingFocus } from '@negative-space/roving-focus'\n\nexport interface RadioContextValue {\n name: string\n disabled?: boolean\n selectedValue?: string\n onChange?: (value: string) => void\n roving: ReturnType<typeof useRovingFocus>\n}\n\nexport const RadioContext = createContext<RadioContextValue | null>(null)\n","import { useContext } from 'react'\nimport { RadioContext, type RadioContextValue } from './RadioContext'\n\nexport const useRadioContext = (): RadioContextValue => {\n const ctx = useContext(RadioContext)\n\n if (!ctx) {\n throw new Error('Radio must be used within RadioGroup')\n }\n\n return ctx\n}\n","import React, { useEffect, useRef } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioOptionProps extends Omit<\n FlexProps<'label'>,\n 'as' | 'className' | 'style' | 'onClick'\n> {\n classNames?: {\n label?: string\n radio?: string\n inner?: string\n }\n styles?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n disabled?: boolean\n value: string\n label: React.ReactNode\n isPopDisabled?: boolean\n}\n\nexport const RadioOption = React.forwardRef<HTMLDivElement, RadioOptionProps>(\n ({ value, label, disabled, classNames, styles, ...props }) => {\n const { global } = useNSUI()\n const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext()\n\n const ref = useRef<HTMLDivElement>(null)\n const isDisabled = disabled ?? groupDisabled\n const checked = selectedValue === value\n\n useEffect(() => {\n roving.registerItem({\n id: value,\n ref: ref as React.RefObject<HTMLElement>,\n disabled: isDisabled\n })\n return () => roving.unregisterItem(value)\n }, [value, isDisabled, roving])\n\n return (\n <Flex\n {...props}\n as=\"label\"\n alignItems=\"center\"\n className={cn(\n `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,\n classNames?.label\n )}\n style={styles?.label}\n >\n <div\n ref={ref}\n role=\"radio\"\n aria-checked={checked}\n data-checked={checked}\n tabIndex={roving.hasInteracted && roving.activeId === value ? 0 : -1}\n data-disabled={isDisabled}\n onClick={() => {\n if (!isDisabled) {\n roving.focusItem(value)\n onChange?.(value)\n }\n }}\n onKeyDown={(e) => roving.handleItemKeyDown(e, value, onChange)}\n className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n style={{\n borderRadius: '50%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n ...styles?.radio\n }}\n >\n <div\n data-visible={checked}\n className={cn(\n `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,\n classNames?.inner\n )}\n style={{\n borderRadius: '50%',\n ...styles?.inner\n }}\n />\n </div>\n {label}\n </Flex>\n )\n }\n)\n\nRadioOption.displayName = 'RadioOption'\n","import React, { useCallback, useMemo, useState, useId } from 'react'\nimport { cn, mergeClassNames, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRovingFocus } from '@negative-space/roving-focus'\nimport { RadioOption, type RadioOptionProps } from './RadioOption'\nimport { RadioContext } from './RadioContext'\n\nexport interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {\n classNames?: {\n root?: string\n option?: {\n label?: string\n radio?: string\n inner?: string\n }\n }\n styles?: {\n root?: React.CSSProperties\n option?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n }\n name?: string\n disabled?: boolean\n options?: RadioOptionProps[]\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n classNames,\n styles,\n disabled = false,\n options,\n direction = 'column',\n name: nameProp,\n defaultValue,\n onValueChange,\n ...props\n },\n ref\n ) => {\n const { global } = useNSUI()\n const autoName = useId()\n const name = nameProp ?? autoName\n\n const [selectedValue, setSelectedValue] = useState(defaultValue)\n const roving = useRovingFocus()\n\n const handleChange = useCallback(\n (value: string) => {\n setSelectedValue(value)\n roving.setActiveId(value)\n onValueChange?.(value)\n },\n [onValueChange, roving]\n )\n\n const contextValue = useMemo(\n () => ({\n name,\n disabled,\n selectedValue,\n onChange: handleChange,\n roving\n }),\n [name, disabled, selectedValue, handleChange, roving]\n )\n\n return (\n <RadioContext.Provider value={contextValue}>\n <Flex\n {...props}\n as=\"fieldset\"\n ref={ref}\n direction={direction}\n role=\"radiogroup\"\n tabIndex={roving.hasInteracted ? -1 : 0}\n onKeyDown={roving.handleGroupKeyDown}\n onBlur={roving.handleGroupBlur}\n className={cn(`${global.prefixCls}-radio-group`, classNames?.root)}\n style={styles?.root}\n >\n {options?.map((option, index) => (\n <RadioOption\n key={option.value ?? index}\n {...option}\n classNames={mergeClassNames(classNames?.option, option.classNames)}\n styles={{ ...styles?.option, ...option.styles }}\n />\n ))}\n </Flex>\n </RadioContext.Provider>\n )\n }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"]}
1
+ {"version":3,"sources":["../src/RadioContext.ts","../src/useRadioContext.ts","../src/RadioOption.tsx","../src/RadioGroup.tsx"],"names":["useNSUI","jsx","cn"],"mappings":"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","file":"index.mjs","sourcesContent":["import { createContext } from 'react'\n\nexport interface RadioContextValue {\n name: string\n disabled?: boolean\n selectedValue?: string\n onChange?: (value: string) => void\n}\n\nexport const RadioContext = createContext<RadioContextValue | null>(null)\n","import { useContext } from 'react'\nimport { RadioContext, type RadioContextValue } from './RadioContext'\n\nexport const useRadioContext = (): RadioContextValue => {\n const ctx = useContext(RadioContext)\n\n if (!ctx) {\n throw new Error('Radio must be used within RadioGroup')\n }\n\n return ctx\n}\n","import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { CollectionItem, type CollectionItemProps } from '@negative-space/collection'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioOptionProps extends Omit<\n CollectionItemProps,\n 'onClick' | 'selected' | 'value' | 'role' | 'classNames' | 'styles'\n> {\n classNames?: {\n label?: string\n radio?: string\n inner?: string\n }\n styles?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n disabled?: boolean\n value: string\n label: React.ReactNode\n}\n\nexport function RadioOption({\n value,\n label,\n disabled,\n classNames,\n styles,\n ...props\n}: RadioOptionProps) {\n const { global } = useNSUI()\n const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext()\n\n const isDisabled = disabled ?? groupDisabled ?? false\n const checked = selectedValue === value\n\n const select = () => {\n if (!isDisabled) onChange?.(value)\n }\n\n return (\n <CollectionItem\n {...props}\n role=\"radio\"\n value={value}\n disabled={isDisabled}\n onClick={select}\n onSelect={select}\n data-checked={checked}\n aria-checked={checked}\n classNames={{\n root: cn(\n `${global.prefixCls}-radio-label`,\n `${global.prefixCls}-clickable`,\n classNames?.label\n )\n }}\n styles={{ root: styles?.label }}\n >\n <div\n data-checked={checked}\n className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n style={{\n borderRadius: '50%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n ...styles?.radio\n }}\n >\n <div\n data-visible={checked}\n className={cn(\n `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,\n classNames?.inner\n )}\n style={{\n borderRadius: '50%',\n ...styles?.inner\n }}\n />\n </div>\n\n {label}\n </CollectionItem>\n )\n}\n\nRadioOption.displayName = 'RadioOption'\n","import React, { useCallback, useMemo, useState, useId } from 'react'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport { Field } from '@negative-space/field'\nimport { Collection, type CollectionProps } from '@negative-space/collection'\nimport { RadioOption, type RadioOptionProps } from './RadioOption'\nimport { RadioContext } from './RadioContext'\n\nexport interface RadioGroupProps extends Omit<CollectionProps, 'rovingOptions'> {\n classNames?: {\n field?: {\n root?: string\n error?: string\n }\n root?: string\n option?: {\n label?: string\n radio?: string\n inner?: string\n }\n }\n styles?: {\n field?: {\n root?: React.CSSProperties\n error?: React.CSSProperties\n }\n root?: React.CSSProperties\n option?: {\n label?: React.CSSProperties\n radio?: React.CSSProperties\n inner?: React.CSSProperties\n }\n }\n name?: string\n disabled?: boolean\n options?: RadioOptionProps[]\n error?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\nexport function RadioGroup({\n classNames,\n styles,\n disabled = false,\n options,\n error,\n name: nameProp,\n defaultValue,\n onValueChange,\n ...props\n}: RadioGroupProps) {\n const { global } = useNSUI()\n const autoName = useId()\n const name = nameProp ?? autoName\n\n const [selectedValue, setSelectedValue] = useState(defaultValue)\n\n const handleChange = useCallback(\n (value: string) => {\n setSelectedValue(value)\n onValueChange?.(value)\n },\n [onValueChange]\n )\n\n const contextValue = useMemo(\n () => ({\n name,\n disabled,\n selectedValue,\n onChange: handleChange\n }),\n [name, disabled, selectedValue, handleChange]\n )\n\n return (\n <RadioContext.Provider value={contextValue}>\n <Field classNames={classNames?.field} styles={styles?.field} error={error}>\n <Collection\n {...props}\n role=\"radiogroup\"\n disabled={disabled}\n rovingOptions={{ containerRole: 'radiogroup' }}\n className={cn(`${global.prefixCls}-radio-group`, classNames?.root)}\n style={styles?.root}\n >\n {options?.map((option, index) => (\n <RadioOption\n key={option.value ?? index}\n {...option}\n classNames={mergeCn(classNames?.option, option.classNames)}\n styles={{ ...styles?.option, ...option.styles }}\n />\n ))}\n </Collection>\n </Field>\n </RadioContext.Provider>\n )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@negative-space/radio",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -30,9 +30,9 @@
30
30
  "url": "https://github.com/negative-space-ui/nsui/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@negative-space/flex": "1.2.0",
34
- "@negative-space/roving-focus": "1.1.0",
35
- "@negative-space/system": "1.1.0"
33
+ "@negative-space/collection": "2.0.0",
34
+ "@negative-space/field": "1.0.0",
35
+ "@negative-space/system": "1.2.0"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "react": "^19.2.3"