@plusui/library 0.1.7 → 0.1.9

package/react/PlusRating.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/rating/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -29,15 +24,17 @@ export const PlusRating = forwardRef((props, forwardedRef) => {
   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,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       value: props.value,
       max: props.max,

package/react/PlusSegmentedPicker.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/segmented-picker/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -18,12 +13,17 @@ export const PlusSegmentedPicker = forwardRef((props, forwardedRef) => {
     props.onPlusSegmentedPickerItemChanged,
   );
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-segmented-picker",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       status: props.status,
       shape: props.shape,

package/react/PlusSegmentedPickerItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/segmented-picker-item/index.js";
 
 export const PlusSegmentedPickerItem = forwardRef((props, forwardedRef) => {
@@ -13,8 +13,6 @@ export const PlusSegmentedPickerItem = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-segmented-picker-item",
     {

package/react/PlusSelect.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/select/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -32,12 +27,17 @@ export const PlusSelect = forwardRef((props, forwardedRef) => {
     props.onPlusSelectSelectedItem,
   );
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-select",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       placeholder: props.placeholder,

package/react/PlusSelectItem.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/select-item/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -14,12 +9,17 @@ export const PlusSelectItem = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "click", props.onClick);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-select-item",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       text: props.text,

package/react/PlusService.js

@@ -1,9 +1,7 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/service/index.js";
 
 export const PlusService = forwardRef((props, forwardedRef) => {
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-service",
     {

package/react/PlusTab.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tab/index.js";
 
 export const PlusTab = forwardRef((props, forwardedRef) => {
@@ -16,8 +16,6 @@ export const PlusTab = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tab",
     {

package/react/PlusTabGroup.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/tab-group/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -22,12 +17,17 @@ export const PlusTabGroup = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "plus-tabs-change", props.onPlusTabsChange);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tab-group",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       orientation: props.orientation,

package/react/PlusTabPanel.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tab-panel/index.js";
 
 export const PlusTabPanel = forwardRef((props, forwardedRef) => {
   const { active, value, panelClass, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tab-panel",
     {

package/react/PlusTag.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tag/index.js";
 
 export const PlusTag = forwardRef((props, forwardedRef) => {
   const { invert, status, size, radius, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tag",
     {

package/react/PlusText.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/text/index.js";
 
 export const PlusText = forwardRef((props, forwardedRef) => {
   const { kind, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-text",
     {

package/react/PlusTextarea.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/textarea/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -38,17 +33,17 @@ export const PlusTextarea = forwardRef((props, forwardedRef) => {
   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-textarea",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       name: props.name,
       value: props.value,

package/react/PlusToast.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/toast/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -24,12 +19,17 @@ export const PlusToast = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "plus-close", props.onPlusClose);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-toast",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       kind: props.kind,

package/react/PlusToastContainer.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/toast-container/index.js";
 
 export const PlusToastContainer = forwardRef((props, forwardedRef) => {
   const { position, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-toast-container",
     {

package/react/PlusToggle.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/toggle/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -39,17 +34,17 @@ export const PlusToggle = forwardRef((props, forwardedRef) => {
   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,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       name: props.name,
       value: props.value,

package/react/PlusTooltip.js

@@ -1,12 +1,10 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } 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",
     {

package/react/Tailwind.js

@@ -1,9 +1,7 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components//index.js";
 
 export const Tailwind = forwardRef((props, forwardedRef) => {
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "undefined",
     {

package/types/custom-element-jsx.d.ts

@@ -111,6 +111,23 @@ export type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 };
 
 export type PlusButtonGroupProps = {
@@ -250,16 +267,16 @@ export type PlusLinkProps = {
   /** When true, the link becomes non-interactive but maintains normal styling */
   readonly?: boolean;
   /** The URL that the hyperlink points to */
-  href?: string;
+  href?: string | undefined;
   /** Specifies where to display the linked URL
 Common values: _blank, _self, _parent, _top */
-  target?: string;
+  target?: string | undefined;
   /** Specifies the relationship between the current document and the linked document
 Common values: nofollow, noopener, noreferrer */
-  rel?: string;
+  rel?: string | undefined;
   /** Sets the link to download the target URL instead of navigating
 Optional value specifies the suggested filename */
-  download?: string;
+  download?: string | undefined;
   /** When true, displays loading state and disables interaction */
   loading?: boolean;
   /** When true, link opens in new tab with secure attributes

package/types/custom-element-solidjs.d.ts

@@ -115,6 +115,23 @@ type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 } & JSX.DirectiveFunctionAttributes<PlusButton> &
   JSX.OnAttributes<PlusButton> &
   JSX.OnCaptureAttributes<PlusButton>;
@@ -266,16 +283,16 @@ type PlusLinkProps = {
   /** When true, the link becomes non-interactive but maintains normal styling */
   readonly?: boolean;
   /** The URL that the hyperlink points to */
-  href?: string;
+  href?: string | undefined;
   /** Specifies where to display the linked URL
 Common values: _blank, _self, _parent, _top */
-  target?: string;
+  target?: string | undefined;
   /** Specifies the relationship between the current document and the linked document
 Common values: nofollow, noopener, noreferrer */
-  rel?: string;
+  rel?: string | undefined;
   /** Sets the link to download the target URL instead of navigating
 Optional value specifies the suggested filename */
-  download?: string;
+  download?: string | undefined;
   /** When true, displays loading state and disables interaction */
   loading?: boolean;
   /** When true, link opens in new tab with secure attributes

package/types/custom-element-svelte.d.ts

@@ -88,6 +88,23 @@ type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 };
 
 type PlusButtonGroupProps = {
@@ -227,16 +244,16 @@ type PlusLinkProps = {
   /** When true, the link becomes non-interactive but maintains normal styling */
   readonly?: boolean;
   /** The URL that the hyperlink points to */
-  href?: string;
+  href?: string | undefined;
   /** Specifies where to display the linked URL
 Common values: _blank, _self, _parent, _top */
-  target?: string;
+  target?: string | undefined;
   /** Specifies the relationship between the current document and the linked document
 Common values: nofollow, noopener, noreferrer */
-  rel?: string;
+  rel?: string | undefined;
   /** Sets the link to download the target URL instead of navigating
 Optional value specifies the suggested filename */
-  download?: string;
+  download?: string | undefined;
   /** When true, displays loading state and disables interaction */
   loading?: boolean;
   /** When true, link opens in new tab with secure attributes

package/types/custom-element-vuejs.d.ts

@@ -51,6 +51,23 @@ type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 };
 
 type PlusButtonGroupProps = {
@@ -190,16 +207,16 @@ type PlusLinkProps = {
   /** When true, the link becomes non-interactive but maintains normal styling */
   readonly?: boolean;
   /** The URL that the hyperlink points to */
-  href?: string;
+  href?: string | undefined;
   /** Specifies where to display the linked URL
 Common values: _blank, _self, _parent, _top */
-  target?: string;
+  target?: string | undefined;
   /** Specifies the relationship between the current document and the linked document
 Common values: nofollow, noopener, noreferrer */
-  rel?: string;
+  rel?: string | undefined;
   /** Sets the link to download the target URL instead of navigating
 Optional value specifies the suggested filename */
-  download?: string;
+  download?: string | undefined;
   /** When true, displays loading state and disables interaction */
   loading?: boolean;
   /** When true, link opens in new tab with secure attributes

package/vscode.html-custom-data.json

@@ -94,7 +94,41 @@
           "description": "Shows loading spinner and disables interaction",
           "values": []
         },
-        { "name": "full-width", "values": [] }
+        { "name": "full-width", "values": [] },
+        {
+          "name": "href",
+          "description": "When provided, renders as an anchor link instead of a button",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Specifies where to display the linked URL\nCommon values: _blank, _self, _parent, _top",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "Specifies the relationship between the current document and the linked document\nCommon values: nofollow, noopener, noreferrer",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "Sets the link to download the target URL instead of navigating\nOptional value specifies the suggested filename",
+          "values": []
+        },
+        {
+          "name": "external",
+          "description": "When true, link opens in new tab with secure attributes\nAutomatically sets target=\"_blank\" and rel=\"noopener noreferrer\"",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "Specifies the button type for form interactions\nOnly applies when rendering as a button (no href)",
+          "values": [
+            { "name": "button" },
+            { "name": "submit" },
+            { "name": "reset" }
+          ]
+        }
       ],
       "references": []
     },