@xmesh/system-design 0.0.4 → 0.0.5

package/dist/react/XmTextField.d.ts

@@ -0,0 +1,147 @@
+import React from "react";
+import {
+  XmTextField as XmTextFieldElement,
+  CustomEvent,
+} from "../lit/components/text-field/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;
+};
+/** `XmTextField` component event */
+export type XmTextFieldElementEvent<E = Event> = TypedEvent<
+  XmTextFieldElement,
+  E
+>;
+
+export type { XmTextFieldElement, CustomEvent };
+
+export interface XmTextFieldProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  required?: boolean;
+
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  readOnly?: boolean;
+
+  /** undefined */
+  loading?: boolean;
+
+  /** INITIAL checked for toggle subclasses; mapped from attribute `checked`. */
+  initialChecked?: boolean;
+
+  /** Native input type — single-line text variants only. */
+  type?: XmTextFieldElement["type"];
+
+  /** Native placeholder — shown when the live value is empty. */
+  placeholder?: XmTextFieldElement["placeholder"];
+
+  /** undefined */
+  label?: XmTextFieldElement["label"];
+
+  /** undefined */
+  helper?: XmTextFieldElement["helper"];
+
+  /** Severity copy. Non-empty ⇒ the field is in error (icon + copy, never color). */
+  error?: XmTextFieldElement["error"];
+
+  /** undefined */
+  size?: XmTextFieldElement["size"];
+
+  /** Form-control name — mirrors native <input name>. */
+  name?: XmTextFieldElement["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?: XmTextFieldElement["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<XmTextFieldElement>;
+
+  /** 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 each edit with the current value in `detail` (inherited by every field). */
+  onInput?: (event: XmTextFieldElementEvent) => void;
+
+  /** Fired on commit with the new value in `detail` (inherited by every field). */
+  onChange?: (event: XmTextFieldElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `type`: Native input type — single-line text variants only.
+ * - `placeholder`: Native placeholder — shown when the live value is empty.
+ * - `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`.
+ * - `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` (inherited by every field).
+ * - `change`: Fired on commit with the new value in `detail` (inherited by every field).
+ *
+ * ## 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 XmTextField: React.ForwardRefExoticComponent<XmTextFieldProps>;

package/dist/react/XmTextField.js

@@ -0,0 +1,60 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/text-field/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmTextField = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    required,
+    disabled,
+    readOnly,
+    loading,
+    initialChecked,
+    type,
+    placeholder,
+    label,
+    helper,
+    error,
+    size,
+    name,
+    initialValue,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "input", props.onInput);
+  useEventListener(ref, "change", props.onChange);
+
+  return React.createElement(
+    "xm-text-field",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      type: type,
+      placeholder: placeholder,
+      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"],
+      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/XmTextarea.d.ts

@@ -0,0 +1,155 @@
+import React from "react";
+import {
+  XmTextarea as XmTextareaElement,
+  CustomEvent,
+} from "../lit/components/textarea/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;
+};
+/** `XmTextarea` component event */
+export type XmTextareaElementEvent<E = Event> = TypedEvent<
+  XmTextareaElement,
+  E
+>;
+
+export type { XmTextareaElement, CustomEvent };
+
+export interface XmTextareaProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Grow the textarea height with content up to `maxRows` (no scroll jitter). */
+  autoGrow?: boolean;
+
+  /** undefined */
+  required?: boolean;
+
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  readOnly?: boolean;
+
+  /** undefined */
+  loading?: boolean;
+
+  /** INITIAL checked for toggle subclasses; mapped from attribute `checked`. */
+  initialChecked?: boolean;
+
+  /** Initial visible height in text rows. */
+  rows?: XmTextareaElement["rows"];
+
+  /** Native placeholder — shown when the live value is empty. */
+  placeholder?: XmTextareaElement["placeholder"];
+
+  /** Cap for auto-grow, in rows. Beyond it the textarea scrolls. */
+  maxRows?: XmTextareaElement["maxRows"];
+
+  /** undefined */
+  label?: XmTextareaElement["label"];
+
+  /** undefined */
+  helper?: XmTextareaElement["helper"];
+
+  /** Severity copy. Non-empty ⇒ the field is in error (icon + copy, never color). */
+  error?: XmTextareaElement["error"];
+
+  /** undefined */
+  size?: XmTextareaElement["size"];
+
+  /** Form-control name — mirrors native <input name>. */
+  name?: XmTextareaElement["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?: XmTextareaElement["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<XmTextareaElement>;
+
+  /** 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 each edit with the current value in `detail` (inherited by every field). */
+  onInput?: (event: XmTextareaElementEvent) => void;
+
+  /** Fired on commit with the new value in `detail` (inherited by every field). */
+  onChange?: (event: XmTextareaElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `rows`: Initial visible height in text rows.
+ * - `placeholder`: Native placeholder — shown when the live value is empty.
+ * - `auto-grow`/`autoGrow`: Grow the textarea height with content up to `maxRows` (no scroll jitter).
+ * - `max-rows`/`maxRows`: Cap for auto-grow, in rows. Beyond it the textarea scrolls.
+ * - `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`.
+ * - `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` (inherited by every field).
+ * - `change`: Fired on commit with the new value in `detail` (inherited by every field).
+ *
+ * ## 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 XmTextarea: React.ForwardRefExoticComponent<XmTextareaProps>;

package/dist/react/XmTextarea.js

@@ -0,0 +1,64 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/textarea/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmTextarea = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    autoGrow,
+    required,
+    disabled,
+    readOnly,
+    loading,
+    initialChecked,
+    rows,
+    placeholder,
+    maxRows,
+    label,
+    helper,
+    error,
+    size,
+    name,
+    initialValue,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "input", props.onInput);
+  useEventListener(ref, "change", props.onChange);
+
+  return React.createElement(
+    "xm-textarea",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      rows: rows,
+      placeholder: placeholder,
+      "max-rows": maxRows ?? props["max-rows"],
+      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"],
+      "auto-grow": autoGrow ? 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/XmTooltip.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import { XmTooltip as XmTooltipElement } from "../lit/components/tooltip/index.js";
+
+export type { XmTooltipElement };
+
+export interface XmTooltipProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  text?: XmTooltipElement["text"];
+
+  /** undefined */
+  placement?: XmTooltipElement["placement"];
+
+  /** undefined */
+  openDelay?: XmTooltipElement["openDelay"];
+
+  /** 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<XmTooltipElement>;
+
+  /** 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.
+ *
+ * - `text`: undefined
+ * - `placement`: undefined
+ * - `open-delay`/`openDelay`: undefined
+ * - `open`: undefined
+ */
+export const XmTooltip: React.ForwardRefExoticComponent<XmTooltipProps>;

package/dist/react/XmTooltip.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/tooltip/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmTooltip = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    open,
+    text,
+    placement,
+    openDelay,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-tooltip",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      text: text,
+      placement: placement,
+      "open-delay": openDelay ?? props["open-delay"],
+      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/index.d.ts

@@ -0,0 +1,59 @@
+export * from "./XmAlert.js";
+export * from "./XmAppBar.js";
+export * from "./XmArtifact.js";
+export * from "./XmAutocomplete.js";
+export * from "./XmAvatar.js";
+export * from "./XmAvatarGroup.js";
+export * from "./XmBadge.js";
+export * from "./XmBrandGlyph.js";
+export * from "./XmBrandMark.js";
+export * from "./XmBreadcrumbs.js";
+export * from "./XmBubbleGroup.js";
+export * from "./XmBubble.js";
+export * from "./XmBubbleActions.js";
+export * from "./XmArtifactChip.js";
+export * from "./XmButton.js";
+export * from "./XmCard.js";
+export * from "./XmChatShell.js";
+export * from "./XmCheckbox.js";
+export * from "./XmChip.js";
+export * from "./XmChipGroup.js";
+export * from "./XmCode.js";
+export * from "./XmComposer.js";
+export * from "./XmDataTable.js";
+export * from "./XmDateRange.js";
+export * from "./XmDialog.js";
+export * from "./XmDivider.js";
+export * from "./XmEmptyState.js";
+export * from "./XmExpansionPanel.js";
+export * from "./XmFileInput.js";
+export * from "./XmForm.js";
+export * from "./XmGrid.js";
+export * from "./XmKbd.js";
+export * from "./XmList.js";
+export * from "./XmListItem.js";
+export * from "./XmMenu.js";
+export * from "./XmMenuItem.js";
+export * from "./XmMultiSelect.js";
+export * from "./XmNavigationDrawer.js";
+export * from "./XmOverlay.js";
+export * from "./XmPagination.js";
+export * from "./XmPopover.js";
+export * from "./XmProgress.js";
+export * from "./XmRadio.js";
+export * from "./XmRadioGroup.js";
+export * from "./XmSelect.js";
+export * from "./XmSidebarItem.js";
+export * from "./XmSkeleton.js";
+export * from "./XmSlider.js";
+export * from "./XmSnackbar.js";
+export * from "./XmStack.js";
+export * from "./XmSwitch.js";
+export * from "./XmTable.js";
+export * from "./XmTab.js";
+export * from "./XmTabPanel.js";
+export * from "./XmTabs.js";
+export * from "./XmTextField.js";
+export * from "./XmTextarea.js";
+export * from "./XmTooltip.js";
+export * from "./XmFileValidationBlock.js";

package/dist/react/index.js

@@ -0,0 +1,59 @@
+export * from "./XmAlert.js";
+export * from "./XmAppBar.js";
+export * from "./XmArtifact.js";
+export * from "./XmAutocomplete.js";
+export * from "./XmAvatar.js";
+export * from "./XmAvatarGroup.js";
+export * from "./XmBadge.js";
+export * from "./XmBrandGlyph.js";
+export * from "./XmBrandMark.js";
+export * from "./XmBreadcrumbs.js";
+export * from "./XmBubbleGroup.js";
+export * from "./XmBubble.js";
+export * from "./XmBubbleActions.js";
+export * from "./XmArtifactChip.js";
+export * from "./XmButton.js";
+export * from "./XmCard.js";
+export * from "./XmChatShell.js";
+export * from "./XmCheckbox.js";
+export * from "./XmChip.js";
+export * from "./XmChipGroup.js";
+export * from "./XmCode.js";
+export * from "./XmComposer.js";
+export * from "./XmDataTable.js";
+export * from "./XmDateRange.js";
+export * from "./XmDialog.js";
+export * from "./XmDivider.js";
+export * from "./XmEmptyState.js";
+export * from "./XmExpansionPanel.js";
+export * from "./XmFileInput.js";
+export * from "./XmForm.js";
+export * from "./XmGrid.js";
+export * from "./XmKbd.js";
+export * from "./XmList.js";
+export * from "./XmListItem.js";
+export * from "./XmMenu.js";
+export * from "./XmMenuItem.js";
+export * from "./XmMultiSelect.js";
+export * from "./XmNavigationDrawer.js";
+export * from "./XmOverlay.js";
+export * from "./XmPagination.js";
+export * from "./XmPopover.js";
+export * from "./XmProgress.js";
+export * from "./XmRadio.js";
+export * from "./XmRadioGroup.js";
+export * from "./XmSelect.js";
+export * from "./XmSidebarItem.js";
+export * from "./XmSkeleton.js";
+export * from "./XmSlider.js";
+export * from "./XmSnackbar.js";
+export * from "./XmStack.js";
+export * from "./XmSwitch.js";
+export * from "./XmTable.js";
+export * from "./XmTab.js";
+export * from "./XmTabPanel.js";
+export * from "./XmTabs.js";
+export * from "./XmTextField.js";
+export * from "./XmTextarea.js";
+export * from "./XmTooltip.js";
+export * from "./XmFileValidationBlock.js";