@synergy-design-system/react 3.6.2 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @synergy-design-system/react
 
+## 3.7.0
+
+### Minor Changes
+
+- [#1193](https://github.com/synergy-design-system/synergy-design-system/pull/1193) [`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-03-06
+
+  feat: ✨ Add new component `<syn-tag-group>` (#1152)
+
+  Adds a new component `<syn-tag-group>`, including templates how to use this component.
+
+### Patch Changes
+
+- Updated dependencies [[`c7f6a8b`](https://github.com/synergy-design-system/synergy-design-system/commit/c7f6a8bc8ed2eb76c5f9510c1d499f6feca5d302)]:
+  - @synergy-design-system/components@3.7.0
+  - @synergy-design-system/tokens@3.7.0
+
 ## 3.6.2
 
 ### Patch Changes

package/dist/chunks/chunk.PXOA3WCQ.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag-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/tag-group/tag-group.component.js';\n\nconst tagName = 'syn-tag-group';\nComponent.define('syn-tag-group');\n\n/**\n * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user\u2011generated labels.\n * It arranges tags in flexible rows and supports different sizes and layouts.\n * Tags can be removable, icon\u2011based, or purely textual.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs\n * @status stable\n *\n * @slot - The tag group's main content. Must be `<syn-tag />` elements.\n * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The component's base wrapper.\n * @csspart tag-label - The tag group's label.\n */\nexport const SynTagGroup = createComponent({\n  displayName: 'SynTagGroup',\n  elementClass: Component,\n  events: {},\n  react: React,\n  tagName,\n});\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAEtB,IAAM,UAAU;AAChB,UAAU,OAAO,eAAe;AAgBzB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,16 @@
+import Component from '@synergy-design-system/components/components/tag-group/tag-group.component.js';
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */
+export declare const SynTagGroup: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/tag-group.js

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

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

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

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { SynTab } from './components/tab.js';
 export { SynTabGroup } from './components/tab-group.js';
 export { SynTabPanel } from './components/tab-panel.js';
 export { SynTag } from './components/tag.js';
+export { SynTagGroup } from './components/tag-group.js';
 export { SynTextarea } from './components/textarea.js';
 export { SynTooltip } from './components/tooltip.js';
 export { SynValidate } from './components/validate.js';

package/dist/index.js

@@ -7,6 +7,9 @@ import {
 import {
   SynTab
 } from "./chunks/chunk.GGLI22YI.js";
+import {
+  SynTagGroup
+} from "./chunks/chunk.PXOA3WCQ.js";
 import {
   SynTag
 } from "./chunks/chunk.NI6PGSHP.js";
@@ -180,6 +183,7 @@ export {
   SynTabGroup,
   SynTabPanel,
   SynTag,
+  SynTagGroup,
   SynTextarea,
   SynTooltip,
   SynValidate

package/dist/types/syn-jsx-elements.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, DOMAttributes, RefObject } from 'react';
-import type { SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynBlurEvent, SynFocusEvent, SynInvalidEvent, SynChangeEvent, SynInputEvent, SynClearEvent, SynErrorEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynLoadEvent, SynClampEvent, SynSelectEvent, SynRepositionEvent, SynMoveEvent, SynCloseEvent, SynTabShowEvent, SynTabHideEvent, SynRemoveEvent, SynAccordion, SynAlert, SynBadge, SynBreadcrumb, SynBreadcrumbItem, SynButton, SynButtonGroup, SynCard, SynCheckbox, SynCombobox, SynDetails, SynDialog, SynDivider, SynDrawer, SynDropdown, SynFile, SynHeader, SynIcon, SynIconButton, SynInput, SynMenu, SynMenuItem, SynMenuLabel, SynNavItem, SynOptgroup, SynOption, SynPopup, SynPrioNav, SynProgressBar, SynProgressRing, SynRadio, SynRadioButton, SynRadioGroup, SynRange, SynRangeTick, SynSelect, SynSideNav, SynSpinner, SynSwitch, SynTab, SynTabGroup, SynTabPanel, SynTag, SynTextarea, SynTooltip, SynValidate } from '@synergy-design-system/components';
+import type { SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynBlurEvent, SynFocusEvent, SynInvalidEvent, SynChangeEvent, SynInputEvent, SynClearEvent, SynErrorEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent, SynLoadEvent, SynClampEvent, SynSelectEvent, SynRepositionEvent, SynMoveEvent, SynCloseEvent, SynTabShowEvent, SynTabHideEvent, SynRemoveEvent, SynAccordion, SynAlert, SynBadge, SynBreadcrumb, SynBreadcrumbItem, SynButton, SynButtonGroup, SynCard, SynCheckbox, SynCombobox, SynDetails, SynDialog, SynDivider, SynDrawer, SynDropdown, SynFile, SynHeader, SynIcon, SynIconButton, SynInput, SynMenu, SynMenuItem, SynMenuLabel, SynNavItem, SynOptgroup, SynOption, SynPopup, SynPrioNav, SynProgressBar, SynProgressRing, SynRadio, SynRadioButton, SynRadioGroup, SynRange, SynRangeTick, SynSelect, SynSideNav, SynSpinner, SynSwitch, SynTab, SynTabGroup, SynTabPanel, SynTag, SynTagGroup, SynTextarea, SynTooltip, SynValidate } from '@synergy-design-system/components';
 /**
  * Used core types
  * @see https://coryrylan.com/blog/how-to-use-web-components-with-typescript-and-react
@@ -1549,6 +1549,20 @@ export type SynCustomElement<SynElement extends HTMLElement, Events extends SynE
  */ export type SynTagJSXElement = SynCustomElement<SynTag, [
     ['syn-remove', SynRemoveEvent]
 ]>;
+/**
+ * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+ * It arranges tags in flexible rows and supports different sizes and layouts.
+ * Tags can be removable, icon‑based, or purely textual.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+ * @status stable
+ *
+ * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+ * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart tag-label - The tag group's label.
+ */ export type SynTagGroupJSXElement = SynCustomElement<SynTagGroup, []>;
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
  * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
@@ -2797,6 +2811,20 @@ declare module 'react' {
              * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
              * @csspart remove-button__base - The remove button's exported `base` part.
              */ 'syn-tag': SynTagJSXElement;
+            /**
+             * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
+             * It arranges tags in flexible rows and supports different sizes and layouts.
+             * Tags can be removable, icon‑based, or purely textual.
+             *
+             * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
+             * @status stable
+             *
+             * @slot - The tag group's main content. Must be `<syn-tag />` elements.
+             * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
+             *
+             * @csspart base - The component's base wrapper.
+             * @csspart tag-label - The tag group's label.
+             */ 'syn-tag-group': SynTagGroupJSXElement;
             /**
              * @summary Textareas collect data from the user and allow multiple lines of text.
              * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@synergy-design-system/components": "3.6.2"
+    "@synergy-design-system/components": "3.7.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -43,12 +43,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.4"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "3.6.2"
+    "@synergy-design-system/tokens": "3.7.0"
   }
 }