@plusui/library 0.1.0

package/react/PlusAccordion.js

@@ -0,0 +1,47 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/accordion/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusAccordion = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    expand,
+    isGrouped,
+    isLast,
+    isFirst,
+    disabled,
+    size,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-accordion-toggle", props.onPlusAccordionToggle);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-accordion",
+    {
+      ref,
+      ...filteredProps,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      expand: props.expand ? "" : undefined,
+      "is-grouped": props.isGrouped ? "" : undefined,
+      "is-last": props.isLast ? "" : undefined,
+      "is-first": props.isFirst ? "" : undefined,
+      disabled: props.disabled ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusAccordionGroup.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+import { PlusAccordionGroup as PlusAccordionGroupElement } from "../dist/components/accordion-group/index.js";
+
+export type { PlusAccordionGroupElement };
+
+export interface PlusAccordionGroupProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether multiple accordions can be expanded at the same time */
+  multi?: boolean;
+
+  /** The visual style of the accordion group */
+  kind?: PlusAccordionGroupElement["kind"];
+
+  /** The size of the accordions in the group */
+  size?: PlusAccordionGroupElement["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;
+}
+
+/**
+ * A container for grouping accordion items together.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - **default** - Accordion items to be grouped
+ *
+ * ### **CSS Parts:**
+ *  - **container** - The container element
+ */
+export const PlusAccordionGroup: React.ForwardRefExoticComponent<PlusAccordionGroupProps>;

package/react/PlusAccordionGroup.js

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

package/react/PlusAlert.d.ts

@@ -0,0 +1,111 @@
+import React from "react";
+import { PlusAlert as PlusAlertElement } from "../dist/components/alert/index.js";
+
+export type { PlusAlertElement };
+
+export interface PlusAlertProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** When true, the alert will be displayed with an inverted color scheme */
+  invert?: boolean;
+
+  /** When true, the alert will be displayed with a dismissible close button */
+  dismissible?: boolean;
+
+  /** When true, the alert will be displayed with a full width */
+  fullWidth?: boolean;
+
+  /** When true, the alert will be hidden */
+  hiddenAlert?: boolean;
+
+  /** Determines the visual style of the alert
+- filled: Solid background color
+- outlined: Transparent background with border
+- dashed: Transparent background with dashed border */
+  kind?: PlusAlertElement["kind"];
+
+  /** The size of the alert */
+  size?: PlusAlertElement["size"];
+
+  /** Sets the status/color variant of the alert
+- 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?: PlusAlertElement["status"];
+
+  /** The message of the alert */
+  message?: PlusAlertElement["message"];
+
+  /** The description of the alert */
+  description?: PlusAlertElement["description"];
+
+  /** The status icon of the alert */
+  statusIcon?: PlusAlertElement["statusIcon"];
+
+  /** The dismiss icon of the alert */
+  dismissIcon?: PlusAlertElement["dismissIcon"];
+
+  /** 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 alert is dismissed */
+  onPlusDismiss?: (event: CustomEvent) => void;
+}
+
+/**
+ * Alert component that displays important messages to users.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **plus-dismiss** - Emitted when the alert is dismissed
+ *
+ * ### **Slots:**
+ *  - **message** - The main message content
+ * - **description** - Additional descriptive content
+ * - **prefix** - Custom status icon
+ * - **dismiss** - Custom dismiss button
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The main container element
+ * - **status-icon** - The status icon container
+ * - **content** - The content container
+ * - **message** - The message container
+ * - **description** - The description container
+ * - **dismiss** - The dismiss button container
+ */
+export const PlusAlert: React.ForwardRefExoticComponent<PlusAlertProps>;

package/react/PlusAlert.js

@@ -0,0 +1,57 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
+import "../dist/components/alert/index.js";
+import { useEventListener } from "./react-utils.js";
+
+export const PlusAlert = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    invert,
+    dismissible,
+    fullWidth,
+    hiddenAlert,
+    kind,
+    size,
+    status,
+    message,
+    description,
+    statusIcon,
+    dismissIcon,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-dismiss", props.onPlusDismiss);
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-alert",
+    {
+      ref,
+      ...filteredProps,
+      kind: props.kind,
+      size: props.size,
+      status: props.status,
+      message: props.message,
+      description: props.description,
+      statusIcon: props.statusIcon,
+      dismissIcon: props.dismissIcon,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      invert: props.invert ? "" : undefined,
+      dismissible: props.dismissible ? "" : undefined,
+      "full-width": props.fullWidth ? "" : undefined,
+      hidden: props.hiddenAlert ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusAvatar.d.ts

@@ -0,0 +1,90 @@
+import React from "react";
+import { PlusAvatar as PlusAvatarElement } from "../dist/components/avatar/index.js";
+
+export type { PlusAvatarElement };
+
+export interface PlusAvatarProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Toggles inverted color scheme */
+  invert?: boolean;
+
+  /** URL of the avatar image */
+  image?: PlusAvatarElement["image"];
+
+  /** Alternative text for the avatar */
+  alt?: PlusAvatarElement["alt"];
+
+  /** Shape of the avatar
+- circle: Circular shape
+- square: Square shape with slight rounding */
+  shape?: PlusAvatarElement["shape"];
+
+  /** Size of the avatar
+Can be a predefined size (xs, sm, md, lg, xl) or custom value */
+  size?: PlusAvatarElement["size"];
+
+  /** Icon class to use when no image is available */
+  icon?: PlusAvatarElement["icon"];
+
+  /** Text to display as initials when no image is available */
+  text?: PlusAvatarElement["text"];
+
+  /** Strategy to use when image fails to load
+- icon: Shows an icon
+- text: Shows text initials
+- custom: Uses fallback slot content */
+  fallbackStrategy?: PlusAvatarElement["fallbackStrategy"];
+
+  /** 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 avatar content
+ * - **fallback** - Optional slot for custom fallback content
+ *
+ * ### **CSS Properties:**
+ *  - **--text-color** - Controls the text color of the avatar _(default: undefined)_
+ * - **--bg-default** - Controls the default background color _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ */
+export const PlusAvatar: React.ForwardRefExoticComponent<PlusAvatarProps>;

package/react/PlusAvatar.js

@@ -0,0 +1,40 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/avatar/index.js";
+
+export const PlusAvatar = forwardRef((props, forwardedRef) => {
+  const {
+    invert,
+    image,
+    alt,
+    shape,
+    size,
+    icon,
+    text,
+    fallbackStrategy,
+    ...filteredProps
+  } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-avatar",
+    {
+      ...filteredProps,
+      image: props.image,
+      alt: props.alt,
+      shape: props.shape,
+      size: props.size,
+      icon: props.icon,
+      text: props.text,
+      fallbackStrategy: props.fallbackStrategy,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      invert: props.invert ? "" : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/react/PlusBadge.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { PlusBadge as PlusBadgeElement } from "../dist/components/badge/index.js";
+
+export type { PlusBadgeElement };
+
+export interface PlusBadgeProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Sets the status/color variant of the badge
+- 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?: PlusBadgeElement["status"];
+
+  /** Sets the size of the badge
+- sm: Small size
+- md: Medium size
+- lg: Large size */
+  size?: PlusBadgeElement["size"];
+
+  /** Sets the position of the badge relative to its content
+- top-right: Top right corner
+- top-left: Top left corner
+- bottom-right: Bottom right corner
+- bottom-left: Bottom left corner
+- '': No specific position */
+  orientation?: PlusBadgeElement["orientation"];
+
+  /** Sets the offset of the badge from its default position
+Format: "x,y" where x and y can be any valid CSS length value
+Example: "10px,5px" or "-5px,-10px" */
+  offset?: PlusBadgeElement["offset"];
+
+  /** Sets the content of the badge
+If not provided, the badge will be displayed as a dot */
+  content?: PlusBadgeElement["content"];
+
+  /** 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 PlusBadge: React.ForwardRefExoticComponent<PlusBadgeProps>;

package/react/PlusBadge.js

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

package/react/PlusBreadcrumb.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+import { PlusBreadcrumb as PlusBreadcrumbElement } from "../dist/components/breadcrumb/index.js";
+
+export type { PlusBreadcrumbElement };
+
+export interface PlusBreadcrumbProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Defines the visual style of the breadcrumb container. */
+  kind?: PlusBreadcrumbElement["kind"];
+
+  /** The type of separator to display between items. */
+  separator?: PlusBreadcrumbElement["separator"];
+
+  /** The size of the breadcrumb items and separators. */
+  size?: PlusBreadcrumbElement["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;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for `plus-breadcrumb-item` elements.
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The main container element (`nav`).
+ */
+export const PlusBreadcrumb: React.ForwardRefExoticComponent<PlusBreadcrumbProps>;

package/react/PlusBreadcrumb.js

@@ -0,0 +1,25 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import "../dist/components/breadcrumb/index.js";
+
+export const PlusBreadcrumb = forwardRef((props, forwardedRef) => {
+  const { kind, separator, size, ...filteredProps } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
+
+  return React.createElement(
+    "plus-breadcrumb",
+    {
+      ...filteredProps,
+      kind: props.kind,
+      separator: props.separator,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});