@plusui/library 0.1.0

package/react/PlusTag.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import { PlusTag as PlusTagElement } from "../dist/components/tag/index.js";
+
+export type { PlusTagElement };
+
+export interface PlusTagProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Toggles between light/dark color themes */
+  invert?: boolean;
+
+  /** Accessible label for the tag (falls back to text content) */
+  undefined?: PlusTagElement["undefined"];
+
+  /** ARIA role (defaults to "status") */
+  undefined?: PlusTagElement["undefined"];
+
+  /** Defines the tag's visual state and color scheme */
+  status?: PlusTagElement["status"];
+
+  /** Controls the tag's size variant */
+  size?: PlusTagElement["size"];
+
+  /** Sets the border radius style */
+  radius?: PlusTagElement["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?: 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;
+}
+
+/**
+ * A versatile tag component for displaying status, labels, and categories
+ * ---
+ *
+ *
+ * ### **CSS Properties:**
+ *  - **--tag-bg-color** - Background color for default state (inherits from --plus-color-background-neutral-default) _(default: undefined)_
+ * - **--tag-text-color** - Text color for default state (inherits from --plus-color-text-default) _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **tag** - The container element for the tag
+ */
+export const PlusTag: React.ForwardRefExoticComponent<PlusTagProps>;

package/react/PlusTag.js

@@ -0,0 +1,28 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/tag/index.js";
+
+export const PlusTag = forwardRef((props, forwardedRef) => {
+  const { invert, status, size, radius, ...filteredProps } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-tag",
+    {
+      ...filteredProps,
+      "aria-label": props.undefined || props["aria-label"],
+      role: props.undefined,
+      status: props.status,
+      size: props.size,
+      radius: props.radius,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      invert: props.invert ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusText.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import { PlusText as PlusTextElement } from "../dist/components/text/index.js";
+
+export type { PlusTextElement };
+
+export interface PlusTextProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Defines the visual style and semantic meaning of the text.
+- `display`: For large, prominent display text (rendered as div).
+- `heading1`: For the main heading (rendered as h1).
+- `heading2`: For secondary headings (rendered as h2).
+- `title1`: For primary titles (rendered as h3 - adjust as needed).
+- `title2`: For secondary titles (rendered as h4 - adjust as needed).
+- `body`: For standard body text (rendered as p) (default).
+- `body-accent`: For emphasized body text (rendered as p).
+- `helper`: For helper text, often used with form elements (rendered as div).
+- `caption`: For small caption text (rendered as div). */
+  kind?: PlusTextElement["kind"];
+
+  /** 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;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the text content.
+ *
+ * ### **CSS Properties:**
+ *  - **--i-text-color** - Inherited text color variable. _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper element (e.g., h1, p, div).
+ */
+export const PlusText: React.ForwardRefExoticComponent<PlusTextProps>;

package/react/PlusText.js

@@ -0,0 +1,23 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/text/index.js";
+
+export const PlusText = forwardRef((props, forwardedRef) => {
+  const { kind, ...filteredProps } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-text",
+    {
+      ...filteredProps,
+      kind: props.kind,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusTextarea.d.ts

@@ -0,0 +1,139 @@
+import React from "react";
+import { PlusTextarea as PlusTextareaElement } from "../dist/components/textarea/index.js";
+
+export type { PlusTextareaElement };
+
+export interface PlusTextareaProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the textarea is disabled. */
+  disabled?: boolean;
+
+  /** Whether the textarea is readonly. */
+  readonly?: boolean;
+
+  /** Whether the textarea is required. */
+  required?: boolean;
+
+  /** Whether the textarea should automatically get focus. */
+  autoFocus?: boolean | undefined;
+
+  /** Whether the textarea is in an error state. */
+  error?: boolean;
+
+  /** Whether the textarea should take up full width. */
+  fullWidth?: boolean;
+
+  /** The textarea's name attribute. */
+  name?: PlusTextareaElement["name"];
+
+  /** The textarea's value attribute. */
+  value?: PlusTextareaElement["value"];
+
+  /** The textarea's placeholder text. */
+  placeholder?: PlusTextareaElement["placeholder"];
+
+  /** The size variant of the textarea. */
+  size?: PlusTextareaElement["size"];
+
+  /** The label for the textarea. */
+  label?: PlusTextareaElement["label"];
+
+  /** The minimum length of the value. */
+  minlength?: PlusTextareaElement["minlength"];
+
+  /** The maximum length of the value. */
+  maxlength?: PlusTextareaElement["maxlength"];
+
+  /** Caption text to display below the textarea. */
+  caption?: PlusTextareaElement["caption"];
+
+  /** The error message to display (overrides default validation messages). */
+  errorMessage?: PlusTextareaElement["errorMessage"];
+
+  /** Specifies the visible number of lines in a text area. */
+  rows?: PlusTextareaElement["rows"];
+
+  /** Controls how the textarea can be resized. */
+  resize?: PlusTextareaElement["resize"];
+
+  /** Specifies how the text in a text area is to be wrapped when submitted in a form. */
+  wrap?: PlusTextareaElement["wrap"];
+
+  /** 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;
+
+  /** Emitted when the textarea value changes */
+  onPlusInput?: (event: CustomEvent) => void;
+
+  /** Emitted when the textarea value changes and loses focus */
+  onPlusChange?: (event: CustomEvent) => void;
+
+  /** Emitted when the textarea gains focus */
+  onPlusFocus?: (event: CustomEvent) => void;
+
+  /** Emitted when the textarea loses focus */
+  onPlusBlur?: (event: CustomEvent) => void;
+
+  /** Emitted when the textarea value is invalid */
+  onPlusInvalid?: (event: CustomEvent) => void;
+}
+
+/**
+ * A form-associated textarea component with validation and styling.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-input** - Emitted when the textarea value changes
+ * - **plus-change** - Emitted when the textarea value changes and loses focus
+ * - **plus-focus** - Emitted when the textarea gains focus
+ * - **plus-blur** - Emitted when the textarea loses focus
+ * - **plus-invalid** - Emitted when the textarea value is invalid
+ *
+ * ### **Methods:**
+ *  - **checkValidity(): _boolean_** - Checks the validity of the textarea against constraints.
+ * - **reportValidity(): _boolean_** - Reports the validity state to the user.
+ * - **setCustomValidity(message: _string_): _void_** - Sets a custom validation message.
+ *
+ * ### **CSS Properties:**
+ *  - **--focus-ring-color** - Color of the focus ring _(default: --primary-500)_
+ * - **--error-color** - Color used for error states _(default: --red-500)_
+ *
+ * ### **CSS Parts:**
+ *  - **textarea** - The native textarea element
+ * - **label** - The label element
+ * - **caption** - The caption/error message container
+ */
+export const PlusTextarea: React.ForwardRefExoticComponent<PlusTextareaProps>;

package/react/PlusTextarea.js

@@ -0,0 +1,80 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/textarea/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusTextarea = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    disabled,
+    readonly,
+    required,
+    autoFocus,
+    error,
+    fullWidth,
+    name,
+    value,
+    placeholder,
+    size,
+    label,
+    minlength,
+    maxlength,
+    caption,
+    errorMessage,
+    rows,
+    resize,
+    wrap,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-input", props.onPlusInput);
+  useEventListener(ref, "plus-change", props.onPlusChange);
+  useEventListener(ref, "plus-focus", props.onPlusFocus);
+  useEventListener(ref, "plus-blur", props.onPlusBlur);
+  useEventListener(ref, "plus-invalid", props.onPlusInvalid);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    checkValidity: () => ref.current.checkValidity(),
+    reportValidity: () => ref.current.reportValidity(),
+    setCustomValidity: (message) => ref.current.setCustomValidity(message),
+  }));
+
+  return React.createElement(
+    "plus-textarea",
+    {
+      ref,
+      ...filteredProps,
+      name: props.name,
+      value: props.value,
+      placeholder: props.placeholder,
+      size: props.size,
+      label: props.label,
+      minlength: props.minlength,
+      maxlength: props.maxlength,
+      caption: props.caption,
+      "error-message": props.errorMessage || props["error-message"],
+      rows: props.rows,
+      resize: props.resize,
+      wrap: props.wrap,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? "" : undefined,
+      readonly: props.readonly ? "" : undefined,
+      required: props.required ? "" : undefined,
+      autoFocus: props.autoFocus ? "" : undefined,
+      error: props.error ? "" : undefined,
+      "full-width": props.fullWidth ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusToast.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import { PlusToast as PlusToastElement } from "../dist/components/toast/index.js";
+
+export type { PlusToastElement };
+
+export interface PlusToastProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Determines if the dismiss button is shown. */
+  dismiss?: boolean;
+
+  /** Shows the default status icon. */
+  statusIcon?: boolean;
+
+  /** The size of the toast. */
+  size?: PlusToastElement["size"];
+
+  /** The visual style of the toast. */
+  kind?: PlusToastElement["kind"];
+
+  /** The status variant of the toast, controlling color and icon. */
+  status?: PlusToastElement["status"];
+
+  /** undefined */
+  header?: PlusToastElement["header"];
+
+  /** Optional custom icon name (e.g., 'fa-solid fa-star') or SVG string. Overrides the default status icon. Ignored if the 'icon' slot is used. */
+  icon?: PlusToastElement["icon"];
+
+  /** undefined */
+  message?: PlusToastElement["message"];
+
+  /** 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;
+
+  /** Emitted when the toast is closed by the user via the close button. */
+  onPlusClose?: (event: CustomEvent) => void;
+}
+
+/**
+ * Displays short, temporary messages.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-close** - Emitted when the toast is closed by the user via the close button.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the toast message content. If both message and header properties are set, this slot is ignored.
+ * - **header** - Optional header content for the toast. Overrides the header property.
+ * - **icon** - Optional icon content to replace the default status icon.
+ *
+ * ### **CSS Properties:**
+ *  - **--toast-border-radius** - Controls the border radius of the toast. _(default: undefined)_
+ * - **--toast-padding** - Controls the padding of the toast. _(default: undefined)_
+ * - **--icon-size** - Controls the size of the status icon. _(default: undefined)_
+ * - **--close-button-size** - Controls the size of the close button. _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper.
+ * - **container** - The main container for icon, content, and close button.
+ * - **icon** - The container for the status icon.
+ * - **content** - The container for header and message text.
+ * - **header** - The header text element.
+ * - **message** - The message text element.
+ * - **close-button** - The close button container.
+ */
+export const PlusToast: React.ForwardRefExoticComponent<PlusToastProps>;

package/react/PlusToast.js

@@ -0,0 +1,51 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/toast/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusToast = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    dismiss,
+    statusIcon,
+    size,
+    kind,
+    status,
+    header,
+    icon,
+    message,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-close", props.onPlusClose);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-toast",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      kind: props.kind,
+      status: props.status,
+      header: props.header,
+      icon: props.icon,
+      message: props.message,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      dismiss: props.dismiss ? "" : undefined,
+      "status-icon": props.statusIcon ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusToastContainer.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { PlusToastContainer as PlusToastContainerElement } from "../dist/components/toast-container/index.js";
+
+export type { PlusToastContainerElement };
+
+export interface PlusToastContainerProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** The position the container is responsible for.
+Only toasts targeted for this position via ToastService will be displayed. */
+  position?: PlusToastContainerElement["position"];
+
+  /** 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;
+}
+
+/**
+ * A container element that listens to the ToastService to display toast notifications.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Toast components are rendered here based on ToastService updates.
+ *
+ * ### **CSS Properties:**
+ *  - **--toast-container-gap** - Controls the gap between toasts within the container. _(default: undefined)_
+ * - **--toast-container-z-index** - Controls the stack order of the container. _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper.
+ */
+export const PlusToastContainer: React.ForwardRefExoticComponent<PlusToastContainerProps>;

package/react/PlusToastContainer.js

@@ -0,0 +1,23 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/toast-container/index.js";
+
+export const PlusToastContainer = forwardRef((props, forwardedRef) => {
+  const { position, ...filteredProps } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-toast-container",
+    {
+      ...filteredProps,
+      position: props.position,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});