@synergy-design-system/react 2.0.0 → 2.2.0

package/README.md

@@ -17,6 +17,9 @@ Run the following steps to install the required packages.
 # Install the base library and required css files
 npm install --save @synergy-design-system/react @synergy-design-system/tokens
 
+# Optional: Install the styles utility package
+npm install --save @synergy-design-system/styles
+
 # Only if not already installed
 npm install --save react react-dom
 
@@ -39,6 +42,10 @@ import { App } from "./App";
 
 // Add this line to enable the light theme for your application
 import "@synergy-design-system/tokens/themes/light.css";
+import "@synergy-design-system/components/index.css";
+
+// Optional: Import the styles package
+import "@synergy-design-system/styles/index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/dist/chunks/chunk.CKKXGN4F.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-panel.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/tab-panel/tab-panel.component.js';\n\nconst tagName = 'syn-tab-panel';\nComponent.define('syn-tab-panel');\n\n/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://synergy.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */\nexport const SynTabPanel = createComponent({\n  displayName: 'SynTabPanel',\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,eAAe;AAczB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.VLHZNU3B.js

@@ -0,0 +1,21 @@
+// ../react/src/components/tab-group.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/tab-group/tab-group.component.js";
+var tagName = "syn-tab-group";
+Component.define("syn-tab-group");
+var SynTabGroup = createComponent({
+  displayName: "SynTabGroup",
+  elementClass: Component,
+  events: {
+    onSynTabShow: "syn-tab-show",
+    onSynTabHide: "syn-tab-hide"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynTabGroup
+};
+//# sourceMappingURL=chunk.VLHZNU3B.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-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/tab-group/tab-group.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynTabHideEvent, SynTabShowEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-tab-group';\nComponent.define('syn-tab-group');\n\n/**\n * @summary Tab groups organize content into a container that shows one section at a time.\n * @documentation https://synergy.style/components/tab-group\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.\n * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.\n *\n * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the \"panel\" attribute of the shown tab.\n * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the \"panel\" attribute of the hidden tab.\n *\n * @csspart base - The component's base wrapper.\n * @csspart nav - The tab group's navigation container where tabs are slotted in.\n * @csspart tabs - The container that wraps the tabs.\n * @csspart active-tab-indicator - The line that highlights the currently selected tab.\n * @csspart body - The tab group's body where tab panels are slotted in.\n * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n *\n * @cssproperty --indicator-color - The color of the active tab indicator.\n * @cssproperty --indicator-width - The width of the active tab indicator.\n * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).\n * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).\n */\nexport const SynTabGroup = createComponent({\n  displayName: 'SynTabGroup',\n  elementClass: Component,\n  events: {\n    onSynTabShow: 'syn-tab-show' as EventName<SynTabShowEvent>,\n    onSynTabHide: 'syn-tab-hide' as EventName<SynTabHideEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynTabShowEvent } from '@synergy-design-system/components';\nexport type { SynTabHideEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,eAAe;AA+BzB,IAAM,cAAc,gBAAgB;AAAA,EACzC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,cAAc;AAAA,IACd,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.XNCRUJQI.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab.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/tab/tab.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynCloseEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-tab';\nComponent.define('syn-tab');\n\n/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy.style/components/tab\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */\nexport const SynTab = createComponent({\n  displayName: 'SynTab',\n  elementClass: Component,\n  events: {\n    onSynClose: 'syn-close' as EventName<SynCloseEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynCloseEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,SAAS;AAkBnB,IAAM,SAAS,gBAAgB;AAAA,EACpC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,38 @@
+import Component from '@synergy-design-system/components/components/tab-group/tab-group.component.js';
+import { type EventName } from '@lit/react';
+import type { SynTabHideEvent, SynTabShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Tab groups organize content into a container that shows one section at a time.
+ * @documentation https://synergy.style/components/tab-group
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+ *
+ * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
+ * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ */
+export declare const SynTabGroup: import("@lit/react").ReactWebComponent<Component, {
+    onSynTabShow: EventName<SynTabShowEvent>;
+    onSynTabHide: EventName<SynTabHideEvent>;
+}>;
+export type { SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabHideEvent } from '@synergy-design-system/components';

package/dist/components/tab-group.js

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

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

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

package/dist/components/tab-panel.d.ts

@@ -0,0 +1,14 @@
+import Component from '@synergy-design-system/components/components/tab-panel/tab-panel.component.js';
+/**
+ * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ * @documentation https://synergy.style/components/tab-panel
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+export declare const SynTabPanel: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/tab-panel.js

@@ -0,0 +1,7 @@
+import {
+  SynTabPanel
+} from "../chunks/chunk.CKKXGN4F.js";
+export {
+  SynTabPanel
+};
+//# sourceMappingURL=tab-panel.js.map

package/dist/components/tab-panel.js.map

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

package/dist/components/tab.d.ts

@@ -0,0 +1,23 @@
+import Component from '@synergy-design-system/components/components/tab/tab.component.js';
+import { type EventName } from '@lit/react';
+import type { SynCloseEvent } from '@synergy-design-system/components';
+/**
+ * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+ * @documentation https://synergy.style/components/tab
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event syn-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+export declare const SynTab: import("@lit/react").ReactWebComponent<Component, {
+    onSynClose: EventName<SynCloseEvent>;
+}>;
+export type { SynCloseEvent } from '@synergy-design-system/components';

package/dist/components/tab.js

@@ -0,0 +1,7 @@
+import {
+  SynTab
+} from "../chunks/chunk.XNCRUJQI.js";
+export {
+  SynTab
+};
+//# sourceMappingURL=tab.js.map

package/dist/components/tab.js.map

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

package/dist/index.d.ts

@@ -31,6 +31,9 @@ export { SynSelect } from './components/select.js';
 export { SynSideNav } from './components/side-nav.js';
 export { SynSpinner } from './components/spinner.js';
 export { SynSwitch } from './components/switch.js';
+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 { SynTextarea } from './components/textarea.js';
 export { SynTooltip } from './components/tooltip.js';

package/dist/index.js

@@ -4,6 +4,15 @@ import {
 import {
   SynSwitch
 } from "./chunks/chunk.7IZW5FRR.js";
+import {
+  SynTabGroup
+} from "./chunks/chunk.VLHZNU3B.js";
+import {
+  SynTabPanel
+} from "./chunks/chunk.CKKXGN4F.js";
+import {
+  SynTab
+} from "./chunks/chunk.XNCRUJQI.js";
 import {
   SynTag
 } from "./chunks/chunk.7T7PO2AE.js";
@@ -140,6 +149,9 @@ export {
   SynSideNav,
   SynSpinner,
   SynSwitch,
+  SynTab,
+  SynTabGroup,
+  SynTabPanel,
   SynTag,
   SynTextarea,
   SynTooltip

package/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.4",
-    "@synergy-design-system/components": "^2.0.0"
+    "@synergy-design-system/components": "^2.2.0"
   },
   "description": "React wrappers for the Synergy Design System",
   "exports": {
@@ -40,9 +40,12 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "devDependencies": {
     "@types/react": "^18.2.79",
     "react": "^18.2.0"
+  },
+  "peerDependencies": {
+    "@synergy-design-system/tokens": "^2.2.0"
   }
 }