@xmesh/system-design 0.0.4 → 0.0.6

package/dist/react/XmMultiSelect.js

@@ -0,0 +1,74 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/multi-select/index.js";
+import {
+  useEventListener,
+  useProperties,
+  createForwardedRefHandler,
+} from "./react-utils.js";
+
+export const XmMultiSelect = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    searchable,
+    required,
+    disabled,
+    readOnly,
+    loading,
+    initialChecked,
+    placeholder,
+    max,
+    label,
+    helper,
+    error,
+    size,
+    name,
+    initialValue,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    options,
+    selectedValues,
+    onChange,
+    onInput,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "change", props.onChange);
+  useEventListener(ref, "input", props.onInput);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "options", options);
+  useProperties(ref, "selectedValues", selectedValues);
+
+  return React.createElement(
+    "xm-multi-select",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      placeholder: placeholder,
+      max: max,
+      label: label,
+      helper: helper,
+      error: error,
+      size: size,
+      name: name,
+      value: initialValue ?? props["value"],
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      searchable: searchable ? true : undefined,
+      required: required ? true : undefined,
+      disabled: disabled ? true : undefined,
+      readonly: readOnly ? true : undefined,
+      loading: loading ? true : undefined,
+      checked: initialChecked ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmNavigationDrawer.d.ts

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

package/dist/react/XmNavigationDrawer.js

@@ -0,0 +1,42 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/navigation-drawer/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmNavigationDrawer = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    collapsed,
+    modal,
+    label,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    onClose,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "close", props.onClose);
+
+  return React.createElement(
+    "xm-navigation-drawer",
+    {
+      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,
+      collapsed: collapsed ? true : undefined,
+      modal: modal ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmOverlay.d.ts

@@ -0,0 +1,120 @@
+import React from "react";
+import {
+  XmOverlay as XmOverlayElement,
+  CustomEvent,
+} from "../lit/components/overlay/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;
+};
+/** `XmOverlay` component event */
+export type XmOverlayElementEvent<E = Event> = TypedEvent<XmOverlayElement, E>;
+
+export type { XmOverlayElement, CustomEvent };
+
+export interface XmOverlayProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  mode?: XmOverlayElement["mode"];
+
+  /** undefined */
+  tier?: XmOverlayElement["tier"];
+
+  /** undefined */
+  placement?: XmOverlayElement["placement"];
+
+  /** undefined */
+  label?: XmOverlayElement["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<XmOverlayElement>;
+
+  /** 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;
+
+  /** Trigger element to anchor a non-modal overlay against (CSS anchor()).
+A property, not an attribute — it is an element reference, possibly from
+another shadow root. */
+  anchor?: XmOverlayElement["anchor"];
+
+  /** Element focus is restored to on close. Defaults to `anchor`, else the
+document's deepest activeElement at open time. */
+  opener?: XmOverlayElement["opener"];
+
+  /** Fired when the overlay opens. */
+  onXmOverlayOpen?: (event: XmOverlayElementEvent) => void;
+
+  /** Fired when the overlay closes. */
+  onXmOverlayClose?: (event: XmOverlayElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `open`: undefined
+ * - `mode`: undefined
+ * - `tier`: undefined
+ * - `placement`: undefined
+ * - `label`: undefined
+ * - `anchor`: Trigger element to anchor a non-modal overlay against (CSS anchor()).
+ * A property, not an attribute — it is an element reference, possibly from
+ * another shadow root. (property only)
+ * - `opener`: Element focus is restored to on close. Defaults to `anchor`, else the
+ * document's deepest activeElement at open time. (property only)
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `xm-overlay-open`: Fired when the overlay opens.
+ * - `xm-overlay-close`: Fired when the overlay closes.
+ *
+ * ## Methods
+ *
+ * Methods that can be called to access component functionality.
+ *
+ * - `show() => void`: undefined
+ * - `hide(reason: OverlayCloseReason = "api") => void`: undefined
+ * - `toggle() => void`: undefined
+ */
+export const XmOverlay: React.ForwardRefExoticComponent<XmOverlayProps>;

package/dist/react/XmOverlay.js

@@ -0,0 +1,56 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/overlay/index.js";
+import {
+  useEventListener,
+  useProperties,
+  createForwardedRefHandler,
+} from "./react-utils.js";
+
+export const XmOverlay = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    mode,
+    tier,
+    placement,
+    label,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    anchor,
+    opener,
+    onXmOverlayOpen,
+    onXmOverlayClose,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "xm-overlay-open", props.onXmOverlayOpen);
+  useEventListener(ref, "xm-overlay-close", props.onXmOverlayClose);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "anchor", anchor);
+  useProperties(ref, "opener", opener);
+
+  return React.createElement(
+    "xm-overlay",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      mode: mode,
+      tier: tier,
+      placement: placement,
+      label: label,
+      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/XmPagination.d.ts

@@ -0,0 +1,117 @@
+import React from "react";
+import {
+  XmPagination as XmPaginationElement,
+  CustomEvent,
+} from "../lit/components/pagination/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;
+};
+/** `XmPagination` component event */
+export type XmPaginationElementEvent<E = Event> = TypedEvent<
+  XmPaginationElement,
+  E
+>;
+
+export type { XmPaginationElement, CustomEvent };
+
+export interface XmPaginationProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  page?: XmPaginationElement["page"];
+
+  /** undefined */
+  total?: XmPaginationElement["total"];
+
+  /** undefined */
+  siblings?: XmPaginationElement["siblings"];
+
+  /** undefined */
+  size?: XmPaginationElement["size"];
+
+  /** Offset/limit mode (AD-18): set `limit` + `total-items` (+ `offset`) instead
+of `page` + `total`. The page-based API stays available and unchanged; in
+this mode the control ALSO emits xm-pagination-offset-change. */
+  offset?: XmPaginationElement["offset"];
+
+  /** undefined */
+  limit?: XmPaginationElement["limit"];
+
+  /** undefined */
+  totalItems?: XmPaginationElement["totalItems"];
+
+  /** 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<XmPaginationElement>;
+
+  /** 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 page changes (`detail.page`). */
+  onXmPaginationPageChange?: (event: XmPaginationElementEvent) => void;
+
+  /** Fired on commit with the new value in `detail`. */
+  onChange?: (event: XmPaginationElementEvent) => void;
+
+  /** Fired in offset/limit mode (`detail.offset`, `detail.limit`). */
+  onXmPaginationOffsetChange?: (event: XmPaginationElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `page`: undefined
+ * - `total`: undefined
+ * - `siblings`: undefined
+ * - `size`: undefined
+ * - `offset`: Offset/limit mode (AD-18): set `limit` + `total-items` (+ `offset`) instead
+ * of `page` + `total`. The page-based API stays available and unchanged; in
+ * this mode the control ALSO emits xm-pagination-offset-change.
+ * - `limit`: undefined
+ * - `total-items`/`totalItems`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `xm-pagination-page-change`: Fired when the page changes (`detail.page`).
+ * - `change`: Fired on commit with the new value in `detail`.
+ * - `xm-pagination-offset-change`: Fired in offset/limit mode (`detail.offset`, `detail.limit`).
+ */
+export const XmPagination: React.ForwardRefExoticComponent<XmPaginationProps>;

package/dist/react/XmPagination.js

@@ -0,0 +1,58 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/pagination/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmPagination = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    page,
+    total,
+    siblings,
+    size,
+    offset,
+    limit,
+    totalItems,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    onChange,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "xm-pagination-page-change",
+    props.onXmPaginationPageChange,
+  );
+  useEventListener(ref, "change", props.onChange);
+  useEventListener(
+    ref,
+    "xm-pagination-offset-change",
+    props.onXmPaginationOffsetChange,
+  );
+
+  return React.createElement(
+    "xm-pagination",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      page: page,
+      total: total,
+      siblings: siblings,
+      size: size,
+      offset: offset,
+      limit: limit,
+      "total-items": totalItems ?? props["total-items"],
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmPopover.d.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  XmPopover as XmPopoverElement,
+  CustomEvent,
+} from "../lit/components/popover/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;
+};
+/** `XmPopover` component event */
+export type XmPopoverElementEvent<E = Event> = TypedEvent<XmPopoverElement, E>;
+
+export type { XmPopoverElement, CustomEvent };
+
+export interface XmPopoverProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  placement?: XmPopoverElement["placement"];
+
+  /** undefined */
+  label?: XmPopoverElement["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<XmPopoverElement>;
+
+  /** 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 popover opens. */
+  onXmPopoverOpen?: (event: XmPopoverElementEvent) => void;
+
+  /** Fired when the popover closes. */
+  onXmPopoverClose?: (event: XmPopoverElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `open`: undefined
+ * - `placement`: undefined
+ * - `label`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `xm-popover-open`: Fired when the popover opens.
+ * - `xm-popover-close`: Fired when the popover closes.
+ */
+export const XmPopover: React.ForwardRefExoticComponent<XmPopoverProps>;

package/dist/react/XmPopover.js

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