@plusui/library 0.1.0

package/react/PlusToggle.d.ts

@@ -0,0 +1,158 @@
+import React from "react";
+import { PlusToggle as PlusToggleElement } from "../dist/components/toggle/index.js";
+
+export type { PlusToggleElement };
+
+export interface PlusToggleProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** undefined */
+  checked?: boolean;
+
+  /** undefined */
+  error?: boolean;
+
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  readonly?: boolean;
+
+  /** undefined */
+  required?: boolean;
+
+  /** undefined */
+  fullWidth?: boolean;
+
+  /** undefined */
+  name?: PlusToggleElement["name"];
+
+  /** undefined */
+  value?: PlusToggleElement["value"];
+
+  /** undefined */
+  size?: PlusToggleElement["size"];
+
+  /** undefined */
+  label?: PlusToggleElement["label"];
+
+  /** undefined */
+  caption?: PlusToggleElement["caption"];
+
+  /** undefined */
+  text?: PlusToggleElement["text"];
+
+  /** undefined */
+  textPosition?: PlusToggleElement["textPosition"];
+
+  /** undefined */
+  toggleIcon?: PlusToggleElement["toggleIcon"];
+
+  /** undefined */
+  toggleActiveIcon?: PlusToggleElement["toggleActiveIcon"];
+
+  /** undefined */
+  toggleInActiveIcon?: PlusToggleElement["toggleInActiveIcon"];
+
+  /** undefined */
+  iconSize?: PlusToggleElement["iconSize"];
+
+  /** undefined */
+  errorMessage?: PlusToggleElement["errorMessage"];
+
+  /** undefined */
+  animation?: PlusToggleElement["animation"];
+
+  /** undefined */
+  customAriaLabel?: PlusToggleElement["customAriaLabel"];
+
+  /** 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 toggle state changes */
+  onPlusChange?: (event: CustomEvent) => void;
+
+  /** Emitted when the toggle state changes (for input event compatibility) */
+  onPlusInput?: (event: CustomEvent) => void;
+
+  /** Emitted when the toggle gains focus */
+  onPlusFocus?: (event: CustomEvent) => void;
+
+  /** Emitted when the toggle loses focus */
+  onPlusBlur?: (event: CustomEvent) => void;
+
+  /** Emitted when the toggle validation fails */
+  onPlusInvalid?: (event: CustomEvent) => void;
+}
+
+/**
+ * Toggle component that provides a switch with various styles and states.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-change** - Emitted when the toggle state changes
+ * - **plus-input** - Emitted when the toggle state changes (for input event compatibility)
+ * - **plus-focus** - Emitted when the toggle gains focus
+ * - **plus-blur** - Emitted when the toggle loses focus
+ * - **plus-invalid** - Emitted when the toggle validation fails
+ *
+ * ### **Methods:**
+ *  - **checkValidity(): __** - Checks the validity of the toggle input
+ * - **reportValidity(): __** - Reports the validity of the toggle input
+ * - **setCustomValidity(message: _string_): _void_** - Sets a custom validity message for the toggle
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for toggle text content when no text property is specified
+ *
+ * ### **CSS Properties:**
+ *  - **--text-color** - Controls the text color _(default: undefined)_
+ * - **--border-color** - Controls the border color of the toggle _(default: undefined)_
+ * - **--switch-bg** - Controls the background color of the switch _(default: undefined)_
+ * - **--switch-bg-hover** - Controls the background color when hovered _(default: undefined)_
+ * - **--switch-bg-active** - Controls the background color when pressed _(default: undefined)_
+ * - **--dot-bg** - Controls the background color of the dot _(default: undefined)_
+ * - **--dot-text** - Controls the text color of the icon in the dot _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ * - **label** - The label element
+ * - **control** - The control element containing the toggle and text
+ * - **switch** - The switch element
+ * - **dot** - The dot element inside the switch
+ * - **text** - The text element
+ * - **icon** - The icon element when an icon is used
+ * - **caption** - The caption element
+ */
+export const PlusToggle: React.ForwardRefExoticComponent<PlusToggleProps>;

package/react/PlusToggle.js

@@ -0,0 +1,86 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/toggle/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusToggle = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    checked,
+    error,
+    disabled,
+    readonly,
+    required,
+    fullWidth,
+    name,
+    value,
+    size,
+    label,
+    caption,
+    text,
+    textPosition,
+    toggleIcon,
+    toggleActiveIcon,
+    toggleInActiveIcon,
+    iconSize,
+    errorMessage,
+    animation,
+    customAriaLabel,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-change", props.onPlusChange);
+  useEventListener(ref, "plus-input", props.onPlusInput);
+  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-toggle",
+    {
+      ref,
+      ...filteredProps,
+      name: props.name,
+      value: props.value,
+      size: props.size,
+      label: props.label,
+      caption: props.caption,
+      text: props.text,
+      "text-position": props.textPosition || props["text-position"],
+      "toggle-icon": props.toggleIcon || props["toggle-icon"],
+      "toggle-active-icon":
+        props.toggleActiveIcon || props["toggle-active-icon"],
+      "toggle-inactive-icon":
+        props.toggleInActiveIcon || props["toggle-inactive-icon"],
+      "icon-size": props.iconSize || props["icon-size"],
+      "error-message": props.errorMessage || props["error-message"],
+      animation: props.animation,
+      "custom-aria-label": props.customAriaLabel || props["custom-aria-label"],
+      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,
+      "full-width": props.fullWidth ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusTooltip.d.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import { PlusTooltip as PlusTooltipElement } from "../dist/components/tooltip/index.js";
+
+export type { PlusTooltipElement };
+
+export interface PlusTooltipProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Sets the size of the tooltip.
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusTooltipElement["size"];
+
+  /** The text content displayed inside the tooltip. */
+  message?: PlusTooltipElement["message"];
+
+  /** The trigger event for the tooltip.
+- hover: Tooltip appears on hover.
+- click: Tooltip appears on click. */
+  trigger?: PlusTooltipElement["trigger"];
+
+  /** The tooltip placement relative to the target element.
+- top, bottom, left, right */
+  orientation?: PlusTooltipElement["orientation"];
+
+  /** undefined */
+  hideDelay?: PlusTooltipElement["hideDelay"];
+
+  /** 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 PlusTooltip: React.ForwardRefExoticComponent<PlusTooltipProps>;

package/react/PlusTooltip.js

@@ -0,0 +1,28 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/tooltip/index.js";
+
+export const PlusTooltip = forwardRef((props, forwardedRef) => {
+  const { size, message, trigger, orientation, hideDelay, ...filteredProps } =
+    props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-tooltip",
+    {
+      ...filteredProps,
+      size: props.size,
+      message: props.message,
+      trigger: props.trigger,
+      orientation: props.orientation,
+      hideDelay: props.hideDelay,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/Tailwind.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { Tailwind as TailwindElement } from "../dist/components//index.js";
+
+export type { TailwindElement };
+
+export interface TailwindProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** 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 Tailwind: React.ForwardRefExoticComponent<TailwindProps>;

package/react/Tailwind.js

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

package/react/index.d.ts

@@ -0,0 +1,43 @@
+export * from "./Tailwind.js";
+export * from "./PlusAvatar.js";
+export * from "./PlusButton.js";
+export * from "./PlusButtonGroup.js";
+export * from "./PlusIcon.js";
+export * from "./PlusBadge.js";
+export * from "./PlusTag.js";
+export * from "./PlusSvgIcon.js";
+export * from "./PlusChip.js";
+export * from "./PlusLink.js";
+export * from "./PlusAlert.js";
+export * from "./PlusRadio.js";
+export * from "./PlusSegmentedPickerItem.js";
+export * from "./PlusSegmentedPicker.js";
+export * from "./PlusRadioGroup.js";
+export * from "./PlusModal.js";
+export * from "./PlusDrawer.js";
+export * from "./PlusAccordion.js";
+export * from "./PlusAccordionGroup.js";
+export * from "./PlusDivider.js";
+export * from "./PlusPopover.js";
+export * from "./PlusListBoxItem.js";
+export * from "./PlusDropDownItem.js";
+export * from "./PlusDropdown.js";
+export * from "./PlusTooltip.js";
+export * from "./PlusInput.js";
+export * from "./PlusPopconfirm.js";
+export * from "./PlusText.js";
+export * from "./PlusBreadcrumbItem.js";
+export * from "./PlusBreadcrumb.js";
+export * from "./PlusCheckbox.js";
+export * from "./PlusCheckboxGroup.js";
+export * from "./PlusTextarea.js";
+export * from "./PlusRating.js";
+export * from "./PlusToast.js";
+export * from "./PlusToastContainer.js";
+export * from "./PlusService.js";
+export * from "./PlusSelectItem.js";
+export * from "./PlusSelect.js";
+export * from "./PlusToggle.js";
+export * from "./PlusTab.js";
+export * from "./PlusTabPanel.js";
+export * from "./PlusTabGroup.js";

package/react/index.js

@@ -0,0 +1,43 @@
+export * from "./Tailwind.js";
+export * from "./PlusAvatar.js";
+export * from "./PlusButton.js";
+export * from "./PlusButtonGroup.js";
+export * from "./PlusIcon.js";
+export * from "./PlusBadge.js";
+export * from "./PlusTag.js";
+export * from "./PlusSvgIcon.js";
+export * from "./PlusChip.js";
+export * from "./PlusLink.js";
+export * from "./PlusAlert.js";
+export * from "./PlusRadio.js";
+export * from "./PlusSegmentedPickerItem.js";
+export * from "./PlusSegmentedPicker.js";
+export * from "./PlusRadioGroup.js";
+export * from "./PlusModal.js";
+export * from "./PlusDrawer.js";
+export * from "./PlusAccordion.js";
+export * from "./PlusAccordionGroup.js";
+export * from "./PlusDivider.js";
+export * from "./PlusPopover.js";
+export * from "./PlusListBoxItem.js";
+export * from "./PlusDropDownItem.js";
+export * from "./PlusDropdown.js";
+export * from "./PlusTooltip.js";
+export * from "./PlusInput.js";
+export * from "./PlusPopconfirm.js";
+export * from "./PlusText.js";
+export * from "./PlusBreadcrumbItem.js";
+export * from "./PlusBreadcrumb.js";
+export * from "./PlusCheckbox.js";
+export * from "./PlusCheckboxGroup.js";
+export * from "./PlusTextarea.js";
+export * from "./PlusRating.js";
+export * from "./PlusToast.js";
+export * from "./PlusToastContainer.js";
+export * from "./PlusService.js";
+export * from "./PlusSelectItem.js";
+export * from "./PlusSelect.js";
+export * from "./PlusToggle.js";
+export * from "./PlusTab.js";
+export * from "./PlusTabPanel.js";
+export * from "./PlusTabGroup.js";

package/react/react-utils.js

@@ -0,0 +1,34 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export function useProperties(targetElement, propName, value) {
+  useEffect(() => {
+    if (
+      value !== undefined &&
+      targetElement.current &&
+      targetElement.current[propName] !== value
+    ) {
+      // add try catch to avoid errors when setting read-only properties
+      try {
+        targetElement.current[propName] = value;
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  }, [value, targetElement.current]);
+}
+
+export function useEventListener(targetElement, eventName, eventHandler) {
+  useLayoutEffect(() => {
+    if (eventHandler !== undefined) {
+      targetElement?.current?.addEventListener(eventName, eventHandler);
+    }
+
+    return () => {
+      if (eventHandler?.cancel) {
+        eventHandler.cancel();
+      }
+
+      targetElement?.current?.removeEventListener(eventName, eventHandler);
+    };
+  }, [eventName, eventHandler, targetElement.current]);
+}