@spaced-out/ui-design-system 0.5.31 → 0.5.33

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/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.5.33](https://github.com/spaced-out/ui-design-system/compare/v0.5.32...v0.5.33) (2025-12-08)
6
+
7
+
8
+ ### Features
9
+
10
+ * add actions slot for token list input ([#432](https://github.com/spaced-out/ui-design-system/issues/432)) ([96bdafc](https://github.com/spaced-out/ui-design-system/commit/96bdafc5615fe9667f518ca3f5849b56fdc71344))
11
+
12
+ ### [0.5.32](https://github.com/spaced-out/ui-design-system/compare/v0.5.31...v0.5.32) (2025-12-03)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * **accordion-grop:** fixed show toggle issue for accordion group ([#445](https://github.com/spaced-out/ui-design-system/issues/445)) ([1a937a4](https://github.com/spaced-out/ui-design-system/commit/1a937a469252322f550c8242fea7411910c5a90d))
18
+
5
19
  ### [0.5.31](https://github.com/spaced-out/ui-design-system/compare/v0.5.30...v0.5.31) (2025-11-30)
6
20
 
7
21
 
@@ -46,7 +46,7 @@ const AccordionGroup = _ref => {
46
46
  },
47
47
  onChange: handleAccordionChange,
48
48
  onToggle: accordionOnToggle,
49
- showToggle: true,
49
+ showToggle: child.props?.showToggle ?? true,
50
50
  isOpen,
51
51
  key: childId,
52
52
  testId: (0, _qa.generateTestId)({
@@ -51,6 +51,8 @@ export interface Props<T> {
51
51
  inputProps?: Omit<InputProps, 'size'>;
52
52
  elevation?: ElevationType;
53
53
  testId?: string;
54
+ inputRef?: React.RefObject<HTMLInputElement | null>;
55
+ actionsSlot?: React.ReactNode;
54
56
  }
55
57
  export declare function TokenListInput<T>(props: Props<T>): React.JSX.Element;
56
58
  export declare namespace TokenListInput {
@@ -1 +1 @@
1
- {"version":3,"file":"TokenListInput.d.ts","sourceRoot":"","sources":["../../../src/components/TokenListInput/TokenListInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TokenListInput.d.ts","sourceRoot":"","sources":["../../../src/components/TokenListInput/TokenListInput.tsx"],"names":[],"mappings":"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"}
@@ -58,7 +58,9 @@ function TokenListInput(props) {
58
58
  resolveTokenValue,
59
59
  inputProps,
60
60
  elevation = 'modal',
61
- testId
61
+ testId,
62
+ inputRef: inputRefProp,
63
+ actionsSlot = null
62
64
  } = props;
63
65
  const menuRef = React.useRef(null);
64
66
  const {
@@ -169,98 +171,101 @@ function TokenListInput(props) {
169
171
  slot: 'root'
170
172
  }),
171
173
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
172
- onClick: () => {
173
- if (disabled || locked || values.length >= limit) {
174
- return;
175
- }
176
- if (!isOpen) {
177
- onOpen();
178
- }
179
- },
180
- onFocus: e => {
181
- if (disabled || locked || values.length >= limit) {
182
- return;
183
- }
184
- if (!isOpen) {
185
- onOpen();
186
- }
187
- onInputFocus?.(e);
188
- },
189
- onBlur: e => {
190
- onInputBlur?.(e);
191
- },
192
- className: (0, _classify.default)(_TokenListInputModule.default.box, {
193
- [_TokenListInputModule.default.inputDisabled]: disabled,
194
- [_TokenListInputModule.default.medium]: size === 'medium',
195
- [_TokenListInputModule.default.small]: size === 'small',
196
- [_TokenListInputModule.default.withError]: error,
197
- [_TokenListInputModule.default.inputLocked]: locked
198
- }, classNames?.box),
199
174
  ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
200
- "data-testid": (0, _qa.generateTestId)({
201
- base: testId,
202
- slot: 'box'
203
- }),
204
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TokenValueChips.TokenValueChips, {
205
- values: values,
206
- resolveTokenValue: resolveTokenValue,
207
- disabled: disabled,
208
- locked: locked,
209
- onDismiss: removeValue,
210
- testId: (0, _qa.generateTestId)({
211
- base: testId,
212
- slot: 'chips'
213
- })
214
- }), !hideInput && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
215
- ...inputProps,
216
- ref: inputRef,
217
- type: "text",
218
- readOnly: locked,
219
- value: inputValue,
220
- placeholder: values.length === 0 ? placeholder || inputPlaceholder : inputPlaceholder,
221
- onChange: event => {
222
- onInputChange?.(event.target.value);
175
+ className: _TokenListInputModule.default.tokenListInputWrapper,
176
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
177
+ onClick: () => {
178
+ if (disabled || locked || values.length >= limit) {
179
+ return;
180
+ }
223
181
  if (!isOpen) {
224
182
  onOpen();
225
183
  }
226
184
  },
227
- disabled: disabled || locked,
228
- tabIndex: tabIndex,
229
- "data-qa-id": "token-list-input",
230
- onKeyDown: handleInputKeyDown,
231
- className: (0, _classify.default)({
232
- [_TokenListInputModule.default.inputMedium]: size === 'medium',
233
- [_TokenListInputModule.default.inputSmall]: size === 'small'
234
- }, classNames?.input),
235
- autoComplete: "off",
236
- "data-testid": (0, _qa.generateTestId)({
237
- base: testId,
238
- slot: 'input'
239
- })
240
- }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
241
- className: _TokenListInputModule.default.loaderContainer,
185
+ onFocus: e => {
186
+ if (disabled || locked || values.length >= limit) {
187
+ return;
188
+ }
189
+ if (!isOpen) {
190
+ onOpen();
191
+ }
192
+ onInputFocus?.(e);
193
+ },
194
+ onBlur: e => {
195
+ onInputBlur?.(e);
196
+ },
197
+ className: (0, _classify.default)(_TokenListInputModule.default.box, {
198
+ [_TokenListInputModule.default.inputDisabled]: disabled,
199
+ [_TokenListInputModule.default.medium]: size === 'medium',
200
+ [_TokenListInputModule.default.small]: size === 'small',
201
+ [_TokenListInputModule.default.withError]: error,
202
+ [_TokenListInputModule.default.inputLocked]: locked
203
+ }, classNames?.box),
242
204
  "data-testid": (0, _qa.generateTestId)({
243
205
  base: testId,
244
- slot: 'loader'
206
+ slot: 'box'
245
207
  }),
246
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
208
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TokenValueChips.TokenValueChips, {
209
+ values: values,
210
+ resolveTokenValue: resolveTokenValue,
211
+ disabled: disabled,
212
+ locked: locked,
213
+ onDismiss: removeValue,
214
+ testId: (0, _qa.generateTestId)({
215
+ base: testId,
216
+ slot: 'chips'
217
+ })
218
+ }), !hideInput && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
219
+ ...inputProps,
220
+ ref: (0, _mergeRefs.mergeRefs)([inputRef, inputRefProp]),
221
+ type: "text",
222
+ readOnly: locked,
223
+ value: inputValue,
224
+ placeholder: values.length === 0 ? placeholder || inputPlaceholder : inputPlaceholder,
225
+ onChange: event => {
226
+ onInputChange?.(event.target.value);
227
+ if (!isOpen) {
228
+ onOpen();
229
+ }
230
+ },
231
+ disabled: disabled || locked || inputProps?.disabled,
232
+ tabIndex: tabIndex,
233
+ "data-qa-id": "token-list-input",
234
+ onKeyDown: handleInputKeyDown,
235
+ className: (0, _classify.default)({
236
+ [_TokenListInputModule.default.inputMedium]: size === 'medium',
237
+ [_TokenListInputModule.default.inputSmall]: size === 'small'
238
+ }, classNames?.input),
239
+ autoComplete: "off",
240
+ "data-testid": (0, _qa.generateTestId)({
241
+ base: testId,
242
+ slot: 'input'
243
+ })
244
+ }), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
245
+ className: _TokenListInputModule.default.loaderContainer,
246
+ "data-testid": (0, _qa.generateTestId)({
247
+ base: testId,
248
+ slot: 'loader'
249
+ }),
250
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularLoader.CircularLoader, {
251
+ size: "small",
252
+ colorToken: "colorFillPrimary",
253
+ testId: (0, _qa.generateTestId)({
254
+ base: testId,
255
+ slot: 'loader-icon'
256
+ })
257
+ })
258
+ }), locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
259
+ name: "lock",
260
+ color: disabled ? 'disabled' : 'secondary',
247
261
  size: "small",
248
- colorToken: "colorFillPrimary",
262
+ className: _TokenListInputModule.default.lockIcon,
249
263
  testId: (0, _qa.generateTestId)({
250
264
  base: testId,
251
- slot: 'loader-icon'
265
+ slot: 'lock-icon'
252
266
  })
253
- })
254
- }), locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
255
- name: "lock",
256
- color: disabled ? 'disabled' : 'secondary',
257
- size: "small",
258
- className: _TokenListInputModule.default.lockIcon,
259
- testId: (0, _qa.generateTestId)({
260
- base: testId,
261
- slot: 'lock-icon'
262
- })
263
- })]
267
+ })]
268
+ }), actionsSlot ? actionsSlot : null]
264
269
  }), !isOpen && (Boolean(helperText) || errorText) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
265
270
  className: _TokenListInputModule.default.footerTextContainer,
266
271
  "data-testid": (0, _qa.generateTestId)({
@@ -49,11 +49,15 @@
49
49
  border: borderWidthPrimary solid colorBorderPrimary;
50
50
  }
51
51
 
52
- .box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden):hover {
52
+ .box:not(.withError):not(.inputDisabled):not(.inputLocked):not(
53
+ .inputHidden
54
+ ):hover {
53
55
  border: borderWidthPrimary solid colorBorderTertiary;
54
56
  }
55
57
 
56
- .box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden):focus-within {
58
+ .box:not(.withError):not(.inputDisabled):not(.inputLocked):not(
59
+ .inputHidden
60
+ ):focus-within {
57
61
  border: borderWidthPrimary solid colorFillPrimary;
58
62
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
59
63
  borderWidthTertiary colorFocusPrimary;
@@ -115,6 +119,12 @@
115
119
  min-height: smallBoxHeight;
116
120
  }
117
121
 
122
+ .tokenListInputWrapper {
123
+ display: flex;
124
+ flex-direction: column;
125
+ gap: spaceXSmall;
126
+ }
127
+
118
128
  .inputMedium {
119
129
  composes: formInputMedium from '../../styles/typography.module.css';
120
130
  min-width: calc(sizeFluid/4);
package/mcp/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/genesis-mcp-server",
3
- "version": "1.0.12",
3
+ "version": "1.0.14",
4
4
  "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
5
5
  "type": "module",
6
6
  "main": "index.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.5.31",
3
+ "version": "0.5.33",
4
4
  "description": "Sense UI components library",
5
5
  "author": {
6
6
  "name": "Spaced Out"