@nysds/components 1.14.0 → 1.15.1

package/packages/react/NysErrorMessage.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { NysErrorMessage as NysErrorMessageElement } from "../../dist/nysds.es.js";
+
+export type { NysErrorMessageElement };
+
+export interface NysErrorMessageProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether to display the error message. */
+  showError?: boolean;
+
+  /** Shows a divider line above the error message. */
+  showDivider?: boolean;
+
+  /** Error text to display. Falls back to native validation message if available. */
+  errorMessage?: NysErrorMessageElement["errorMessage"];
+
+  /** 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;
+}
+
+/**
+ * Internal error message display with icon and ARIA alert support.
+ * ---
+ *
+ */
+export const NysErrorMessage: React.ForwardRefExoticComponent<NysErrorMessageProps>;

package/packages/react/NysErrorMessage.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysErrorMessage = forwardRef((props, forwardedRef) => {
+  const { showError, showDivider, errorMessage, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-errormessage",
+    {
+      ...filteredProps,
+      errorMessage: props.errorMessage,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      showError: props.showError ? true : undefined,
+      showDivider: props.showDivider ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysFileItem.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+  NysFileItem as NysFileItemElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysFileItemElement, CustomEvent };
+
+export interface NysFileItemProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Name of the file being displayed. */
+  filename?: NysFileItemElement["filename"];
+
+  /** Upload status: `pending` (queued), `processing` (uploading), `done` (complete), `error` (failed). */
+  status?: NysFileItemElement["status"];
+
+  /** Upload progress percentage (0-100). Only shown when status is `processing`. */
+  progress?: NysFileItemElement["progress"];
+
+  /** Error message displayed when status is `error`. */
+  errorMessage?: NysFileItemElement["errorMessage"];
+
+  /** 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 remove button is clicked. Detail: `{filename}`. */
+  onNysFileRemove?: (event: CustomEvent) => void;
+}
+
+/**
+ * Internal file item display with status, progress bar, and remove action.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-fileRemove** - Fired when remove button is clicked. Detail: `{filename}`.
+ */
+export const NysFileItem: React.ForwardRefExoticComponent<NysFileItemProps>;

package/packages/react/NysFileItem.js

@@ -0,0 +1,37 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysFileItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { filename, status, progress, errorMessage, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-fileRemove", props.onNysFileRemove);
+
+  return React.createElement(
+    "nys-fileitem",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      filename: props.filename,
+      status: props.status,
+      progress: props.progress,
+      errorMessage: props.errorMessage,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysFileinput.d.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import {
+  NysFileinput as NysFileinputElement,
+  CustomEvent,
+} from "../../dist/nysds.es.js";
+
+export type { NysFileinputElement, CustomEvent };
+
+export interface NysFileinputProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Allows selecting multiple files. */
+  multiple?: boolean;
+
+  /** Prevents interaction. */
+  disabled?: boolean;
+
+  /** Requires at least one file to be uploaded. */
+  required?: boolean;
+
+  /** Shows "Optional" flag. */
+  optional?: boolean;
+
+  /** Shows error message when true. */
+  showError?: boolean;
+
+  /** Enables drag-and-drop zone UI. */
+  dropzone?: boolean;
+
+  /** Adjusts colors for dark backgrounds. */
+  inverted?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysFileinputElement["id"];
+
+  /** Name for form submission. */
+  name?: NysFileinputElement["name"];
+
+  /** Visible label text. */
+  label?: NysFileinputElement["label"];
+
+  /** Helper text below label. Use slot for custom HTML. */
+  description?: NysFileinputElement["description"];
+
+  /** Form `id` to associate with. */
+  form?: NysFileinputElement["form"];
+
+  /** Tooltip text shown on hover/focus of info icon. */
+  tooltip?: NysFileinputElement["tooltip"];
+
+  /** Accepted file types. Use MIME types (`image/*`) or extensions (`.pdf`). Validated via magic bytes. */
+  accept?: NysFileinputElement["accept"];
+
+  /** Error message text. Shown only when `showError` is true. */
+  errorMessage?: NysFileinputElement["errorMessage"];
+
+  /** Component width: `lg` (384px) or `full` (100%, default). */
+  width?: NysFileinputElement["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 files are added or removed. Detail: `{id, files}`. */
+  onNysChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * File input with drag-and-drop, validation, and progress tracking.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-change** - Fired when files are added or removed. Detail: `{id, files}`.
+ *
+ * ### **Slots:**
+ *  - **description** - Custom HTML description content.
+ */
+export const NysFileinput: React.ForwardRefExoticComponent<NysFileinputProps>;

package/packages/react/NysFileinput.js

@@ -0,0 +1,67 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysFileinput = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    multiple,
+    disabled,
+    required,
+    optional,
+    showError,
+    dropzone,
+    inverted,
+    id,
+    name,
+    label,
+    description,
+    form,
+    tooltip,
+    accept,
+    errorMessage,
+    width,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-change", props.onNysChange);
+
+  return React.createElement(
+    "nys-fileinput",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      name: props.name,
+      label: props.label,
+      description: props.description,
+      form: props.form,
+      tooltip: props.tooltip,
+      accept: props.accept,
+      errorMessage: props.errorMessage,
+      width: props.width,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      multiple: props.multiple ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      required: props.required ? true : undefined,
+      optional: props.optional ? true : undefined,
+      showError: props.showError ? true : undefined,
+      dropzone: props.dropzone ? true : undefined,
+      inverted: props.inverted ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysGlobalFooter.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { NysGlobalFooter as NysGlobalFooterElement } from "../../dist/nysds.es.js";
+
+export type { NysGlobalFooterElement };
+
+export interface NysGlobalFooterProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Agency name displayed as the footer heading. */
+  agencyName?: NysGlobalFooterElement["agencyName"];
+
+  /** URL for the agency name link. If empty, name is not clickable. */
+  homepageLink?: NysGlobalFooterElement["homepageLink"];
+
+  /** 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;
+}
+
+/**
+ * Agency footer with auto-layout for contact info and link sections.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Footer content (links, contact info). Use `<h4>` for column headings.
+ */
+export const NysGlobalFooter: React.ForwardRefExoticComponent<NysGlobalFooterProps>;

package/packages/react/NysGlobalFooter.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysGlobalFooter = forwardRef((props, forwardedRef) => {
+  const { agencyName, homepageLink, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-globalfooter",
+    {
+      ...filteredProps,
+      agencyName: props.agencyName,
+      homepageLink: props.homepageLink,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysGlobalHeader.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { NysGlobalHeader as NysGlobalHeaderElement } from "../../dist/nysds.es.js";
+
+export type { NysGlobalHeaderElement };
+
+export interface NysGlobalHeaderProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Application name displayed prominently. */
+  appName?: NysGlobalHeaderElement["appName"];
+
+  /** Agency name displayed below app name (or as main title if no appName). */
+  agencyName?: NysGlobalHeaderElement["agencyName"];
+
+  /** URL for the header title link. If empty, title is not clickable. */
+  homepageLink?: NysGlobalHeaderElement["homepageLink"];
+
+  /** 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;
+}
+
+/**
+ * Agency header with navigation, mobile menu, and active link highlighting.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Navigation content (typically `<ul>` with `<li><a>` links). Auto-sanitized.
+ */
+export const NysGlobalHeader: React.ForwardRefExoticComponent<NysGlobalHeaderProps>;

package/packages/react/NysGlobalHeader.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysGlobalHeader = forwardRef((props, forwardedRef) => {
+  const { appName, agencyName, homepageLink, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-globalheader",
+    {
+      ...filteredProps,
+      appName: props.appName,
+      agencyName: props.agencyName,
+      homepageLink: props.homepageLink,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

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,
+  );
+});