@plusui/library 0.1.0

package/react/PlusRadioGroup.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { PlusRadioGroup as PlusRadioGroupElement } from "../dist/components/radio-group/index.js";
+
+export type { PlusRadioGroupElement };
+
+export interface PlusRadioGroupProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  required?: boolean;
+
+  /** Shows error styling on the radio group */
+  error?: boolean;
+
+  /** undefined */
+  name?: PlusRadioGroupElement["name"];
+
+  /** undefined */
+  value?: PlusRadioGroupElement["value"];
+
+  /** The size of all radio buttons in the group
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusRadioGroupElement["size"];
+
+  /** Orientation of the radio buttons
+- horizontal: Radio buttons are arranged side by side
+- vertical: Radio buttons are stacked vertically */
+  orientation?: PlusRadioGroupElement["orientation"];
+
+  /** 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 PlusRadioGroup: React.ForwardRefExoticComponent<PlusRadioGroupProps>;

package/react/PlusRadioGroup.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/radio-group/index.js";
+
+export const PlusRadioGroup = forwardRef((props, forwardedRef) => {
+  const {
+    disabled,
+    required,
+    error,
+    name,
+    value,
+    size,
+    orientation,
+    ...filteredProps
+  } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-radio-group",
+    {
+      ...filteredProps,
+      name: props.name,
+      value: props.value,
+      size: props.size,
+      orientation: props.orientation,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? "" : undefined,
+      required: props.required ? "" : undefined,
+      error: props.error ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusRating.d.ts

@@ -0,0 +1,109 @@
+import React from "react";
+import { PlusRating as PlusRatingElement } from "../dist/components/rating/index.js";
+
+export type { PlusRatingElement };
+
+export interface PlusRatingProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** undefined */
+  readonly?: boolean;
+
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  required?: boolean;
+
+  /** undefined */
+  value?: PlusRatingElement["value"];
+
+  /** undefined */
+  max?: PlusRatingElement["max"];
+
+  /** undefined */
+  precision?: PlusRatingElement["precision"];
+
+  /** undefined */
+  size?: PlusRatingElement["size"];
+
+  /** undefined */
+  name?: PlusRatingElement["name"];
+
+  /** The name of the icon to use for empty rating items. */
+  emptyIconName?: PlusRatingElement["emptyIconName"];
+
+  /** The name of the icon to use for filled rating items. */
+  filledIconName?: PlusRatingElement["filledIconName"];
+
+  /** The label for the rating component. */
+  label?: PlusRatingElement["label"];
+
+  /** The caption text displayed below the rating. */
+  caption?: PlusRatingElement["caption"];
+
+  /** 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 rating value changes via user interaction. */
+  onPlusChange?: (event: CustomEvent) => void;
+
+  /** Emitted when the user hovers over a star, includes the potential value. */
+  onPlusHover?: (event: CustomEvent) => void;
+}
+
+/**
+ * A rating component to display and optionally set a rating value.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-change** - Emitted when the rating value changes via user interaction.
+ * - **plus-hover** - Emitted when the user hovers over a star, includes the potential value.
+ *
+ * ### **Methods:**
+ *  - **reportValidity(): _boolean_** - Checks validity and sets the error state. Returns true if valid, false otherwise.
+ *
+ * ### **CSS Properties:**
+ *  - **--star-color-active** - Color of active/selected stars. _(default: --color-warning-500)_
+ * - **--star-color-inactive** - Color of inactive stars. _(default: --color-neutral-300)_
+ * - **--star-color-hover** - Color of stars on hover. _(default: --plus-color-text-primary)_
+ *
+ * ### **CSS Parts:**
+ *  - **host** - The main container element.
+ * - **star-container** - The container for each star.
+ * - **star-icon** - Each individual star icon.
+ * - **star-partial** - The element used to display partial stars.
+ */
+export const PlusRating: React.ForwardRefExoticComponent<PlusRatingProps>;

package/react/PlusRating.js

@@ -0,0 +1,63 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/rating/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusRating = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    readonly,
+    disabled,
+    required,
+    value,
+    max,
+    precision,
+    size,
+    name,
+    emptyIconName,
+    filledIconName,
+    label,
+    caption,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-change", props.onPlusChange);
+  useEventListener(ref, "plus-hover", props.onPlusHover);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    reportValidity: () => ref.current.reportValidity(),
+  }));
+
+  return React.createElement(
+    "plus-rating",
+    {
+      ref,
+      ...filteredProps,
+      value: props.value,
+      max: props.max,
+      precision: props.precision,
+      size: props.size,
+      name: props.name,
+      "empty-icon-name": props.emptyIconName || props["empty-icon-name"],
+      "filled-icon-name": props.filledIconName || props["filled-icon-name"],
+      label: props.label,
+      caption: props.caption,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      readonly: props.readonly ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      required: props.required ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusSegmentedPicker.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { PlusSegmentedPicker as PlusSegmentedPickerElement } from "../dist/components/segmented-picker/index.js";
+
+export type { PlusSegmentedPickerElement };
+
+export interface PlusSegmentedPickerProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** The status of the segmented picker. */
+  status?: PlusSegmentedPickerElement["status"];
+
+  /** The shape of the segmented picker. */
+  shape?: PlusSegmentedPickerElement["shape"];
+
+  /** The size of the segmented picker. */
+  size?: PlusSegmentedPickerElement["size"];
+
+  /** 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 an item is selected. */
+  onPlusSegmentedPickerItemChanged?: (event: CustomEvent) => void;
+}
+
+/**
+ * A segmented picker component that allows users to select one option from a group of options.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-segmented-picker-item-changed** - Emitted when an item is selected.
+ *
+ * ### **Slots:**
+ *  - _default_ - The content of the segmented picker, should be plus-segmented-picker-item elements.
+ *
+ * ### **CSS Parts:**
+ *  - **host** - The host element.
+ * - **animation-overlay** - The animation overlay element.
+ */
+export const PlusSegmentedPicker: React.ForwardRefExoticComponent<PlusSegmentedPickerProps>;

package/react/PlusSegmentedPicker.js

@@ -0,0 +1,40 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/segmented-picker/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusSegmentedPicker = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { status, shape, size, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "plus-segmented-picker-item-changed",
+    props.onPlusSegmentedPickerItemChanged,
+  );
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-segmented-picker",
+    {
+      ref,
+      ...filteredProps,
+      status: props.status,
+      shape: props.shape,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusSegmentedPickerItem.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import { PlusSegmentedPickerItem as PlusSegmentedPickerItemElement } from "../dist/components/segmented-picker-item/index.js";
+
+export type { PlusSegmentedPickerItemElement };
+
+export interface PlusSegmentedPickerItemProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the item is checked. */
+  checked?: boolean;
+
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+
+  /** The status of the item. */
+  status?: PlusSegmentedPickerItemElement["status"];
+
+  /** The shape of the item. */
+  shape?: PlusSegmentedPickerItemElement["shape"];
+
+  /** The size of the item. */
+  size?: PlusSegmentedPickerItemElement["size"];
+
+  /** The name of the group this item belongs to. */
+  groupName?: PlusSegmentedPickerItemElement["groupName"];
+
+  /** The value of the item. */
+  value?: PlusSegmentedPickerItemElement["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;
+}
+
+/**
+ * An item component for the segmented picker.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The content of the item.
+ *
+ * ### **CSS Parts:**
+ *  - **label** - The label element.
+ * - **input** - The input element.
+ */
+export const PlusSegmentedPickerItem: React.ForwardRefExoticComponent<PlusSegmentedPickerItemProps>;

package/react/PlusSegmentedPickerItem.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/segmented-picker-item/index.js";
+
+export const PlusSegmentedPickerItem = forwardRef((props, forwardedRef) => {
+  const {
+    checked,
+    disabled,
+    status,
+    shape,
+    size,
+    groupName,
+    value,
+    ...filteredProps
+  } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-segmented-picker-item",
+    {
+      ...filteredProps,
+      status: props.status,
+      shape: props.shape,
+      size: props.size,
+      groupName: props.groupName,
+      value: props.value,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      checked: props.checked ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusSelect.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import { PlusSelect as PlusSelectElement } from "../dist/components/select/index.js";
+
+export type { PlusSelectElement };
+
+export interface PlusSelectProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Indicates if the select is in an error state. */
+  error?: boolean;
+
+  /** Disables the select, preventing interaction. */
+  disabled?: boolean;
+
+  /** Marks the select as required. */
+  required?: boolean;
+
+  /** Makes the select read-only, preventing changes. */
+  readonly?: boolean;
+
+  /** Enables a clear button to reset the selection. */
+  clearable?: boolean;
+
+  /** Sets the size of the select button. */
+  size?: PlusSelectElement["size"];
+
+  /** Placeholder text for the select trigger input. */
+  placeholder?: PlusSelectElement["placeholder"];
+
+  /** Label text for the select. */
+  label?: PlusSelectElement["label"];
+
+  /** Caption text displayed below the select. */
+  caption?: PlusSelectElement["caption"];
+
+  /** 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 select is opened */
+  onPlusSelectOpen?: (event: CustomEvent) => void;
+
+  /** Emitted when the select is closed */
+  onPlusSelectClose?: (event: CustomEvent) => void;
+
+  /** Emitted when an item is selected, with the selected item in detail */
+  onPlusSelectSelectedItem?: (event: CustomEvent) => void;
+}
+
+/**
+ * A select component that provides a collapsible menu with selectable options.
+ * Uses Floating UI for intelligent positioning of the select menu.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-select-open** - Emitted when the select is opened
+ * - **plus-select-close** - Emitted when the select is closed
+ * - **plus-select-selected-item** - Emitted when an item is selected, with the selected item in detail
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the select trigger button content
+ * - **suffix** - Slot for adding content to the right side of the trigger button
+ * - **select-item** - Slot for select menu items
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ * - **select** - The select trigger input
+ * - **select-box** - The select list container
+ */
+export const PlusSelect: React.ForwardRefExoticComponent<PlusSelectProps>;

package/react/PlusSelect.js

@@ -0,0 +1,59 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/select/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusSelect = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    error,
+    disabled,
+    required,
+    readonly,
+    clearable,
+    size,
+    placeholder,
+    label,
+    caption,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-select-open", props.onPlusSelectOpen);
+  useEventListener(ref, "plus-select-close", props.onPlusSelectClose);
+  useEventListener(
+    ref,
+    "plus-select-selected-item",
+    props.onPlusSelectSelectedItem,
+  );
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-select",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      placeholder: props.placeholder,
+      label: props.label,
+      caption: props.caption,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      error: props.error ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      required: props.required ? "" : undefined,
+      readonly: props.readonly ? "" : undefined,
+      clearable: props.clearable ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});