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

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

@@ -0,0 +1,18 @@
+// ../react/src/components/button-group.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/button-group/button-group.component.js";
+var tagName = "syn-button-group";
+Component.define("syn-button-group");
+var SynButtonGroup = createComponent({
+  displayName: "SynButtonGroup",
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName
+});
+
+export {
+  SynButtonGroup
+};
+//# sourceMappingURL=chunk.6OTEQXZW.js.map

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

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

package/dist/chunks/chunk.AFCMSVBY.js

@@ -0,0 +1,21 @@
+// ../react/src/components/radio.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/radio/radio.component.js";
+var tagName = "syn-radio";
+Component.define("syn-radio");
+var SynRadio = createComponent({
+  displayName: "SynRadio",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynFocus: "syn-focus"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynRadio
+};
+//# sourceMappingURL=chunk.AFCMSVBY.js.map

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

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

package/dist/chunks/chunk.QBD4EIK5.js

@@ -0,0 +1,21 @@
+// ../react/src/components/radio-button.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/radio-button/radio-button.component.js";
+var tagName = "syn-radio-button";
+Component.define("syn-radio-button");
+var SynRadioButton = createComponent({
+  displayName: "SynRadioButton",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynFocus: "syn-focus"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynRadioButton
+};
+//# sourceMappingURL=chunk.QBD4EIK5.js.map

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

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

package/dist/chunks/chunk.UVFFLBXG.js

@@ -0,0 +1,22 @@
+// ../react/src/components/radio-group.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/radio-group/radio-group.component.js";
+var tagName = "syn-radio-group";
+Component.define("syn-radio-group");
+var SynRadioGroup = createComponent({
+  displayName: "SynRadioGroup",
+  elementClass: Component,
+  events: {
+    onSynChange: "syn-change",
+    onSynInput: "syn-input",
+    onSynInvalid: "syn-invalid"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynRadioGroup
+};
+//# sourceMappingURL=chunk.UVFFLBXG.js.map

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

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

package/dist/components/button-group.d.ts

@@ -0,0 +1,12 @@
+import Component from '@synergy-design-system/components/components/button-group/button-group.component.js';
+/**
+ * @summary Button groups can be used to group related buttons into sections.
+ * @documentation https://synergy.style/components/button-group
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more `<syn-button>` elements to display in the button group.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export declare const SynButtonGroup: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/button-group.js

@@ -0,0 +1,7 @@
+import {
+  SynButtonGroup
+} from "../chunks/chunk.6OTEQXZW.js";
+export {
+  SynButtonGroup
+};
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group.js.map

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

package/dist/components/radio-button.d.ts

@@ -0,0 +1,29 @@
+import Component from '@synergy-design-system/components/components/radio-button/radio-button.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
+/**
+ * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
+ * @documentation https://synergy.style/components/radio-button
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The radio button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart button - The internal `<button>` element.
+ * @csspart button--checked - The internal button element when the radio button is checked.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The container that wraps the radio button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ */
+export declare const SynRadioButton: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';

package/dist/components/radio-button.js

@@ -0,0 +1,7 @@
+import {
+  SynRadioButton
+} from "../chunks/chunk.QBD4EIK5.js";
+export {
+  SynRadioButton
+};
+//# sourceMappingURL=radio-button.js.map

package/dist/components/radio-button.js.map

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

package/dist/components/radio-group.d.ts

@@ -0,0 +1,34 @@
+import Component from '@synergy-design-system/components/components/radio-group/radio-group.component.js';
+import { type EventName } from '@lit/react';
+import type { SynChangeEvent, SynInputEvent, SynInvalidEvent } from '@synergy-design-system/components';
+/**
+ * @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.
+ * @documentation https://synergy.style/components/radio-group
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-button-group
+ *
+ * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
+ * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
+ *  attribute.
+ *
+ * @event syn-change - Emitted when the radio group's selected value changes.
+ * @event syn-input - Emitted when the radio group receives user 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 button-group - The button group that wraps radio buttons.
+ * @csspart button-group__base - The button group's `base` part.
+ */
+export declare const SynRadioGroup: import("@lit/react").ReactWebComponent<Component, {
+    onSynChange: EventName<SynChangeEvent>;
+    onSynInput: EventName<SynInputEvent>;
+    onSynInvalid: EventName<SynInvalidEvent>;
+}>;
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

package/dist/components/radio-group.js

@@ -0,0 +1,7 @@
+import {
+  SynRadioGroup
+} from "../chunks/chunk.UVFFLBXG.js";
+export {
+  SynRadioGroup
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group.js.map

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

package/dist/components/radio.d.ts

@@ -0,0 +1,28 @@
+import Component from '@synergy-design-system/components/components/radio/radio.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
+/**
+ * @summary Radios allow the user to select a single option from a group.
+ * @documentation https://synergy.style/components/radio
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The radio's label.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-focus - Emitted when the control gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The circular container that wraps the radio's checked state.
+ * @csspart control--checked - The radio control when the radio is checked.
+ * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
+ * @csspart label - The container that wraps the radio's label.
+ */
+export declare const SynRadio: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';

package/dist/components/radio.js

@@ -0,0 +1,7 @@
+import {
+  SynRadio
+} from "../chunks/chunk.AFCMSVBY.js";
+export {
+  SynRadio
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio.js.map

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

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 export { SynButton } from './components/button.js';
+export { SynButtonGroup } from './components/button-group.js';
 export { SynCheckbox } from './components/checkbox.js';
 export { SynIcon } from './components/icon.js';
 export { SynInput } from './components/input.js';
+export { SynRadio } from './components/radio.js';
+export { SynRadioButton } from './components/radio-button.js';
+export { SynRadioGroup } from './components/radio-group.js';
 export { SynTextarea } from './components/textarea.js';

package/dist/index.js

@@ -1,3 +1,12 @@
+import {
+  SynRadio
+} from "./chunks/chunk.AFCMSVBY.js";
+import {
+  SynTextarea
+} from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynButtonGroup
+} from "./chunks/chunk.6OTEQXZW.js";
 import {
   SynButton
 } from "./chunks/chunk.TTUPZLN7.js";
@@ -11,13 +20,20 @@ import {
   SynInput
 } from "./chunks/chunk.K57RP7HQ.js";
 import {
-  SynTextarea
-} from "./chunks/chunk.4YY6TGIA.js";
+  SynRadioButton
+} from "./chunks/chunk.QBD4EIK5.js";
+import {
+  SynRadioGroup
+} from "./chunks/chunk.UVFFLBXG.js";
 export {
   SynButton,
+  SynButtonGroup,
   SynCheckbox,
   SynIcon,
   SynInput,
+  SynRadio,
+  SynRadioButton,
+  SynRadioGroup,
   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.13"
+    "@synergy-design-system/components": "^1.0.0-main.14"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "1.0.0-main.13",
+  "version": "1.0.0-main.14",
   "devDependencies": {
     "@types/react": "^18.2.31",
     "react": "^18.2.0"