@synergy-design-system/react 2.4.2 → 2.5.0

package/dist/chunks/chunk.3OAYVNPH.js

@@ -0,0 +1,24 @@
+// ../react/src/components/file.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import Component from "@synergy-design-system/components/components/file/file.component.js";
+var tagName = "syn-file";
+Component.define("syn-file");
+var SynFile = createComponent({
+  displayName: "SynFile",
+  elementClass: Component,
+  events: {
+    onSynBlur: "syn-blur",
+    onSynChange: "syn-change",
+    onSynError: "syn-error",
+    onSynFocus: "syn-focus",
+    onSynInput: "syn-input"
+  },
+  react: React,
+  tagName
+});
+
+export {
+  SynFile
+};
+//# sourceMappingURL=chunk.3OAYVNPH.js.map

package/dist/chunks/chunk.3OAYVNPH.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/file.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/file/file.component.js';\n\nimport { type EventName } from '@lit/react';\nimport type {\n  SynBlurEvent, SynChangeEvent, SynErrorEvent, SynFocusEvent, SynInputEvent,\n} from '@synergy-design-system/components';\n\nconst tagName = 'syn-file';\nComponent.define('syn-file');\n\n/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n *    Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n *    Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n *    Opening the file dialog on click and as well as drag and drop will work for this content.\n *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n *    applied and must be taken care of yourself.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */\nexport const SynFile = createComponent({\n  displayName: 'SynFile',\n  elementClass: Component,\n  events: {\n    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,\n    onSynChange: 'syn-change' as EventName<SynChangeEvent>,\n    onSynError: 'syn-error' as EventName<SynErrorEvent>,\n    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,\n    onSynInput: 'syn-input' as EventName<SynInputEvent>,\n  },\n  react: React,\n  tagName,\n});\n\nexport type { SynBlurEvent } from '@synergy-design-system/components';\nexport type { SynChangeEvent } from '@synergy-design-system/components';\nexport type { SynErrorEvent } from '@synergy-design-system/components';\nexport type { SynFocusEvent } from '@synergy-design-system/components';\nexport type { SynInputEvent } from '@synergy-design-system/components';\n"],
+  "mappings": ";AAKA,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,OAAO,eAAe;AAOtB,IAAM,UAAU;AAChB,UAAU,OAAO,UAAU;AAgDpB,IAAM,UAAU,gBAAgB;AAAA,EACrC,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/components/file.d.ts

@@ -0,0 +1,61 @@
+import Component from '@synergy-design-system/components/components/file/file.component.js';
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent, SynChangeEvent, SynErrorEvent, SynFocusEvent, SynInputEvent } from '@synergy-design-system/components';
+/**
+ * @summary File controls allow selecting an arbitrary number of files for uploading.
+ * @status stable
+ *
+ * @dependency syn-button
+ * @dependency syn-icon
+ *
+ * @slot label - The file control's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the file control.
+ *    Alternatively, you can use the `help-text` attribute.
+ * @slot droparea-icon - Optional droparea icon to use instead of the default.
+ *    Works best with `<syn-icon>`.
+ * @slot trigger - Optional content to be used as trigger instead of the default content.
+ *    Opening the file dialog on click and as well as drag and drop will work for this content.
+ *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,
+ *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be
+ *    applied and must be taken care of yourself.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-error - Emitted when multiple files are selected via drag and drop, without
+ * the `multiple` property being set.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart button-wrapper - The wrapper around the button and text value.
+ * @csspart button - The syn-button acting as a file input.
+ * @csspart button__base - The syn-button's exported `base` part.
+ * @csspart value - The chosen files or placeholder text for the file input.
+ * @csspart droparea - The element wrapping the drop zone.
+ * @csspart droparea-background - The background of the drop zone.
+ * @csspart droparea-icon - The container that wraps the icon for the drop zone.
+ * @csspart droparea-value - The text for the drop zone.
+ * @csspart trigger - The container that wraps the trigger.
+ *
+ * @animation file.iconDrop - The animation to use for the file icon
+ * when a file is dropped
+ * @animation file.text.disappear - The disappear animation to use for the file placeholder text
+ * when a file is dropped
+ * @animation file.text.appear - The appear animation to use for the file placeholder text
+ * when a file is dropped
+ */
+export declare const SynFile: import("@lit/react").ReactWebComponent<Component, {
+    onSynBlur: EventName<SynBlurEvent>;
+    onSynChange: EventName<SynChangeEvent>;
+    onSynError: EventName<SynErrorEvent>;
+    onSynFocus: EventName<SynFocusEvent>;
+    onSynInput: EventName<SynInputEvent>;
+}>;
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynErrorEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';

package/dist/components/file.js

@@ -0,0 +1,7 @@
+import {
+  SynFile
+} from "../chunks/chunk.3OAYVNPH.js";
+export {
+  SynFile
+};
+//# sourceMappingURL=file.js.map

package/dist/components/file.js.map

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

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { SynDialog } from './components/dialog.js';
 export { SynDivider } from './components/divider.js';
 export { SynDrawer } from './components/drawer.js';
 export { SynDropdown } from './components/dropdown.js';
+export { SynFile } from './components/file.js';
 export { SynHeader } from './components/header.js';
 export { SynIcon } from './components/icon.js';
 export { SynIconButton } from './components/icon-button.js';

package/dist/index.js

@@ -1,9 +1,15 @@
+import {
+  SynTag
+} from "./chunks/chunk.7T7PO2AE.js";
 import {
   SynTextarea
 } from "./chunks/chunk.4YY6TGIA.js";
 import {
   SynTooltip
 } from "./chunks/chunk.BU4SKSAF.js";
+import {
+  SynRadio
+} from "./chunks/chunk.AFCMSVBY.js";
 import {
   SynSelect
 } from "./chunks/chunk.FB24BPQZ.js";
@@ -26,8 +32,8 @@ import {
   SynTab
 } from "./chunks/chunk.XNCRUJQI.js";
 import {
-  SynTag
-} from "./chunks/chunk.7T7PO2AE.js";
+  SynOptgroup
+} from "./chunks/chunk.DLAIDGSD.js";
 import {
   SynOption
 } from "./chunks/chunk.CJKK63W2.js";
@@ -50,8 +56,8 @@ import {
   SynRadioGroup
 } from "./chunks/chunk.PCXGVEBP.js";
 import {
-  SynRadio
-} from "./chunks/chunk.AFCMSVBY.js";
+  SynHeader
+} from "./chunks/chunk.RY2WG25R.js";
 import {
   SynIconButton
 } from "./chunks/chunk.W4YO4ERO.js";
@@ -73,9 +79,6 @@ import {
 import {
   SynNavItem
 } from "./chunks/chunk.Y2KBRBDX.js";
-import {
-  SynOptgroup
-} from "./chunks/chunk.DLAIDGSD.js";
 import {
   SynCard
 } from "./chunks/chunk.JTJSVPDC.js";
@@ -98,8 +101,8 @@ import {
   SynDropdown
 } from "./chunks/chunk.E3427YBK.js";
 import {
-  SynHeader
-} from "./chunks/chunk.RY2WG25R.js";
+  SynFile
+} from "./chunks/chunk.3OAYVNPH.js";
 import {
   SynAccordion
 } from "./chunks/chunk.W6NG3JOO.js";
@@ -136,6 +139,7 @@ export {
   SynDivider,
   SynDrawer,
   SynDropdown,
+  SynFile,
   SynHeader,
   SynIcon,
   SynIconButton,

package/package.json

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