@xmesh/system-design 0.0.4 → 0.0.6

package/dist/react/XmBadge.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import { XmBadge as XmBadgeElement } from "../lit/components/badge/index.js";
+
+export type { XmBadgeElement };
+
+export interface XmBadgeProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  dot?: boolean;
+
+  /** undefined */
+  count?: XmBadgeElement["count"];
+
+  /** undefined */
+  max?: XmBadgeElement["max"];
+
+  /** undefined */
+  label?: XmBadgeElement["label"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBadgeElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `count`: undefined
+ * - `dot`: undefined
+ * - `max`: undefined
+ * - `label`: undefined
+ */
+export const XmBadge: React.ForwardRefExoticComponent<XmBadgeProps>;

package/dist/react/XmBadge.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/badge/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmBadge = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    dot,
+    count,
+    max,
+    label,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-badge",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      count: count,
+      max: max,
+      label: label,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      dot: dot ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmBrandGlyph.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { XmBrandGlyph as XmBrandGlyphElement } from "../lit/components/brand-mark/index.js";
+
+export type { XmBrandGlyphElement };
+
+export interface XmBrandGlyphProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBrandGlyphElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ */
+export const XmBrandGlyph: React.ForwardRefExoticComponent<XmBrandGlyphProps>;

package/dist/react/XmBrandGlyph.js

@@ -0,0 +1,24 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/brand-mark/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmBrandGlyph = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { className, exportparts, htmlFor, part, tabIndex, ...restProps } =
+    props;
+
+  return React.createElement(
+    "xm-brand-glyph",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmBrandMark.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { XmBrandMark as XmBrandMarkElement } from "../lit/components/brand-mark/index.js";
+
+export type { XmBrandMarkElement };
+
+export interface XmBrandMarkProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  showGlyph?: boolean;
+
+  /** undefined */
+  showWordmark?: boolean;
+
+  /** undefined */
+  showTagline?: boolean;
+
+  /** undefined */
+  size?: XmBrandMarkElement["size"];
+
+  /** undefined */
+  tagline?: XmBrandMarkElement["tagline"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBrandMarkElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `size`: undefined
+ * - `show-glyph`/`showGlyph`: undefined
+ * - `show-wordmark`/`showWordmark`: undefined
+ * - `show-tagline`/`showTagline`: undefined
+ * - `tagline`: undefined
+ */
+export const XmBrandMark: React.ForwardRefExoticComponent<XmBrandMarkProps>;

package/dist/react/XmBrandMark.js

@@ -0,0 +1,40 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/brand-mark/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmBrandMark = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    showGlyph,
+    showWordmark,
+    showTagline,
+    size,
+    tagline,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-brand-mark",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      size: size,
+      tagline: tagline,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      "show-glyph": showGlyph ? true : undefined,
+      "show-wordmark": showWordmark ? true : undefined,
+      "show-tagline": showTagline ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmBreadcrumbs.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import { XmBreadcrumbs as XmBreadcrumbsElement } from "../lit/components/breadcrumbs/index.js";
+
+export type { XmBreadcrumbsElement };
+
+export interface XmBreadcrumbsProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  separator?: XmBreadcrumbsElement["separator"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBreadcrumbsElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `separator`: undefined
+ * - `items`: undefined (property only)
+ */
+export const XmBreadcrumbs: React.ForwardRefExoticComponent<XmBreadcrumbsProps>;

package/dist/react/XmBreadcrumbs.js

@@ -0,0 +1,32 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/breadcrumbs/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmBreadcrumbs = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    separator,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-breadcrumbs",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      separator: separator,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmBubble.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { XmBubble as XmBubbleElement } from "../lit/components/bubble/index.js";
+
+export type { XmBubbleElement };
+
+export interface XmBubbleProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  download?: boolean;
+
+  /** undefined */
+  variant?: XmBubbleElement["variant"];
+
+  /** undefined */
+  text?: XmBubbleElement["text"];
+
+  /** undefined */
+  bodyHtml?: XmBubbleElement["bodyHtml"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBubbleElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `variant`: undefined
+ * - `download`: undefined
+ * - `text`: undefined
+ * - `body-html`/`bodyHtml`: undefined
+ * - `attachments`: undefined (property only)
+ * - `artifact`: undefined (property only)
+ */
+export const XmBubble: React.ForwardRefExoticComponent<XmBubbleProps>;

package/dist/react/XmBubble.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/bubble/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmBubble = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    download,
+    variant,
+    text,
+    bodyHtml,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-bubble",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      variant: variant,
+      text: text,
+      "body-html": bodyHtml ?? props["body-html"],
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      download: download ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmBubbleActions.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { XmBubbleActions as XmBubbleActionsElement } from "../lit/components/bubble/index.js";
+
+export type { XmBubbleActionsElement };
+
+export interface XmBubbleActionsProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  ts?: XmBubbleActionsElement["ts"];
+
+  /** undefined */
+  ariaLabel?: XmBubbleActionsElement["ariaLabel"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBubbleActionsElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `ts`: undefined
+ * - `aria-label`/`ariaLabel`: undefined
+ */
+export const XmBubbleActions: React.ForwardRefExoticComponent<XmBubbleActionsProps>;

package/dist/react/XmBubbleActions.js

@@ -0,0 +1,34 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/bubble/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmBubbleActions = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    ts,
+    ariaLabel,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-bubble-actions",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      ts: ts,
+      "aria-label": ariaLabel ?? props["aria-label"],
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmBubbleGroup.d.ts

@@ -0,0 +1,82 @@
+import React from "react";
+import { XmBubbleGroup as XmBubbleGroupElement } from "../lit/components/bubble/index.js";
+
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+/** `XmBubbleGroup` component event */
+export type XmBubbleGroupElementEvent<E = Event> = TypedEvent<
+  XmBubbleGroupElement,
+  E
+>;
+
+export type { XmBubbleGroupElement };
+
+export interface XmBubbleGroupProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  variant?: XmBubbleGroupElement["variant"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmBubbleGroupElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Fired when an artifact download is requested. */
+  onArtifactDownload?: (event: XmBubbleGroupElementEvent) => void;
+
+  /** Fired when an artifact is opened. */
+  onArtifactOpen?: (event: XmBubbleGroupElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `variant`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `artifact-download`: Fired when an artifact download is requested.
+ * - `artifact-open`: Fired when an artifact is opened.
+ */
+export const XmBubbleGroup: React.ForwardRefExoticComponent<XmBubbleGroupProps>;