@xmesh/system-design 0.0.3 → 0.0.5

package/dist/react/XmDataTable.js

@@ -0,0 +1,65 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/data-table/index.js";
+import {
+  useEventListener,
+  useProperties,
+  createForwardedRefHandler,
+} from "./react-utils.js";
+
+export const XmDataTable = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    loading,
+    server,
+    rowClick,
+    pageSize,
+    emptyHeading,
+    emptyText,
+    totalItems,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    sort,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "xm-data-table-page-change",
+    props.onXmDataTablePageChange,
+  );
+  useEventListener(
+    ref,
+    "xm-data-table-sort-change",
+    props.onXmDataTableSortChange,
+  );
+  useEventListener(ref, "xm-data-table-row-click", props.onXmDataTableRowClick);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "sort", sort);
+
+  return React.createElement(
+    "xm-data-table",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      "page-size": pageSize ?? props["page-size"],
+      "empty-heading": emptyHeading ?? props["empty-heading"],
+      "empty-text": emptyText ?? props["empty-text"],
+      "total-items": totalItems ?? props["total-items"],
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      loading: loading ? true : undefined,
+      server: server ? true : undefined,
+      "row-click": rowClick ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmDateRange.d.ts

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  XmDateRange as XmDateRangeElement,
+  CustomEvent,
+} from "../lit/components/date-range/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;
+};
+/** `XmDateRange` component event */
+export type XmDateRangeElementEvent<E = Event> = TypedEvent<
+  XmDateRangeElement,
+  E
+>;
+
+export type { XmDateRangeElement, CustomEvent };
+
+export interface XmDateRangeProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  from?: XmDateRangeElement["from"];
+
+  /** undefined */
+  to?: XmDateRangeElement["to"];
+
+  /** undefined */
+  placeholder?: XmDateRangeElement["placeholder"];
+
+  /** 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<XmDateRangeElement>;
+
+  /** 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 the selected date range changes. */
+  onXmDateRangeChange?: (event: XmDateRangeElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `from`: undefined
+ * - `to`: undefined
+ * - `placeholder`: undefined
+ * - `open`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `xm-date-range-change`: Fired when the selected date range changes.
+ */
+export const XmDateRange: React.ForwardRefExoticComponent<XmDateRangeProps>;

package/dist/react/XmDateRange.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/date-range/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmDateRange = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    from,
+    to,
+    placeholder,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "xm-date-range-change", props.onXmDateRangeChange);
+
+  return React.createElement(
+    "xm-date-range",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      from: from,
+      to: to,
+      placeholder: placeholder,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      open: open ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmDialog.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { XmDialog as XmDialogElement } from "../lit/components/dialog/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;
+};
+/** `XmDialog` component event */
+export type XmDialogElementEvent<E = Event> = TypedEvent<XmDialogElement, E>;
+
+export type { XmDialogElement };
+
+export interface XmDialogProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  noScrimClose?: boolean;
+
+  /** undefined */
+  static?: boolean;
+
+  /** undefined */
+  label?: XmDialogElement["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<XmDialogElement>;
+
+  /** 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 the element requests to close. */
+  onClose?: (event: XmDialogElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `open`: undefined
+ * - `no-scrim-close`/`noScrimClose`: undefined
+ * - `static`: undefined
+ * - `label`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `close`: Fired when the element requests to close.
+ */
+export const XmDialog: React.ForwardRefExoticComponent<XmDialogProps>;

package/dist/react/XmDialog.js

@@ -0,0 +1,40 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/dialog/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmDialog = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    noScrimClose,
+    label,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "close", props.onClose);
+
+  return React.createElement(
+    "xm-dialog",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      label: label,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      open: open ? true : undefined,
+      "no-scrim-close": noScrimClose ? true : undefined,
+      static: props.static ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmDivider.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { XmDivider as XmDividerElement } from "../lit/components/divider/index.js";
+
+export type { XmDividerElement };
+
+export interface XmDividerProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  orientation?: XmDividerElement["orientation"];
+
+  /** 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<XmDividerElement>;
+
+  /** 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.
+ *
+ * - `orientation`: undefined
+ */
+export const XmDivider: React.ForwardRefExoticComponent<XmDividerProps>;

package/dist/react/XmDivider.js

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

package/dist/react/XmEmptyState.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { XmEmptyState as XmEmptyStateElement } from "../lit/components/empty-state/index.js";
+
+export type { XmEmptyStateElement };
+
+export interface XmEmptyStateProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  heading?: XmEmptyStateElement["heading"];
+
+  /** A primitives icon element name (e.g. "xm-search-icon"). Used only when no
+slot="icon" content is supplied. */
+  icon?: XmEmptyStateElement["icon"];
+
+  /** 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<XmEmptyStateElement>;
+
+  /** 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.
+ *
+ * - `heading`: undefined
+ * - `icon`: A primitives icon element name (e.g. "xm-search-icon"). Used only when no
+ * slot="icon" content is supplied.
+ */
+export const XmEmptyState: React.ForwardRefExoticComponent<XmEmptyStateProps>;

package/dist/react/XmEmptyState.js

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

package/dist/react/XmExpansionPanel.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  XmExpansionPanel as XmExpansionPanelElement,
+  CustomEvent,
+} from "../lit/components/expansion-panel/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;
+};
+/** `XmExpansionPanel` component event */
+export type XmExpansionPanelElementEvent<E = Event> = TypedEvent<
+  XmExpansionPanelElement,
+  E
+>;
+
+export type { XmExpansionPanelElement, CustomEvent };
+
+export interface XmExpansionPanelProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  heading?: XmExpansionPanelElement["heading"];
+
+  /** undefined */
+  value?: XmExpansionPanelElement["value"];
+
+  /** undefined */
+  name?: XmExpansionPanelElement["name"];
+
+  /** 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<XmExpansionPanelElement>;
+
+  /** 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 on commit with the new value in `detail`. */
+  onChange?: (event: XmExpansionPanelElementEvent) => void;
+
+  /** Coordination event (on document) so sibling panels close in single-open mode. */
+  onXmExpansionPanelOpen?: (event: XmExpansionPanelElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `open`: undefined
+ * - `heading`: undefined
+ * - `disabled`: undefined
+ * - `value`: undefined
+ * - `name`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `change`: Fired on commit with the new value in `detail`.
+ * - `xm-expansion-panel-open`: Coordination event (on document) so sibling panels close in single-open mode.
+ */
+export const XmExpansionPanel: React.ForwardRefExoticComponent<XmExpansionPanelProps>;

package/dist/react/XmExpansionPanel.js

@@ -0,0 +1,48 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/expansion-panel/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmExpansionPanel = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    disabled,
+    heading,
+    value,
+    name,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "change", props.onChange);
+  useEventListener(
+    ref,
+    "xm-expansion-panel-open",
+    props.onXmExpansionPanelOpen,
+  );
+
+  return React.createElement(
+    "xm-expansion-panel",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      heading: heading,
+      value: value,
+      name: name,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      open: open ? true : undefined,
+      disabled: disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});