@eyesee/ui-components 0.11.0 → 0.13.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.
- package/dist/components/icons-v2/ArrowsMaximizeIcon.d.ts +123 -0
- package/dist/components/icons-v2/ArrowsMaximizeIcon.js +15 -0
- package/dist/components/icons-v2/LayoutColumnsIcon.d.ts +122 -0
- package/dist/components/icons-v2/LayoutColumnsIcon.js +15 -0
- package/dist/components/icons-v2/LayoutRowsIcon.d.ts +122 -0
- package/dist/components/icons-v2/LayoutRowsIcon.js +15 -0
- package/dist/components/icons-v2/ResizeIcon.d.ts +123 -0
- package/dist/components/icons-v2/ResizeIcon.js +77 -0
- package/dist/components/icons-v2/index.d.ts +4 -0
- package/dist/components/icons-v2/index.js +368 -360
- package/package.json +1 -1
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @callback ArrowsMaximizeIconClickHandler
|
|
3
|
+
* @returns {void}
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
7
|
+
*
|
|
8
|
+
* @typedef {object} ArrowsMaximizeIconProps
|
|
9
|
+
*
|
|
10
|
+
* @property {import('./constants').IconSize} [iconSize='m']
|
|
11
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
12
|
+
* @property {ArrowsMaximizeIconClickHandler} [onClick=null]
|
|
13
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
14
|
+
* @property {string} [fill='none']
|
|
15
|
+
* SVG fill colour. Default `'none'`.
|
|
16
|
+
* @property {string} [strokeColor='currentColor']
|
|
17
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
18
|
+
* @property {string} [strokeColorOnHover]
|
|
19
|
+
* Stroke colour applied on hover.
|
|
20
|
+
* @property {string} [fillOnHover]
|
|
21
|
+
* Fill colour applied on hover.
|
|
22
|
+
* @property {boolean} [disabled]
|
|
23
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
24
|
+
* @property {boolean} [animated=false]
|
|
25
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
26
|
+
* @property {number} [viewBoxSize]
|
|
27
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
28
|
+
*
|
|
29
|
+
* @see {@link IconProps}
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* SVG arrows maximize icon (four arrows pointing outwards to the corners)
|
|
33
|
+
* used for expand, enlarge, or maximize actions.
|
|
34
|
+
*
|
|
35
|
+
* ## Props
|
|
36
|
+
*
|
|
37
|
+
* All optional.
|
|
38
|
+
*
|
|
39
|
+
* **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
|
|
40
|
+
* T-shirt size token. Controls `width`/`height` and stroke width.
|
|
41
|
+
*
|
|
42
|
+
* **onClick** `() => void` — default `null`
|
|
43
|
+
* Click handler. When set the icon is clickable.
|
|
44
|
+
*
|
|
45
|
+
* **fill** `string` — default `'none'`
|
|
46
|
+
* SVG fill colour.
|
|
47
|
+
*
|
|
48
|
+
* **strokeColor** `string` — default `'currentColor'`
|
|
49
|
+
* SVG stroke colour. Accepts any valid CSS colour.
|
|
50
|
+
*
|
|
51
|
+
* **strokeColorOnHover** `string` — no default
|
|
52
|
+
* Stroke colour applied on hover.
|
|
53
|
+
*
|
|
54
|
+
* **fillOnHover** `string` — no default
|
|
55
|
+
* Fill colour applied on hover.
|
|
56
|
+
*
|
|
57
|
+
* **disabled** `boolean` — no default
|
|
58
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
59
|
+
*
|
|
60
|
+
* **animated** `boolean` — default `false`
|
|
61
|
+
* When `true`, applies the spinner animation class.
|
|
62
|
+
*
|
|
63
|
+
* **viewBoxSize** `number` — no default
|
|
64
|
+
* Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
|
|
65
|
+
*
|
|
66
|
+
* @param {ArrowsMaximizeIconProps} props
|
|
67
|
+
* @returns {import('react').ReactElement}
|
|
68
|
+
*
|
|
69
|
+
* @example <caption>Playground</caption>
|
|
70
|
+
* import { ArrowsMaximizeIcon } from '@eyesee/ui-components/icons';
|
|
71
|
+
*
|
|
72
|
+
* <ArrowsMaximizeIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
73
|
+
*
|
|
74
|
+
* @example <caption>Gallery</caption>
|
|
75
|
+
* import { ArrowsMaximizeIcon } from '@eyesee/ui-components/icons';
|
|
76
|
+
*
|
|
77
|
+
* <ArrowsMaximizeIcon iconSize="s" strokeColor="#333333" fill="none" />
|
|
78
|
+
* <ArrowsMaximizeIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
79
|
+
* <ArrowsMaximizeIcon iconSize="l" strokeColor="#333333" fill="none" />
|
|
80
|
+
*/
|
|
81
|
+
export const ArrowsMaximizeIcon: (props: IconProps) => import("react").JSX.Element;
|
|
82
|
+
export type ArrowsMaximizeIconClickHandler = () => void;
|
|
83
|
+
/**
|
|
84
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
85
|
+
*/
|
|
86
|
+
export type ArrowsMaximizeIconProps = {
|
|
87
|
+
/**
|
|
88
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
89
|
+
*/
|
|
90
|
+
iconSize?: import("./constants").IconSize;
|
|
91
|
+
/**
|
|
92
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
93
|
+
*/
|
|
94
|
+
onClick?: ArrowsMaximizeIconClickHandler;
|
|
95
|
+
/**
|
|
96
|
+
* SVG fill colour. Default `'none'`.
|
|
97
|
+
*/
|
|
98
|
+
fill?: string;
|
|
99
|
+
/**
|
|
100
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
101
|
+
*/
|
|
102
|
+
strokeColor?: string;
|
|
103
|
+
/**
|
|
104
|
+
* Stroke colour applied on hover.
|
|
105
|
+
*/
|
|
106
|
+
strokeColorOnHover?: string;
|
|
107
|
+
/**
|
|
108
|
+
* Fill colour applied on hover.
|
|
109
|
+
*/
|
|
110
|
+
fillOnHover?: string;
|
|
111
|
+
/**
|
|
112
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
113
|
+
*/
|
|
114
|
+
disabled?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
117
|
+
*/
|
|
118
|
+
animated?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
121
|
+
*/
|
|
122
|
+
viewBoxSize?: number;
|
|
123
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { createIcon as t } from "./createIcon.js";
|
|
3
|
+
const i = t(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ e(
|
|
4
|
+
"path",
|
|
5
|
+
{
|
|
6
|
+
d: "M26.6667 10.6667V5.33333H21.3333M26.6667 5.33333L18.6667 13.3333M5.33333 21.3333V26.6667H10.6667M5.33333 26.6667L13.3333 18.6667M26.6667 21.3333V26.6667H21.3333M26.6667 26.6667L18.6667 18.6667M5.33333 10.6667V5.33333H10.6667M5.33333 5.33333L13.3333 13.3333",
|
|
7
|
+
stroke: o,
|
|
8
|
+
strokeWidth: r,
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
strokeLinejoin: "round"
|
|
11
|
+
}
|
|
12
|
+
));
|
|
13
|
+
export {
|
|
14
|
+
i as ArrowsMaximizeIcon
|
|
15
|
+
};
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @callback LayoutColumnsIconClickHandler
|
|
3
|
+
* @returns {void}
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
7
|
+
*
|
|
8
|
+
* @typedef {object} LayoutColumnsIconProps
|
|
9
|
+
*
|
|
10
|
+
* @property {import('./constants').IconSize} [iconSize='m']
|
|
11
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
12
|
+
* @property {LayoutColumnsIconClickHandler} [onClick=null]
|
|
13
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
14
|
+
* @property {string} [fill='none']
|
|
15
|
+
* SVG fill colour. Default `'none'`.
|
|
16
|
+
* @property {string} [strokeColor='currentColor']
|
|
17
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
18
|
+
* @property {string} [strokeColorOnHover]
|
|
19
|
+
* Stroke colour applied on hover.
|
|
20
|
+
* @property {string} [fillOnHover]
|
|
21
|
+
* Fill colour applied on hover.
|
|
22
|
+
* @property {boolean} [disabled]
|
|
23
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
24
|
+
* @property {boolean} [animated=false]
|
|
25
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
26
|
+
* @property {number} [viewBoxSize]
|
|
27
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
28
|
+
*
|
|
29
|
+
* @see {@link IconProps}
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* SVG layout columns icon (rounded rectangle with a vertical divider)
|
|
33
|
+
* used for column-based or side-by-side layout controls.
|
|
34
|
+
*
|
|
35
|
+
* ## Props
|
|
36
|
+
*
|
|
37
|
+
* All optional.
|
|
38
|
+
*
|
|
39
|
+
* **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
|
|
40
|
+
* T-shirt size token. Controls `width`/`height` and stroke width.
|
|
41
|
+
*
|
|
42
|
+
* **onClick** `() => void` — default `null`
|
|
43
|
+
* Click handler. When set the icon is clickable.
|
|
44
|
+
*
|
|
45
|
+
* **fill** `string` — default `'none'`
|
|
46
|
+
* SVG fill colour.
|
|
47
|
+
*
|
|
48
|
+
* **strokeColor** `string` — default `'currentColor'`
|
|
49
|
+
* SVG stroke colour. Accepts any valid CSS colour.
|
|
50
|
+
*
|
|
51
|
+
* **strokeColorOnHover** `string` — no default
|
|
52
|
+
* Stroke colour applied on hover.
|
|
53
|
+
*
|
|
54
|
+
* **fillOnHover** `string` — no default
|
|
55
|
+
* Fill colour applied on hover.
|
|
56
|
+
*
|
|
57
|
+
* **disabled** `boolean` — no default
|
|
58
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
59
|
+
*
|
|
60
|
+
* **animated** `boolean` — default `false`
|
|
61
|
+
* When `true`, applies the spinner animation class.
|
|
62
|
+
*
|
|
63
|
+
* **viewBoxSize** `number` — no default
|
|
64
|
+
* Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
|
|
65
|
+
*
|
|
66
|
+
* @param {LayoutColumnsIconProps} props
|
|
67
|
+
* @returns {import('react').ReactElement}
|
|
68
|
+
*
|
|
69
|
+
* @example <caption>Default</caption>
|
|
70
|
+
* import { LayoutColumnsIcon } from '@eyesee/ui-components/icons';
|
|
71
|
+
*
|
|
72
|
+
* <LayoutColumnsIcon iconSize="m" strokeColor="currentColor" />
|
|
73
|
+
*
|
|
74
|
+
* @example <caption>Layout toggle</caption>
|
|
75
|
+
* import { LayoutColumnsIcon, LayoutRowsIcon } from '@eyesee/ui-components/icons';
|
|
76
|
+
*
|
|
77
|
+
* <LayoutColumnsIcon iconSize="m" strokeColor="currentColor" />
|
|
78
|
+
* <LayoutRowsIcon iconSize="m" strokeColor="currentColor" />
|
|
79
|
+
*/
|
|
80
|
+
export const LayoutColumnsIcon: (props: IconProps) => import("react").JSX.Element;
|
|
81
|
+
export type LayoutColumnsIconClickHandler = () => void;
|
|
82
|
+
/**
|
|
83
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
84
|
+
*/
|
|
85
|
+
export type LayoutColumnsIconProps = {
|
|
86
|
+
/**
|
|
87
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
88
|
+
*/
|
|
89
|
+
iconSize?: import("./constants").IconSize;
|
|
90
|
+
/**
|
|
91
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
92
|
+
*/
|
|
93
|
+
onClick?: LayoutColumnsIconClickHandler;
|
|
94
|
+
/**
|
|
95
|
+
* SVG fill colour. Default `'none'`.
|
|
96
|
+
*/
|
|
97
|
+
fill?: string;
|
|
98
|
+
/**
|
|
99
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
100
|
+
*/
|
|
101
|
+
strokeColor?: string;
|
|
102
|
+
/**
|
|
103
|
+
* Stroke colour applied on hover.
|
|
104
|
+
*/
|
|
105
|
+
strokeColorOnHover?: string;
|
|
106
|
+
/**
|
|
107
|
+
* Fill colour applied on hover.
|
|
108
|
+
*/
|
|
109
|
+
fillOnHover?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
112
|
+
*/
|
|
113
|
+
disabled?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
116
|
+
*/
|
|
117
|
+
animated?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
120
|
+
*/
|
|
121
|
+
viewBoxSize?: number;
|
|
122
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { createIcon as n } from "./createIcon.js";
|
|
3
|
+
const s = n(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ t(
|
|
4
|
+
"path",
|
|
5
|
+
{
|
|
6
|
+
d: "M16 4H5.33333C4.97971 4 4.64057 4.14048 4.39052 4.39052C4.14048 4.64057 4 4.97971 4 5.33333V26.6667C4 27.0203 4.14048 27.3594 4.39052 27.6095C4.64057 27.8595 4.97971 28 5.33333 28H16M16 4H26.6667C27.0203 4 27.3594 4.14048 27.6095 4.39052C27.8595 4.64057 28 4.97971 28 5.33333V26.6667C28 27.0203 27.8595 27.3594 27.6095 27.6095C27.3594 27.8595 27.0203 28 26.6667 28H16M16 4V28",
|
|
7
|
+
stroke: o,
|
|
8
|
+
strokeWidth: r,
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
strokeLinejoin: "round"
|
|
11
|
+
}
|
|
12
|
+
));
|
|
13
|
+
export {
|
|
14
|
+
s as LayoutColumnsIcon
|
|
15
|
+
};
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @callback LayoutRowsIconClickHandler
|
|
3
|
+
* @returns {void}
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
7
|
+
*
|
|
8
|
+
* @typedef {object} LayoutRowsIconProps
|
|
9
|
+
*
|
|
10
|
+
* @property {import('./constants').IconSize} [iconSize='m']
|
|
11
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
12
|
+
* @property {LayoutRowsIconClickHandler} [onClick=null]
|
|
13
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
14
|
+
* @property {string} [fill='none']
|
|
15
|
+
* SVG fill colour. Default `'none'`.
|
|
16
|
+
* @property {string} [strokeColor='currentColor']
|
|
17
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
18
|
+
* @property {string} [strokeColorOnHover]
|
|
19
|
+
* Stroke colour applied on hover.
|
|
20
|
+
* @property {string} [fillOnHover]
|
|
21
|
+
* Fill colour applied on hover.
|
|
22
|
+
* @property {boolean} [disabled]
|
|
23
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
24
|
+
* @property {boolean} [animated=false]
|
|
25
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
26
|
+
* @property {number} [viewBoxSize]
|
|
27
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
28
|
+
*
|
|
29
|
+
* @see {@link IconProps}
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* SVG layout rows icon (rounded rectangle with a horizontal divider)
|
|
33
|
+
* used for row-based or stacked layout controls.
|
|
34
|
+
*
|
|
35
|
+
* ## Props
|
|
36
|
+
*
|
|
37
|
+
* All optional.
|
|
38
|
+
*
|
|
39
|
+
* **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
|
|
40
|
+
* T-shirt size token. Controls `width`/`height` and stroke width.
|
|
41
|
+
*
|
|
42
|
+
* **onClick** `() => void` — default `null`
|
|
43
|
+
* Click handler. When set the icon is clickable.
|
|
44
|
+
*
|
|
45
|
+
* **fill** `string` — default `'none'`
|
|
46
|
+
* SVG fill colour.
|
|
47
|
+
*
|
|
48
|
+
* **strokeColor** `string` — default `'currentColor'`
|
|
49
|
+
* SVG stroke colour. Accepts any valid CSS colour.
|
|
50
|
+
*
|
|
51
|
+
* **strokeColorOnHover** `string` — no default
|
|
52
|
+
* Stroke colour applied on hover.
|
|
53
|
+
*
|
|
54
|
+
* **fillOnHover** `string` — no default
|
|
55
|
+
* Fill colour applied on hover.
|
|
56
|
+
*
|
|
57
|
+
* **disabled** `boolean` — no default
|
|
58
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
59
|
+
*
|
|
60
|
+
* **animated** `boolean` — default `false`
|
|
61
|
+
* When `true`, applies the spinner animation class.
|
|
62
|
+
*
|
|
63
|
+
* **viewBoxSize** `number` — no default
|
|
64
|
+
* Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
|
|
65
|
+
*
|
|
66
|
+
* @param {LayoutRowsIconProps} props
|
|
67
|
+
* @returns {import('react').ReactElement}
|
|
68
|
+
*
|
|
69
|
+
* @example <caption>Default</caption>
|
|
70
|
+
* import { LayoutRowsIcon } from '@eyesee/ui-components/icons';
|
|
71
|
+
*
|
|
72
|
+
* <LayoutRowsIcon iconSize="m" strokeColor="currentColor" />
|
|
73
|
+
*
|
|
74
|
+
* @example <caption>Layout toggle</caption>
|
|
75
|
+
* import { LayoutColumnsIcon, LayoutRowsIcon } from '@eyesee/ui-components/icons';
|
|
76
|
+
*
|
|
77
|
+
* <LayoutRowsIcon iconSize="m" strokeColor="currentColor" />
|
|
78
|
+
* <LayoutColumnsIcon iconSize="m" strokeColor="currentColor" />
|
|
79
|
+
*/
|
|
80
|
+
export const LayoutRowsIcon: (props: IconProps) => import("react").JSX.Element;
|
|
81
|
+
export type LayoutRowsIconClickHandler = () => void;
|
|
82
|
+
/**
|
|
83
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
84
|
+
*/
|
|
85
|
+
export type LayoutRowsIconProps = {
|
|
86
|
+
/**
|
|
87
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
88
|
+
*/
|
|
89
|
+
iconSize?: import("./constants").IconSize;
|
|
90
|
+
/**
|
|
91
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
92
|
+
*/
|
|
93
|
+
onClick?: LayoutRowsIconClickHandler;
|
|
94
|
+
/**
|
|
95
|
+
* SVG fill colour. Default `'none'`.
|
|
96
|
+
*/
|
|
97
|
+
fill?: string;
|
|
98
|
+
/**
|
|
99
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
100
|
+
*/
|
|
101
|
+
strokeColor?: string;
|
|
102
|
+
/**
|
|
103
|
+
* Stroke colour applied on hover.
|
|
104
|
+
*/
|
|
105
|
+
strokeColorOnHover?: string;
|
|
106
|
+
/**
|
|
107
|
+
* Fill colour applied on hover.
|
|
108
|
+
*/
|
|
109
|
+
fillOnHover?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
112
|
+
*/
|
|
113
|
+
disabled?: boolean;
|
|
114
|
+
/**
|
|
115
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
116
|
+
*/
|
|
117
|
+
animated?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
120
|
+
*/
|
|
121
|
+
viewBoxSize?: number;
|
|
122
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { createIcon as e } from "./createIcon.js";
|
|
3
|
+
const s = e(({ strokeColor: o, strokeWidth: r }) => /* @__PURE__ */ t(
|
|
4
|
+
"path",
|
|
5
|
+
{
|
|
6
|
+
d: "M5.33301 16H26.6663M5.33301 8.00004C5.33301 7.2928 5.61396 6.61452 6.11406 6.11442C6.61415 5.61433 7.29243 5.33337 7.99967 5.33337H23.9997C24.7069 5.33337 25.3852 5.61433 25.8853 6.11442C26.3854 6.61452 26.6663 7.2928 26.6663 8.00004V24C26.6663 24.7073 26.3854 25.3856 25.8853 25.8857C25.3852 26.3858 24.7069 26.6667 23.9997 26.6667H7.99967C7.29243 26.6667 6.61415 26.3858 6.11406 25.8857C5.61396 25.3856 5.33301 24.7073 5.33301 24V8.00004Z",
|
|
7
|
+
stroke: o,
|
|
8
|
+
strokeWidth: r,
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
strokeLinejoin: "round"
|
|
11
|
+
}
|
|
12
|
+
));
|
|
13
|
+
export {
|
|
14
|
+
s as LayoutRowsIcon
|
|
15
|
+
};
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @callback ResizeIconClickHandler
|
|
3
|
+
* @returns {void}
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
7
|
+
*
|
|
8
|
+
* @typedef {object} ResizeIconProps
|
|
9
|
+
*
|
|
10
|
+
* @property {import('./constants').IconSize} [iconSize='m']
|
|
11
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
12
|
+
* @property {ResizeIconClickHandler} [onClick=null]
|
|
13
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
14
|
+
* @property {string} [fill='none']
|
|
15
|
+
* SVG fill colour. Default `'none'`.
|
|
16
|
+
* @property {string} [strokeColor='currentColor']
|
|
17
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
18
|
+
* @property {string} [strokeColorOnHover]
|
|
19
|
+
* Stroke colour applied on hover.
|
|
20
|
+
* @property {string} [fillOnHover]
|
|
21
|
+
* Fill colour applied on hover.
|
|
22
|
+
* @property {boolean} [disabled]
|
|
23
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
24
|
+
* @property {boolean} [animated=false]
|
|
25
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
26
|
+
* @property {number} [viewBoxSize]
|
|
27
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
28
|
+
*
|
|
29
|
+
* @see {@link IconProps}
|
|
30
|
+
*/
|
|
31
|
+
/**
|
|
32
|
+
* SVG resize icon (rounded rectangle with horizontal and vertical double arrows)
|
|
33
|
+
* used for width and height dimension controls.
|
|
34
|
+
*
|
|
35
|
+
* ## Props
|
|
36
|
+
*
|
|
37
|
+
* All optional.
|
|
38
|
+
*
|
|
39
|
+
* **iconSize** `'s' | 'm' | 'l' | 'xl' | 'xxl' | '4xl'` — default `'m'`
|
|
40
|
+
* T-shirt size token. Controls `width`/`height` and stroke width.
|
|
41
|
+
*
|
|
42
|
+
* **onClick** `() => void` — default `null`
|
|
43
|
+
* Click handler. When set the icon is clickable.
|
|
44
|
+
*
|
|
45
|
+
* **fill** `string` — default `'none'`
|
|
46
|
+
* SVG fill colour.
|
|
47
|
+
*
|
|
48
|
+
* **strokeColor** `string` — default `'currentColor'`
|
|
49
|
+
* SVG stroke colour. Accepts any valid CSS colour.
|
|
50
|
+
*
|
|
51
|
+
* **strokeColorOnHover** `string` — no default
|
|
52
|
+
* Stroke colour applied on hover.
|
|
53
|
+
*
|
|
54
|
+
* **fillOnHover** `string` — no default
|
|
55
|
+
* Fill colour applied on hover.
|
|
56
|
+
*
|
|
57
|
+
* **disabled** `boolean` — no default
|
|
58
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
59
|
+
*
|
|
60
|
+
* **animated** `boolean` — default `false`
|
|
61
|
+
* When `true`, applies the spinner animation class.
|
|
62
|
+
*
|
|
63
|
+
* **viewBoxSize** `number` — no default
|
|
64
|
+
* Custom viewBox size for icons that are not 32×32. Omit → `0 0 32 32`.
|
|
65
|
+
*
|
|
66
|
+
* @param {ResizeIconProps} props
|
|
67
|
+
* @returns {import('react').ReactElement}
|
|
68
|
+
*
|
|
69
|
+
* @example <caption>Playground</caption>
|
|
70
|
+
* import { ResizeIcon } from '@eyesee/ui-components/icons';
|
|
71
|
+
*
|
|
72
|
+
* <ResizeIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
73
|
+
*
|
|
74
|
+
* @example <caption>Gallery</caption>
|
|
75
|
+
* import { ResizeIcon } from '@eyesee/ui-components/icons';
|
|
76
|
+
*
|
|
77
|
+
* <ResizeIcon iconSize="s" strokeColor="#333333" fill="none" />
|
|
78
|
+
* <ResizeIcon iconSize="m" strokeColor="#333333" fill="none" />
|
|
79
|
+
* <ResizeIcon iconSize="l" strokeColor="#333333" fill="none" />
|
|
80
|
+
*/
|
|
81
|
+
export const ResizeIcon: (props: IconProps) => import("react").JSX.Element;
|
|
82
|
+
export type ResizeIconClickHandler = () => void;
|
|
83
|
+
/**
|
|
84
|
+
* Shared {@link IconProps} for this icon. All optional.
|
|
85
|
+
*/
|
|
86
|
+
export type ResizeIconProps = {
|
|
87
|
+
/**
|
|
88
|
+
* T-shirt size token. Controls `width`/`height` and stroke width. Default `'m'`.
|
|
89
|
+
*/
|
|
90
|
+
iconSize?: import("./constants").IconSize;
|
|
91
|
+
/**
|
|
92
|
+
* Click handler. When set the icon is clickable. Default `null`.
|
|
93
|
+
*/
|
|
94
|
+
onClick?: ResizeIconClickHandler;
|
|
95
|
+
/**
|
|
96
|
+
* SVG fill colour. Default `'none'`.
|
|
97
|
+
*/
|
|
98
|
+
fill?: string;
|
|
99
|
+
/**
|
|
100
|
+
* SVG stroke colour. Accepts any valid CSS colour. Default `'currentColor'`.
|
|
101
|
+
*/
|
|
102
|
+
strokeColor?: string;
|
|
103
|
+
/**
|
|
104
|
+
* Stroke colour applied on hover.
|
|
105
|
+
*/
|
|
106
|
+
strokeColorOnHover?: string;
|
|
107
|
+
/**
|
|
108
|
+
* Fill colour applied on hover.
|
|
109
|
+
*/
|
|
110
|
+
fillOnHover?: string;
|
|
111
|
+
/**
|
|
112
|
+
* Applies disabled colour tokens and ignores clicks.
|
|
113
|
+
*/
|
|
114
|
+
disabled?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* When `true`, applies the spinner animation class. Default `false`.
|
|
117
|
+
*/
|
|
118
|
+
animated?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* Custom viewBox size for icons that are not 32×32. Sets `0 0 {n} {n}`.
|
|
121
|
+
*/
|
|
122
|
+
viewBoxSize?: number;
|
|
123
|
+
};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { jsxs as r, Fragment as L, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { createIcon as i } from "./createIcon.js";
|
|
3
|
+
const d = i(({ strokeColor: n, strokeWidth: e }) => /* @__PURE__ */ r(L, { children: [
|
|
4
|
+
/* @__PURE__ */ o(
|
|
5
|
+
"path",
|
|
6
|
+
{
|
|
7
|
+
d: "M4 6.66667H18.6667",
|
|
8
|
+
stroke: n,
|
|
9
|
+
strokeWidth: e,
|
|
10
|
+
strokeLinecap: "round",
|
|
11
|
+
strokeLinejoin: "round"
|
|
12
|
+
}
|
|
13
|
+
),
|
|
14
|
+
/* @__PURE__ */ o(
|
|
15
|
+
"path",
|
|
16
|
+
{
|
|
17
|
+
d: "M16 9.33333L18.6667 6.66667L16 4",
|
|
18
|
+
stroke: n,
|
|
19
|
+
strokeWidth: e,
|
|
20
|
+
strokeLinecap: "round",
|
|
21
|
+
strokeLinejoin: "round"
|
|
22
|
+
}
|
|
23
|
+
),
|
|
24
|
+
/* @__PURE__ */ o(
|
|
25
|
+
"path",
|
|
26
|
+
{
|
|
27
|
+
d: "M6.66667 4L4 6.66667L6.66667 9.33333",
|
|
28
|
+
stroke: n,
|
|
29
|
+
strokeWidth: e,
|
|
30
|
+
strokeLinecap: "round",
|
|
31
|
+
strokeLinejoin: "round"
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ o(
|
|
35
|
+
"path",
|
|
36
|
+
{
|
|
37
|
+
d: "M25.3333 13.3333V28",
|
|
38
|
+
stroke: n,
|
|
39
|
+
strokeWidth: e,
|
|
40
|
+
strokeLinecap: "round",
|
|
41
|
+
strokeLinejoin: "round"
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
/* @__PURE__ */ o(
|
|
45
|
+
"path",
|
|
46
|
+
{
|
|
47
|
+
d: "M22.6667 25.3333L25.3333 28L28 25.3333",
|
|
48
|
+
stroke: n,
|
|
49
|
+
strokeWidth: e,
|
|
50
|
+
strokeLinecap: "round",
|
|
51
|
+
strokeLinejoin: "round"
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
/* @__PURE__ */ o(
|
|
55
|
+
"path",
|
|
56
|
+
{
|
|
57
|
+
d: "M28 16L25.3333 13.3333L22.6667 16",
|
|
58
|
+
stroke: n,
|
|
59
|
+
strokeWidth: e,
|
|
60
|
+
strokeLinecap: "round",
|
|
61
|
+
strokeLinejoin: "round"
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ o(
|
|
65
|
+
"path",
|
|
66
|
+
{
|
|
67
|
+
d: "M4 16C4 15.2928 4.28095 14.6145 4.78105 14.1144C5.28115 13.6143 5.95942 13.3333 6.66667 13.3333H16C16.7072 13.3333 17.3855 13.6143 17.8856 14.1144C18.3857 14.6145 18.6667 15.2928 18.6667 16V25.3333C18.6667 26.0406 18.3857 26.7189 17.8856 27.219C17.3855 27.719 16.7072 28 16 28H6.66667C5.95942 28 5.28115 27.719 4.78105 27.219C4.28095 26.7189 4 26.0406 4 25.3333V16Z",
|
|
68
|
+
stroke: n,
|
|
69
|
+
strokeWidth: e,
|
|
70
|
+
strokeLinecap: "round",
|
|
71
|
+
strokeLinejoin: "round"
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
] }));
|
|
75
|
+
export {
|
|
76
|
+
d as ResizeIcon
|
|
77
|
+
};
|
|
@@ -41,6 +41,7 @@ export { AttributesEvaluationIcon } from "./AttributesEvaluationIcon";
|
|
|
41
41
|
export { ArrowUpIcon } from "./ArrowUpIcon";
|
|
42
42
|
export { ArrowRightIcon } from "./ArrowRightIcon";
|
|
43
43
|
export { ArrowMoveDownIcon } from "./ArrowMoveDownIcon";
|
|
44
|
+
export { ArrowsMaximizeIcon } from "./ArrowsMaximizeIcon";
|
|
44
45
|
export { ChartbarIcon } from "./ChartbarIcon";
|
|
45
46
|
export { ChartbarOffIcon } from "./ChartbarOffIcon";
|
|
46
47
|
export { ChatbotIcon } from "./ChatbotIcon";
|
|
@@ -108,6 +109,8 @@ export { ItalicIcon } from "./ItalicIcon";
|
|
|
108
109
|
export { LanguageIcon } from "./LanguageIcon";
|
|
109
110
|
export { LaunchIcon } from "./LaunchIcon";
|
|
110
111
|
export { LayersIcon } from "./LayersIcon";
|
|
112
|
+
export { LayoutColumnsIcon } from "./LayoutColumnsIcon";
|
|
113
|
+
export { LayoutRowsIcon } from "./LayoutRowsIcon";
|
|
111
114
|
export { LeftSidebarCollapseIcon } from "./LeftSidebarCollapseIcon";
|
|
112
115
|
export { LeftSidebarExpandIcon } from "./LeftSidebarExpandIcon";
|
|
113
116
|
export { LightbulbIcon } from "./LightbulbIcon";
|
|
@@ -153,6 +156,7 @@ export { RefreshIcon } from "./RefreshIcon";
|
|
|
153
156
|
export { RefreshAlertIcon } from "./RefreshAlertIcon";
|
|
154
157
|
export { ReplaceIcon } from "./ReplaceIcon";
|
|
155
158
|
export { ReplyIcon } from "./ReplyIcon";
|
|
159
|
+
export { ResizeIcon } from "./ResizeIcon";
|
|
156
160
|
export { ScalesIcon } from "./ScalesIcon";
|
|
157
161
|
export { SearchIcon } from "./SearchIcon";
|
|
158
162
|
export { SendIcon } from "./SendIcon";
|