@scinverse/ui 0.1.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 (92) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +63 -0
  3. package/dist/components/Badge/Badge.d.ts +16 -0
  4. package/dist/components/Badge/index.d.ts +1 -0
  5. package/dist/components/Button/Button.d.ts +19 -0
  6. package/dist/components/Button/index.d.ts +1 -0
  7. package/dist/components/Card/Card.d.ts +17 -0
  8. package/dist/components/Card/index.d.ts +1 -0
  9. package/dist/components/Checkbox/Checkbox.d.ts +15 -0
  10. package/dist/components/Checkbox/index.d.ts +1 -0
  11. package/dist/components/Dropdown/Dropdown.d.ts +46 -0
  12. package/dist/components/Dropdown/index.d.ts +1 -0
  13. package/dist/components/Filter/Filter.d.ts +22 -0
  14. package/dist/components/Filter/filterModel.d.ts +68 -0
  15. package/dist/components/Filter/index.d.ts +2 -0
  16. package/dist/components/Input/FieldCaption.d.ts +9 -0
  17. package/dist/components/Input/Input.d.ts +16 -0
  18. package/dist/components/Input/SearchBar.d.ts +15 -0
  19. package/dist/components/Input/TextArea.d.ts +13 -0
  20. package/dist/components/Input/index.d.ts +3 -0
  21. package/dist/components/Panel/Panel.d.ts +6 -0
  22. package/dist/components/Panel/index.d.ts +1 -0
  23. package/dist/components/RadioGroup/Radio.d.ts +13 -0
  24. package/dist/components/RadioGroup/RadioGroup.d.ts +19 -0
  25. package/dist/components/RadioGroup/RadioGroupContext.d.ts +11 -0
  26. package/dist/components/RadioGroup/index.d.ts +2 -0
  27. package/dist/components/Switcher/Switcher.d.ts +16 -0
  28. package/dist/components/Switcher/index.d.ts +1 -0
  29. package/dist/components/Tip/Tip.d.ts +21 -0
  30. package/dist/components/Tip/index.d.ts +1 -0
  31. package/dist/icons/SvgIcon.d.ts +38 -0
  32. package/dist/icons/branding.d.ts +20 -0
  33. package/dist/icons/buttonIcons.d.ts +32 -0
  34. package/dist/icons/createSvgIcon.d.ts +10 -0
  35. package/dist/icons/flagIcons.d.ts +20 -0
  36. package/dist/icons/index.d.ts +7 -0
  37. package/dist/icons/labels.d.ts +4 -0
  38. package/dist/icons/railIcons.d.ts +16 -0
  39. package/dist/index.cjs +200 -0
  40. package/dist/index.cjs.map +1 -0
  41. package/dist/index.d.ts +17 -0
  42. package/dist/index.js +1605 -0
  43. package/dist/index.js.map +1 -0
  44. package/dist/placeFixedMenu.d.ts +10 -0
  45. package/dist/styles.cjs +0 -0
  46. package/dist/styles.css +2 -0
  47. package/dist/styles.js +0 -0
  48. package/dist/svg/flags/de.svg +1 -0
  49. package/dist/svg/flags/en.svg +23 -0
  50. package/dist/svg/flags/es.svg +1 -0
  51. package/dist/svg/flags/fr.svg +1 -0
  52. package/dist/svg/flags/it.svg +1 -0
  53. package/dist/svg/flags/nl.svg +1 -0
  54. package/dist/svg/flags/pt.svg +1 -0
  55. package/dist/svg/flags/ru.svg +1 -0
  56. package/dist/svg/flags/zh.svg +15 -0
  57. package/dist/svg/marks/nc-icon.svg +9 -0
  58. package/dist/svg/marks/nc-scinverse-icon.svg +34 -0
  59. package/dist/svg/marks/ohs-icon.svg +3 -0
  60. package/dist/svg/marks/ohs-scinverse-icon.svg +37 -0
  61. package/dist/svg/marks/scinverse-avatar.svg +13 -0
  62. package/dist/svg/marks/scinverse-icon.svg +20 -0
  63. package/dist/svg/marks/scinverse-logo.svg +4 -0
  64. package/dist/svg/marks/ui-kit-icon.svg +6 -0
  65. package/dist/svg/marks/ui-kit-scinverse-icon.svg +34 -0
  66. package/dist/svg/set/arrow-drop-down.svg +3 -0
  67. package/dist/svg/set/arrow-drop-up.svg +3 -0
  68. package/dist/svg/set/bell.svg +4 -0
  69. package/dist/svg/set/check.svg +3 -0
  70. package/dist/svg/set/chevron-down.svg +3 -0
  71. package/dist/svg/set/close.svg +3 -0
  72. package/dist/svg/set/exchange.svg +6 -0
  73. package/dist/svg/set/eye-slash.svg +3 -0
  74. package/dist/svg/set/eye.svg +3 -0
  75. package/dist/svg/set/help.svg +5 -0
  76. package/dist/svg/set/integration.svg +5 -0
  77. package/dist/svg/set/loading.svg +11 -0
  78. package/dist/svg/set/logout.svg +5 -0
  79. package/dist/svg/set/messages.svg +4 -0
  80. package/dist/svg/set/moon.svg +6 -0
  81. package/dist/svg/set/news.svg +3 -0
  82. package/dist/svg/set/pencil.svg +4 -0
  83. package/dist/svg/set/plus.svg +3 -0
  84. package/dist/svg/set/power.svg +3 -0
  85. package/dist/svg/set/refresh.svg +3 -0
  86. package/dist/svg/set/search.svg +3 -0
  87. package/dist/svg/set/settings.svg +4 -0
  88. package/dist/svg/set/sun.svg +4 -0
  89. package/dist/svg/set/system.svg +5 -0
  90. package/dist/svg/set/user.svg +4 -0
  91. package/dist/theme/ThemeProvider.d.ts +15 -0
  92. package/package.json +70 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Scinverse
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,63 @@
1
+ # @scinverse/ui
2
+
3
+ React 19 component library for Scinverse apps. Design tokens in CSS custom properties, CSS Modules for component styles, no runtime dependencies.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ pnpm add @scinverse/ui
9
+ ```
10
+
11
+ `react` and `react-dom` are peer dependencies (`^19.0.0`).
12
+
13
+ ## Use
14
+
15
+ Import the stylesheet once at the app root, then the components anywhere:
16
+
17
+ ```tsx
18
+ import '@scinverse/ui/styles.css';
19
+ import { ThemeProvider, Button, PlusIcon } from '@scinverse/ui';
20
+
21
+ export function App() {
22
+ return (
23
+ <ThemeProvider>
24
+ <Button variant="primary">
25
+ <PlusIcon size="sm" />
26
+ Save
27
+ </Button>
28
+ </ThemeProvider>
29
+ );
30
+ }
31
+ ```
32
+
33
+ Styles are deliberately opt-in — the JS entry has no CSS side effect, so several
34
+ copies of the package on one page (Module Federation remotes, for example) cannot
35
+ load the token layer twice and fight over `:root`.
36
+
37
+ ## Entry points
38
+
39
+ | Specifier | Contents |
40
+ | :--- | :--- |
41
+ | `@scinverse/ui` | Components, icons, `ThemeProvider` |
42
+ | `@scinverse/ui/styles.css` | Tokens, base rules, every component's CSS |
43
+ | `@scinverse/ui/svg/{set,marks,flags}/<name>.svg` | Raw glyph sources behind the icon components |
44
+
45
+ ## Theming
46
+
47
+ `ThemeProvider` writes `data-theme="dark" \| "light"` on `<html>` and persists the
48
+ choice in `localStorage`. Pass `target="local"` to scope it to a wrapper element
49
+ instead, which is what a federated remote inside a themed host wants.
50
+
51
+ Every visual value resolves from a `--sci-*` custom property, so overriding the
52
+ palette is a matter of redeclaring them after the import:
53
+
54
+ ```css
55
+ :root {
56
+ --sci-color-accent: #0b79ff;
57
+ --sci-radius-md: 8px;
58
+ }
59
+ ```
60
+
61
+ ## License
62
+
63
+ MIT
package/dist/components/Badge/Badge.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { HTMLAttributes, ReactNode } from 'react';
2
+ import { type IconColor } from '../../icons/SvgIcon';
3
+ export type BadgeSize = 'small' | 'medium' | 'large';
4
+ /** Same token names as SvgIcon `color`. */
5
+ export type BadgeColor = IconColor;
6
+ export type BadgeRound = 'rounded' | 'basic' | number;
7
+ export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
8
+ children: ReactNode;
9
+ /** Default medium. */
10
+ size?: BadgeSize;
11
+ /** Palette token or raw CSS. Omit = muted. */
12
+ color?: BadgeColor | (string & {});
13
+ /** `basic` (default) — 4px. `rounded` — 12px. A number is px. */
14
+ round?: BadgeRound;
15
+ }
16
+ export declare function Badge({ children, size, color, round, className, style, ...rest }: BadgeProps): import("react").JSX.Element;
package/dist/components/Badge/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Badge, type BadgeColor, type BadgeProps, type BadgeRound, type BadgeSize } from './Badge';
package/dist/components/Button/Button.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import type { ButtonHTMLAttributes, ReactNode } from 'react';
2
+ import { type IconColor } from '../../icons/SvgIcon';
3
+ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'panel';
4
+ export type ButtonSize = 'small' | 'medium' | 'large';
5
+ /** Same token names as SvgIcon `color`. */
6
+ export type ButtonColor = IconColor;
7
+ /** Pressed look: `true` / `accent` = recording wash; `dark` = R5 fill. */
8
+ export type ButtonToggled = boolean | 'accent' | 'dark';
9
+ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
10
+ variant?: ButtonVariant;
11
+ /** Default medium — same footprint as Basic. */
12
+ size?: ButtonSize;
13
+ /** Palette token or raw CSS color. Omit = variant defaults. */
14
+ color?: ButtonColor | (string & {});
15
+ /** Pressed / on. `true` is the accent wash; `dark` is the R5 fill. */
16
+ toggled?: ButtonToggled;
17
+ children?: ReactNode;
18
+ }
19
+ export declare function Button({ variant, size, color, toggled, className, type, style, children, ...rest }: ButtonProps): import("react").JSX.Element;
package/dist/components/Button/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonToggled, type ButtonVariant, } from './Button';
package/dist/components/Card/Card.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import type { ButtonHTMLAttributes, ReactNode } from 'react';
2
+ import { type IconColor } from '../../icons/SvgIcon';
3
+ export interface CardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'name'> {
4
+ name: ReactNode;
5
+ kind?: ReactNode;
6
+ selected?: boolean;
7
+ /** Status dot, soon badge, anything. */
8
+ end?: ReactNode;
9
+ }
10
+ export type CardDotTone = Extract<IconColor, 'accent' | 'success' | 'warning' | 'error' | 'muted'>;
11
+ export interface CardDotProps {
12
+ tone?: CardDotTone;
13
+ label?: string;
14
+ }
15
+ /** Selectable rail row: name, kind, trailing mark. */
16
+ export declare function Card({ name, kind, selected, end, className, type, ...rest }: CardProps): import("react").JSX.Element;
17
+ export declare function CardDot({ tone, label }: CardDotProps): import("react").JSX.Element;
package/dist/components/Card/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Card, CardDot, type CardDotProps, type CardDotTone, type CardProps, } from './Card';
package/dist/components/Checkbox/Checkbox.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { type InputHTMLAttributes, type ReactNode } from 'react';
2
+ import { type IconColor } from '../../icons/SvgIcon';
3
+ export type CheckboxSize = 'small' | 'medium' | 'large';
4
+ /** Same token names as SvgIcon `color`. */
5
+ export type CheckboxColor = IconColor;
6
+ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'color'> {
7
+ label?: ReactNode;
8
+ /** Default medium. */
9
+ size?: CheckboxSize;
10
+ /** Palette token or raw CSS color. Omit = accent when checked. */
11
+ color?: CheckboxColor | (string & {});
12
+ /** Visual mixed state. Set on the DOM node — not a native React attribute. */
13
+ indeterminate?: boolean;
14
+ }
15
+ export declare function Checkbox({ label, size, color, className, id, style, indeterminate, ...rest }: CheckboxProps): import("react").JSX.Element;
package/dist/components/Checkbox/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Checkbox, type CheckboxColor, type CheckboxProps, type CheckboxSize, } from './Checkbox';
package/dist/components/Dropdown/Dropdown.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { type ReactNode } from 'react';
2
+ export type DropdownVariant = 'field' | 'icon' | 'selector' | 'context';
3
+ export interface DropdownOption<T extends string = string> {
4
+ value: T;
5
+ label: string;
6
+ /** Glyph in the icon / context variants. */
7
+ icon?: ReactNode;
8
+ /** Context row — error color on hover. */
9
+ danger?: boolean;
10
+ }
11
+ export interface DropdownProps<T extends string = string> {
12
+ options: readonly DropdownOption<T>[];
13
+ value?: T;
14
+ defaultValue?: T;
15
+ onChange?: (value: T) => void;
16
+ /**
17
+ * `field` — form select (Input chrome).
18
+ * `icon` — header language control: 30×30 panel button + flag menu.
19
+ * `selector` — filter [+] : multi-select, kit Checkbox, OK.
20
+ * `context` — portal at `anchor`. Host opens it from `onContextMenu`.
21
+ */
22
+ variant?: DropdownVariant;
23
+ /** Checked keys (`selector`). */
24
+ selected?: readonly T[];
25
+ defaultSelected?: readonly T[];
26
+ onSelectedChange?: (selected: T[]) => void;
27
+ /** Caption above the field. Omit for a bare trigger. */
28
+ label?: ReactNode;
29
+ /** Stretch to the parent. Default hugs the selected label. */
30
+ fullWidth?: boolean;
31
+ /** Fixed width (px if number). Omit for content width. */
32
+ width?: number | string;
33
+ disabled?: boolean;
34
+ className?: string;
35
+ id?: string;
36
+ 'aria-label'?: string;
37
+ /** Pointer (`variant="context"`). `null` / omit — closed. */
38
+ anchor?: {
39
+ x: number;
40
+ y: number;
41
+ } | null;
42
+ /** Backdrop, Escape, pick (`variant="context"`). */
43
+ onClose?: () => void;
44
+ }
45
+ /** Form select, header language icon, filter [+], or a right-click menu. */
46
+ export declare function Dropdown<T extends string = string>({ options, value, defaultValue, onChange, variant, selected, defaultSelected, onSelectedChange, label, fullWidth, width, disabled, className, id, 'aria-label': ariaLabel, anchor, onClose, }: DropdownProps<T>): import("react").JSX.Element | null;
package/dist/components/Dropdown/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Dropdown, type DropdownOption, type DropdownProps, type DropdownVariant, } from './Dropdown';
package/dist/components/Filter/Filter.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { type FilterMenuItem, type FilterSpec } from './filterModel';
2
+ export type { FilterMenuItem, FilterOption, FilterRadioGroup, FilterSpec } from './filterModel';
3
+ export interface FilterProps {
4
+ available: readonly FilterMenuItem[];
5
+ /** Keys added via [+], in add order. */
6
+ active: readonly string[];
7
+ specs: Record<string, FilterSpec>;
8
+ /** Always-visible chips. Not cleared by [×]. */
9
+ pinned?: readonly string[];
10
+ onAdd: (key: string) => void;
11
+ onRemove: (key: string) => void;
12
+ onClear: () => void;
13
+ addLabel?: string;
14
+ clearLabel?: string;
15
+ className?: string;
16
+ }
17
+ /**
18
+ * Dynamic filter bar: [+] chips [×].
19
+ * First × on a chip resets to default; second × removes it.
20
+ * [×] drops every chip added through [+].
21
+ */
22
+ export declare function Filter({ available, active, specs, pinned, onAdd, onRemove, onClear, addLabel, clearLabel, className, }: FilterProps): import("react").JSX.Element;
package/dist/components/Filter/filterModel.d.ts ADDED
@@ -0,0 +1,68 @@
1
+ import type { ReactNode } from 'react';
2
+ /** Option in a chip popover. */
3
+ export interface FilterOption {
4
+ id: string;
5
+ label: string;
6
+ /** Extra count on the right (selected instruments, members). */
7
+ count?: number;
8
+ disabled?: boolean;
9
+ /** Tip — why disabled, etc. */
10
+ title?: string;
11
+ /** Leading glyph. */
12
+ icon?: ReactNode;
13
+ }
14
+ /** Radio group under the options. */
15
+ export interface FilterRadioGroup {
16
+ label: string;
17
+ options: FilterOption[];
18
+ selected: string;
19
+ onChange: (id: string) => void;
20
+ }
21
+ /**
22
+ * One chip. The bar does not know about stores or hosts — bind through this spec.
23
+ */
24
+ export interface FilterSpec {
25
+ key: string;
26
+ name: string;
27
+ /** `single` — radio, closes on pick. `multi` — checkboxes. */
28
+ mode: 'single' | 'multi';
29
+ options: FilterOption[];
30
+ /** Selected ids. Empty id `''` is neutral (no chip value). */
31
+ selected: string[];
32
+ onChange: (selected: string[]) => void;
33
+ /** Multi: master «All» + divider. */
34
+ masterAll?: boolean;
35
+ applyScope?: FilterRadioGroup;
36
+ /**
37
+ * × removes the chip immediately.
38
+ * Empty `options` and no `content` — tag chip, no popover.
39
+ */
40
+ removeOnly?: boolean;
41
+ /** Always shown; × only resets. */
42
+ pinned?: boolean;
43
+ /** Override chip value text. */
44
+ summary?: string;
45
+ /** When set, first × uses this instead of «no summary». */
46
+ atDefault?: boolean;
47
+ onReset?: () => void;
48
+ /** Custom popover body. */
49
+ content?: ReactNode;
50
+ footerActions?: {
51
+ label: string;
52
+ onClick: () => void;
53
+ }[];
54
+ optionActions?: Record<string, {
55
+ label: string;
56
+ title?: string;
57
+ onClick: () => void;
58
+ }>;
59
+ }
60
+ /** Row in the [+] menu. */
61
+ export interface FilterMenuItem {
62
+ key: string;
63
+ name: string;
64
+ }
65
+ export declare function isTagChip(spec: FilterSpec): boolean;
66
+ export declare function summarize(spec: FilterSpec): string | undefined;
67
+ export declare function isSpecAtDefault(spec: FilterSpec): boolean;
68
+ export declare function resetSpec(spec: FilterSpec): void;
package/dist/components/Filter/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Filter, type FilterProps } from './Filter';
2
+ export type { FilterMenuItem, FilterOption, FilterRadioGroup, FilterSpec, } from './filterModel';
package/dist/components/Input/FieldCaption.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { ReactNode } from 'react';
2
+ /** Caption above Input / TextArea / Dropdown. Bare control when `label` is omitted. */
3
+ export declare function FieldCaption({ label, htmlFor, fullWidth, children, }: {
4
+ label?: ReactNode;
5
+ htmlFor?: string;
6
+ /** Stretch to the parent. Default hugs the control. */
7
+ fullWidth?: boolean;
8
+ children: ReactNode;
9
+ }): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
package/dist/components/Input/Input.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { type InputHTMLAttributes, type ReactNode } from 'react';
2
+ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
3
+ type?: 'text' | 'search' | 'email' | 'url' | 'password' | 'number';
4
+ /** Caption above the field. Omit for a bare input. */
5
+ label?: ReactNode;
6
+ /** Stretch to the parent. Default hugs the content. */
7
+ fullWidth?: boolean;
8
+ /** Red border after a failed validation. */
9
+ invalid?: boolean;
10
+ /** Password reveal — shown. Default matches the login form. */
11
+ showPasswordLabel?: string;
12
+ /** Password reveal — hidden. */
13
+ hidePasswordLabel?: string;
14
+ }
15
+ /** Single-line field. Same chrome as SearchBar / Dropdown — no system focus ring. */
16
+ export declare function Input({ className, type, label, fullWidth, invalid, disabled, id, showPasswordLabel, hidePasswordLabel, ...rest }: InputProps): import("react").JSX.Element;
package/dist/components/Input/SearchBar.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { type InputHTMLAttributes } from 'react';
2
+ export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
3
+ /** Stretch to the parent. Default is the compact width. */
4
+ fullWidth?: boolean;
5
+ /**
6
+ * Debounced value. First emit is skipped when it matches the starting value.
7
+ */
8
+ onSearch?: (query: string) => void;
9
+ /** Delay before `onSearch`, in ms. Default 300. Use 500+ for a large catalog. */
10
+ debounce?: number;
11
+ /** aria-label on the clear control. */
12
+ clearLabel?: string;
13
+ }
14
+ /** Text query field: icon, optional clear, optional debounce. */
15
+ export declare function SearchBar({ className, fullWidth, onSearch, debounce, clearLabel, value, defaultValue, onChange, disabled, ...rest }: SearchBarProps): import("react").JSX.Element;
package/dist/components/Input/TextArea.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type ReactNode, type TextareaHTMLAttributes } from 'react';
2
+ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
3
+ /** Caption above the field. Omit for a bare textarea. */
4
+ label?: ReactNode;
5
+ /** Stretch to the parent. Default hugs the content. */
6
+ fullWidth?: boolean;
7
+ /** Monospace (glob, code). */
8
+ mono?: boolean;
9
+ /** Red border after a failed validation. */
10
+ invalid?: boolean;
11
+ }
12
+ /** Multiline field. Same chrome as Input. */
13
+ export declare function TextArea({ className, label, fullWidth, mono, invalid, id, ...rest }: TextAreaProps): import("react").JSX.Element;
package/dist/components/Input/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { Input, type InputProps } from './Input';
2
+ export { SearchBar, type SearchBarProps } from './SearchBar';
3
+ export { TextArea, type TextAreaProps } from './TextArea';
package/dist/components/Panel/Panel.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { HTMLAttributes, ReactNode } from 'react';
2
+ export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
3
+ title?: string;
4
+ children?: ReactNode;
5
+ }
6
+ export declare function Panel({ title, children, className, ...rest }: PanelProps): import("react").JSX.Element;
package/dist/components/Panel/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Panel, type PanelProps } from './Panel';
package/dist/components/RadioGroup/Radio.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { InputHTMLAttributes, ReactNode } from 'react';
2
+ import { type IconColor } from '../../icons/SvgIcon';
3
+ export type RadioSize = 'small' | 'medium' | 'large';
4
+ /** Same token names as SvgIcon `color`. */
5
+ export type RadioColor = IconColor;
6
+ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'color'> {
7
+ label?: ReactNode;
8
+ /** Default medium. Group value wins if the radio omits size. */
9
+ size?: RadioSize;
10
+ /** Palette token or raw CSS color. Omit = accent when selected. */
11
+ color?: RadioColor | (string & {});
12
+ }
13
+ export declare function Radio({ label, size: sizeProp, color: colorProp, className, id, style, name: nameProp, disabled: disabledProp, checked: checkedProp, value, onChange, ...rest }: RadioProps): import("react").JSX.Element;
package/dist/components/RadioGroup/RadioGroup.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { type ChangeEvent, type HTMLAttributes, type ReactNode } from 'react';
2
+ import type { RadioColor, RadioSize } from './Radio';
3
+ export type RadioGroupOrientation = 'vertical' | 'horizontal';
4
+ export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
5
+ /** Shared `name` for the radios. Auto-generated when omitted. */
6
+ name?: string;
7
+ value?: string;
8
+ defaultValue?: string;
9
+ onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
10
+ /** Default vertical. */
11
+ orientation?: RadioGroupOrientation;
12
+ disabled?: boolean;
13
+ size?: RadioSize;
14
+ color?: RadioColor | (string & {});
15
+ /** Visible group title; also used as `aria-label` when that is omitted. */
16
+ label?: ReactNode;
17
+ children?: ReactNode;
18
+ }
19
+ export declare function RadioGroup({ name: nameProp, value: valueProp, defaultValue, onChange, orientation, disabled, size, color, label, className, children, 'aria-label': ariaLabel, ...rest }: RadioGroupProps): import("react").JSX.Element;
package/dist/components/RadioGroup/RadioGroupContext.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { type ChangeEvent } from 'react';
2
+ import type { RadioColor, RadioSize } from './Radio';
3
+ export type RadioGroupContextValue = {
4
+ name: string;
5
+ value?: string;
6
+ disabled?: boolean;
7
+ size?: RadioSize;
8
+ color?: RadioColor | (string & {});
9
+ onSelect: (event: ChangeEvent<HTMLInputElement>) => void;
10
+ };
11
+ export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
package/dist/components/RadioGroup/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Radio, type RadioColor, type RadioProps, type RadioSize } from './Radio';
2
+ export { RadioGroup, type RadioGroupOrientation, type RadioGroupProps, } from './RadioGroup';
package/dist/components/Switcher/Switcher.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { ButtonHTMLAttributes, ReactNode } from 'react';
2
+ export type SwitcherPhase = 'off' | 'connecting' | 'active' | 'waiting' | 'degraded' | 'error' | 'unreachable';
3
+ /** `medium` — Connection track. `small` — Auto. */
4
+ export type SwitcherSize = 'medium' | 'small';
5
+ export interface SwitcherProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onToggle'> {
6
+ /** Track color and knob position. Default `off`. */
7
+ phase?: SwitcherPhase;
8
+ /** When `phase` is omitted: `true` → `active`, `false` → `off`. */
9
+ checked?: boolean;
10
+ label?: ReactNode;
11
+ /** Default medium (Connection). Small is Auto. */
12
+ size?: SwitcherSize;
13
+ onToggle?: () => void;
14
+ }
15
+ /** Colored track switch — Connection (medium) and Auto (small). */
16
+ export declare function Switcher({ phase: phaseProp, checked, label, size, disabled, onToggle, className, ...rest }: SwitcherProps): import("react").JSX.Element;
package/dist/components/Switcher/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Switcher, type SwitcherPhase, type SwitcherProps, type SwitcherSize, } from './Switcher';
package/dist/components/Tip/Tip.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { type ReactNode, type RefObject } from 'react';
2
+ type Side = 'bottom' | 'top';
3
+ export interface TipProps {
4
+ /** Tooltip text. Empty / undefined — no tip. */
5
+ content?: string;
6
+ /** Preferred side (default bottom-center; flips near the edge). */
7
+ side?: Side;
8
+ /** Stretch host to 100% (grid cells / full-width buttons). */
9
+ block?: boolean;
10
+ /** Clamp position to this element (otherwise the viewport). */
11
+ boundaryRef?: RefObject<HTMLElement | null>;
12
+ className?: string;
13
+ children: ReactNode;
14
+ }
15
+ /**
16
+ * Custom tooltip used by NC and OHS Console (portal → not clipped by overflow).
17
+ * Same props as those copies (`delivery/spec.md` §4): hosts swap the import, not call sites.
18
+ * Do not pair with native `title` — you would get a double tip.
19
+ */
20
+ export declare function Tip({ content, side, block, boundaryRef, className, children }: TipProps): import("react").JSX.Element;
21
+ export {};
package/dist/components/Tip/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Tip, type TipProps } from './Tip';
package/dist/icons/SvgIcon.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ import type { ElementType, ReactNode, SVGProps } from 'react';
2
+ /** Token names only — raw CSS colors go through the `(string & {})` branch. */
3
+ export type IconColor = 'inherit' | 'accent' | 'focus' | 'success' | 'warning' | 'error' | 'ink' | 'text' | 'text-secondary' | 'muted';
4
+ export type IconSizeToken = 'sm' | 'md' | 'lg';
5
+ export type SvgIconProps = {
6
+ color?: IconColor | (string & {});
7
+ /** Token or px. Omit = md (24). */
8
+ size?: IconSizeToken | number;
9
+ /**
10
+ * Outline stroke thickness → `strokeWidth`.
11
+ * Meaningful for stroke glyphs; ignored by filled marks that do not stroke.
12
+ */
13
+ weight?: number;
14
+ /** Accessible name → `<title>` + role="img". Without it: aria-hidden. */
15
+ title?: string;
16
+ /** Render as another element/component (SVGR mark, custom svg root). */
17
+ component?: ElementType;
18
+ /** Take viewBox from `component` instead of forcing the default. */
19
+ inheritViewBox?: boolean;
20
+ /** Default viewBox when not inheriting. */
21
+ viewBox?: string;
22
+ children?: ReactNode;
23
+ } & Omit<SVGProps<SVGSVGElement>, 'color' | 'width' | 'height'>;
24
+ /** Size tokens → px. Numbers pass through. */
25
+ export declare const ICON_SIZE_PX: {
26
+ readonly sm: 16;
27
+ readonly md: 24;
28
+ readonly lg: 32;
29
+ };
30
+ /**
31
+ * Token → CSS color value.
32
+ * `inherit` = no override (currentColor from parent).
33
+ * Raw strings (`#hex`, `rgb()`, `var(...)`) are used as-is.
34
+ */
35
+ export declare const ICON_COLOR_CSS: Record<Exclude<IconColor, 'inherit'>, string>;
36
+ export declare function resolveIconSize(size?: IconSizeToken | number): number;
37
+ export declare function resolveIconColor(color?: IconColor | (string & {})): string | undefined;
38
+ export declare function SvgIcon({ color, size, weight, title, component: Component, inheritViewBox, viewBox, className, style, strokeWidth, children, ...rest }: SvgIconProps): import("react").JSX.Element;
package/dist/icons/branding.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { type SvgIconProps } from './SvgIcon';
2
+ export type BrandMarkProps = Omit<SvgIconProps, 'component' | 'inheritViewBox' | 'children'>;
3
+ /** Geometric globe. Favicon, tab, small chrome. */
4
+ export declare function ScinverseIcon(props: BrandMarkProps): import("react").JSX.Element;
5
+ /** Spatial globe. Header, README, lockup. */
6
+ export declare function ScinverseLogo(props: BrandMarkProps): import("react").JSX.Element;
7
+ /** Detailed globe. Org avatar, profile, large circles. No outer ring. */
8
+ export declare function ScinverseAvatar(props: BrandMarkProps): import("react").JSX.Element;
9
+ /** OHS on the Scinverse globe — product lockup in headers. */
10
+ export declare function ConnectionOhsIcon(props: BrandMarkProps): import("react").JSX.Element;
11
+ /** NC on the Scinverse globe — product lockup in headers. */
12
+ export declare function ConnectionNcIcon(props: BrandMarkProps): import("react").JSX.Element;
13
+ /** UI kit on the Scinverse globe — product lockup in headers. */
14
+ export declare function ConnectionUiKitIcon(props: BrandMarkProps): import("react").JSX.Element;
15
+ /** OHS — ring with segment cuts and a bar chart. */
16
+ export declare function ServiceOhsIcon(props: BrandMarkProps): import("react").JSX.Element;
17
+ /** NC — bell in a ring. */
18
+ export declare function ServiceNcIcon(props: BrandMarkProps): import("react").JSX.Element;
19
+ /** UI kit — palette. */
20
+ export declare function ServiceUiKitIcon(props: BrandMarkProps): import("react").JSX.Element;
package/dist/icons/buttonIcons.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ /** 16-grid — at `sm` / 16px the bars sit on the pixel grid. Stroke is the kit default 1.7. */
2
+ export declare const PlusIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
3
+ export declare const MinusIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
4
+ /** Recording start/stop — OHS power/standby (filled). */
5
+ export declare const PowerIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
6
+ export declare const CloseIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
7
+ /** Magnifier — FilterSearch / SearchBar (same path as OHS Console toolbar). */
8
+ export declare const SearchIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
9
+ /** Login form password reveal — Font Awesome `fa-eye`. */
10
+ export declare const EyeIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
11
+ /** Login form password hide — Font Awesome `fa-eye-slash`. */
12
+ export declare const EyeSlashIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
13
+ export declare const CheckIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
14
+ export declare const ChevronDownIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
15
+ /** Material arrow_drop_down — closed Dropdown caret. */
16
+ export declare const ArrowDropDownIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
17
+ /** Material arrow_drop_up — open Dropdown caret. */
18
+ export declare const ArrowDropUpIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
19
+ /** Theme toggle — light side (shown while dark is active). */
20
+ export declare const SunIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
21
+ /** Theme toggle — dark side (shown while light is active). */
22
+ export declare const MoonIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
23
+ /** Header / rail — sign out. */
24
+ export declare const LogoutIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
25
+ /** Edit action — same pencil as the console context menu. */
26
+ export declare const PencilIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
27
+ /** Header / rail — system settings gear. */
28
+ export declare const SettingsIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
29
+ /** Reload / refresh action — two circular arrows. */
30
+ export declare const RefreshIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
31
+ /** Indeterminate loading — arc spinner (SMIL). */
32
+ export declare const LoadingIcon: (props: import("./SvgIcon").SvgIconProps) => import("react").ReactElement;
package/dist/icons/createSvgIcon.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { ReactElement, ReactNode } from 'react';
2
+ import { type SvgIconProps } from './SvgIcon';
3
+ export type CreateSvgIconOptions = {
4
+ viewBox?: string;
5
+ /** `stroke` = outline defaults (action glyphs). `fill` = filled path. */
6
+ kind?: 'stroke' | 'fill';
7
+ /** Default outline thickness for `kind: 'stroke'`. Maps to `strokeWidth`. Default 1.7. */
8
+ weight?: number;
9
+ };
10
+ export declare function createSvgIcon(path: ReactNode, displayName: string, options?: CreateSvgIconOptions): (props: SvgIconProps) => ReactElement;
package/dist/icons/flagIcons.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { type SvgIconProps } from './SvgIcon';
2
+ export type FlagIconProps = Omit<SvgIconProps, 'component' | 'inheritViewBox' | 'children'>;
3
+ /** English — circle-flags:gb */
4
+ export declare function FlagEnIcon(props: FlagIconProps): import("react").JSX.Element;
5
+ /** French — circle-flags:fr */
6
+ export declare function FlagFrIcon(props: FlagIconProps): import("react").JSX.Element;
7
+ /** Russian — circle-flags:ru */
8
+ export declare function FlagRuIcon(props: FlagIconProps): import("react").JSX.Element;
9
+ /** German — circle-flags:de */
10
+ export declare function FlagDeIcon(props: FlagIconProps): import("react").JSX.Element;
11
+ /** Italian — circle-flags:it */
12
+ export declare function FlagItIcon(props: FlagIconProps): import("react").JSX.Element;
13
+ /** Spanish — circle-flags:es */
14
+ export declare function FlagEsIcon(props: FlagIconProps): import("react").JSX.Element;
15
+ /** Portuguese — circle-flags:pt */
16
+ export declare function FlagPtIcon(props: FlagIconProps): import("react").JSX.Element;
17
+ /** Dutch — circle-flags:nl */
18
+ export declare function FlagNlIcon(props: FlagIconProps): import("react").JSX.Element;
19
+ /** Chinese */
20
+ export declare function FlagZhIcon(props: FlagIconProps): import("react").JSX.Element;
package/dist/icons/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export { SvgIcon, resolveIconColor, resolveIconSize, ICON_COLOR_CSS, ICON_SIZE_PX, type SvgIconProps, type IconColor, type IconSizeToken, } from './SvgIcon';
2
+ export { createSvgIcon, type CreateSvgIconOptions } from './createSvgIcon';
3
+ export { ScinverseIcon, ScinverseLogo, ScinverseAvatar, ConnectionOhsIcon, ConnectionNcIcon, ConnectionUiKitIcon, ServiceOhsIcon, ServiceNcIcon, ServiceUiKitIcon, type BrandMarkProps, } from './branding';
4
+ export { FlagEnIcon, FlagFrIcon, FlagRuIcon, FlagDeIcon, FlagItIcon, FlagEsIcon, FlagPtIcon, FlagNlIcon, FlagZhIcon, type FlagIconProps, } from './flagIcons';
5
+ export { PlusIcon, MinusIcon, PowerIcon, CloseIcon, SearchIcon, EyeIcon, EyeSlashIcon, CheckIcon, ChevronDownIcon, ArrowDropDownIcon, ArrowDropUpIcon, SunIcon, MoonIcon, LogoutIcon, PencilIcon, SettingsIcon, RefreshIcon, LoadingIcon } from './buttonIcons';
6
+ export { ExchangeIcon, SystemIcon, IntegrationIcon, NewsIcon, MessagesIcon, HelpIcon, BellIcon, UserIcon } from './railIcons';
7
+ export { InfoLabelIcon, OkLabelIcon, WarnLabelIcon, ErrorLabelIcon } from './labels';