@plusui/library 0.1.0

package/react/PlusBreadcrumbItem.d.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { PlusBreadcrumbItem as PlusBreadcrumbItemElement } from "../dist/components/breadcrumb-item/index.js";
+
+export type { PlusBreadcrumbItemElement };
+
+export interface PlusBreadcrumbItemProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** The URL to navigate to when the item is clicked. If omitted, the item is rendered as text. */
+  href?: PlusBreadcrumbItemElement["href"];
+
+  /** Name of the optional icon to display before the label. Used only if the `prefix` slot is empty. */
+  prefixIcon?: PlusBreadcrumbItemElement["prefixIcon"];
+
+  /** Name of the optional icon to display after the label. Used only if the `suffix` slot is empty. */
+  suffixIcon?: PlusBreadcrumbItemElement["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;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the item's label content.
+ * - **prefix** - Optional slot for content/icon to display before the label. Overrides `prefix-icon` property.
+ * - **suffix** - Optional slot for content/icon to display after the label. Overrides `suffix-icon` property.
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper element.
+ * - **link** - The `plus-link` element (if `href` is provided).
+ * - **text** - The `span` element (if `href` is not provided).
+ * - **prefix** - The prefix container (slot or icon).
+ * - **suffix** - The suffix container (slot or icon).
+ * - **separator** - The separator element.
+ */
+export const PlusBreadcrumbItem: React.ForwardRefExoticComponent<PlusBreadcrumbItemProps>;

package/react/PlusBreadcrumbItem.js

@@ -0,0 +1,25 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/breadcrumb-item/index.js";
+
+export const PlusBreadcrumbItem = forwardRef((props, forwardedRef) => {
+  const { href, prefixIcon, suffixIcon, ...filteredProps } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-breadcrumb-item",
+    {
+      ...filteredProps,
+      href: props.href,
+      "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,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusButton.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+import { PlusButton as PlusButtonElement } from "../dist/components/button/index.js";
+
+export type { PlusButtonElement };
+
+export interface PlusButtonProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Disables the button interaction */
+  disabled?: boolean;
+
+  /** Shows loading spinner and disables interaction */
+  loading?: boolean;
+
+  /** undefined */
+  fullWidth?: boolean;
+
+  /** Determines the visual style of the button
+- filled: Solid background color
+- outlined: Transparent background with border
+- dashed: Transparent background with dashed border
+- text: Text only without background or border */
+  kind?: PlusButtonElement["kind"];
+
+  /** Sets the status/color variant of the button
+- default: Neutral color scheme
+- primary: Brand color scheme
+- success: Green color scheme
+- warning: Yellow color scheme
+- danger: Red color scheme
+- info: Blue color scheme */
+  status?: PlusButtonElement["status"];
+
+  /** Sets the size of the button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusButtonElement["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;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const PlusButton: React.ForwardRefExoticComponent<PlusButtonProps>;

package/react/PlusButton.js

@@ -0,0 +1,29 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/button/index.js";
+
+export const PlusButton = forwardRef((props, forwardedRef) => {
+  const { disabled, loading, fullWidth, kind, status, size, ...filteredProps } =
+    props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-button",
+    {
+      ...filteredProps,
+      kind: props.kind,
+      status: props.status,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? "" : undefined,
+      loading: props.loading ? "" : undefined,
+      "full-width": props.fullWidth ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusButtonGroup.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+import { PlusButtonGroup as PlusButtonGroupElement } from "../dist/components/button-group/index.js";
+
+export type { PlusButtonGroupElement };
+
+export interface PlusButtonGroupProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Determines whether the button group's properties override the properties of its child buttons.
+When true, all buttons in the group will have the same appearance.
+When false, each button can have its own properties. */
+  override?: boolean;
+
+  /** Disables the button interaction */
+  disabled?: boolean;
+
+  /** Shows loading spinner and disables interaction */
+  loading?: boolean;
+
+  /** The orientation of the button group. */
+  orientation?: PlusButtonGroupElement["orientation"];
+
+  /** Determines the visual style of the button
+- filled: Solid background color
+- outlined: Transparent background with border
+- dashed: Transparent background with dashed border
+- text: Text only without background or border */
+  kind?: PlusButtonGroupElement["kind"];
+
+  /** Sets the status/color variant of the button
+- default: Neutral color scheme
+- primary: Brand color scheme
+- success: Green color scheme
+- warning: Yellow color scheme
+- danger: Red color scheme
+- info: Blue color scheme */
+  status?: PlusButtonGroupElement["status"];
+
+  /** Sets the size of the button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusButtonGroupElement["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;
+}
+
+/**
+ * Button group component that groups related buttons together.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the buttons
+ *
+ * ### **CSS Properties:**
+ *  - **--button-group-gap** - Gap between buttons in the group _(default: undefined)_
+ */
+export const PlusButtonGroup: React.ForwardRefExoticComponent<PlusButtonGroupProps>;

package/react/PlusButtonGroup.js

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

package/react/PlusCheckbox.d.ts

@@ -0,0 +1,115 @@
+import React from "react";
+import { PlusCheckbox as PlusCheckboxElement } from "../dist/components/checkbox/index.js";
+
+export type { PlusCheckboxElement };
+
+export interface PlusCheckboxProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the checkbox is checked. */
+  checked?: boolean;
+
+  /** Whether the checkbox is in an indeterminate state. */
+  indeterminate?: boolean;
+
+  /** Whether the checkbox is disabled. */
+  disabled?: boolean;
+
+  /** If true, the checkbox is displayed in an error state. */
+  error?: boolean;
+
+  /** The checkbox's name, submitted as a name/value pair with form data. */
+  name?: PlusCheckboxElement["name"];
+
+  /** The size of the checkbox. */
+  size?: PlusCheckboxElement["size"];
+
+  /** The value associated with the checkbox. Submitted with the form data if checked. */
+  value?: PlusCheckboxElement["value"];
+
+  /** The text label displayed next to the checkbox. If not provided, use the default slot. */
+  text?: PlusCheckboxElement["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 checkbox's checked state changes. */
+  onPlusChange?: (event: CustomEvent) => void;
+
+  /** Emitted when the checkbox gains focus. */
+  onPlusFocus?: (event: CustomEvent) => void;
+
+  /** Emitted when the checkbox loses focus. */
+  onPlusBlur?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-change** - Emitted when the checkbox's checked state changes.
+ * - **plus-focus** - Emitted when the checkbox gains focus.
+ * - **plus-blur** - Emitted when the checkbox loses focus.
+ *
+ * ### **Methods:**
+ *  - **formResetCallback()** - Called when the associated form is reset.
+ * Resets the checkbox to its initial checked state.
+ * We need to specific attribute initialChecked
+ * - **formDisabledCallback(disabled: _boolean_)** - Called when the disabled state of the parent form changes.
+ * - **click()** - Clicks the checkbox
+ * - **focus(options: _FocusOptions_)** - Focuses the checkbox
+ * - **blur()** - Blurs the checkbox
+ *
+ * ### **Slots:**
+ *  - _default_ - The label for the checkbox.
+ *
+ * ### **CSS Properties:**
+ *  - **--checkbox-size** - Controls the size of the checkbox control. Typically maps to sm, md, lg tokens. _(default: undefined)_
+ * - **--checkbox-color-default** - Default background color. _(default: undefined)_
+ * - **--checkbox-color-checked** - Background color when checked. _(default: undefined)_
+ * - **--checkbox-color-border** - Border color. _(default: undefined)_
+ * - **--checkbox-color-border-checked** - Border color when checked. _(default: undefined)_
+ * - **--checkbox-color-icon** - Color of the checkmark/indeterminate icon. _(default: undefined)_
+ * - **--checkbox-border-color-error** - Border color in the error state. _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper (label).
+ * - **control** - The container for the actual checkbox input and its visual representation.
+ * - **checkbox** - The visual representation of the checkbox.
+ * - **icon** - The checkmark or indeterminate icon.
+ * - **label** - The text label container.
+ */
+export const PlusCheckbox: React.ForwardRefExoticComponent<PlusCheckboxProps>;

package/react/PlusCheckbox.js

@@ -0,0 +1,61 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/checkbox/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusCheckbox = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    checked,
+    indeterminate,
+    disabled,
+    error,
+    name,
+    size,
+    value,
+    text,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-change", props.onPlusChange);
+  useEventListener(ref, "plus-focus", props.onPlusFocus);
+  useEventListener(ref, "plus-blur", props.onPlusBlur);
+
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    formResetCallback: () => ref.current.formResetCallback(),
+    formDisabledCallback: (disabled) =>
+      ref.current.formDisabledCallback(disabled),
+    click: () => ref.current.click(),
+    focus: (options) => ref.current.focus(options),
+    blur: () => ref.current.blur(),
+  }));
+
+  return React.createElement(
+    "plus-checkbox",
+    {
+      ref,
+      ...filteredProps,
+      name: props.name,
+      size: props.size,
+      value: props.value,
+      text: props.text,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      checked: props.checked ? "" : undefined,
+      indeterminate: props.indeterminate ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      error: props.error ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusCheckboxGroup.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import { PlusCheckboxGroup as PlusCheckboxGroupElement } from "../dist/components/checkbox-group/index.js";
+
+export type { PlusCheckboxGroupElement };
+
+export interface PlusCheckboxGroupProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether to display the checkboxes vertically. */
+  vertical?: boolean;
+
+  /** Whether the entire group is disabled. */
+  disabled?: boolean;
+
+  /** The selected values in the group. */
+  value?: PlusCheckboxGroupElement["value"];
+
+  /** The size of the checkboxes in the group. */
+  size?: PlusCheckboxGroupElement["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 the value of the group changes (any checkbox is checked/unchecked). */
+  onPlusChange?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-change** - Emitted when the value of the group changes (any checkbox is checked/unchecked).
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for `plus-checkbox` elements.
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The main container element.
+ */
+export const PlusCheckboxGroup: React.ForwardRefExoticComponent<PlusCheckboxGroupProps>;

package/react/PlusCheckboxGroup.js

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