@plusui/library 0.1.0

package/react/PlusModal.d.ts

@@ -0,0 +1,86 @@
+import React from "react";
+import { PlusModal as PlusModalElement } from "../dist/components/modal/index.js";
+
+export type { PlusModalElement };
+
+export interface PlusModalProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the modal is open */
+  isOpen?: boolean;
+
+  /** Whether the modal should take full width */
+  fullWidth?: boolean;
+
+  /** Whether the modal should close when clicking the backdrop */
+  closeOnBackdrop?: boolean;
+
+  /** Whether the modal should close when pressing the Escape key */
+  closeOnEsc?: boolean;
+
+  /** The size of the modal */
+  size?: PlusModalElement["size"];
+
+  /** The duration of the animation in milliseconds */
+  animationDuration?: PlusModalElement["animationDuration"];
+
+  /** 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;
+}
+
+/**
+ * Modal dialog component that appears on top of the page content.
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **hide(): _void_** - Hides the modal with animation
+ * - **show(): _void_** - Shows the modal with animation
+ *
+ * ### **Slots:**
+ *  - **header** - The header content of the modal
+ * - **body** - The main content of the modal
+ * - **footer** - The footer content of the modal
+ * - **close** - Custom close button (defaults to an X icon)
+ *
+ * ### **CSS Parts:**
+ *  - **container** - The main container element
+ * - **overlay** - The overlay element
+ * - **modal** - The modal element
+ * - **header** - The header element
+ * - **body** - The body element
+ * - **footer** - The footer element
+ * - **close-button** - The close button element
+ */
+export const PlusModal: React.ForwardRefExoticComponent<PlusModalProps>;

package/react/PlusModal.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/modal/index.js";
+
+export const PlusModal = forwardRef((props, forwardedRef) => {
+  const {
+    isOpen,
+    fullWidth,
+    closeOnBackdrop,
+    closeOnEsc,
+    size,
+    animationDuration,
+    ...filteredProps
+  } = props;
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    hide: () => ref.current.hide(),
+    show: () => ref.current.show(),
+  }));
+
+  return React.createElement(
+    "plus-modal",
+    {
+      ...filteredProps,
+      size: props.size,
+      "animation-duration":
+        props.animationDuration || props["animation-duration"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      "is-open": props.isOpen ? "" : undefined,
+      "full-width": props.fullWidth ? "" : undefined,
+      "close-on-backdrop": props.closeOnBackdrop ? "" : undefined,
+      "close-on-esc": props.closeOnEsc ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusPopconfirm.d.ts

@@ -0,0 +1,147 @@
+import React from "react";
+import { PlusPopconfirm as PlusPopconfirmElement } from "../dist/components/popconfirm/index.js";
+
+export type { PlusPopconfirmElement };
+
+export interface PlusPopconfirmProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Determines whether a status icon should be displayed in the popconfirm.
+
+- `true` (default) - An icon representing the status will be displayed.
+- `false` - No icon will be displayed. */
+  statusIcon?: boolean;
+
+  /** Determines whether the arrow should be displayed.
+
+- `true` (default) - Arrow will be displayed.
+- `false` - Arrow will be hidden. */
+  showArrow?: boolean;
+
+  /** The size of the popconfirm.
+
+Available options:
+- `sm` (small)
+- `md` (medium - default)
+- `lg` (large) */
+  size?: PlusPopconfirmElement["size"];
+
+  /** The position of the popconfirm relative to the target element.
+
+Available options:
+- `top` (default)
+- `top-start`
+- `top-end`
+- `bottom`
+- `bottom-start`
+- `bottom-end`
+- `left`
+- `left-start`
+- `left-end`
+- `right`
+- `right-start`
+- `right-end` */
+  orientation?: PlusPopconfirmElement["orientation"];
+
+  /** Determines how the popconfirm is triggered.
+
+Available options:
+- `click` (default) - Popconfirm toggles on click.
+- `hover` - Popconfirm appears on hover. */
+  trigger?: PlusPopconfirmElement["trigger"];
+
+  /** The title of the popconfirm. */
+  title?: PlusPopconfirmElement["title"];
+
+  /** The text for the confirm button. */
+  confirmText?: PlusPopconfirmElement["confirmText"];
+
+  /** The text for the cancel button. */
+  cancelText?: PlusPopconfirmElement["cancelText"];
+
+  /** The status of the popconfirm, which affects its styling.
+
+Available options:
+- `success` (green)
+- `warning` (yellow)
+- `danger` (red)
+- `info` (blue)
+- `primary` (default theme color)
+- `default` (gray - default) */
+  status?: PlusPopconfirmElement["status"];
+
+  /** 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 popconfirm is opened */
+  onPlusPopconfirmOpen?: (event: CustomEvent) => void;
+
+  /** Emitted when the popconfirm is closed */
+  onPlusPopconfirmClose?: (event: CustomEvent) => void;
+
+  /** Emitted when the confirm button is clicked */
+  onPlusPopconfirmConfirm?: (event: CustomEvent) => void;
+
+  /** Emitted when the cancel button is clicked */
+  onPlusPopconfirmCancel?: (event: CustomEvent) => void;
+}
+
+/**
+ * Popconfirm component that displays a confirmation dialog in a floating panel.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-popconfirm-open** - Emitted when the popconfirm is opened
+ * - **plus-popconfirm-close** - Emitted when the popconfirm is closed
+ * - **plus-popconfirm-confirm** - Emitted when the confirm button is clicked
+ * - **plus-popconfirm-cancel** - Emitted when the cancel button is clicked
+ *
+ * ### **Slots:**
+ *  - _default_ - The target element that triggers the popconfirm
+ * - **icon** - Custom icon for the popconfirm
+ * - **title** - The popconfirm title
+ * - **header** - The entire header section
+ * - **footer** - The footer section with action buttons
+ * - **content** - The main content inside the popconfirm
+ *
+ * ### **CSS Parts:**
+ *  - **popconfirm** - The popconfirm container element
+ * - **arrow** - The popconfirm arrow indicator
+ * - **header** - The popconfirm header section
+ * - **title** - The popconfirm title
+ * - **content** - The main content inside the popconfirm
+ * - **footer** - The footer section with action buttons
+ */
+export const PlusPopconfirm: React.ForwardRefExoticComponent<PlusPopconfirmProps>;

package/react/PlusPopconfirm.js

@@ -0,0 +1,60 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/popconfirm/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusPopconfirm = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    statusIcon,
+    showArrow,
+    size,
+    orientation,
+    trigger,
+    title,
+    confirmText,
+    cancelText,
+    status,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-popconfirm-open", props.onPlusPopconfirmOpen);
+  useEventListener(ref, "plus-popconfirm-close", props.onPlusPopconfirmClose);
+  useEventListener(
+    ref,
+    "plus-popconfirm-confirm",
+    props.onPlusPopconfirmConfirm,
+  );
+  useEventListener(ref, "plus-popconfirm-cancel", props.onPlusPopconfirmCancel);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-popconfirm",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      orientation: props.orientation,
+      trigger: props.trigger,
+      title: props.title,
+      "confirm-text": props.confirmText || props["confirm-text"],
+      "cancel-text": props.cancelText || props["cancel-text"],
+      status: props.status,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      "status-icon": props.statusIcon ? "" : undefined,
+      "show-arrow": props.showArrow ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusPopover.d.ts

@@ -0,0 +1,148 @@
+import React from "react";
+import { PlusPopover as PlusPopoverElement } from "../dist/components/popover/index.js";
+
+export type { PlusPopoverElement };
+
+export interface PlusPopoverProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Determines whether the popover can be dismissed by clicking the close button.
+
+- `true` (default) - Popover can be closed.
+- `false` - The close button is hidden. */
+  dismissable?: boolean;
+
+  /** Determines whether a status icon should be displayed in the popover.
+
+- `true` (default) - An icon representing the status will be displayed.
+- `false` - No icon will be displayed. */
+  statusIcon?: boolean;
+
+  /** Determines whether the arrow should be displayed.
+
+- `true` (default) - Arrow will be displayed.
+- `false` - Arrow will be hidden. */
+  showArrow?: boolean;
+
+  /** The size of the popover.
+
+Available options:
+- `sm` (small)
+- `md` (medium - default)
+- `lg` (large) */
+  size?: PlusPopoverElement["size"];
+
+  /** The position of the popover relative to the target element.
+
+Available options:
+- `top` (default)
+- `top-start`
+- `top-end`
+- `bottom`
+- `bottom-start`
+- `bottom-end`
+- `left`
+- `left-start`
+- `left-end`
+- `right`
+- `right-start`
+- `right-end` */
+  orientation?: PlusPopoverElement["orientation"];
+
+  /** Determines how the popover is triggered.
+
+Available options:
+- `click` (default) - Popover toggles on click.
+- `hover` - Popover appears on hover. */
+  trigger?: PlusPopoverElement["trigger"];
+
+  /** The main text content of the popover.
+
+If a slot with `name="content"` is provided, this text will be ignored. */
+  text?: PlusPopoverElement["text"];
+
+  /** The header title of the popover.
+
+If a slot with `name="title"` is provided, this text will be ignored. */
+  headerText?: PlusPopoverElement["headerText"];
+
+  /** The status of the popover, which affects its styling.
+
+Available options:
+- `success` (green)
+- `warning` (yellow)
+- `danger` (red)
+- `info` (blue)
+- `primary` (default theme color)
+- `default` (gray - default) */
+  status?: PlusPopoverElement["status"];
+
+  /** 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 popover is opened */
+  onPlusPopoverOpen?: (event: CustomEvent) => void;
+
+  /** Emitted when the popover is closed */
+  onPlusPopoverClose?: (event: CustomEvent) => void;
+
+  /** Emitted when the popover is dismissed via close button */
+  onPlusPopoverDismiss?: (event: CustomEvent) => void;
+}
+
+/**
+ * Popover component that displays content in a floating panel.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-popover-open** - Emitted when the popover is opened
+ * - **plus-popover-close** - Emitted when the popover is closed
+ * - **plus-popover-dismiss** - Emitted when the popover is dismissed via close button
+ *
+ * ### **Slots:**
+ *  - _default_ - The target element that triggers the popover
+ * - **icon** - Custom icon for the popover
+ * - **title** - The popover title
+ * - **actions** - Actions like close button
+ * - **content** - The main content inside the popover
+ *
+ * ### **CSS Parts:**
+ *  - **popover** - The popover container element
+ * - **arrow** - The popover arrow indicator
+ * - **title** - The popover title
+ * - **close** - The close button area
+ * - **content** - The main content inside the popover
+ */
+export const PlusPopover: React.ForwardRefExoticComponent<PlusPopoverProps>;

package/react/PlusPopover.js

@@ -0,0 +1,55 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/popover/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusPopover = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    dismissable,
+    statusIcon,
+    showArrow,
+    size,
+    orientation,
+    trigger,
+    text,
+    headerText,
+    status,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-popover-open", props.onPlusPopoverOpen);
+  useEventListener(ref, "plus-popover-close", props.onPlusPopoverClose);
+  useEventListener(ref, "plus-popover-dismiss", props.onPlusPopoverDismiss);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-popover",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      orientation: props.orientation,
+      trigger: props.trigger,
+      text: props.text,
+      "header-text": props.headerText || props["header-text"],
+      status: props.status,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      dismissable: props.dismissable ? "" : undefined,
+      statusIcon: props.statusIcon ? "" : undefined,
+      showArrow: props.showArrow ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusRadio.d.ts

@@ -0,0 +1,97 @@
+import React from "react";
+import { PlusRadio as PlusRadioElement } from "../dist/components/radio/index.js";
+
+export type { PlusRadioElement };
+
+export interface PlusRadioProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Indicates whether the radio button is checked */
+  checked?: boolean;
+
+  /** Indicates if the radio button is in an error state */
+  error?: boolean;
+
+  /** Disables the radio button interaction */
+  disabled?: boolean;
+
+  /** Makes the radio button readonly (non-interactive but not disabled) */
+  readonly?: boolean;
+
+  /** Indicates if the radio input is required */
+  required?: boolean;
+
+  /** Sets the size of the radio button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusRadioElement["size"];
+
+  /** Defines the text label for the radio button */
+  text?: PlusRadioElement["text"];
+
+  /** The name of the radio button, used for form submission and radio grouping */
+  name?: PlusRadioElement["name"];
+
+  /** The value associated with the radio button */
+  value?: PlusRadioElement["value"];
+
+  /** 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 state to track if the radio button has focus */
+  hasFocus?: PlusRadioElement["hasFocus"];
+
+  /** Emitted when the radio button's checked state changes */
+  onPlusChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Radio button component that allows single selection from a group of options.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-change** - Emitted when the radio button's checked state changes
+ *
+ * ### **Methods:**
+ *  - **handleChange()** - Handles the change event when the radio button is toggled
+ *
+ * ### **Slots:**
+ *  - _default_ - The radio button label content
+ *
+ * ### **CSS Parts:**
+ *  - **radio** - The component's radio input element
+ */
+export const PlusRadio: React.ForwardRefExoticComponent<PlusRadioProps>;

package/react/PlusRadio.js

@@ -0,0 +1,60 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/radio/index.js";
+import { useEventListener, useProperties } from "./react-utils.js";
+
+export const PlusRadio = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    checked,
+    error,
+    disabled,
+    readonly,
+    required,
+    size,
+    text,
+    name,
+    value,
+    hasFocus,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-change", props.onPlusChange);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "hasFocus", props.hasFocus);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    handleChange: () => ref.current.handleChange(),
+  }));
+
+  return React.createElement(
+    "plus-radio",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      text: props.text,
+      name: props.name,
+      value: props.value,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      checked: props.checked ? "" : undefined,
+      error: props.error ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      readonly: props.readonly ? "" : undefined,
+      required: props.required ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});