@plusui/library 0.1.0

package/react/PlusChip.d.ts

@@ -0,0 +1,102 @@
+import React from "react";
+import { PlusChip as PlusChipElement } from "../dist/components/chip/index.js";
+
+export type { PlusChipElement };
+
+export interface PlusChipProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Toggles inverted color scheme */
+  invert?: boolean;
+
+  /** Shows/hides the dismiss button */
+  dismiss?: boolean;
+
+  /** Disables the chip interaction */
+  disabled?: boolean;
+
+  /** Determines the visual style of the chip
+- filled: Solid background color
+- outlined: Transparent background with border */
+  kind?: PlusChipElement["kind"];
+
+  /** Sets the size of the chip
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusChipElement["size"];
+
+  /** Defines the type of chip
+- default: Standard chip
+- avatar: Chip with avatar support */
+  type?: PlusChipElement["type"];
+
+  /** Sets the status/color variant of the chip
+- default: Neutral color scheme
+- success: Green color scheme
+- warning: Yellow color scheme
+- danger: Red color scheme
+- info: Blue color scheme */
+  status?: PlusChipElement["status"];
+
+  /** Controls the border radius style
+- full: Fully rounded corners
+- rounded: Slightly rounded corners */
+  shape?: PlusChipElement["shape"];
+
+  /** 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 chip content
+ *
+ * ### **CSS Properties:**
+ *  - **--text-color** - Controls the text color of the chip _(default: undefined)_
+ * - **--border-color** - Controls the border color of the chip _(default: undefined)_
+ * - **--bg-default** - Controls the default background color _(default: undefined)_
+ * - **--bg-hovered** - Controls the background color when hovered _(default: undefined)_
+ * - **--bg-pressed** - Controls the background color when pressed _(default: undefined)_
+ * - **--bg-focused** - Controls the background color when focused _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ * - **icon** - The dismiss icon wrapper
+ */
+export const PlusChip: React.ForwardRefExoticComponent<PlusChipProps>;

package/react/PlusChip.js

@@ -0,0 +1,40 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/chip/index.js";
+
+export const PlusChip = forwardRef((props, forwardedRef) => {
+  const {
+    invert,
+    dismiss,
+    disabled,
+    kind,
+    size,
+    type,
+    status,
+    shape,
+    ...filteredProps
+  } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-chip",
+    {
+      ...filteredProps,
+      kind: props.kind,
+      size: props.size,
+      type: props.type,
+      status: props.status,
+      shape: props.shape,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      invert: props.invert ? "" : undefined,
+      dismiss: props.dismiss ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusDivider.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { PlusDivider as PlusDividerElement } from "../dist/components/divider/index.js";
+
+export type { PlusDividerElement };
+
+export interface PlusDividerProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** The orientation of the divider. */
+  orientation?: PlusDividerElement["orientation"];
+
+  /** The Kind of the divider. */
+  kind?: PlusDividerElement["kind"];
+
+  /** The position of the text content (only applicable with hasContent=true) */
+  contentPosition?: PlusDividerElement["contentPosition"];
+
+  /** The thickness of the divider */
+  thickness?: PlusDividerElement["thickness"];
+
+  /** 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;
+
+  /** Whether the divider has content or not */
+  hasContent?: PlusDividerElement["hasContent"];
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for optional divider content (for text dividers)
+ *
+ * ### **CSS Properties:**
+ *  - **--divider-color** - Controls the color of the divider _(default: undefined)_
+ * - **--divider-thickness** - Controls the thickness of the divider _(default: undefined)_
+ * - **--divider-spacing** - Controls the spacing around the divider _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **divider** - The component's base wrapper
+ * - **label** - The text content container
+ */
+export const PlusDivider: React.ForwardRefExoticComponent<PlusDividerProps>;

package/react/PlusDivider.js

@@ -0,0 +1,44 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/divider/index.js";
+import { useProperties } from "./react-utils.js";
+
+export const PlusDivider = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    orientation,
+    kind,
+    contentPosition,
+    thickness,
+    hasContent,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "hasContent", props.hasContent);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-divider",
+    {
+      ref,
+      ...filteredProps,
+      orientation: props.orientation,
+      kind: props.kind,
+      "content-position": props.contentPosition || props["content-position"],
+      thickness: props.thickness,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusDrawer.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+import { PlusDrawer as PlusDrawerElement } from "../dist/components/drawer/index.js";
+
+export type { PlusDrawerElement };
+
+export interface PlusDrawerProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the drawer is open */
+  isOpen?: boolean;
+
+  /** The size of the drawer */
+  size?: PlusDrawerElement["size"];
+
+  /** The position of the drawer */
+  orientation?: PlusDrawerElement["orientation"];
+
+  /** The duration of the animation in milliseconds */
+  animationDuration?: PlusDrawerElement["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;
+}
+
+/**
+ * Sliding panel component that appears from the edge of the screen.
+ * ---
+ *
+ *
+ * ### **Methods:**
+ *  - **hide(): _void_** - Hides the drawer with animation
+ * - **show(): _void_** - Shows the drawer with animation
+ *
+ * ### **Slots:**
+ *  - **header** - The header content of the drawer
+ * - **body** - The main content of the drawer
+ * - **footer** - The footer content of the drawer
+ * - **close** - Custom close button (defaults to an X icon)
+ *
+ * ### **CSS Parts:**
+ *  - **container** - The main container element
+ * - **overlay** - The overlay element
+ * - **drawer** - The drawer element
+ * - **header** - The header element
+ * - **body** - The body element
+ * - **footer** - The footer element
+ * - **close-button** - The close button element
+ */
+export const PlusDrawer: React.ForwardRefExoticComponent<PlusDrawerProps>;

package/react/PlusDrawer.js

@@ -0,0 +1,32 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/drawer/index.js";
+
+export const PlusDrawer = forwardRef((props, forwardedRef) => {
+  const { isOpen, size, orientation, 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-drawer",
+    {
+      ...filteredProps,
+      size: props.size,
+      orientation: props.orientation,
+      "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,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusDropDownItem.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+import { PlusDropDownItem as PlusDropDownItemElement } from "../dist/components/dropdown-item/index.js";
+
+export type { PlusDropDownItemElement };
+
+export interface PlusDropDownItemProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Disables the dropdown item interaction
+When disabled, the item cannot be clicked or selected */
+  disabled?: boolean;
+
+  /** Indicates whether the dropdown item is currently selected
+The selected state is managed by the parent PlusDropdown component */
+  selected?: boolean;
+
+  /** Sets the size of the dropdown item
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusDropDownItemElement["size"];
+
+  /** Sets the text content of the dropdown item
+If provided, this will be used as the item's content,
+and also as the aria-label for accessibility */
+  text?: PlusDropDownItemElement["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 dropdown item is clicked */
+  onClick?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **click** - Emitted when the dropdown item is clicked
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for dropdown 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
+ * - **item** - The listbox item element
+ */
+export const PlusDropDownItem: React.ForwardRefExoticComponent<PlusDropDownItemProps>;

package/react/PlusDropDownItem.js

@@ -0,0 +1,37 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/dropdown-item/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusDropDownItem = 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-dropdown-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,
+  );
+});

package/react/PlusDropdown.d.ts

@@ -0,0 +1,101 @@
+import React from "react";
+import { PlusDropdown as PlusDropdownElement } from "../dist/components/dropdown/index.js";
+
+export type { PlusDropdownElement };
+
+export interface PlusDropdownProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Disables the dropdown interaction */
+  disabled?: boolean;
+
+  /** Sets the size of the dropdown button
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusDropdownElement["size"];
+
+  /** Sets the status/color variant of the dropdown button
+- default: Neutral color scheme
+- primary: Primary color scheme
+- success: Green color scheme
+- warning: Yellow color scheme
+- danger: Red color scheme
+- info: Blue color scheme */
+  status?: PlusDropdownElement["status"];
+
+  /** Determines the visual style of the dropdown button
+- filled: Solid background color
+- outlined: Transparent background with border
+- dashed: Transparent background with dashed border
+- text: No background or border */
+  kind?: PlusDropdownElement["kind"];
+
+  /** Sets the text content of the dropdown button if no default slot is provided */
+  text?: PlusDropdownElement["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 dropdown is opened */
+  onPlusDropdownOpen?: (event: CustomEvent) => void;
+
+  /** Emitted when the dropdown is closed */
+  onPlusDropdownClose?: (event: CustomEvent) => void;
+
+  /** Emitted when an item is selected with the selected item in detail */
+  onPlusDropdownSelectedItem?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-dropdown-open** - Emitted when the dropdown is opened
+ * - **plus-dropdown-close** - Emitted when the dropdown is closed
+ * - **plus-dropdown-selected-item** - Emitted when an item is selected with the selected item in detail
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for the dropdown trigger button content
+ * - **suffix** - Slot for adding content to the right side of the trigger button
+ * - **dropdown-item** - Slot for dropdown menu items
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ * - **button** - The dropdown trigger button
+ * - **dropdown-box** - The dropdown list container
+ */
+export const PlusDropdown: React.ForwardRefExoticComponent<PlusDropdownProps>;

package/react/PlusDropdown.js

@@ -0,0 +1,44 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/dropdown/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusDropdown = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { disabled, size, status, kind, text, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-dropdown-open", props.onPlusDropdownOpen);
+  useEventListener(ref, "plus-dropdown-close", props.onPlusDropdownClose);
+  useEventListener(
+    ref,
+    "plus-dropdown-selected-item",
+    props.onPlusDropdownSelectedItem,
+  );
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-dropdown",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      status: props.status,
+      kind: props.kind,
+      text: props.text,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});