@momentum-design/components 0.51.3 → 0.52.0

package/dist/react/progressspinner/index.d.ts

@@ -0,0 +1,30 @@
+import Component from '../../components/progressspinner';
+/**
+ * `mdc-progressspinner` is a customizable, circular progress indicator component.
+ * It visually represents the current completion state of a process, such as loading,
+ * syncing, uploading, or any ongoing task that has a measurable percentage.
+ *
+ * The spinner is built using SVG with two concentric `<circle>` elements:
+ * - The `progress` arc represents the portion of work completed.
+ * - The `track` arc represents the remaining part.
+ *
+ * A visual gap is maintained between the progress and track arcs to clearly
+ * distinguish the two segments. The component smoothly animates arc length
+ * and respects accessibility best practices with ARIA attributes.
+ *
+ * The component supports different states:
+ * - **Default**: Circular spinner shows the progress.
+ * - **Success**: Displays a checkmark icon when progress reaches 100%.
+ * - **Error**: Displays an error icon when in an error state.
+ *
+ * @tagname mdc-progressspinner
+ *
+ * @cssproperty --mdc-spinner-size - The size of the spinner.
+ * @cssproperty --mdc-track-color - The color of the spinner track.
+ * @cssproperty --mdc-progress-color - The color of the spinner progress.
+ * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
+ * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/progressspinner/index.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/progressspinner';
+import { TAG_NAME } from '../../components/progressspinner/progressspinner.constants';
+/**
+ * `mdc-progressspinner` is a customizable, circular progress indicator component.
+ * It visually represents the current completion state of a process, such as loading,
+ * syncing, uploading, or any ongoing task that has a measurable percentage.
+ *
+ * The spinner is built using SVG with two concentric `<circle>` elements:
+ * - The `progress` arc represents the portion of work completed.
+ * - The `track` arc represents the remaining part.
+ *
+ * A visual gap is maintained between the progress and track arcs to clearly
+ * distinguish the two segments. The component smoothly animates arc length
+ * and respects accessibility best practices with ARIA attributes.
+ *
+ * The component supports different states:
+ * - **Default**: Circular spinner shows the progress.
+ * - **Success**: Displays a checkmark icon when progress reaches 100%.
+ * - **Error**: Displays an error icon when in an error state.
+ *
+ * @tagname mdc-progressspinner
+ *
+ * @cssproperty --mdc-spinner-size - The size of the spinner.
+ * @cssproperty --mdc-track-color - The color of the spinner track.
+ * @cssproperty --mdc-progress-color - The color of the spinner progress.
+ * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.
+ * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Progressspinner',
+});
+export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.51.3"
+  "version": "0.52.0"
 }