@synergy-design-system/react 1.0.0-main.8 → 1.0.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/LICENSE +5 -24
- package/README.md +6 -2
- package/dist/chunks/chunk.4YY6TGIA.js +24 -0
- package/dist/chunks/chunk.4YY6TGIA.js.map +7 -0
- package/dist/chunks/chunk.6CO3KAZG.js +21 -0
- package/dist/chunks/chunk.6CO3KAZG.js.map +7 -0
- package/dist/chunks/chunk.6OTEQXZW.js +18 -0
- package/dist/chunks/chunk.6OTEQXZW.js.map +7 -0
- package/dist/chunks/chunk.AFCMSVBY.js +21 -0
- package/dist/chunks/chunk.AFCMSVBY.js.map +7 -0
- package/dist/chunks/chunk.FYIBHAO4.js +24 -0
- package/dist/chunks/chunk.FYIBHAO4.js.map +7 -0
- package/dist/chunks/chunk.QBD4EIK5.js +21 -0
- package/dist/chunks/chunk.QBD4EIK5.js.map +7 -0
- package/dist/chunks/chunk.TOR523VV.js +24 -0
- package/dist/chunks/chunk.TOR523VV.js.map +7 -0
- package/dist/chunks/chunk.UVFFLBXG.js +22 -0
- package/dist/chunks/chunk.UVFFLBXG.js.map +7 -0
- package/dist/components/button-group.d.ts +12 -0
- package/dist/components/button-group.js +7 -0
- package/dist/components/button-group.js.map +7 -0
- package/dist/components/checkbox.d.ts +39 -0
- package/dist/components/checkbox.js +7 -0
- package/dist/components/checkbox.js.map +7 -0
- package/dist/components/icon.d.ts +21 -0
- package/dist/components/icon.js +7 -0
- package/dist/components/icon.js.map +7 -0
- package/dist/components/radio-button.d.ts +29 -0
- package/dist/components/radio-button.js +7 -0
- package/dist/components/radio-button.js.map +7 -0
- package/dist/components/radio-group.d.ts +34 -0
- package/dist/components/radio-group.js +7 -0
- package/dist/components/radio-group.js.map +7 -0
- package/dist/components/radio.d.ts +28 -0
- package/dist/components/radio.js +7 -0
- package/dist/components/radio.js.map +7 -0
- package/dist/components/switch.d.ts +38 -0
- package/dist/components/switch.js +7 -0
- package/dist/components/switch.js.map +7 -0
- package/dist/components/textarea.d.ts +37 -0
- package/dist/components/textarea.js +7 -0
- package/dist/components/textarea.js.map +7 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +33 -1
- package/package.json +5 -5
package/LICENSE
CHANGED
|
@@ -1,28 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
The MIT License
|
|
2
2
|
|
|
3
|
-
Copyright
|
|
3
|
+
Copyright 2023 SICK AG
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
modification, are permitted provided that the following conditions are met:
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
list of conditions and the following disclaimer.
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
this list of conditions and the following disclaimer in the documentation
|
|
13
|
-
and/or other materials provided with the distribution.
|
|
14
|
-
|
|
15
|
-
3. Neither the name of the copyright holder nor the names of its
|
|
16
|
-
contributors may be used to endorse or promote products derived from
|
|
17
|
-
this software without specific prior written permission.
|
|
18
|
-
|
|
19
|
-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
20
|
-
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
21
|
-
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
22
|
-
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
23
|
-
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
24
|
-
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
25
|
-
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
26
|
-
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
27
|
-
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
28
|
-
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
9
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
# @synergy-design-system/react
|
|
2
2
|
|
|
3
|
-
This package provides [React.js](https://react.dev/) wrappers for [Synergy Web Components](https://github.com/
|
|
3
|
+
This package provides [React.js](https://react.dev/) wrappers for [Synergy Web Components](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/components).
|
|
4
|
+
|
|
5
|
+
This package aims for an improved UX when used in React applications:
|
|
6
|
+
- Auto-completion
|
|
7
|
+
- Event handling
|
|
4
8
|
|
|
5
9
|
## Getting started
|
|
6
10
|
|
|
@@ -79,7 +83,7 @@ export const MyButton = () => (
|
|
|
79
83
|
|
|
80
84
|
To create a new version of this package, proceed in the following way:
|
|
81
85
|
|
|
82
|
-
1. Check out the [Synergy Design System Repository](https://github.com/
|
|
86
|
+
1. Check out the [Synergy Design System Repository](https://github.com/synergy-design-system/synergy-design-system).
|
|
83
87
|
2. Run `pnpm i -r` to install all dependencies.
|
|
84
88
|
3. Build the `@synergy-design-system/components` package (or run `pnpm build` in the project root to build everything).
|
|
85
89
|
4. Move to to `packages/_private/react-demo` and use `pnpm start` to spin up a local vite project using react and typescript to validate the build.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// ../react/src/components/textarea.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/textarea/textarea.component.js";
|
|
5
|
+
var tagName = "syn-textarea";
|
|
6
|
+
Component.define("syn-textarea");
|
|
7
|
+
var SynTextarea = createComponent({
|
|
8
|
+
displayName: "SynTextarea",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynBlur: "syn-blur",
|
|
12
|
+
onSynChange: "syn-change",
|
|
13
|
+
onSynFocus: "syn-focus",
|
|
14
|
+
onSynInput: "syn-input",
|
|
15
|
+
onSynInvalid: "syn-invalid"
|
|
16
|
+
},
|
|
17
|
+
react: React,
|
|
18
|
+
tagName
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export {
|
|
22
|
+
SynTextarea
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=chunk.4YY6TGIA.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/textarea.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/textarea/textarea.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-textarea';\nComponent.define('syn-textarea');\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart textarea - The internal `<textarea>` control.\n */\nexport const SynTextarea = createComponent({\n displayName: 'SynTextarea',\n elementClass: Component,\n events: {\n onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n onSynInput: 'syn-input' as EventName<SynInputEvent>,\n onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AAwBxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// ../react/src/components/icon.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/icon/icon.component.js";
|
|
5
|
+
var tagName = "syn-icon";
|
|
6
|
+
Component.define("syn-icon");
|
|
7
|
+
var SynIcon = createComponent({
|
|
8
|
+
displayName: "SynIcon",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynLoad: "syn-load",
|
|
12
|
+
onSynError: "syn-error"
|
|
13
|
+
},
|
|
14
|
+
react: React,
|
|
15
|
+
tagName
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
SynIcon
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=chunk.6CO3KAZG.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/icon.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/icon/icon.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynErrorEvent, SynLoadEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-icon';\nComponent.define('syn-icon');\n\n/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */\nexport const SynIcon = createComponent({\n displayName: 'SynIcon',\n elementClass: Component,\n events: {\n onSynLoad: 'syn-load' as EventName<SynLoadEvent>,\n onSynError: 'syn-error' as EventName<SynErrorEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynLoadEvent } from '@synergy-design-system/components';\nexport type { SynErrorEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,UAAU;AAcpB,IAAM,UAAU,gBAAgB;AAAA,EACrC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// ../react/src/components/button-group.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/button-group/button-group.component.js";
|
|
5
|
+
var tagName = "syn-button-group";
|
|
6
|
+
Component.define("syn-button-group");
|
|
7
|
+
var SynButtonGroup = createComponent({
|
|
8
|
+
displayName: "SynButtonGroup",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {},
|
|
11
|
+
react: React,
|
|
12
|
+
tagName
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
export {
|
|
16
|
+
SynButtonGroup
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=chunk.6OTEQXZW.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/button-group.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/button-group/button-group.component.js';\n\nconst tagName = 'syn-button-group';\nComponent.define('syn-button-group');\n\n/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy.style/components/button-group\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */\nexport const SynButtonGroup = createComponent({\n displayName: 'SynButtonGroup',\n elementClass: Component,\n events: {\n\n },\n react: React,\n tagName,\n});\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,kBAAkB;AAY5B,IAAM,iBAAiB,gBAAgB;AAAA,EAC5C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// ../react/src/components/radio.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/radio/radio.component.js";
|
|
5
|
+
var tagName = "syn-radio";
|
|
6
|
+
Component.define("syn-radio");
|
|
7
|
+
var SynRadio = createComponent({
|
|
8
|
+
displayName: "SynRadio",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynBlur: "syn-blur",
|
|
12
|
+
onSynFocus: "syn-focus"
|
|
13
|
+
},
|
|
14
|
+
react: React,
|
|
15
|
+
tagName
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
SynRadio
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=chunk.AFCMSVBY.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/radio.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/radio/radio.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-radio';\nComponent.define('syn-radio');\n\n/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://synergy.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The radio's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */\nexport const SynRadio = createComponent({\n displayName: 'SynRadio',\n elementClass: Component,\n events: {\n onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,WAAW;AAqBrB,IAAM,WAAW,gBAAgB;AAAA,EACtC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// ../react/src/components/checkbox.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/checkbox/checkbox.component.js";
|
|
5
|
+
var tagName = "syn-checkbox";
|
|
6
|
+
Component.define("syn-checkbox");
|
|
7
|
+
var SynCheckbox = createComponent({
|
|
8
|
+
displayName: "SynCheckbox",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynBlur: "syn-blur",
|
|
12
|
+
onSynChange: "syn-change",
|
|
13
|
+
onSynFocus: "syn-focus",
|
|
14
|
+
onSynInput: "syn-input",
|
|
15
|
+
onSynInvalid: "syn-invalid"
|
|
16
|
+
},
|
|
17
|
+
react: React,
|
|
18
|
+
tagName
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export {
|
|
22
|
+
SynCheckbox
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=chunk.FYIBHAO4.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/checkbox.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/checkbox/checkbox.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-checkbox';\nComponent.define('syn-checkbox');\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\nexport const SynCheckbox = createComponent({\n displayName: 'SynCheckbox',\n elementClass: Component,\n events: {\n onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n onSynInput: 'syn-input' as EventName<SynInputEvent>,\n onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,cAAc;AA0BxB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// ../react/src/components/radio-button.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/radio-button/radio-button.component.js";
|
|
5
|
+
var tagName = "syn-radio-button";
|
|
6
|
+
Component.define("syn-radio-button");
|
|
7
|
+
var SynRadioButton = createComponent({
|
|
8
|
+
displayName: "SynRadioButton",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynBlur: "syn-blur",
|
|
12
|
+
onSynFocus: "syn-focus"
|
|
13
|
+
},
|
|
14
|
+
react: React,
|
|
15
|
+
tagName
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
SynRadioButton
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=chunk.QBD4EIK5.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/radio-button.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/radio-button/radio-button.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-radio-button';\nComponent.define('syn-radio-button');\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport const SynRadioButton = createComponent({\n displayName: 'SynRadioButton',\n elementClass: Component,\n events: {\n onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,kBAAkB;AAsB5B,IAAM,iBAAiB,gBAAgB;AAAA,EAC5C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// ../react/src/components/switch.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/switch/switch.component.js";
|
|
5
|
+
var tagName = "syn-switch";
|
|
6
|
+
Component.define("syn-switch");
|
|
7
|
+
var SynSwitch = createComponent({
|
|
8
|
+
displayName: "SynSwitch",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynBlur: "syn-blur",
|
|
12
|
+
onSynChange: "syn-change",
|
|
13
|
+
onSynInput: "syn-input",
|
|
14
|
+
onSynFocus: "syn-focus",
|
|
15
|
+
onSynInvalid: "syn-invalid"
|
|
16
|
+
},
|
|
17
|
+
react: React,
|
|
18
|
+
tagName
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export {
|
|
22
|
+
SynSwitch
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=chunk.TOR523VV.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/switch.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/switch/switch.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-switch';\nComponent.define('syn-switch');\n\n/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when the control's checked state changes.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */\nexport const SynSwitch = createComponent({\n displayName: 'SynSwitch',\n elementClass: Component,\n events: {\n onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n onSynInput: 'syn-input' as EventName<SynInputEvent>,\n onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,YAAY;AAyBtB,IAAM,YAAY,gBAAgB;AAAA,EACvC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// ../react/src/components/radio-group.ts
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { createComponent } from "@lit/react";
|
|
4
|
+
import Component from "@synergy-design-system/components/components/radio-group/radio-group.component.js";
|
|
5
|
+
var tagName = "syn-radio-group";
|
|
6
|
+
Component.define("syn-radio-group");
|
|
7
|
+
var SynRadioGroup = createComponent({
|
|
8
|
+
displayName: "SynRadioGroup",
|
|
9
|
+
elementClass: Component,
|
|
10
|
+
events: {
|
|
11
|
+
onSynChange: "syn-change",
|
|
12
|
+
onSynInput: "syn-input",
|
|
13
|
+
onSynInvalid: "syn-invalid"
|
|
14
|
+
},
|
|
15
|
+
react: React,
|
|
16
|
+
tagName
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export {
|
|
20
|
+
SynRadioGroup
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=chunk.UVFFLBXG.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/radio-group.ts"],
|
|
4
|
+
"sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components\n// Please do not edit this file directly!\n// It will get recreated when running pnpm build.\n// ---------------------------------------------------------------------\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport Component from '@synergy-design-system/components/components/radio-group/radio-group.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-radio-group';\nComponent.define('syn-radio-group');\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n * @documentation https://synergy.style/components/radio-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-button-group\n *\n * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n *\n * @event syn-change - Emitted when the radio group's selected value changes.\n * @event syn-input - Emitted when the radio group receives user input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\nexport const SynRadioGroup = createComponent({\n displayName: 'SynRadioGroup',\n elementClass: Component,\n events: {\n onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n onSynInput: 'syn-input' as EventName<SynInputEvent>,\n onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,\n },\n react: React,\n tagName,\n});\n\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\nexport type { SynInvalidEvent } from '@synergy-design-system/components';\n"],
|
|
5
|
+
"mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,iBAAiB;AAyB3B,IAAM,gBAAgB,gBAAgB;AAAA,EAC3C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/button-group/button-group.component.js';
|
|
2
|
+
/**
|
|
3
|
+
* @summary Button groups can be used to group related buttons into sections.
|
|
4
|
+
* @documentation https://synergy.style/components/button-group
|
|
5
|
+
* @status stable
|
|
6
|
+
* @since 2.0
|
|
7
|
+
*
|
|
8
|
+
* @slot - One or more `<syn-button>` elements to display in the button group.
|
|
9
|
+
*
|
|
10
|
+
* @csspart base - The component's base wrapper.
|
|
11
|
+
*/
|
|
12
|
+
export declare const SynButtonGroup: import("@lit/react").ReactWebComponent<Component, {}>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/checkbox/checkbox.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Checkboxes allow the user to toggle an option on or off.
|
|
6
|
+
* @documentation https://synergy.style/components/checkbox
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @dependency syn-icon
|
|
11
|
+
*
|
|
12
|
+
* @slot - The checkbox's label.
|
|
13
|
+
*
|
|
14
|
+
* @event syn-blur - Emitted when the checkbox loses focus.
|
|
15
|
+
* @event syn-change - Emitted when the checked state changes.
|
|
16
|
+
* @event syn-focus - Emitted when the checkbox gains focus.
|
|
17
|
+
* @event syn-input - Emitted when the checkbox receives input.
|
|
18
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
19
|
+
*
|
|
20
|
+
* @csspart base - The component's base wrapper.
|
|
21
|
+
* @csspart control - The square container that wraps the checkbox's checked state.
|
|
22
|
+
* @csspart control--checked - Matches the control part when the checkbox is checked.
|
|
23
|
+
* @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
|
|
24
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
25
|
+
* @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
|
|
26
|
+
* @csspart label - The container that wraps the checkbox's label.
|
|
27
|
+
*/
|
|
28
|
+
export declare const SynCheckbox: import("@lit/react").ReactWebComponent<Component, {
|
|
29
|
+
onSynBlur: EventName<SynBlurEvent>;
|
|
30
|
+
onSynChange: EventName<SynChangeEvent>;
|
|
31
|
+
onSynFocus: EventName<SynFocusEvent>;
|
|
32
|
+
onSynInput: EventName<SynInputEvent>;
|
|
33
|
+
onSynInvalid: EventName<SynInvalidEvent>;
|
|
34
|
+
}>;
|
|
35
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
36
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
37
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
38
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
39
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/icon/icon.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynErrorEvent, SynLoadEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Icons are symbols that can be used to represent various options within an application.
|
|
6
|
+
* @documentation https://synergy.style/components/icon
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
|
|
11
|
+
* @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
|
|
12
|
+
*
|
|
13
|
+
* @csspart svg - The internal SVG element.
|
|
14
|
+
* @csspart use - The <use> element generated when using `spriteSheet: true`
|
|
15
|
+
*/
|
|
16
|
+
export declare const SynIcon: import("@lit/react").ReactWebComponent<Component, {
|
|
17
|
+
onSynLoad: EventName<SynLoadEvent>;
|
|
18
|
+
onSynError: EventName<SynErrorEvent>;
|
|
19
|
+
}>;
|
|
20
|
+
export type { SynLoadEvent } from '@synergy-design-system/components';
|
|
21
|
+
export type { SynErrorEvent } from '@synergy-design-system/components';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/radio-button/radio-button.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Radios buttons allow the user to select a single option from a group using a button-like control.
|
|
6
|
+
* @documentation https://synergy.style/components/radio-button
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @slot - The radio button's label.
|
|
11
|
+
* @slot prefix - A presentational prefix icon or similar element.
|
|
12
|
+
* @slot suffix - A presentational suffix icon or similar element.
|
|
13
|
+
*
|
|
14
|
+
* @event syn-blur - Emitted when the button loses focus.
|
|
15
|
+
* @event syn-focus - Emitted when the button gains focus.
|
|
16
|
+
*
|
|
17
|
+
* @csspart base - The component's base wrapper.
|
|
18
|
+
* @csspart button - The internal `<button>` element.
|
|
19
|
+
* @csspart button--checked - The internal button element when the radio button is checked.
|
|
20
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
21
|
+
* @csspart label - The container that wraps the radio button's label.
|
|
22
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
23
|
+
*/
|
|
24
|
+
export declare const SynRadioButton: import("@lit/react").ReactWebComponent<Component, {
|
|
25
|
+
onSynBlur: EventName<SynBlurEvent>;
|
|
26
|
+
onSynFocus: EventName<SynFocusEvent>;
|
|
27
|
+
}>;
|
|
28
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
29
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/radio-group/radio-group.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
|
|
6
|
+
* @documentation https://synergy.style/components/radio-group
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @dependency syn-button-group
|
|
11
|
+
*
|
|
12
|
+
* @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
|
|
13
|
+
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
|
|
14
|
+
* attribute.
|
|
15
|
+
*
|
|
16
|
+
* @event syn-change - Emitted when the radio group's selected value changes.
|
|
17
|
+
* @event syn-input - Emitted when the radio group receives user input.
|
|
18
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
19
|
+
*
|
|
20
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
21
|
+
* @csspart form-control-label - The label's wrapper.
|
|
22
|
+
* @csspart form-control-input - The input's wrapper.
|
|
23
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
24
|
+
* @csspart button-group - The button group that wraps radio buttons.
|
|
25
|
+
* @csspart button-group__base - The button group's `base` part.
|
|
26
|
+
*/
|
|
27
|
+
export declare const SynRadioGroup: import("@lit/react").ReactWebComponent<Component, {
|
|
28
|
+
onSynChange: EventName<SynChangeEvent>;
|
|
29
|
+
onSynInput: EventName<SynInputEvent>;
|
|
30
|
+
onSynInvalid: EventName<SynInvalidEvent>;
|
|
31
|
+
}>;
|
|
32
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
33
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
34
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/radio/radio.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Radios allow the user to select a single option from a group.
|
|
6
|
+
* @documentation https://synergy.style/components/radio
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @dependency syn-icon
|
|
11
|
+
*
|
|
12
|
+
* @slot - The radio's label.
|
|
13
|
+
*
|
|
14
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
15
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
16
|
+
*
|
|
17
|
+
* @csspart base - The component's base wrapper.
|
|
18
|
+
* @csspart control - The circular container that wraps the radio's checked state.
|
|
19
|
+
* @csspart control--checked - The radio control when the radio is checked.
|
|
20
|
+
* @csspart checked-icon - The checked icon, an `<syn-icon>` element.
|
|
21
|
+
* @csspart label - The container that wraps the radio's label.
|
|
22
|
+
*/
|
|
23
|
+
export declare const SynRadio: import("@lit/react").ReactWebComponent<Component, {
|
|
24
|
+
onSynBlur: EventName<SynBlurEvent>;
|
|
25
|
+
onSynFocus: EventName<SynFocusEvent>;
|
|
26
|
+
}>;
|
|
27
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
28
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/switch/switch.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Switches allow the user to toggle an option on or off.
|
|
6
|
+
* @documentation https://synergy.style/components/switch
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @slot - The switch's label.
|
|
11
|
+
*
|
|
12
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
13
|
+
* @event syn-change - Emitted when the control's checked state changes.
|
|
14
|
+
* @event syn-input - Emitted when the control receives input.
|
|
15
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
16
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
17
|
+
*
|
|
18
|
+
* @csspart base - The component's base wrapper.
|
|
19
|
+
* @csspart control - The control that houses the switch's thumb.
|
|
20
|
+
* @csspart thumb - The switch's thumb.
|
|
21
|
+
* @csspart label - The switch's label.
|
|
22
|
+
*
|
|
23
|
+
* @cssproperty --width - The width of the switch.
|
|
24
|
+
* @cssproperty --height - The height of the switch.
|
|
25
|
+
* @cssproperty --thumb-size - The size of the thumb.
|
|
26
|
+
*/
|
|
27
|
+
export declare const SynSwitch: import("@lit/react").ReactWebComponent<Component, {
|
|
28
|
+
onSynBlur: EventName<SynBlurEvent>;
|
|
29
|
+
onSynChange: EventName<SynChangeEvent>;
|
|
30
|
+
onSynInput: EventName<SynInputEvent>;
|
|
31
|
+
onSynFocus: EventName<SynFocusEvent>;
|
|
32
|
+
onSynInvalid: EventName<SynInvalidEvent>;
|
|
33
|
+
}>;
|
|
34
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
35
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
36
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
37
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
38
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import Component from '@synergy-design-system/components/components/textarea/textarea.component.js';
|
|
2
|
+
import { type EventName } from '@lit/react';
|
|
3
|
+
import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
|
|
4
|
+
/**
|
|
5
|
+
* @summary Textareas collect data from the user and allow multiple lines of text.
|
|
6
|
+
* @documentation https://synergy.style/components/textarea
|
|
7
|
+
* @status stable
|
|
8
|
+
* @since 2.0
|
|
9
|
+
*
|
|
10
|
+
* @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
|
|
11
|
+
* @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
|
|
12
|
+
*
|
|
13
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
14
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
15
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
16
|
+
* @event syn-input - Emitted when the control receives input.
|
|
17
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
18
|
+
*
|
|
19
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
20
|
+
* @csspart form-control-label - The label's wrapper.
|
|
21
|
+
* @csspart form-control-input - The input's wrapper.
|
|
22
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
23
|
+
* @csspart base - The component's base wrapper.
|
|
24
|
+
* @csspart textarea - The internal `<textarea>` control.
|
|
25
|
+
*/
|
|
26
|
+
export declare const SynTextarea: import("@lit/react").ReactWebComponent<Component, {
|
|
27
|
+
onSynBlur: EventName<SynBlurEvent>;
|
|
28
|
+
onSynChange: EventName<SynChangeEvent>;
|
|
29
|
+
onSynFocus: EventName<SynFocusEvent>;
|
|
30
|
+
onSynInput: EventName<SynInputEvent>;
|
|
31
|
+
onSynInvalid: EventName<SynInvalidEvent>;
|
|
32
|
+
}>;
|
|
33
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
34
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
35
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
36
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
37
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,10 @@
|
|
|
1
1
|
export { SynButton } from './components/button.js';
|
|
2
|
+
export { SynButtonGroup } from './components/button-group.js';
|
|
3
|
+
export { SynCheckbox } from './components/checkbox.js';
|
|
4
|
+
export { SynIcon } from './components/icon.js';
|
|
2
5
|
export { SynInput } from './components/input.js';
|
|
6
|
+
export { SynRadio } from './components/radio.js';
|
|
7
|
+
export { SynRadioButton } from './components/radio-button.js';
|
|
8
|
+
export { SynRadioGroup } from './components/radio-group.js';
|
|
9
|
+
export { SynSwitch } from './components/switch.js';
|
|
10
|
+
export { SynTextarea } from './components/textarea.js';
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,43 @@
|
|
|
1
|
+
import {
|
|
2
|
+
SynRadio
|
|
3
|
+
} from "./chunks/chunk.AFCMSVBY.js";
|
|
4
|
+
import {
|
|
5
|
+
SynSwitch
|
|
6
|
+
} from "./chunks/chunk.TOR523VV.js";
|
|
7
|
+
import {
|
|
8
|
+
SynTextarea
|
|
9
|
+
} from "./chunks/chunk.4YY6TGIA.js";
|
|
10
|
+
import {
|
|
11
|
+
SynButtonGroup
|
|
12
|
+
} from "./chunks/chunk.6OTEQXZW.js";
|
|
1
13
|
import {
|
|
2
14
|
SynButton
|
|
3
15
|
} from "./chunks/chunk.TTUPZLN7.js";
|
|
16
|
+
import {
|
|
17
|
+
SynCheckbox
|
|
18
|
+
} from "./chunks/chunk.FYIBHAO4.js";
|
|
19
|
+
import {
|
|
20
|
+
SynIcon
|
|
21
|
+
} from "./chunks/chunk.6CO3KAZG.js";
|
|
4
22
|
import {
|
|
5
23
|
SynInput
|
|
6
24
|
} from "./chunks/chunk.K57RP7HQ.js";
|
|
25
|
+
import {
|
|
26
|
+
SynRadioButton
|
|
27
|
+
} from "./chunks/chunk.QBD4EIK5.js";
|
|
28
|
+
import {
|
|
29
|
+
SynRadioGroup
|
|
30
|
+
} from "./chunks/chunk.UVFFLBXG.js";
|
|
7
31
|
export {
|
|
8
32
|
SynButton,
|
|
9
|
-
|
|
33
|
+
SynButtonGroup,
|
|
34
|
+
SynCheckbox,
|
|
35
|
+
SynIcon,
|
|
36
|
+
SynInput,
|
|
37
|
+
SynRadio,
|
|
38
|
+
SynRadioButton,
|
|
39
|
+
SynRadioGroup,
|
|
40
|
+
SynSwitch,
|
|
41
|
+
SynTextarea
|
|
10
42
|
};
|
|
11
43
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
},
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@lit/react": "^1.0.0",
|
|
8
|
-
"@synergy-design-system/components": "1.0.0
|
|
8
|
+
"@synergy-design-system/components": "^1.0.0"
|
|
9
9
|
},
|
|
10
10
|
"description": "React wrappers for the Synergy Design System",
|
|
11
11
|
"exports": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"CHANGELOG.md",
|
|
22
22
|
"README.md"
|
|
23
23
|
],
|
|
24
|
-
"homepage": "https://github.com/
|
|
24
|
+
"homepage": "https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/react",
|
|
25
25
|
"keywords": [
|
|
26
26
|
"React Web Component Wrapper",
|
|
27
27
|
"React Components",
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
"SICK",
|
|
33
33
|
"SICK Design System"
|
|
34
34
|
],
|
|
35
|
-
"license": "
|
|
35
|
+
"license": "MIT",
|
|
36
36
|
"name": "@synergy-design-system/react",
|
|
37
37
|
"repository": {
|
|
38
38
|
"type": "git",
|
|
39
|
-
"url": "https://github.com/
|
|
39
|
+
"url": "https://github.com/synergy-design-system/synergy-design-system.git",
|
|
40
40
|
"directory": "packages/react"
|
|
41
41
|
},
|
|
42
42
|
"type": "module",
|
|
43
|
-
"version": "1.0.0
|
|
43
|
+
"version": "1.0.0",
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@types/react": "^18.2.31",
|
|
46
46
|
"react": "^18.2.0"
|