@synergy-design-system/react 1.20.2 → 1.22.0

package/dist/chunks/chunk.BU4SKSAF.js

@@ -0,0 +1,23 @@
+// ../react/src/components/tooltip.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/tooltip/tooltip.component.js";
+var tagName = "syn-tooltip";
+Component.define("syn-tooltip");
+var SynTooltip = createComponent({
+  displayName: "SynTooltip",
+  elementClass: Component,
+  events: {
+    onSynShow: "syn-show",
+    onSynAfterShow: "syn-after-show",
+    onSynHide: "syn-hide",
+    onSynAfterHide: "syn-after-hide"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynTooltip
+};
+//# sourceMappingURL=chunk.BU4SKSAF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tooltip.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/tooltip/tooltip.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-tooltip';\nComponent.define('syn-tooltip');\n\n/**\n * @summary Tooltips display additional information based on a specific action.\n * @documentation https://synergy.style/components/tooltip\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n *\n * @event syn-show - Emitted when the tooltip begins to show.\n * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.\n * @event syn-hide - Emitted when the tooltip begins to hide.\n * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<syn-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n * @csspart body - The tooltip's body where its content is rendered.\n *\n * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.\n * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.\n * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.\n *\n * @animation tooltip.show - The animation to use when showing the tooltip.\n * @animation tooltip.hide - The animation to use when hiding the tooltip.\n */\nexport const SynTooltip = createComponent({\n  displayName: 'SynTooltip',\n  elementClass: Component,\n  events: {\n    onSynShow: 'syn-show' as EventName<SynShowEvent>,\n    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,\n    onSynHide: 'syn-hide' as EventName<SynHideEvent>,\n    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynShowEvent } from '@synergy-design-system/components';\nexport type { SynAfterShowEvent } from '@synergy-design-system/components';\nexport type { SynHideEvent } from '@synergy-design-system/components';\nexport type { SynAfterHideEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,aAAa;AA8BvB,IAAM,aAAa,gBAAgB;AAAA,EACxC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/chunks/chunk.CAHU6MAK.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner.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/spinner/spinner.component.js';\n\nconst tagName = 'syn-spinner';\nComponent.define('syn-spinner');\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport const SynSpinner = createComponent({\n  displayName: 'SynSpinner',\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,aAAa;AAcvB,IAAM,aAAa,gBAAgB;AAAA,EACxC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/spinner.d.ts

@@ -0,0 +1,14 @@
+import Component from '@synergy-design-system/components/components/spinner/spinner.component.js';
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy.style/components/spinner
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+export declare const SynSpinner: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/spinner.js

@@ -0,0 +1,7 @@
+import {
+  SynSpinner
+} from "../chunks/chunk.CAHU6MAK.js";
+export {
+  SynSpinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

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

package/dist/components/tooltip.d.ts

@@ -0,0 +1,41 @@
+import Component from '@synergy-design-system/components/components/tooltip/tooltip.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Tooltips display additional information based on a specific action.
+ * @documentation https://synergy.style/components/tooltip
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event syn-show - Emitted when the tooltip begins to show.
+ * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event syn-hide - Emitted when the tooltip begins to hide.
+ * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ *
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+ * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */
+export declare const SynTooltip: import("@lit/react").ReactWebComponent<Component, {
+    onSynShow: EventName<SynShowEvent>;
+    onSynAfterShow: EventName<SynAfterShowEvent>;
+    onSynHide: EventName<SynHideEvent>;
+    onSynAfterHide: EventName<SynAfterHideEvent>;
+}>;
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';

package/dist/components/tooltip.js

@@ -0,0 +1,7 @@
+import {
+  SynTooltip
+} from "../chunks/chunk.BU4SKSAF.js";
+export {
+  SynTooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

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

package/dist/index.d.ts

@@ -25,6 +25,8 @@ export { SynRadioButton } from './components/radio-button.js';
 export { SynRadioGroup } from './components/radio-group.js';
 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 { SynTag } from './components/tag.js';
 export { SynTextarea } from './components/textarea.js';
+export { SynTooltip } from './components/tooltip.js';

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  SynTooltip
+} from "./chunks/chunk.BU4SKSAF.js";
 import {
   SynRadioGroup
 } from "./chunks/chunk.PCXGVEBP.js";
@@ -10,6 +13,9 @@ import {
 import {
   SynSideNav
 } from "./chunks/chunk.A3DZYM6Z.js";
+import {
+  SynSpinner
+} from "./chunks/chunk.CAHU6MAK.js";
 import {
   SynSwitch
 } from "./chunks/chunk.7IZW5FRR.js";
@@ -116,8 +122,10 @@ export {
   SynRadioGroup,
   SynSelect,
   SynSideNav,
+  SynSpinner,
   SynSwitch,
   SynTag,
-  SynTextarea
+  SynTextarea,
+  SynTooltip
 };
 //# sourceMappingURL=index.js.map

package/package.json

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