@plusui/library 0.1.0

package/react/PlusIcon.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { PlusIcon as PlusIconElement } from "../dist/components/icon/index.js";
+
+export type { PlusIconElement };
+
+export interface PlusIconProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** undefined */
+  iconName?: PlusIconElement["iconName"];
+
+  /** undefined */
+  prefix?: PlusIconElement["prefix"];
+
+  /** 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;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const PlusIcon: React.ForwardRefExoticComponent<PlusIconProps>;

package/react/PlusIcon.js

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

package/react/PlusInput.d.ts

@@ -0,0 +1,190 @@
+import React from "react";
+import { PlusInput as PlusInputElement } from "../dist/components/input/index.js";
+
+export type { PlusInputElement };
+
+export interface PlusInputProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the input should have a clear button */
+  clearable?: boolean;
+
+  /** Whether the input is disabled */
+  disabled?: boolean;
+
+  /** Whether the input is readonly */
+  readonly?: boolean;
+
+  /** Whether the input is required */
+  required?: boolean;
+
+  /** Whether to show a password toggle button */
+  passwordToggle?: boolean;
+
+  /** Whether the password is visible */
+  passwordVisible?: boolean;
+
+  /** Whether the input should automatically get focus */
+  autoFocus?: boolean;
+
+  /** Whether spellcheck is enabled */
+  spellCheck?: boolean;
+
+  /** Whether the input is in an error state */
+  error?: boolean;
+
+  /** Whether the input should take up full width */
+  fullWidth?: boolean;
+
+  /** Whether the input is used as part of a select component */
+  isSelect?: boolean;
+
+  /** The type of input */
+  type?: PlusInputElement["type"];
+
+  /** The name of the input */
+  name?: PlusInputElement["name"];
+
+  /** The value of the input */
+  value?: PlusInputElement["value"];
+
+  /** The placeholder text */
+  placeholder?: PlusInputElement["placeholder"];
+
+  /** The size of the input */
+  size?: PlusInputElement["size"];
+
+  /** The label for the input */
+  label?: PlusInputElement["label"];
+
+  /** The validation pattern for the input */
+  pattern?: PlusInputElement["pattern"];
+
+  /** The minimum length of the input value */
+  minlength?: PlusInputElement["minlength"];
+
+  /** The maximum length of the input value */
+  maxlength?: PlusInputElement["maxlength"];
+
+  /** The minimum value of the input */
+  min?: PlusInputElement["min"];
+
+  /** The maximum value of the input */
+  max?: PlusInputElement["max"];
+
+  /** The step value for numeric inputs */
+  step?: PlusInputElement["step"];
+
+  /** Whether autocorrect is enabled */
+  autocorrect?: PlusInputElement["autocorrect"];
+
+  /** The autocomplete attribute */
+  autocomplete?: PlusInputElement["autocomplete"];
+
+  /** The enterkeyhint attribute */
+  enterkeyhint?: PlusInputElement["enterkeyhint"];
+
+  /** The inputmode attribute */
+  inputmode?: PlusInputElement["inputmode"];
+
+  /** Caption text to display below the input */
+  caption?: PlusInputElement["caption"];
+
+  /** The error message to display */
+  errorMessage?: PlusInputElement["errorMessage"];
+
+  /** Icon name for the prefix icon */
+  prefixIcon?: PlusInputElement["prefixIcon"];
+
+  /** Icon name for the suffix icon */
+  suffixIcon?: PlusInputElement["suffixIcon"];
+
+  /** 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 input value changes */
+  onPlusInput?: (event: CustomEvent) => void;
+
+  /** Emitted when the input value changes and the input loses focus */
+  onPlusChange?: (event: CustomEvent) => void;
+
+  /** Emitted when the input gains focus */
+  onPlusFocus?: (event: CustomEvent) => void;
+
+  /** Emitted when the input loses focus */
+  onPlusBlur?: (event: CustomEvent) => void;
+
+  /** Emitted when the clear button is clicked */
+  onPlusClear?: (event: CustomEvent) => void;
+
+  /** Emitted when the password visibility is toggled */
+  onPlusPasswordToggle?: (event: CustomEvent) => void;
+
+  /** Emitted when the input value is invalid */
+  onPlusInvalid?: (event: CustomEvent) => void;
+}
+
+/**
+ * Form input component that provides various input types, validation, and styling features.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-input** - Emitted when the input value changes
+ * - **plus-change** - Emitted when the input value changes and the input loses focus
+ * - **plus-focus** - Emitted when the input gains focus
+ * - **plus-blur** - Emitted when the input loses focus
+ * - **plus-clear** - Emitted when the clear button is clicked
+ * - **plus-password-toggle** - Emitted when the password visibility is toggled
+ * - **plus-invalid** - Emitted when the input value is invalid
+ *
+ * ### **Methods:**
+ *  - **checkValidity(): _boolean_** - Checks the validity of the input against constraints.
+ * - **reportValidity(): _boolean_** - Reports the validity of the input. If the input is invalid,
+ * it dispatches an 'invalid' event and focuses the input.
+ * - **setCustomValidity(message: _string_): _void_** - Sets a custom validation message for the input.
+ *
+ * ### **Slots:**
+ *  - **prefix** - Content to be placed before the input
+ * - **suffix** - Content to be placed after the input
+ *
+ * ### **CSS Parts:**
+ *  - **input** - The native input element
+ * - **wrapper** - The input wrapper element
+ * - **prefix** - The prefix container
+ * - **suffix** - The suffix container
+ * - **clear-button** - The clear button
+ * - **password-toggle** - The password visibility toggle button
+ */
+export const PlusInput: React.ForwardRefExoticComponent<PlusInputProps>;

package/react/PlusInput.js

@@ -0,0 +1,108 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/input/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusInput = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    clearable,
+    disabled,
+    readonly,
+    required,
+    passwordToggle,
+    passwordVisible,
+    autoFocus,
+    spellCheck,
+    error,
+    fullWidth,
+    isSelect,
+    type,
+    name,
+    value,
+    placeholder,
+    size,
+    label,
+    pattern,
+    minlength,
+    maxlength,
+    min,
+    max,
+    step,
+    autocorrect,
+    autocomplete,
+    enterkeyhint,
+    inputmode,
+    caption,
+    errorMessage,
+    prefixIcon,
+    suffixIcon,
+    ...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-clear", props.onPlusClear);
+  useEventListener(ref, "plus-password-toggle", props.onPlusPasswordToggle);
+  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-input",
+    {
+      ref,
+      ...filteredProps,
+      type: props.type,
+      name: props.name,
+      value: props.value,
+      placeholder: props.placeholder,
+      size: props.size,
+      label: props.label,
+      pattern: props.pattern,
+      minlength: props.minlength,
+      maxlength: props.maxlength,
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      autocorrect: props.autocorrect,
+      autocomplete: props.autocomplete,
+      enterkeyhint: props.enterkeyhint,
+      inputmode: props.inputmode,
+      caption: props.caption,
+      "error-message": props.errorMessage || props["error-message"],
+      "prefix-icon": props.prefixIcon || props["prefix-icon"],
+      "suffix-icon": props.suffixIcon || props["suffix-icon"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      clearable: props.clearable ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      readonly: props.readonly ? "" : undefined,
+      required: props.required ? "" : undefined,
+      "password-toggle": props.passwordToggle ? "" : undefined,
+      "password-visible": props.passwordVisible ? "" : undefined,
+      autoFocus: props.autoFocus ? "" : undefined,
+      spellCheck: props.spellCheck ? "" : undefined,
+      error: props.error ? "" : undefined,
+      "full-width": props.fullWidth ? "" : undefined,
+      isSelect: props.isSelect ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusLink.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import { PlusLink as PlusLinkElement } from "../dist/components/link/index.js";
+
+export type { PlusLinkElement };
+
+export interface PlusLinkProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** When true, the link becomes non-interactive and shows disabled styling */
+  disabled?: boolean;
+
+  /** When true, the link becomes non-interactive but maintains normal styling */
+  readonly?: boolean;
+
+  /** When true, displays loading state and disables interaction */
+  loading?: boolean;
+
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+
+  /** Controls the size of the link
+- sm: Small size with smaller text and spacing
+- md: Medium size with default text and spacing
+- lg: Large size with larger text and spacing
+- inherit: Inherits size from parent element */
+  size?: PlusLinkElement["size"];
+
+  /** The URL that the hyperlink points to */
+  href?: PlusLinkElement["href"];
+
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: PlusLinkElement["target"];
+
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: PlusLinkElement["rel"];
+
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: PlusLinkElement["download"];
+
+  /** Controls the underline style of the link
+values:
+- always: always underlined
+- hover: underlined on hover
+- never: never underlined */
+  underline?: PlusLinkElement["underline"];
+
+  /** 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 link content
+ * - **prefix** - Slot for content to be placed before the link content
+ * - **suffix** - Slot for content to be placed after the link content
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ */
+export const PlusLink: React.ForwardRefExoticComponent<PlusLinkProps>;

package/react/PlusLink.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/link/index.js";
+
+export const PlusLink = forwardRef((props, forwardedRef) => {
+  const {
+    disabled,
+    readonly,
+    loading,
+    external,
+    size,
+    href,
+    target,
+    rel,
+    download,
+    underline,
+    ...filteredProps
+  } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-link",
+    {
+      ...filteredProps,
+      size: props.size,
+      href: props.href,
+      target: props.target,
+      rel: props.rel,
+      download: props.download,
+      underline: props.underline,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? "" : undefined,
+      readonly: props.readonly ? "" : undefined,
+      loading: props.loading ? "" : undefined,
+      external: props.external ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusListBoxItem.d.ts

@@ -0,0 +1,86 @@
+import React from "react";
+import { PlusListBoxItem as PlusListBoxItemElement } from "../dist/components/list-box-item/index.js";
+
+export type { PlusListBoxItemElement };
+
+export interface PlusListBoxItemProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Disables the list box item interaction
+When disabled, the item cannot be clicked or selected */
+  disabled?: boolean;
+
+  /** Sets the selected state of the list box item
+When selected, the item will display with a highlighted background */
+  selected?: boolean;
+
+  /** Sets the size of the list box item
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusListBoxItemElement["size"];
+
+  /** Sets the text content of the list box item
+If provided, this will be used as the item's content when no slot content is present */
+  text?: PlusListBoxItemElement["text"];
+
+  /** 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 list box item is clicked */
+  onClick?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **click** - Emitted when the list box item is clicked
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the list box item content
+ *
+ * ### **CSS Properties:**
+ *  - **--i-bg-default** - Controls the default background color _(default: undefined)_
+ * - **--i-bg-hovered** - Controls the background color when hovered _(default: undefined)_
+ * - **--i-bg-pressed** - Controls the background color when pressed _(default: undefined)_
+ * - **--i-text-color** - Controls the text color _(default: undefined)_
+ * - **--i-selected-bg** - Controls the background color when selected _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ */
+export const PlusListBoxItem: React.ForwardRefExoticComponent<PlusListBoxItemProps>;

package/react/PlusListBoxItem.js

@@ -0,0 +1,37 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/list-box-item/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusListBoxItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { disabled, selected, size, text, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "click", props.onClick);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-list-box-item",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      text: props.text,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? "" : undefined,
+      selected: props.selected ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});