@synergy-design-system/react 1.0.2 → 1.2.0

package/README.md

@@ -3,6 +3,7 @@
 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).
 
 This package aims for an improved UX when used in React applications:
+
 - Auto-completion
 - Event handling
 
@@ -29,14 +30,14 @@ The components will not display correctly without the needed theme. Please inclu
 
 ```tsx
 // main.tsx
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
 
 // Add this line to enable the light theme for your application
-import '@synergy-design-system/tokens/dist/themes/light.css';
+import "@synergy-design-system/tokens/themes/light.css";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
@@ -48,10 +49,10 @@ createRoot(document.getElementById('root')!).render(
 You may now use the components by importing them from the `@synergy-design-system/react` package and rendering them in a react component.
 
 ```tsx
-import { SynButton } from '../dist';
+import { SynButton } from "@synergy-design-system/react";
 
 export const MyButton = () => (
-  <SynButton type="button" variant="primary">
+  <SynButton type="button" variant="filled">
     SynButton Example
   </SynButton>
 );
@@ -64,13 +65,13 @@ All events will be automatically set up to work without the need to attach event
 Just use them with the default react `onEVENT` prefix, where `EVENT` is the camelCased name of the event.
 
 ```tsx
-import { SynButton } from '../dist';
+import { SynButton } from "@synergy-design-system/react";
 
 export const MyButton = () => (
   <SynButton
-    onSynBlur={e => console.log('button blur event', e)}
-    onSynFocus={e => console.log('button focus event', e)}
-    onSynInvalid={e => console.log('button flagged as invalid', e)}
+    onSynBlur={e => console.log("button blur event", e)}
+    onSynFocus={e => console.log("button focus event", e)}
+    onSynInvalid={e => console.log("button flagged as invalid", e)}
   >
     SynButton Example
   </SynButton>

package/dist/chunks/chunk.7T7PO2AE.js

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

package/dist/chunks/chunk.7T7PO2AE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tag.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/tag.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynRemoveEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-tag';\nComponent.define('syn-tag');\n\n/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://synergy.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tag's content.\n *\n * @event syn-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\nexport const SynTag = createComponent({\n  displayName: 'SynTag',\n  elementClass: Component,\n  events: {\n    onSynRemove: 'syn-remove' as EventName<SynRemoveEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynRemoveEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAKtB,IAAM,UAAU;AAChB,UAAU,OAAO,SAAS;AAmBnB,IAAM,SAAS,gBAAgB;AAAA,EACpC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.W4YO4ERO.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon-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/icon-button/icon-button.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';\n\nconst tagName = 'syn-icon-button';\nComponent.define('syn-icon-button');\n\n/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://synergy.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @event syn-blur - Emitted when the icon button loses focus.\n * @event syn-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */\nexport const SynIconButton = createComponent({\n  displayName: 'SynIconButton',\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,iBAAiB;AAe3B,IAAM,gBAAgB,gBAAgB;AAAA,EAC3C,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/components/icon-button.d.ts

@@ -0,0 +1,22 @@
+import Component from '@synergy-design-system/components/components/icon-button/icon-button.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
+/**
+ * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+ * @documentation https://synergy.style/components/icon-button
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @event syn-blur - Emitted when the icon button loses focus.
+ * @event syn-focus - Emitted when the icon button gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export declare const SynIconButton: 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/icon-button.js

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

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

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

package/dist/components/tag.d.ts

@@ -0,0 +1,24 @@
+import Component from '@synergy-design-system/components/components/tag/tag.component.js';
+import { type EventName } from '@lit/react';
+import type { SynRemoveEvent } from '@synergy-design-system/components';
+/**
+ * @summary Tags are used as labels to organize things or to indicate a selection.
+ * @documentation https://synergy.style/components/tag
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tag's content.
+ *
+ * @event syn-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The tag's content.
+ * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
+ * @csspart remove-button__base - The remove button's exported `base` part.
+ */
+export declare const SynTag: import("@lit/react").ReactWebComponent<Component, {
+    onSynRemove: EventName<SynRemoveEvent>;
+}>;
+export type { SynRemoveEvent } from '@synergy-design-system/components';

package/dist/components/tag.js

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

package/dist/components/tag.js.map

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

package/dist/index.d.ts

@@ -2,9 +2,11 @@ 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 { SynIconButton } from './components/icon-button.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 { SynSwitch } from './components/switch.js';
+export { SynTag } from './components/tag.js';
 export { SynTextarea } from './components/textarea.js';

package/dist/index.js

@@ -1,9 +1,15 @@
+import {
+  SynRadioGroup
+} from "./chunks/chunk.UVFFLBXG.js";
 import {
   SynRadio
 } from "./chunks/chunk.AFCMSVBY.js";
 import {
   SynSwitch
 } from "./chunks/chunk.TOR523VV.js";
+import {
+  SynTag
+} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
@@ -16,6 +22,9 @@ import {
 import {
   SynCheckbox
 } from "./chunks/chunk.FYIBHAO4.js";
+import {
+  SynIconButton
+} from "./chunks/chunk.W4YO4ERO.js";
 import {
   SynIcon
 } from "./chunks/chunk.6CO3KAZG.js";
@@ -25,19 +34,18 @@ import {
 import {
   SynRadioButton
 } from "./chunks/chunk.QBD4EIK5.js";
-import {
-  SynRadioGroup
-} from "./chunks/chunk.UVFFLBXG.js";
 export {
   SynButton,
   SynButtonGroup,
   SynCheckbox,
   SynIcon,
+  SynIconButton,
   SynInput,
   SynRadio,
   SynRadioButton,
   SynRadioGroup,
   SynSwitch,
+  SynTag,
   SynTextarea
 };
 //# sourceMappingURL=index.js.map

package/package.json

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