@synergy-design-system/react 2.2.1 → 2.3.0

package/dist/chunks/chunk.TNN2STQH.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details.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/details/details.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-details';\nComponent.define('syn-details');\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n * @documentation https://synergy.style/components/details\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the details opens.\n * @event syn-after-show - Emitted after the details opens and all animations are complete.\n * @event syn-hide - Emitted when the details closes.\n * @event syn-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\nexport const SynDetails = createComponent({\n  displayName: 'SynDetails',\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;AA6BvB,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.W6NG3JOO.js

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/accordion.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/accordion/accordion.component.js';\n\nconst tagName = 'syn-accordion';\nComponent.define('syn-accordion');\n\n/**\n * @summary Accordions provide the ability to group a list of `<syn-details>`.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs\n * @status stable\n * @since 1.23.0\n *\n * @slot - The accordion's main content. Must be `<syn-details />` elements.\n *\n * @csspart base - The component's base wrapper.\n */\nexport const SynAccordion = createComponent({\n  displayName: 'SynAccordion',\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;AAazB,IAAM,eAAe,gBAAgB;AAAA,EAC1C,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,CAER;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/accordion.d.ts

@@ -0,0 +1,13 @@
+import Component from '@synergy-design-system/components/components/accordion/accordion.component.js';
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export declare const SynAccordion: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/components/accordion.js

@@ -0,0 +1,7 @@
+import {
+  SynAccordion
+} from "../chunks/chunk.W6NG3JOO.js";
+export {
+  SynAccordion
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

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

package/dist/components/details.d.ts

@@ -0,0 +1,40 @@
+import Component from '@synergy-design-system/components/components/details/details.component.js';
+import { type EventName } from '@lit/react';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';
+/**
+ * @summary Details show a brief summary and expand to show additional content.
+ * @documentation https://synergy.style/components/details
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The details' main content.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
+ * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the details opens.
+ * @event syn-after-show - Emitted after the details opens and all animations are complete.
+ * @event syn-hide - Emitted when the details closes.
+ * @event syn-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart summary - The container that wraps the summary.
+ * @csspart summary-icon - The container that wraps the expand/collapse icons.
+ * @csspart content - The details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ */
+export declare const SynDetails: 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/details.js

@@ -0,0 +1,7 @@
+import {
+  SynDetails
+} from "../chunks/chunk.TNN2STQH.js";
+export {
+  SynDetails
+};
+//# sourceMappingURL=details.js.map

package/dist/components/details.js.map

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { SynAccordion } from './components/accordion.js';
 export { SynAlert } from './components/alert.js';
 export { SynBadge } from './components/badge.js';
 export { SynBreadcrumb } from './components/breadcrumb.js';
@@ -6,6 +7,7 @@ export { SynButton } from './components/button.js';
 export { SynButtonGroup } from './components/button-group.js';
 export { SynCard } from './components/card.js';
 export { SynCheckbox } from './components/checkbox.js';
+export { SynDetails } from './components/details.js';
 export { SynDialog } from './components/dialog.js';
 export { SynDivider } from './components/divider.js';
 export { SynDrawer } from './components/drawer.js';

package/dist/index.js

@@ -1,3 +1,15 @@
+import {
+  SynTextarea
+} from "./chunks/chunk.4YY6TGIA.js";
+import {
+  SynTooltip
+} from "./chunks/chunk.BU4SKSAF.js";
+import {
+  SynSelect
+} from "./chunks/chunk.FB24BPQZ.js";
+import {
+  SynSideNav
+} from "./chunks/chunk.A3DZYM6Z.js";
 import {
   SynSpinner
 } from "./chunks/chunk.CAHU6MAK.js";
@@ -17,11 +29,11 @@ import {
   SynTag
 } from "./chunks/chunk.7T7PO2AE.js";
 import {
-  SynTextarea
-} from "./chunks/chunk.4YY6TGIA.js";
+  SynOption
+} from "./chunks/chunk.CJKK63W2.js";
 import {
-  SynTooltip
-} from "./chunks/chunk.BU4SKSAF.js";
+  SynPopup
+} from "./chunks/chunk.UJGZNEKT.js";
 import {
   SynPrioNav
 } from "./chunks/chunk.7732PJEC.js";
@@ -41,11 +53,11 @@ import {
   SynRadio
 } from "./chunks/chunk.AFCMSVBY.js";
 import {
-  SynSelect
-} from "./chunks/chunk.FB24BPQZ.js";
+  SynIconButton
+} from "./chunks/chunk.W4YO4ERO.js";
 import {
-  SynSideNav
-} from "./chunks/chunk.A3DZYM6Z.js";
+  SynIcon
+} from "./chunks/chunk.6CO3KAZG.js";
 import {
   SynInput
 } from "./chunks/chunk.N6QQSQTB.js";
@@ -65,14 +77,14 @@ import {
   SynOptgroup
 } from "./chunks/chunk.DLAIDGSD.js";
 import {
-  SynOption
-} from "./chunks/chunk.CJKK63W2.js";
-import {
-  SynPopup
-} from "./chunks/chunk.UJGZNEKT.js";
+  SynCard
+} from "./chunks/chunk.JTJSVPDC.js";
 import {
   SynCheckbox
 } from "./chunks/chunk.RU33PYCK.js";
+import {
+  SynDetails
+} from "./chunks/chunk.TNN2STQH.js";
 import {
   SynDialog
 } from "./chunks/chunk.IRQRZGIS.js";
@@ -89,11 +101,8 @@ import {
   SynHeader
 } from "./chunks/chunk.RY2WG25R.js";
 import {
-  SynIconButton
-} from "./chunks/chunk.W4YO4ERO.js";
-import {
-  SynIcon
-} from "./chunks/chunk.6CO3KAZG.js";
+  SynAccordion
+} from "./chunks/chunk.W6NG3JOO.js";
 import {
   SynAlert
 } from "./chunks/chunk.NCB462OR.js";
@@ -112,10 +121,8 @@ import {
 import {
   SynButton
 } from "./chunks/chunk.TTUPZLN7.js";
-import {
-  SynCard
-} from "./chunks/chunk.JTJSVPDC.js";
 export {
+  SynAccordion,
   SynAlert,
   SynBadge,
   SynBreadcrumb,
@@ -124,6 +131,7 @@ export {
   SynButtonGroup,
   SynCard,
   SynCheckbox,
+  SynDetails,
   SynDialog,
   SynDivider,
   SynDrawer,

package/package.json

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