@seeqdev/qomponents 0.0.221 → 0.0.222
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/dist/index.esm.js +26 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/Badge/Badge.d.ts +2 -2
- package/dist/src/ColorPickerControl/ColorPickerControl.d.ts +17 -0
- package/dist/src/ColorPickerControl/ColorPickerControl.types.d.ts +25 -0
- package/dist/src/ColorPickerControl/index.d.ts +3 -0
- package/dist/src/ColorSwatch/ColorSwatch.d.ts +7 -0
- package/dist/src/ColorSwatch/ColorSwatch.types.d.ts +19 -0
- package/dist/src/ColorSwatch/index.d.ts +3 -0
- package/dist/src/EditorPanel/EditorPanel.d.ts +7 -0
- package/dist/src/EditorPanel/EditorPanel.types.d.ts +29 -0
- package/dist/src/EditorPanel/index.d.ts +3 -0
- package/dist/src/LoadingIndicator/LoadingIndicator.d.ts +2 -2
- package/dist/src/SegmentedControl/SegmentedControl.d.ts +15 -0
- package/dist/src/SegmentedControl/SegmentedControl.types.d.ts +25 -0
- package/dist/src/SegmentedControl/index.d.ts +3 -0
- package/dist/src/index.build.d.ts +5 -1
- package/dist/src/index.d.ts +5 -1
- package/dist/styles.css +217 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BadgeProps } from "./Badge.types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime3 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/Badge/Badge.d.ts
|
|
5
5
|
/**
|
|
@@ -10,6 +10,6 @@ declare const Badge: ({
|
|
|
10
10
|
variant,
|
|
11
11
|
testId,
|
|
12
12
|
extraClassNames
|
|
13
|
-
}: BadgeProps) =>
|
|
13
|
+
}: BadgeProps) => react_jsx_runtime3.JSX.Element;
|
|
14
14
|
//#endregion
|
|
15
15
|
export { Badge, Badge as default };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ColorPickerControlProps } from "./ColorPickerControl.types.js";
|
|
2
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/ColorPickerControl/ColorPickerControl.d.ts
|
|
5
|
+
declare function ColorPickerControl({
|
|
6
|
+
color,
|
|
7
|
+
label,
|
|
8
|
+
children,
|
|
9
|
+
placement,
|
|
10
|
+
align,
|
|
11
|
+
extraClassNames,
|
|
12
|
+
id,
|
|
13
|
+
testId,
|
|
14
|
+
onOpen
|
|
15
|
+
}: ColorPickerControlProps): react_jsx_runtime2.JSX.Element;
|
|
16
|
+
//#endregion
|
|
17
|
+
export { ColorPickerControl as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/ColorPickerControl/ColorPickerControl.types.d.ts
|
|
4
|
+
interface ColorPickerControlProps {
|
|
5
|
+
/** The currently selected color, displayed as a square swatch inside the trigger button. */
|
|
6
|
+
color: string;
|
|
7
|
+
/** Label text rendered alongside the swatch trigger button. */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Content rendered inside the popover when the trigger is clicked, typically a color palette. */
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
/** Optional click callback on the color swatch, e.g. when embedded inside a parent popover trigger. */
|
|
12
|
+
onOpen?: () => void;
|
|
13
|
+
/** Preferred side of the trigger where the popover should appear. Defaults to "bottom". */
|
|
14
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
15
|
+
/** Alignment of the popover relative to the trigger. Defaults to "start". */
|
|
16
|
+
align?: 'start' | 'center' | 'end';
|
|
17
|
+
/** Additional CSS classes to apply to the outer wrapper element. */
|
|
18
|
+
extraClassNames?: string;
|
|
19
|
+
/** HTML id attribute for the trigger button element. */
|
|
20
|
+
id?: string;
|
|
21
|
+
/** Test ID attribute applied to the popover container, used in automated testing. */
|
|
22
|
+
testId?: string;
|
|
23
|
+
}
|
|
24
|
+
//#endregion
|
|
25
|
+
export { ColorPickerControlProps };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ColorSwatchProps } from "./ColorSwatch.types.js";
|
|
2
|
+
import * as react0 from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/ColorSwatch/ColorSwatch.d.ts
|
|
5
|
+
declare const ColorSwatch: react0.ForwardRefExoticComponent<ColorSwatchProps & react0.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { ColorSwatch as default };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//#region src/ColorSwatch/ColorSwatch.types.d.ts
|
|
2
|
+
interface ColorSwatchProps {
|
|
3
|
+
/** The background color of the swatch button, as any valid CSS color string. */
|
|
4
|
+
'color': string;
|
|
5
|
+
/** Called when the swatch button is clicked. */
|
|
6
|
+
'onClick'?: () => void;
|
|
7
|
+
/** Accessible label for the swatch button, used by screen readers. */
|
|
8
|
+
'aria-label'?: string;
|
|
9
|
+
/** Size of the swatch button. Defaults to 'lg'. */
|
|
10
|
+
'size'?: 'sm' | 'md' | 'lg';
|
|
11
|
+
/** Additional CSS classes to apply to the swatch button. */
|
|
12
|
+
'extraClassNames'?: string;
|
|
13
|
+
/** HTML id attribute for the swatch button element. */
|
|
14
|
+
'id'?: string;
|
|
15
|
+
/** Test ID attribute for the swatch button, used in automated testing. */
|
|
16
|
+
'testId'?: string;
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
export { ColorSwatchProps };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { EditorPanelProps } from "./EditorPanel.types.js";
|
|
2
|
+
import { FunctionComponent } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/EditorPanel/EditorPanel.d.ts
|
|
5
|
+
declare const EditorPanel: FunctionComponent<EditorPanelProps>;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { EditorPanel as default };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/EditorPanel/EditorPanel.types.d.ts
|
|
4
|
+
interface EditorPanelProps {
|
|
5
|
+
/** The title displayed as a kicker above the panel content. */
|
|
6
|
+
title: string;
|
|
7
|
+
/** Content rendered inside the panel body between the title and action buttons. */
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
/** Called when the Apply button is clicked. When omitted, the Apply button is not rendered. */
|
|
10
|
+
onApply?: () => void;
|
|
11
|
+
/** Called when the Cancel button is clicked. When omitted, the Cancel button is not rendered. */
|
|
12
|
+
onCancel?: () => void;
|
|
13
|
+
/** When true, the Apply button is rendered in a disabled state. */
|
|
14
|
+
isApplyDisabled?: boolean;
|
|
15
|
+
/** Label for the Apply button. Defaults to "Apply". */
|
|
16
|
+
applyLabel?: string;
|
|
17
|
+
/** Label for the Cancel button. Defaults to "Cancel". */
|
|
18
|
+
cancelLabel?: string;
|
|
19
|
+
/** Controls the padding inside the panel body. Defaults to "normal". */
|
|
20
|
+
spacing?: 'normal' | 'spacious';
|
|
21
|
+
/** Additional CSS classes to apply to the panel container. */
|
|
22
|
+
extraClassNames?: string;
|
|
23
|
+
/** HTML id attribute for the panel container element. */
|
|
24
|
+
id?: string;
|
|
25
|
+
/** Test ID attribute for the panel container element, used in automated testing. */
|
|
26
|
+
testId?: string;
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { EditorPanelProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LoadingIndicatorProps } from "./LoadingIndicator.types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/LoadingIndicator/LoadingIndicator.d.ts
|
|
5
5
|
/**
|
|
@@ -19,6 +19,6 @@ declare const LoadingIndicator: ({
|
|
|
19
19
|
role,
|
|
20
20
|
onClick,
|
|
21
21
|
title
|
|
22
|
-
}: LoadingIndicatorProps) =>
|
|
22
|
+
}: LoadingIndicatorProps) => react_jsx_runtime4.JSX.Element;
|
|
23
23
|
//#endregion
|
|
24
24
|
export { LoadingIndicator as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SegmentedControlProps } from "./SegmentedControl.types.js";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/SegmentedControl/SegmentedControl.d.ts
|
|
5
|
+
declare function SegmentedControl<T extends string | number | boolean>({
|
|
6
|
+
options,
|
|
7
|
+
value,
|
|
8
|
+
onChange,
|
|
9
|
+
extraClassNames,
|
|
10
|
+
id,
|
|
11
|
+
testId,
|
|
12
|
+
ariaLabel
|
|
13
|
+
}: SegmentedControlProps<T>): react_jsx_runtime0.JSX.Element;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { SegmentedControl as default };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
//#region src/SegmentedControl/SegmentedControl.types.d.ts
|
|
2
|
+
interface SegmentedControlOption<T extends string | number | boolean> {
|
|
3
|
+
/** The text label displayed on the option button. */
|
|
4
|
+
label: string;
|
|
5
|
+
/** The value associated with this option, passed to `onChange` when selected. */
|
|
6
|
+
value: T;
|
|
7
|
+
}
|
|
8
|
+
interface SegmentedControlProps<T extends string | number | boolean> {
|
|
9
|
+
/** The list of options to render as selectable pill buttons. */
|
|
10
|
+
options: SegmentedControlOption<T>[];
|
|
11
|
+
/** The currently selected value. The matching option will be displayed as active. */
|
|
12
|
+
value: T;
|
|
13
|
+
/** Called with the selected option's value when a pill button is clicked. */
|
|
14
|
+
onChange?: (value: T) => void;
|
|
15
|
+
/** Additional CSS classes to apply to the container element. */
|
|
16
|
+
extraClassNames?: string;
|
|
17
|
+
/** HTML id attribute for the container element. */
|
|
18
|
+
id?: string;
|
|
19
|
+
/** Test ID attribute for the container element, used in automated testing. */
|
|
20
|
+
testId?: string;
|
|
21
|
+
/** Accessible label for the group of option buttons. */
|
|
22
|
+
ariaLabel?: string;
|
|
23
|
+
}
|
|
24
|
+
//#endregion
|
|
25
|
+
export { SegmentedControlOption, SegmentedControlProps };
|
|
@@ -46,8 +46,12 @@ import Collapse from "./Collapse/Collapse.js";
|
|
|
46
46
|
import { Slider } from "./Slider/Slider.js";
|
|
47
47
|
import ProgressBar from "./ProgressBar/ProgressBar.js";
|
|
48
48
|
import Carousel from "./Carousel/Carousel.js";
|
|
49
|
+
import SegmentedControl from "./SegmentedControl/SegmentedControl.js";
|
|
50
|
+
import EditorPanel from "./EditorPanel/EditorPanel.js";
|
|
51
|
+
import ColorSwatch from "./ColorSwatch/ColorSwatch.js";
|
|
52
|
+
import ColorPickerControl from "./ColorPickerControl/ColorPickerControl.js";
|
|
49
53
|
import LoadingIndicator from "./LoadingIndicator/LoadingIndicator.js";
|
|
50
54
|
import { QomponentsTheme } from "./constants.js";
|
|
51
55
|
import { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem } from "./ButtonWithDropdown/ButtonWithDropdown.types.js";
|
|
52
56
|
import ButtonWithDropdown from "./ButtonWithDropdown/ButtonWithDropdown.js";
|
|
53
|
-
export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, FormControlElement, GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
|
|
57
|
+
export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, ColorPickerControl, ColorSwatch, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, EditorPanel, FormControlElement, GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, SegmentedControl, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
|
package/dist/src/index.d.ts
CHANGED
|
@@ -46,8 +46,12 @@ import Collapse from "./Collapse/Collapse.js";
|
|
|
46
46
|
import { Slider } from "./Slider/Slider.js";
|
|
47
47
|
import ProgressBar from "./ProgressBar/ProgressBar.js";
|
|
48
48
|
import Carousel from "./Carousel/Carousel.js";
|
|
49
|
+
import SegmentedControl from "./SegmentedControl/SegmentedControl.js";
|
|
50
|
+
import EditorPanel from "./EditorPanel/EditorPanel.js";
|
|
51
|
+
import ColorSwatch from "./ColorSwatch/ColorSwatch.js";
|
|
52
|
+
import ColorPickerControl from "./ColorPickerControl/ColorPickerControl.js";
|
|
49
53
|
import LoadingIndicator from "./LoadingIndicator/LoadingIndicator.js";
|
|
50
54
|
import { QomponentsTheme } from "./constants.js";
|
|
51
55
|
import { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem } from "./ButtonWithDropdown/ButtonWithDropdown.types.js";
|
|
52
56
|
import ButtonWithDropdown from "./ButtonWithDropdown/ButtonWithDropdown.js";
|
|
53
|
-
export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, FormControlElement, type GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, type OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, type QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
|
|
57
|
+
export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, ColorPickerControl, ColorSwatch, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, EditorPanel, FormControlElement, type GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, type OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, type QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, SegmentedControl, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
|