@nordhealth/components 4.0.0-alpha.2 → 4.0.0

package/lib/react.d.ts

@@ -0,0 +1,420 @@
+import type * as Components from "./src/index"
+import type { LitElement } from "lit"
+import type * as React from "react"
+
+type WCProps<TWebComponent extends HTMLElement> = Partial<Omit<TWebComponent, keyof LitElement | "render">>
+
+type MapEvents<T> = {
+  [K in keyof T as K extends `on${infer E}` ? `on${Lowercase<E>}` : K]: T[K]
+}
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "nord-avatar": WCProps<Components.Avatar> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-badge": WCProps<Components.Badge> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-banner": WCProps<Components.Banner> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-button": WCProps<Components.Button> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-button-group": WCProps<Components.ButtonGroup> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-calendar": WCProps<Components.Calendar> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched when a date is selected and the value changes.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Dispatched when the calendar's focused date changes.
+           */
+          "onnord-focus-date"?: (event: Event) => void
+        }
+
+      "nord-card": WCProps<Components.Card> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-checkbox": WCProps<Components.Checkbox> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+        }
+
+      "nord-command-menu": WCProps<Components.CommandMenu> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * The command menu was closed.
+           */
+          onclose?: (event: Event) => void
+
+          /**
+           * User selected a command from the menu.
+           */
+          "onnord-select"?: (event: Event) => void
+
+          /**
+           * The command menu was opened.
+           */
+          onopen?: (event: Event) => void
+        }
+
+      "nord-date-picker": WCProps<Components.DatePicker> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Dispatched when the popout is closed.
+           */
+          onclose?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+
+          /**
+           * Dispatched when the calendar's focused date changes.
+           */
+          "onnord-focus-date"?: (event: Event) => void
+
+          /**
+           * Dispatched when the popout is opened.
+           */
+          onopen?: (event: Event) => void
+        }
+
+      "nord-divider": WCProps<Components.Divider> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-drawer": WCProps<Components.Drawer> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-dropdown": WCProps<Components.Dropdown> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched when the popout is closed.
+           */
+          onclose?: (event: Event) => void
+
+          /**
+           * Dispatched when the popout is opened.
+           */
+          onopen?: (event: Event) => void
+        }
+
+      "nord-dropdown-group": WCProps<Components.DropdownGroup> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {}
+
+      "nord-dropdown-item": WCProps<Components.DropdownItem> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-empty-state": WCProps<Components.EmptyState> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-fieldset": WCProps<Components.Fieldset> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-footer": WCProps<Components.Footer> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-header": WCProps<Components.Header> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-icon": WCProps<Components.Icon> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-input": WCProps<Components.Input> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+
+          /**
+           * Fired when some text has been selected.
+           */
+          onselect?: (event: Event) => void
+        }
+
+      "nord-layout": WCProps<Components.Layout> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-message": WCProps<Components.Message> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-modal": WCProps<Components.Modal> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.
+           */
+          oncancel?: (event: Event) => void
+
+          /**
+           * Dispatched when a modal is closed for any reason.
+           */
+          onclose?: (event: Event) => void
+        }
+
+      "nord-nav-group": WCProps<Components.NavGroup> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched whenever a nav item has been marked as active
+           */
+          onactivate?: (event: Event) => void
+
+          /**
+           * Dispatched whenever a nav item's state changes between open and closed.
+           */
+          ontoggle?: (event: Event) => void
+        }
+
+      "nord-navigation": WCProps<Components.Navigation> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched whenever a nav item has been marked as active
+           */
+          onactivate?: (event: Event) => void
+
+          /**
+           * Dispatched whenever a nav item's state changes between open and closed.
+           */
+          ontoggle?: (event: Event) => void
+        }
+
+      "nord-nav-item": WCProps<Components.NavItem> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched whenever a nav item has been marked as active
+           */
+          onactivate?: (event: Event) => void
+
+          /**
+           * Dispatched whenever a nav item's state changes between open and closed.
+           */
+          ontoggle?: (event: Event) => void
+        }
+
+      "nord-nav-toggle": WCProps<Components.NavToggle> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-notification": WCProps<Components.Notification> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
+           */
+          ondismiss?: (event: Event) => void
+        }
+
+      "nord-notification-group": WCProps<Components.NotificationGroup> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
+           */
+          ondismiss?: (event: Event) => void
+        }
+
+      "nord-popout": WCProps<Components.Popout> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Dispatched when the popout is closed.
+           */
+          onclose?: (event: Event) => void
+
+          /**
+           * Dispatched when the popout is opened.
+           */
+          onopen?: (event: Event) => void
+        }
+
+      "nord-progress-bar": WCProps<Components.ProgressBar> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-qrcode": WCProps<Components.Qrcode> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-radio": WCProps<Components.Radio> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+        }
+
+      "nord-range": WCProps<Components.Range> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+        }
+
+      "nord-segmented-control": WCProps<Components.SegmentedControl> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever a segmented control item has been checked.
+           */
+          onchange?: (event: Event) => void
+        }
+
+      "nord-segmented-control-item": WCProps<Components.SegmentedControlItem> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the segmented control item has been checked.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+        }
+
+      "nord-select": WCProps<Components.Select> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+        }
+
+      "nord-skeleton": WCProps<Components.Skeleton> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-spinner": WCProps<Components.Spinner> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-stack": WCProps<Components.Stack> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-tab": WCProps<Components.Tab> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-tab-group": WCProps<Components.TabGroup> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-table": WCProps<Components.Table> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-tab-panel": WCProps<Components.TabPanel> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-tag": WCProps<Components.Tag> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the tag has been checked or unchecked via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.
+           */
+          onremove?: (event: Event) => void
+        }
+
+      "nord-tag-group": WCProps<Components.TagGroup> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever a tag has been checked or unchecked via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.
+           */
+          onremove?: (event: Event) => void
+        }
+
+      "nord-textarea": WCProps<Components.Textarea> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+
+          /**
+           * Fired when some text has been selected.
+           */
+          onselect?: (event: Event) => void
+        }
+
+      "nord-toast": WCProps<Components.Toast> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
+           */
+          ondismiss?: (event: Event) => void
+        }
+
+      "nord-toast-group": WCProps<Components.ToastGroup> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
+           */
+          ondismiss?: (event: Event) => void
+        }
+
+      "nord-toggle": WCProps<Components.Toggle> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {
+          /**
+           * Fired whenever the input's value is changed via user interaction.
+           */
+          onchange?: (event: Event) => void
+
+          /**
+           * Fired as the user types into the input.
+           */
+          oninput?: (event: Event) => void
+        }
+
+      "nord-tooltip": WCProps<Components.Tooltip> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-top-bar": WCProps<Components.TopBar> & React.HTMLAttributes<HTMLElement> & React.Attributes & {}
+
+      "nord-visually-hidden": WCProps<Components.VisuallyHidden> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {}
+    }
+  }
+}