@orcestr/ui 0.2.0 → 0.2.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 (9) hide show
  1. package/dist/components/ContextMenu/ContextMenu.js +1 -1
  2. package/dist/components/Menu/Menu.js +7 -4
  3. package/dist/hooks/useListNavigation.d.ts +3 -2
  4. package/dist/hooks/useListNavigation.d.ts.map +1 -1
  5. package/dist/hooks/useListNavigation.js +3 -3
  6. package/dist/styles/orcestr-ui.css +2 -22
  7. package/dist/theme/defaultTheme.d.ts.map +1 -1
  8. package/dist/theme/defaultTheme.js +65 -10
  9. package/package.json +1 -1
package/dist/components/ContextMenu/ContextMenu.js CHANGED
@@ -54,7 +54,7 @@ export function ContextMenu({ children, items, className, testId, }) {
54
54
  } })] }));
55
55
  }
56
56
  function ContextMenuContent({ items, close, requestConfirmation, testId, }) {
57
- return (_jsx("div", { className: "oui-menu-list", role: "menu", "data-testid": testId, children: items.map((item) => (_jsxs("div", { children: [item.separatorBefore ? _jsx("div", { className: "oui-menu-separator" }) : null, _jsxs("button", { type: "button", role: "menuitem", className: "oui-menu-item oui-combobox-option", "data-tone": item.tone, "data-selected": "false", "data-loading": item.loading ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.key}` : undefined, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item) || Boolean(item.children?.length), onClick: () => {
57
+ return (_jsx("div", { className: "oui-menu-list", role: "menu", "data-testid": testId, children: items.map((item) => (_jsxs("div", { children: [item.separatorBefore ? _jsx("div", { className: "oui-menu-separator" }) : null, _jsxs("button", { type: "button", role: "menuitem", className: "oui-menu-item", "data-tone": item.tone, "data-loading": item.loading ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.key}` : undefined, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item) || Boolean(item.children?.length), onClick: () => {
58
58
  if (isActionItemDisabled(item) || item.children?.length)
59
59
  return;
60
60
  if (item.confirm) {
package/dist/components/Menu/Menu.js CHANGED
@@ -35,7 +35,7 @@ function MenuList({ items, reserveIconSpace, inlineState, close, requestConfirma
35
35
  disabled: isActionItemDisabled(item),
36
36
  searchText: menuItemText(item),
37
37
  })), [items]);
38
- const navigation = useListNavigation(navigationItems);
38
+ const navigation = useListNavigation(navigationItems, { highlightFirst: false });
39
39
  const highlightedKey = navigation.highlightedValue;
40
40
  useEffect(() => {
41
41
  if (autoFocus)
@@ -97,9 +97,9 @@ function MenuList({ items, reserveIconSpace, inlineState, close, requestConfirma
97
97
  }
98
98
  }
99
99
  }, [close, handleTypeahead, navigation, selectHighlighted]);
100
- return (_jsx("div", { ref: listRef, className: "oui-menu-list", role: "menu", tabIndex: 0, "data-testid": testId, onKeyDown: handleKeyDown, children: items.map((item) => (_jsx(MenuRow, { item: item, reserveIconSpace: reserveIconSpace, inlineState: inlineState, close: close, requestConfirmation: requestConfirmation, highlighted: highlightedKey === item.key, setHighlighted: () => navigation.setHighlightedValue(item.key), testId: testId ? `${testId}-${item.key}` : undefined }, item.key))) }));
100
+ return (_jsx("div", { ref: listRef, className: "oui-menu-list", role: "menu", tabIndex: 0, "data-testid": testId, onKeyDown: handleKeyDown, children: items.map((item) => (_jsx(MenuRow, { item: item, reserveIconSpace: reserveIconSpace, inlineState: inlineState, close: close, requestConfirmation: requestConfirmation, highlighted: highlightedKey === item.key, setHighlighted: () => navigation.setHighlightedValue(item.key), clearHighlighted: navigation.reset, testId: testId ? `${testId}-${item.key}` : undefined }, item.key))) }));
101
101
  }
102
- function MenuRow({ item, reserveIconSpace, inlineState, close, requestConfirmation, highlighted, setHighlighted, testId, }) {
102
+ function MenuRow({ item, reserveIconSpace, inlineState, close, requestConfirmation, highlighted, setHighlighted, clearHighlighted, testId, }) {
103
103
  const [hoverOpen, setHoverOpen] = useState(false);
104
104
  const hasChildren = Boolean(item.children?.length);
105
105
  const inlineOpen = inlineState.openSubmenus.has(item.key);
@@ -107,7 +107,10 @@ function MenuRow({ item, reserveIconSpace, inlineState, close, requestConfirmati
107
107
  return (_jsxs("div", { className: "oui-menu-row", onMouseEnter: () => {
108
108
  setHighlighted();
109
109
  setHoverOpen(true);
110
- }, onMouseLeave: () => setHoverOpen(false), children: [item.separatorBefore ? _jsx("div", { className: "oui-menu-separator" }) : null, _jsxs("button", { type: "button", className: "oui-menu-item oui-combobox-option", "data-tone": item.tone, "data-selected": "false", "data-highlighted": highlighted ? 'true' : undefined, "data-submenu-state": inlineOpen || hoverOpen ? 'open' : 'closed', "data-loading": item.loading ? 'true' : undefined, "data-testid": testId, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item), tabIndex: -1, onClick: (event) => {
110
+ }, onMouseLeave: () => {
111
+ setHoverOpen(false);
112
+ clearHighlighted();
113
+ }, children: [item.separatorBefore ? _jsx("div", { className: "oui-menu-separator" }) : null, _jsxs("button", { type: "button", className: "oui-menu-item", "data-tone": item.tone, "data-highlighted": highlighted ? 'true' : undefined, "data-submenu-state": inlineOpen || hoverOpen ? 'open' : 'closed', "data-loading": item.loading ? 'true' : undefined, "data-testid": testId, "aria-busy": item.loading ? 'true' : undefined, disabled: isActionItemDisabled(item), tabIndex: -1, onClick: (event) => {
111
114
  event.stopPropagation();
112
115
  if (isActionItemDisabled(item))
113
116
  return;
package/dist/hooks/useListNavigation.d.ts CHANGED
@@ -3,10 +3,11 @@ export type ListNavigationItem = {
3
3
  disabled?: boolean;
4
4
  searchText?: string;
5
5
  };
6
- export declare function useListNavigation(items: ReadonlyArray<ListNavigationItem>, { value, }?: {
6
+ export declare function useListNavigation(items: ReadonlyArray<ListNavigationItem>, { highlightFirst, value, }?: {
7
+ highlightFirst?: boolean;
7
8
  value?: string | null;
8
9
  }): {
9
- highlightedValue: string;
10
+ highlightedValue: string | null;
10
11
  setHighlightedValue: import("react").Dispatch<import("react").SetStateAction<string | null>>;
11
12
  move: (direction: 1 | -1) => void;
12
13
  first: () => void;
package/dist/hooks/useListNavigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useListNavigation.d.ts","sourceRoot":"","sources":["../../src/hooks/useListNavigation.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,EACxC,EACI,KAAY,GACf,GAAE;IACC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;;;sBAgBU,CAAC,GAAG,CAAC,CAAC;;;;;EAiCzB"}
1
+ {"version":3,"file":"useListNavigation.d.ts","sourceRoot":"","sources":["../../src/hooks/useListNavigation.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,EACxC,EACI,cAAqB,EACrB,KAAY,GACf,GAAE;IACC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;;;sBAgBU,CAAC,GAAG,CAAC,CAAC;;;;;EAiCzB"}
package/dist/hooks/useListNavigation.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
  import { useCallback, useMemo, useState } from 'react';
3
- export function useListNavigation(items, { value = null, } = {}) {
3
+ export function useListNavigation(items, { highlightFirst = true, value = null, } = {}) {
4
4
  const enabledItems = useMemo(() => items.filter((item) => !item.disabled), [items]);
5
5
  const [requestedValue, setRequestedValue] = useState(null);
6
6
  const highlightedValue = useMemo(() => {
@@ -10,8 +10,8 @@ export function useListNavigation(items, { value = null, } = {}) {
10
10
  if (value !== null && enabledItems.some((item) => item.value === value)) {
11
11
  return value;
12
12
  }
13
- return enabledItems[0]?.value ?? null;
14
- }, [enabledItems, requestedValue, value]);
13
+ return highlightFirst ? (enabledItems[0]?.value ?? null) : null;
14
+ }, [enabledItems, highlightFirst, requestedValue, value]);
15
15
  const move = useCallback((direction) => {
16
16
  if (enabledItems.length === 0)
17
17
  return;
package/dist/styles/orcestr-ui.css CHANGED
@@ -3251,9 +3251,9 @@ a.oui-card {
3251
3251
  .oui-select-content {
3252
3252
  --oui-selection-content-text: var(--oui-text, #202020);
3253
3253
  --oui-selection-content-bg: var(--oui-floating-bg, var(--oui-bg, #ffffff));
3254
- --oui-selection-option-hover-bg: var(--oui-control-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 8%, transparent));
3254
+ --oui-selection-option-hover-bg: var(--oui-pad-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 8%, transparent));
3255
3255
  --oui-selection-option-selected-bg: var(--oui-selected-bg, color-mix(in srgb, var(--oui-selection-content-text) 10%, transparent));
3256
- --oui-selection-option-selected-hover-bg: var(--oui-control-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 13%, transparent));
3256
+ --oui-selection-option-selected-hover-bg: color-mix(in srgb, var(--oui-selection-option-selected-bg) 76%, var(--oui-selection-option-hover-bg));
3257
3257
  --oui-selection-check-color: var(--oui-primary-text, #0d74ce);
3258
3258
  min-width: 280px;
3259
3259
  max-width: min(420px, 100vw - 24px);
@@ -3263,26 +3263,6 @@ a.oui-card {
3263
3263
  background: var(--oui-selection-content-bg);
3264
3264
  }
3265
3265
 
3266
- .oui-combobox-content[data-oui-theme=light],
3267
- .oui-select-content[data-oui-theme=light] {
3268
- --oui-selection-content-text: #202020;
3269
- --oui-selection-content-bg: #ffffff;
3270
- --oui-selection-option-hover-bg: #0000000f;
3271
- --oui-selection-option-selected-bg: #008ff519;
3272
- --oui-selection-option-selected-hover-bg: #008ff526;
3273
- --oui-selection-check-color: #0d74ce;
3274
- }
3275
-
3276
- .oui-combobox-content[data-oui-theme=dark],
3277
- .oui-select-content[data-oui-theme=dark] {
3278
- --oui-selection-content-text: #eeeeee;
3279
- --oui-selection-content-bg: #0c0c0f;
3280
- --oui-selection-option-hover-bg: #ffffff12;
3281
- --oui-selection-option-selected-bg: #0077ff3a;
3282
- --oui-selection-option-selected-hover-bg: #0077ff52;
3283
- --oui-selection-check-color: #70b8ff;
3284
- }
3285
-
3286
3266
  .oui-combobox-search-wrap {
3287
3267
  display: flex;
3288
3268
  align-items: center;
package/dist/theme/defaultTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACtB,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,6BAA6B,GAAG;IACxC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC5C,mBAAmB,EACnB,6BAA6B,CAsBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,6BAA6B,EAK/D,CAAC;AA0rBF,wBAAgB,WAAW,CACvB,IAAI,EAAE,gBAAgB,EACtB,OAAO,GAAE,mBAA+B,EACxC,cAAc,CAAC,EAAE,qBAAqB,GACvC,YAAY,CASd;AAED,eAAO,MAAM,SAAS,EAAE,YAAkC,CAAC;AAC3D,eAAO,MAAM,UAAU,EAAE,YAAmC,CAAC"}
1
+ {"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACtB,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,6BAA6B,GAAG;IACxC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC5C,mBAAmB,EACnB,6BAA6B,CAsBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,6BAA6B,EAK/D,CAAC;AAivBF,wBAAgB,WAAW,CACvB,IAAI,EAAE,gBAAgB,EACtB,OAAO,GAAE,mBAA+B,EACxC,cAAc,CAAC,EAAE,qBAAqB,GACvC,YAAY,CASd;AAED,eAAO,MAAM,SAAS,EAAE,YAAkC,CAAC;AAC3D,eAAO,MAAM,UAAU,EAAE,YAAmC,CAAC"}
package/dist/theme/defaultTheme.js CHANGED
@@ -387,22 +387,77 @@ const surfaceOverrides = {
387
387
  orcestr: {
388
388
  dark: {
389
389
  colors: {
390
+ bg: '#0d0b13',
391
+ panel: '#14101f',
392
+ panelSoft: '#1d172b',
393
+ floating: '#14101f',
394
+ text: '#f8f5ff',
395
+ muted: '#cfc6dd',
396
+ border: 'rgb(255 255 255 / 6%)',
397
+ borderStrong: 'rgb(168 139 250 / 18%)',
398
+ pad: 'rgb(255 255 255 / 7%)',
399
+ padHover: 'rgb(255 255 255 / 10%)',
390
400
  primary: {
391
- base: '#6e56cf',
392
- text: '#baa7ff',
393
- surface: '#8354fe36',
394
- border: '#8f6cfd6d',
401
+ base: '#7c3aed',
402
+ text: '#d8ccff',
403
+ surface: 'rgb(124 58 237 / 16%)',
404
+ border: 'rgb(168 139 250 / 18%)',
395
405
  contrast: '#ffffff',
396
406
  },
397
- selected: '#8354fe36',
398
- focusRing: '0 0 0 3px #7d51fd50',
407
+ selected: 'rgb(124 58 237 / 16%)',
408
+ focusRing: '0 0 0 3px rgb(124 58 237 / 30%)',
409
+ success: {
410
+ base: '#22c55e',
411
+ text: '#86efac',
412
+ surface: 'rgb(34 197 94 / 12%)',
413
+ border: 'rgb(34 197 94 / 16%)',
414
+ contrast: '#111111',
415
+ },
416
+ warning: {
417
+ base: '#f59e0b',
418
+ text: '#fbbf24',
419
+ surface: 'rgb(245 158 11 / 13%)',
420
+ border: 'rgb(245 158 11 / 18%)',
421
+ contrast: '#111111',
422
+ },
423
+ info: {
424
+ base: '#60a5fa',
425
+ text: '#93c5fd',
426
+ surface: 'rgb(37 99 235 / 16%)',
427
+ border: 'rgb(96 165 250 / 18%)',
428
+ contrast: '#111111',
429
+ },
430
+ },
431
+ shadows: {
432
+ sm: 'inset 0 0 0 1px rgb(255 255 255 / 6%), inset 0 1px 1px rgb(255 255 255 / 5%)',
433
+ md: '0 0 0 1px rgb(255 255 255 / 6%), 0 12px 28px rgb(0 0 0 / 16%)',
434
+ overlay: '0 24px 70px rgb(0 0 0 / 34%)',
435
+ section: '0 18px 54px rgb(0 0 0 / 22%)',
399
436
  },
400
437
  status: {
401
438
  primary: {
402
- color: '#6e56cf',
403
- text: '#baa7ff',
404
- soft: '#8354fe36',
405
- border: '#8f6cfd6d',
439
+ color: '#7c3aed',
440
+ text: '#d8ccff',
441
+ soft: 'rgb(124 58 237 / 16%)',
442
+ border: 'rgb(168 139 250 / 18%)',
443
+ },
444
+ success: {
445
+ color: '#22c55e',
446
+ text: '#86efac',
447
+ soft: 'rgb(34 197 94 / 12%)',
448
+ border: 'rgb(34 197 94 / 16%)',
449
+ },
450
+ warning: {
451
+ color: '#f59e0b',
452
+ text: '#fbbf24',
453
+ soft: 'rgb(245 158 11 / 13%)',
454
+ border: 'rgb(245 158 11 / 18%)',
455
+ },
456
+ info: {
457
+ color: '#60a5fa',
458
+ text: '#93c5fd',
459
+ soft: 'rgb(37 99 235 / 16%)',
460
+ border: 'rgb(96 165 250 / 18%)',
406
461
  },
407
462
  },
408
463
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orcestr/ui",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Shared React UI package for Orcestr products.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",