@synergy-design-system/react 1.0.0-main.11 → 1.0.0-main.13

package/dist/chunks/chunk.4YY6TGIA.js

@@ -0,0 +1,24 @@
+// ../react/src/components/textarea.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/textarea/textarea.component.js";
+var tagName = "syn-textarea";
+Component.define("syn-textarea");
+var SynTextarea = createComponent({
+  displayName: "SynTextarea",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynChange: "syn-change",
+    onSynFocus: "syn-focus",
+    onSynInput: "syn-input",
+    onSynInvalid: "syn-invalid"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynTextarea
+};
+//# sourceMappingURL=chunk.4YY6TGIA.js.map

package/dist/chunks/chunk.4YY6TGIA.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/textarea.ts"],
+  "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"],
+  "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;",
+  "names": []
+}

package/dist/chunks/chunk.6CO3KAZG.js

@@ -0,0 +1,21 @@
+// ../react/src/components/icon.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/icon/icon.component.js";
+var tagName = "syn-icon";
+Component.define("syn-icon");
+var SynIcon = createComponent({
+  displayName: "SynIcon",
+  elementClass: Component,
+  events: {
+    onSynLoad: "syn-load",
+    onSynError: "syn-error"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynIcon
+};
+//# sourceMappingURL=chunk.6CO3KAZG.js.map

package/dist/chunks/chunk.6CO3KAZG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon.ts"],
+  "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"],
+  "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;",
+  "names": []
+}

package/dist/chunks/chunk.FYIBHAO4.js

@@ -0,0 +1,24 @@
+// ../react/src/components/checkbox.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/checkbox/checkbox.component.js";
+var tagName = "syn-checkbox";
+Component.define("syn-checkbox");
+var SynCheckbox = createComponent({
+  displayName: "SynCheckbox",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynChange: "syn-change",
+    onSynFocus: "syn-focus",
+    onSynInput: "syn-input",
+    onSynInvalid: "syn-invalid"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynCheckbox
+};
+//# sourceMappingURL=chunk.FYIBHAO4.js.map

package/dist/chunks/chunk.FYIBHAO4.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox.ts"],
+  "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"],
+  "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;",
+  "names": []
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,39 @@
+import Component from '@synergy-design-system/components/components/checkbox/checkbox.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+/**
+ * @summary Checkboxes allow the user to toggle an option on or off.
+ * @documentation https://synergy.style/components/checkbox
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The checkbox's label.
+ *
+ * @event syn-blur - Emitted when the checkbox loses focus.
+ * @event syn-change - Emitted when the checked state changes.
+ * @event syn-focus - Emitted when the checkbox gains focus.
+ * @event syn-input - Emitted when the checkbox receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The square container that wraps the checkbox's checked state.
+ * @csspart control--checked - Matches the control part when the checkbox is checked.
+ * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the checkbox's label.
+ */
+export declare const SynCheckbox: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynChange: EventName<SynChangeEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+    onSynInput: EventName<SynInputEvent>;
+    onSynInvalid: EventName<SynInvalidEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

package/dist/components/checkbox.js

@@ -0,0 +1,7 @@
+import {
+  SynCheckbox
+} from "../chunks/chunk.FYIBHAO4.js";
+export {
+  SynCheckbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/icon.d.ts

@@ -0,0 +1,21 @@
+import Component from '@synergy-design-system/components/components/icon/icon.component.js';
+import { type EventName } from '@lit/react';
+import type { SynErrorEvent, SynLoadEvent } from '@synergy-design-system/components';
+/**
+ * @summary Icons are symbols that can be used to represent various options within an application.
+ * @documentation https://synergy.style/components/icon
+ * @status stable
+ * @since 2.0
+ *
+ * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+ * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+ *
+ * @csspart svg - The internal SVG element.
+ * @csspart use - The <use> element generated when using `spriteSheet: true`
+ */
+export declare const SynIcon: import("@lit/react").ReactWebComponent<Component, {
+    onSynLoad: EventName<SynLoadEvent>;
+    onSynError: EventName<SynErrorEvent>;
+}>;
+export type { SynLoadEvent } from '@synergy-design-system/components';
+export type { SynErrorEvent } from '@synergy-design-system/components';

package/dist/components/icon.js

@@ -0,0 +1,7 @@
+import {
+  SynIcon
+} from "../chunks/chunk.6CO3KAZG.js";
+export {
+  SynIcon
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/textarea.d.ts

@@ -0,0 +1,37 @@
+import Component from '@synergy-design-system/components/components/textarea/textarea.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+/**
+ * @summary Textareas collect data from the user and allow multiple lines of text.
+ * @documentation https://synergy.style/components/textarea
+ * @status stable
+ * @since 2.0
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart textarea - The internal `<textarea>` control.
+ */
+export declare const SynTextarea: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynChange: EventName<SynChangeEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+    onSynInput: EventName<SynInputEvent>;
+    onSynInvalid: EventName<SynInvalidEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

package/dist/components/textarea.js

@@ -0,0 +1,7 @@
+import {
+  SynTextarea
+} from "../chunks/chunk.4YY6TGIA.js";
+export {
+  SynTextarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/index.d.ts

@@ -1,2 +1,5 @@
 export { SynButton } from './components/button.js';
+export { SynCheckbox } from './components/checkbox.js';
+export { SynIcon } from './components/icon.js';
 export { SynInput } from './components/input.js';
+export { SynTextarea } from './components/textarea.js';

package/dist/index.js

@@ -1,11 +1,23 @@
 import {
   SynButton
 } from "./chunks/chunk.TTUPZLN7.js";
+import {
+  SynCheckbox
+} from "./chunks/chunk.FYIBHAO4.js";
+import {
+  SynIcon
+} from "./chunks/chunk.6CO3KAZG.js";
 import {
   SynInput
 } from "./chunks/chunk.K57RP7HQ.js";
+import {
+  SynTextarea
+} from "./chunks/chunk.4YY6TGIA.js";
 export {
   SynButton,
-  SynInput
+  SynCheckbox,
+  SynIcon,
+  SynInput,
+  SynTextarea
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.0",
-    "@synergy-design-system/components": "1.0.0-main.11"
+    "@synergy-design-system/components": "^1.0.0-main.13"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "1.0.0-main.11",
+  "version": "1.0.0-main.13",
   "devDependencies": {
     "@types/react": "^18.2.31",
     "react": "^18.2.0"