@nysds/components 1.15.0 → 1.15.1

package/packages/react/NysIcon.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { NysIcon as NysIconElement } from "../../dist/nysds.es.js";
+
+export type { NysIconElement };
+
+export interface NysIconProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Icon name from Material Symbols library. Required. */
+  name?: NysIconElement["name"];
+
+  /** Accessible label. When set, removes `aria-hidden` and adds `aria-label` to the SVG. */
+  ariaLabel?: NysIconElement["ariaLabel"];
+
+  /** Rotation in degrees. Applied via CSS `rotate`. */
+  rotate?: NysIconElement["rotate"];
+
+  /** Flip direction: `horizontal`, `vertical`, or empty for none. */
+  flip?: NysIconElement["flip"];
+
+  /** Icon color. Accepts any CSS color value. Defaults to `currentcolor`. */
+  color?: NysIconElement["color"];
+
+  /** Icon size. Semantic sizes: `xs`-`5xl`. Pixel sizes: `12`-`50`. */
+  size?: NysIconElement["size"];
+
+  /** 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?: any;
+
+  /** 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;
+}
+
+/**
+ * SVG icon from Material Symbols library with size, rotation, and color options.
+ * ---
+ *
+ */
+export const NysIcon: React.ForwardRefExoticComponent<NysIconProps>;

package/packages/react/NysIcon.js

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysIcon = forwardRef((props, forwardedRef) => {
+  const { name, ariaLabel, rotate, flip, color, size, ...filteredProps } =
+    props;
+
+  return React.createElement(
+    "nys-icon",
+    {
+      ...filteredProps,
+      name: props.name,
+      ariaLabel: props.ariaLabel,
+      rotate: props.rotate,
+      flip: props.flip,
+      color: props.color,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysLabel.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { NysLabel as NysLabelElement } from "../../dist/nysds.es.js";
+
+export type { NysLabelElement };
+
+export interface NysLabelProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Adjusts colors for dark backgrounds. */
+  inverted?: boolean;
+
+  /** ID of the form element this label is associated with. */
+  for?: NysLabelElement["for"];
+
+  /** Label text displayed above the form field. */
+  label?: NysLabelElement["label"];
+
+  /** Helper text displayed below the label. */
+  description?: NysLabelElement["description"];
+
+  /** Flag type: `required` shows asterisk, `optional` shows "(Optional)". */
+  flag?: NysLabelElement["flag"];
+
+  /** Tooltip text shown on hover/focus of info icon next to label. */
+  tooltip?: NysLabelElement["tooltip"];
+
+  /** 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 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?: any;
+
+  /** 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;
+}
+
+/**
+ * Internal label component for form fields with flag and tooltip support.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - **description** - Custom HTML description content below the label.
+ */
+export const NysLabel: React.ForwardRefExoticComponent<NysLabelProps>;

package/packages/react/NysLabel.js

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysLabel = forwardRef((props, forwardedRef) => {
+  const { inverted, label, description, flag, tooltip, ...filteredProps } =
+    props;
+
+  return React.createElement(
+    "nys-label",
+    {
+      ...filteredProps,
+      for: props.for,
+      label: props.label,
+      description: props.description,
+      flag: props.flag,
+      tooltip: props.tooltip,
+      class: props.className,
+      exportparts: props.exportparts,
+      part: props.part,
+      tabindex: props.tabIndex,
+      inverted: props.inverted ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysModal.d.ts

@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  NysModal as NysModalElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysModalElement, CustomEvent };
+
+export interface NysModalProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Controls modal visibility. Set to `true` to show. */
+  open?: boolean;
+
+  /** Prevents dismissal via close button or Escape key. User must take an action. */
+  mandatory?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysModalElement["id"];
+
+  /** Modal heading text. Required for accessibility. */
+  heading?: NysModalElement["heading"];
+
+  /** Secondary heading below the main heading. */
+  subheading?: NysModalElement["subheading"];
+
+  /** Modal width: `sm` (400px), `md` (600px), or `lg` (800px). */
+  width?: NysModalElement["width"];
+
+  /** 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?: any;
+
+  /** 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 modal opens. Detail: `{id}`. */
+  onNysOpen?: (event: CustomEvent) => void;
+
+  /** Fired when modal closes. Detail: `{id}`. */
+  onNysClose?: (event: CustomEvent) => void;
+}
+
+/**
+ * Accessible modal dialog with focus trap, keyboard support, and action slots.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-open** - Fired when modal opens. Detail: `{id}`.
+ * - **nys-close** - Fired when modal closes. Detail: `{id}`.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for body content.
+ * - **actions** - Action buttons displayed in footer. Buttons auto-resize on mobile.
+ */
+export const NysModal: React.ForwardRefExoticComponent<NysModalProps>;

package/packages/react/NysModal.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysModal = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, mandatory, id, heading, subheading, width, ...filteredProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-open", props.onNysOpen);
+  useEventListener(ref, "nys-close", props.onNysClose);
+
+  return React.createElement(
+    "nys-modal",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      heading: props.heading,
+      subheading: props.subheading,
+      width: props.width,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      open: props.open ? true : undefined,
+      mandatory: props.mandatory ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysOption.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { NysOption as NysOptionElement } from "../../dist/nysds.es.js";
+
+export type { NysOptionElement };
+
+export interface NysOptionProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Prevents selection of this option. */
+  disabled?: boolean;
+
+  /** Pre-selects this option. */
+  selected?: boolean;
+
+  /** Hides the option from the dropdown list. */
+  hidden?: boolean;
+
+  /** Value submitted when this option is selected. */
+  value?: NysOptionElement["value"];
+
+  /** Display text for the option. Auto-populated from slot content if not set. */
+  label?: NysOptionElement["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?: any;
+
+  /** 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;
+}
+
+/**
+ * Option item for nys-select dropdown.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Option label text. Auto-populates the `label` prop if provided.
+ */
+export const NysOption: React.ForwardRefExoticComponent<NysOptionProps>;

package/packages/react/NysOption.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysOption = forwardRef((props, forwardedRef) => {
+  const { disabled, selected, hidden, value, label, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-option",
+    {
+      ...filteredProps,
+      value: props.value,
+      label: props.label,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? true : undefined,
+      selected: props.selected ? true : undefined,
+      hidden: props.hidden ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysPagination.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  NysPagination as NysPaginationElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysPaginationElement, CustomEvent };
+
+export interface NysPaginationProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Internal state for layout adjustments near the end. */
+  _twoBeforeLast?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysPaginationElement["id"];
+
+  /** Name attribute for form association. */
+  name?: NysPaginationElement["name"];
+
+  /** Currently active page (1-indexed). Clamped to valid range. */
+  currentPage?: NysPaginationElement["currentPage"];
+
+  /** Total number of pages. Must be at least 1. */
+  totalPages?: NysPaginationElement["totalPages"];
+
+  /** 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?: any;
+
+  /** 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 page changes. Detail: `{page}`. */
+  onNysChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Page navigation with numbered links, prev/next buttons, and responsive layout.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-change** - Fired when page changes. Detail: `{page}`.
+ */
+export const NysPagination: React.ForwardRefExoticComponent<NysPaginationProps>;

package/packages/react/NysPagination.js

@@ -0,0 +1,45 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysPagination = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    _twoBeforeLast,
+    id,
+    name,
+    currentPage,
+    totalPages,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-change", props.onNysChange);
+
+  return React.createElement(
+    "nys-pagination",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      name: props.name,
+      currentPage: props.currentPage,
+      totalPages: props.totalPages,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      _twoBeforeLast: props._twoBeforeLast ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysRadiobutton.d.ts

@@ -0,0 +1,127 @@
+import React from "react";
+import {
+  NysRadiobutton as NysRadiobuttonElement,
+  CustomEvent,
+  Event,
+} from "../../dist/nysds.es.js";
+
+export type { NysRadiobuttonElement, CustomEvent, Event };
+
+export interface NysRadiobuttonProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether this radio is selected. Only one per group can be checked. */
+  checked?: boolean;
+
+  /** Prevents interaction. */
+  disabled?: boolean;
+
+  /** Marks group as required. Set on radiogroup, not individual radios. */
+  required?: boolean;
+
+  /** Adjusts colors for dark backgrounds. */
+  inverted?: boolean;
+
+  /** Renders as tile with larger clickable area. */
+  tile?: boolean;
+
+  /** undefined */
+  other?: boolean;
+
+  /** undefined */
+  showOtherError?: boolean;
+
+  /** Visible label text. Required for accessibility. */
+  label?: NysRadiobuttonElement["label"];
+
+  /** Helper text below label. Use slot for custom HTML. */
+  description?: NysRadiobuttonElement["description"];
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysRadiobuttonElement["id"];
+
+  /** Group name. Radios with same name are mutually exclusive. */
+  name?: NysRadiobuttonElement["name"];
+
+  /** Value submitted when this radio is selected. */
+  value?: NysRadiobuttonElement["value"];
+
+  /** Form `id` to associate with. */
+  form?: NysRadiobuttonElement["form"];
+
+  /** Radio size: `sm` (24px) or `md` (32px, default). */
+  size?: NysRadiobuttonElement["size"];
+
+  /** 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?: any;
+
+  /** 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;
+
+  /** undefined */
+  onNysErrorClear?: (event: CustomEvent) => void;
+
+  /** Fired when selection changes. Detail: `{id, checked, name, value}`. */
+  onNysChange?: (event: CustomEvent) => void;
+
+  /** Fired when "other" text input value changes. Detail: `{id, name, value}`. */
+  onNysOtherInput?: (event: CustomEvent) => void;
+
+  /** Fired when radio gains focus. */
+  onNysFocus?: (event: CustomEvent) => void;
+
+  /** Fired when radio loses focus. */
+  onNysBlur?: (event: CustomEvent) => void;
+
+  /** undefined */
+  onNysError?: (event: CustomEvent) => void;
+}
+
+/**
+ * Radio button for single selection from mutually exclusive options.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-error-clear**
+ * - **nys-change** - Fired when selection changes. Detail: `{id, checked, name, value}`.
+ * - **nys-other-input** - Fired when "other" text input value changes. Detail: `{id, name, value}`.
+ * - **nys-focus** - Fired when radio gains focus.
+ * - **nys-blur** - Fired when radio loses focus.
+ * - **nys-error**
+ *
+ * ### **Methods:**
+ *  - **getInputElement(): _Promise<HTMLInputElement | null>_** - Functions
+ * --------------------------------------------------------------------------
+ *
+ * ### **Slots:**
+ *  - **description** - Custom HTML description content.
+ */
+export const NysRadiobutton: React.ForwardRefExoticComponent<NysRadiobuttonProps>;