@xmesh/system-design 0.0.4 → 0.0.6

package/dist/react/XmSidebarItem.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { XmSidebarItem as XmSidebarItemElement } from "../lit/components/sidebar-item/index.js";
+
+export type { XmSidebarItemElement };
+
+export interface XmSidebarItemProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  active?: boolean;
+
+  /** undefined */
+  hover?: boolean;
+
+  /** undefined */
+  showDot?: boolean;
+
+  /** undefined */
+  collapsed?: boolean;
+
+  /** undefined */
+  title?: XmSidebarItemElement["title"];
+
+  /** undefined */
+  layout?: XmSidebarItemElement["layout"];
+
+  /** 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<XmSidebarItemElement>;
+
+  /** 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.
+ *
+ * - `title`: undefined
+ * - `layout`: undefined
+ * - `active`: undefined
+ * - `hover`: undefined
+ * - `show-dot`/`showDot`: undefined
+ * - `collapsed`: undefined
+ */
+export const XmSidebarItem: React.ForwardRefExoticComponent<XmSidebarItemProps>;

package/dist/react/XmSidebarItem.js

@@ -0,0 +1,42 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/sidebar-item/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmSidebarItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    active,
+    hover,
+    showDot,
+    collapsed,
+    title,
+    layout,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-sidebar-item",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      title: title,
+      layout: layout,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      active: active ? true : undefined,
+      hover: hover ? true : undefined,
+      "show-dot": showDot ? true : undefined,
+      collapsed: collapsed ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmSkeleton.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { XmSkeleton as XmSkeletonElement } from "../lit/components/skeleton/index.js";
+
+export type { XmSkeletonElement };
+
+export interface XmSkeletonProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  variant?: XmSkeletonElement["variant"];
+
+  /** undefined */
+  width?: XmSkeletonElement["width"];
+
+  /** undefined */
+  height?: XmSkeletonElement["height"];
+
+  /** undefined */
+  lines?: XmSkeletonElement["lines"];
+
+  /** undefined */
+  radius?: XmSkeletonElement["radius"];
+
+  /** 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<XmSkeletonElement>;
+
+  /** 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
+ * - `width`: undefined
+ * - `height`: undefined
+ * - `lines`: undefined
+ * - `radius`: undefined
+ */
+export const XmSkeleton: React.ForwardRefExoticComponent<XmSkeletonProps>;

package/dist/react/XmSkeleton.js

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

package/dist/react/XmSlider.d.ts

@@ -0,0 +1,160 @@
+import React from "react";
+import {
+  XmSlider as XmSliderElement,
+  CustomEvent,
+} from "../lit/components/slider/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;
+};
+/** `XmSlider` component event */
+export type XmSliderElementEvent<E = Event> = TypedEvent<XmSliderElement, E>;
+
+export type { XmSliderElement, CustomEvent };
+
+export interface XmSliderProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Show the current numeric value as a label beside the track. */
+  showValue?: boolean;
+
+  /** undefined */
+  required?: boolean;
+
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  readOnly?: boolean;
+
+  /** undefined */
+  loading?: boolean;
+
+  /** INITIAL checked for toggle subclasses; mapped from attribute `checked`. */
+  initialChecked?: boolean;
+
+  /** undefined */
+  min?: XmSliderElement["min"];
+
+  /** undefined */
+  max?: XmSliderElement["max"];
+
+  /** undefined */
+  step?: XmSliderElement["step"];
+
+  /** Optional unit appended to the displayed value (e.g. "%", "px"). */
+  unit?: XmSliderElement["unit"];
+
+  /** undefined */
+  label?: XmSliderElement["label"];
+
+  /** undefined */
+  helper?: XmSliderElement["helper"];
+
+  /** Severity copy. Non-empty ⇒ the field is in error (icon + copy, never color). */
+  error?: XmSliderElement["error"];
+
+  /** undefined */
+  size?: XmSliderElement["size"];
+
+  /** Form-control name — mirrors native <input name>. */
+  name?: XmSliderElement["name"];
+
+  /** INITIAL value (uncontrolled-first, AD-6): the `value` attribute seeds the
+live state once, then never overrides user input. Mapped from attribute
+`value` so authors write `<xm-text-field value="…">`. */
+  initialValue?: XmSliderElement["initialValue"];
+
+  /** 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<XmSliderElement>;
+
+  /** 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;
+
+  /** Typed live read; the inherited string `value` stays in sync. */
+  valueAsNumber?: XmSliderElement["valueAsNumber"];
+
+  /** Fired on each edit with the current value in `detail`. */
+  onInput?: (event: XmSliderElementEvent) => void;
+
+  /** Fired on commit with the new value in `detail`. */
+  onChange?: (event: XmSliderElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `min`: undefined
+ * - `max`: undefined
+ * - `step`: undefined
+ * - `show-value`/`showValue`: Show the current numeric value as a label beside the track.
+ * - `unit`: Optional unit appended to the displayed value (e.g. "%", "px").
+ * - `label`: undefined
+ * - `helper`: undefined
+ * - `error`: Severity copy. Non-empty ⇒ the field is in error (icon + copy, never color).
+ * - `size`: undefined
+ * - `required`: undefined
+ * - `disabled`: undefined
+ * - `readonly`/`readOnly`: undefined
+ * - `loading`: undefined
+ * - `name`: Form-control name — mirrors native <input name>.
+ * - `value`/`initialValue`: INITIAL value (uncontrolled-first, AD-6): the `value` attribute seeds the
+ * live state once, then never overrides user input. Mapped from attribute
+ * `value` so authors write `<xm-text-field value="…">`.
+ * - `checked`/`initialChecked`: INITIAL checked for toggle subclasses; mapped from attribute `checked`.
+ * - `valueAsNumber`: Typed live read; the inherited string `value` stays in sync. (property only) (readonly)
+ * - `readonly`: undefined (property only)
+ * - `value`: Programmatic reset support — setting `value` after first paint updates live state. (property only)
+ * - `checked`: Public read contract for toggle subclasses (AD-6a). (property only)
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `input`: Fired on each edit with the current value in `detail`.
+ * - `change`: Fired on commit with the new value in `detail`.
+ *
+ * ## Methods
+ *
+ * Methods that can be called to access component functionality.
+ *
+ * - `setFormDisabled(disabled: boolean) => void`: Down-propagation hook: xm-form (Story 2.10) sets this; it OR's with the
+ * field's own disabled and can never re-enable a self-disabled field.
+ */
+export const XmSlider: React.ForwardRefExoticComponent<XmSliderProps>;

package/dist/react/XmSlider.js

@@ -0,0 +1,76 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/slider/index.js";
+import {
+  useEventListener,
+  useProperties,
+  createForwardedRefHandler,
+} from "./react-utils.js";
+
+export const XmSlider = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    showValue,
+    required,
+    disabled,
+    readOnly,
+    loading,
+    initialChecked,
+    min,
+    max,
+    step,
+    unit,
+    label,
+    helper,
+    error,
+    size,
+    name,
+    initialValue,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    valueAsNumber,
+    onInput,
+    onChange,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "input", props.onInput);
+  useEventListener(ref, "change", props.onChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "valueAsNumber", valueAsNumber);
+
+  return React.createElement(
+    "xm-slider",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      min: min,
+      max: max,
+      step: step,
+      unit: unit,
+      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"],
+      "show-value": showValue ? 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/XmSnackbar.d.ts

@@ -0,0 +1,110 @@
+import React from "react";
+import { XmSnackbar as XmSnackbarElement } from "../lit/components/snackbar/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;
+};
+/** `XmSnackbar` component event */
+export type XmSnackbarElementEvent<E = Event> = TypedEvent<
+  XmSnackbarElement,
+  E
+>;
+
+export type { XmSnackbarElement };
+
+export interface XmSnackbarProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  showDismiss?: boolean;
+
+  /** undefined */
+  static?: boolean;
+
+  /** undefined */
+  kind?: XmSnackbarElement["kind"];
+
+  /** undefined */
+  code?: XmSnackbarElement["code"];
+
+  /** undefined */
+  title?: XmSnackbarElement["title"];
+
+  /** undefined */
+  message?: XmSnackbarElement["message"];
+
+  /** undefined */
+  primaryLabel?: XmSnackbarElement["primaryLabel"];
+
+  /** undefined */
+  secondaryLabel?: XmSnackbarElement["secondaryLabel"];
+
+  /** 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<XmSnackbarElement>;
+
+  /** 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 snackbar is dismissed. */
+  onSnackbarDismiss?: (event: XmSnackbarElementEvent) => void;
+
+  /** Fired when the snackbar's primary action is activated. */
+  onSnackbarPrimary?: (event: XmSnackbarElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `kind`: undefined
+ * - `code`: undefined
+ * - `title`: undefined
+ * - `message`: undefined
+ * - `primary-label`/`primaryLabel`: undefined
+ * - `secondary-label`/`secondaryLabel`: undefined
+ * - `show-dismiss`/`showDismiss`: undefined
+ * - `static`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `snackbar-dismiss`: Fired when the snackbar is dismissed.
+ * - `snackbar-primary`: Fired when the snackbar's primary action is activated.
+ */
+export const XmSnackbar: React.ForwardRefExoticComponent<XmSnackbarProps>;

package/dist/react/XmSnackbar.js

@@ -0,0 +1,51 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/snackbar/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmSnackbar = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    showDismiss,
+    kind,
+    code,
+    title,
+    message,
+    primaryLabel,
+    secondaryLabel,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    onSnackbarDismiss,
+    onSnackbarPrimary,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "snackbar-dismiss", props.onSnackbarDismiss);
+  useEventListener(ref, "snackbar-primary", props.onSnackbarPrimary);
+
+  return React.createElement(
+    "xm-snackbar",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      kind: kind,
+      code: code,
+      title: title,
+      message: message,
+      "primary-label": primaryLabel ?? props["primary-label"],
+      "secondary-label": secondaryLabel ?? props["secondary-label"],
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      "show-dismiss": showDismiss ? true : undefined,
+      static: props.static ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmStack.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { XmStack as XmStackElement } from "../lit/components/stack/index.js";
+
+export type { XmStackElement };
+
+export interface XmStackProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  wrap?: boolean;
+
+  /** undefined */
+  direction?: XmStackElement["direction"];
+
+  /** undefined */
+  gap?: XmStackElement["gap"];
+
+  /** undefined */
+  align?: XmStackElement["align"];
+
+  /** undefined */
+  justify?: XmStackElement["justify"];
+
+  /** 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<XmStackElement>;
+
+  /** 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.
+ *
+ * - `direction`: undefined
+ * - `gap`: undefined
+ * - `align`: undefined
+ * - `justify`: undefined
+ * - `wrap`: undefined
+ */
+export const XmStack: React.ForwardRefExoticComponent<XmStackProps>;