@plusui/library 0.1.2 → 0.1.4

package/react/index.d.ts

@@ -2,10 +2,9 @@ export * from "./Tailwind.js";
 export * from "./PlusAvatar.js";
 export * from "./PlusButton.js";
 export * from "./PlusButtonGroup.js";
-export * from "./PlusIcon.js";
 export * from "./PlusBadge.js";
 export * from "./PlusTag.js";
-export * from "./PlusSvgIcon.js";
+export * from "./PlusIcon.js";
 export * from "./PlusChip.js";
 export * from "./PlusLink.js";
 export * from "./PlusAlert.js";

package/react/index.js

@@ -2,10 +2,9 @@ export * from "./Tailwind.js";
 export * from "./PlusAvatar.js";
 export * from "./PlusButton.js";
 export * from "./PlusButtonGroup.js";
-export * from "./PlusIcon.js";
 export * from "./PlusBadge.js";
 export * from "./PlusTag.js";
-export * from "./PlusSvgIcon.js";
+export * from "./PlusIcon.js";
 export * from "./PlusChip.js";
 export * from "./PlusLink.js";
 export * from "./PlusAlert.js";

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

@@ -72,7 +72,7 @@ export type PlusAvatarProps = {
   /** Size of the avatar
 Can be a predefined size (xs, sm, md, lg, xl) or custom value */
   size?: Size | string;
-  /** Icon class to use when no image is available */
+  /** Icon name to use when no image is available */
   icon?: string;
   /** Toggles inverted color scheme */
   invert?: boolean;
@@ -145,13 +145,6 @@ When false, each button can have its own properties. */
   loading?: boolean;
 };
 
-export type PlusIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
-  /**  */
-  prefix?: IconPrefix;
-};
-
 export type PlusBadgeProps = {
   /** Sets the status/color variant of the badge
 - default: Neutral color scheme
@@ -201,9 +194,15 @@ export type PlusTagProps = {
   ariaLabel?: string;
 };
 
-export type PlusSvgIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
+export type PlusIconProps = {
+  /** Name of the icon to display */
+  "icon-name"?: IconName;
+  /** Style variant of the icon: solid, regular, or light */
+  "icon-style"?: IconStyle;
+  /** Size variant for the icon */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  /** Label for accessibility - will be used as aria-label */
+  label?: string | undefined;
 };
 
 export type PlusChipProps = {
@@ -319,19 +318,19 @@ export type PlusRadioProps = {
   size?: "sm" | "md" | "lg";
   /** Defines the text label for the radio button */
   text?: string | undefined;
-  /** Indicates whether the radio button is checked */
+  /** Whether the radio is checked. */
   checked?: boolean;
-  /** Indicates if the radio button is in an error state */
+  /** Whether the radio is in an error state. */
   error?: boolean;
-  /** Disables the radio button interaction */
+  /** Whether the radio is disabled. */
   disabled?: boolean;
-  /** Makes the radio button readonly (non-interactive but not disabled) */
+  /** Whether the radio is readonly. */
   readonly?: boolean;
-  /** The name of the radio button, used for form submission and radio grouping */
+  /** The radio's name attribute. */
   name?: string;
-  /** Indicates if the radio input is required */
+  /** Whether the radio is required. */
   required?: boolean;
-  /** The value associated with the radio button */
+  /** The radio's value attribute. */
   value?: string;
   /**  */
   input?: HTMLInputElement;
@@ -342,11 +341,11 @@ export type PlusRadioProps = {
 };
 
 export type PlusSegmentedPickerItemProps = {
-  /** Whether the item is checked. */
+  /** The value associated with the item. */
   checked?: boolean;
   /** The status of the item. */
   status?: "default" | "primary";
-  /** Whether the item is disabled. */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
   /** The shape of the item. */
   shape?: "square" | "circle";
@@ -378,16 +377,16 @@ export type PlusRadioGroupProps = {
   name?: string;
   /**  */
   value?: string;
-  /**  */
+  /** Disables all radio buttons in the group. */
   disabled?: boolean;
-  /**  */
+  /** Makes the radio group required for form submission. */
   required?: boolean;
   /** The size of all radio buttons in the group
 - sm: Small size
 - md: Medium size
 - lg: Large size */
   size?: "sm" | "md" | "lg";
-  /** Shows error styling on the radio group */
+  /** Displays the radio buttons in an error state. */
   error?: boolean;
   /** Orientation of the radio buttons
 - horizontal: Radio buttons are arranged side by side
@@ -520,12 +519,12 @@ Available options:
 
 - `true` (default) - An icon representing the status will be displayed.
 - `false` - No icon will be displayed. */
-  statusIcon?: boolean;
+  "status-icon"?: boolean;
   /** Determines whether the arrow should be displayed.
 
 - `true` (default) - Arrow will be displayed.
 - `false` - Arrow will be hidden. */
-  showArrow?: boolean;
+  "show-arrow"?: boolean;
   /**  */
   slots?: Array<HTMLElement>;
   /** Emitted when the popover is opened */
@@ -542,11 +541,9 @@ export type PlusListBoxItemProps = {
 - md: Medium size
 - lg: Large size */
   size?: "sm" | "md" | "lg";
-  /** Disables the list box item interaction
-When disabled, the item cannot be clicked or selected */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
-  /** Sets the selected state of the list box item
-When selected, the item will display with a highlighted background */
+  /** Indicates whether the item is currently selected. */
   selected?: boolean;
   /** Sets the text content of the list box item
 If provided, this will be used as the item's content when no slot content is present */
@@ -632,16 +629,6 @@ export type PlusTooltipProps = {
 };
 
 export type PlusInputProps = {
-  /** The type of input */
-  type?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
-  /** The name of the input */
-  name?: string;
-  /** The value of the input */
-  value?: string;
-  /** The placeholder text */
-  placeholder?: string;
-  /** The size of the input */
-  size?: "sm" | "md" | "lg";
   /** Whether the input should have a clear button */
   clearable?: boolean;
   /** Whether the input is disabled */
@@ -654,6 +641,18 @@ export type PlusInputProps = {
   "password-toggle"?: boolean;
   /** Whether the password is visible */
   "password-visible"?: boolean;
+  /** Whether the input is in an error state */
+  error?: boolean;
+  /** The type of input */
+  type?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
+  /** The name of the input */
+  name?: string;
+  /** The value of the input */
+  value?: string;
+  /** The placeholder text */
+  placeholder?: string;
+  /** The size of the input */
+  size?: "sm" | "md" | "lg";
   /** The label for the input */
   label?: string;
   /** The validation pattern for the input */
@@ -673,23 +672,19 @@ export type PlusInputProps = {
   /** The autocomplete attribute */
   autocomplete?: string;
   /** Whether the input should automatically get focus */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /** The enterkeyhint attribute */
   enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
   /** The inputmode attribute */
   inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
   /** Whether spellcheck is enabled */
-  spellCheck?: boolean;
+  spellCheck?: boolean | undefined;
   /** Caption text to display below the input */
   caption?: string;
-  /** Whether the input is in an error state */
-  error?: boolean;
   /** The error message to display */
   "error-message"?: string;
   /** Whether the input should take up full width */
   "full-width"?: boolean;
-  /** Whether the input is used as part of a select component */
-  isSelect?: boolean;
   /** Icon name for the prefix icon */
   "prefix-icon"?: string;
   /** Icon name for the suffix icon */
@@ -757,15 +752,9 @@ Available options:
 - `primary` (default theme color)
 - `default` (gray - default) */
   status?: "success" | "warning" | "danger" | "info" | "primary" | "default";
-  /** Determines whether a status icon should be displayed in the popconfirm.
-
-- `true` (default) - An icon representing the status will be displayed.
-- `false` - No icon will be displayed. */
+  /** Determines whether a status icon should be displayed in the popconfirm. */
   "status-icon"?: boolean;
-  /** Determines whether the arrow should be displayed.
-
-- `true` (default) - Arrow will be displayed.
-- `false` - Arrow will be hidden. */
+  /** Determines whether the arrow should be displayed. */
   "show-arrow"?: boolean;
   /**  */
   slots?: Array<HTMLElement>;
@@ -1002,6 +991,8 @@ export type PlusSelectProps = {
   caption?: string | undefined;
   /** Enables a clear button to reset the selection. */
   clearable?: boolean;
+  /** Makes the select full width. */
+  "full-width"?: boolean;
 
   /** Emitted when the select is opened */
   "onplus-select-open"?: (e: CustomEvent<never>) => void;
@@ -1035,8 +1026,6 @@ export type PlusToggleProps = {
   /**  */
   "toggle-inactive-icon"?: string | undefined;
   /**  */
-  "icon-size"?: number | undefined;
-  /**  */
   error?: boolean;
   /**  */
   "error-message"?: string;
@@ -1082,9 +1071,9 @@ export type PlusTabProps = {
 - horizontal: Tabs arranged horizontally
 - vertical: Tabs arranged vertically */
   orientation?: "horizontal" | "vertical";
-  /** Icon to display before the tab content */
+  /** Icon name to display before the tab content */
   "prefix-icon"?: string | undefined;
-  /** Icon to display after the tab content */
+  /** Icon name to display after the tab content */
   "suffix-icon"?: string | undefined;
   /** Enables the dismiss button to remove the tab */
   dismissible?: boolean;
@@ -1098,9 +1087,9 @@ This is controlled by the parent tab-group */
 export type PlusTabPanelProps = {
   /** Sets the value of the tab panel, used for matching with a tab */
   value?: string;
-  /** Indicates if the panel is currently visible */
+  /** Indicates whether the panel is currently active/visible. */
   active?: boolean;
-  /** Custom CSS class to apply to the panel */
+  /** An optional class to apply to the panel container. */
   panelClass?: string;
 };
 
@@ -1116,7 +1105,7 @@ export type PlusTabGroupProps = {
   orientation?: "horizontal" | "vertical";
   /** Disables all tabs */
   disabled?: boolean;
-  /** Enables the dismiss button on all tabs */
+  /** Allows individual tabs to be dismissed (closed). */
   dismissible?: boolean;
   /** Currently active tab value */
   value?: string;
@@ -1166,13 +1155,6 @@ export type CustomElements = {
    */
   "plus-button-group": Partial<PlusButtonGroupProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
-
   /**
    *
    * ---
@@ -1198,8 +1180,16 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **CSS Properties:**
+   *  - **--icon-size** - Custom icon size (overrides size variants) _(default: undefined)_
+   * - **--icon-color** - Custom icon color (overrides currentColor) _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper
+   * - **icon** - The SVG icon element
    */
-  "plus-svg-icon": Partial<PlusSvgIconProps & BaseProps & BaseEvents>;
+  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
 
   /**
    *
@@ -1289,6 +1279,9 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The content of the item.
    *
+   * ### **CSS Properties:**
+   *  - **--active-color** - Color of the active indicator _(default: undefined)_
+   *
    * ### **CSS Parts:**
    *  - **label** - The label element.
    * - **input** - The input element.

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

@@ -74,7 +74,7 @@ type PlusAvatarProps = {
   /** Size of the avatar
 Can be a predefined size (xs, sm, md, lg, xl) or custom value */
   size?: Size | string;
-  /** Icon class to use when no image is available */
+  /** Icon name to use when no image is available */
   icon?: string;
   /** Toggles inverted color scheme */
   invert?: boolean;
@@ -153,15 +153,6 @@ When false, each button can have its own properties. */
   JSX.OnAttributes<PlusButtonGroup> &
   JSX.OnCaptureAttributes<PlusButtonGroup>;
 
-type PlusIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
-  /**  */
-  prefix?: IconPrefix;
-} & JSX.DirectiveFunctionAttributes<PlusIcon> &
-  JSX.OnAttributes<PlusIcon> &
-  JSX.OnCaptureAttributes<PlusIcon>;
-
 type PlusBadgeProps = {
   /** Sets the status/color variant of the badge
 - default: Neutral color scheme
@@ -215,12 +206,18 @@ type PlusTagProps = {
   JSX.OnAttributes<PlusTag> &
   JSX.OnCaptureAttributes<PlusTag>;
 
-type PlusSvgIconProps = {
-  /**  */
-  iconName?: IconName | undefined;
-} & JSX.DirectiveFunctionAttributes<PlusSvgIcon> &
-  JSX.OnAttributes<PlusSvgIcon> &
-  JSX.OnCaptureAttributes<PlusSvgIcon>;
+type PlusIconProps = {
+  /** Name of the icon to display */
+  "icon-name"?: IconName;
+  /** Style variant of the icon: solid, regular, or light */
+  "icon-style"?: IconStyle;
+  /** Size variant for the icon */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+  /** Label for accessibility - will be used as aria-label */
+  label?: string | undefined;
+} & JSX.DirectiveFunctionAttributes<PlusIcon> &
+  JSX.OnAttributes<PlusIcon> &
+  JSX.OnCaptureAttributes<PlusIcon>;
 
 type PlusChipProps = {
   /** Determines the visual style of the chip
@@ -341,19 +338,19 @@ type PlusRadioProps = {
   size?: "sm" | "md" | "lg";
   /** Defines the text label for the radio button */
   text?: string | undefined;
-  /** Indicates whether the radio button is checked */
+  /** Whether the radio is checked. */
   checked?: boolean;
-  /** Indicates if the radio button is in an error state */
+  /** Whether the radio is in an error state. */
   error?: boolean;
-  /** Disables the radio button interaction */
+  /** Whether the radio is disabled. */
   disabled?: boolean;
-  /** Makes the radio button readonly (non-interactive but not disabled) */
+  /** Whether the radio is readonly. */
   readonly?: boolean;
-  /** The name of the radio button, used for form submission and radio grouping */
+  /** The radio's name attribute. */
   name?: string;
-  /** Indicates if the radio input is required */
+  /** Whether the radio is required. */
   required?: boolean;
-  /** The value associated with the radio button */
+  /** The radio's value attribute. */
   value?: string;
   /**  */
   "prop:input"?: HTMLInputElement;
@@ -366,11 +363,11 @@ type PlusRadioProps = {
   JSX.OnCaptureAttributes<PlusRadio>;
 
 type PlusSegmentedPickerItemProps = {
-  /** Whether the item is checked. */
+  /** The value associated with the item. */
   checked?: boolean;
   /** The status of the item. */
   status?: "default" | "primary";
-  /** Whether the item is disabled. */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
   /** The shape of the item. */
   shape?: "square" | "circle";
@@ -406,16 +403,16 @@ type PlusRadioGroupProps = {
   name?: string;
   /**  */
   value?: string;
-  /**  */
+  /** Disables all radio buttons in the group. */
   disabled?: boolean;
-  /**  */
+  /** Makes the radio group required for form submission. */
   required?: boolean;
   /** The size of all radio buttons in the group
 - sm: Small size
 - md: Medium size
 - lg: Large size */
   size?: "sm" | "md" | "lg";
-  /** Shows error styling on the radio group */
+  /** Displays the radio buttons in an error state. */
   error?: boolean;
   /** Orientation of the radio buttons
 - horizontal: Radio buttons are arranged side by side
@@ -560,12 +557,12 @@ Available options:
 
 - `true` (default) - An icon representing the status will be displayed.
 - `false` - No icon will be displayed. */
-  statusIcon?: boolean;
+  "status-icon"?: boolean;
   /** Determines whether the arrow should be displayed.
 
 - `true` (default) - Arrow will be displayed.
 - `false` - Arrow will be hidden. */
-  showArrow?: boolean;
+  "show-arrow"?: boolean;
   /**  */
   "prop:slots"?: Array<HTMLElement>;
   /** Emitted when the popover is opened */
@@ -584,11 +581,9 @@ type PlusListBoxItemProps = {
 - md: Medium size
 - lg: Large size */
   size?: "sm" | "md" | "lg";
-  /** Disables the list box item interaction
-When disabled, the item cannot be clicked or selected */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
-  /** Sets the selected state of the list box item
-When selected, the item will display with a highlighted background */
+  /** Indicates whether the item is currently selected. */
   selected?: boolean;
   /** Sets the text content of the list box item
 If provided, this will be used as the item's content when no slot content is present */
@@ -682,16 +677,6 @@ type PlusTooltipProps = {
   JSX.OnCaptureAttributes<PlusTooltip>;
 
 type PlusInputProps = {
-  /** The type of input */
-  type?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
-  /** The name of the input */
-  name?: string;
-  /** The value of the input */
-  value?: string;
-  /** The placeholder text */
-  placeholder?: string;
-  /** The size of the input */
-  size?: "sm" | "md" | "lg";
   /** Whether the input should have a clear button */
   clearable?: boolean;
   /** Whether the input is disabled */
@@ -704,6 +689,18 @@ type PlusInputProps = {
   "password-toggle"?: boolean;
   /** Whether the password is visible */
   "password-visible"?: boolean;
+  /** Whether the input is in an error state */
+  error?: boolean;
+  /** The type of input */
+  type?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
+  /** The name of the input */
+  name?: string;
+  /** The value of the input */
+  value?: string;
+  /** The placeholder text */
+  placeholder?: string;
+  /** The size of the input */
+  size?: "sm" | "md" | "lg";
   /** The label for the input */
   label?: string;
   /** The validation pattern for the input */
@@ -723,23 +720,19 @@ type PlusInputProps = {
   /** The autocomplete attribute */
   autocomplete?: string;
   /** Whether the input should automatically get focus */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /** The enterkeyhint attribute */
   enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
   /** The inputmode attribute */
   inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
   /** Whether spellcheck is enabled */
-  spellCheck?: boolean;
+  spellCheck?: boolean | undefined;
   /** Caption text to display below the input */
   caption?: string;
-  /** Whether the input is in an error state */
-  error?: boolean;
   /** The error message to display */
   "error-message"?: string;
   /** Whether the input should take up full width */
   "full-width"?: boolean;
-  /** Whether the input is used as part of a select component */
-  isSelect?: boolean;
   /** Icon name for the prefix icon */
   "prefix-icon"?: string;
   /** Icon name for the suffix icon */
@@ -809,15 +802,9 @@ Available options:
 - `primary` (default theme color)
 - `default` (gray - default) */
   status?: "success" | "warning" | "danger" | "info" | "primary" | "default";
-  /** Determines whether a status icon should be displayed in the popconfirm.
-
-- `true` (default) - An icon representing the status will be displayed.
-- `false` - No icon will be displayed. */
+  /** Determines whether a status icon should be displayed in the popconfirm. */
   "status-icon"?: boolean;
-  /** Determines whether the arrow should be displayed.
-
-- `true` (default) - Arrow will be displayed.
-- `false` - Arrow will be hidden. */
+  /** Determines whether the arrow should be displayed. */
   "show-arrow"?: boolean;
   /**  */
   "prop:slots"?: Array<HTMLElement>;
@@ -1078,6 +1065,8 @@ type PlusSelectProps = {
   caption?: string | undefined;
   /** Enables a clear button to reset the selection. */
   clearable?: boolean;
+  /** Makes the select full width. */
+  "full-width"?: boolean;
 
   /** Emitted when the select is opened */
   "on:plus-select-open"?: (e: CustomEvent<never>) => void;
@@ -1113,8 +1102,6 @@ type PlusToggleProps = {
   /**  */
   "toggle-inactive-icon"?: string | undefined;
   /**  */
-  "icon-size"?: number | undefined;
-  /**  */
   error?: boolean;
   /**  */
   "error-message"?: string;
@@ -1162,9 +1149,9 @@ type PlusTabProps = {
 - horizontal: Tabs arranged horizontally
 - vertical: Tabs arranged vertically */
   orientation?: "horizontal" | "vertical";
-  /** Icon to display before the tab content */
+  /** Icon name to display before the tab content */
   "prefix-icon"?: string | undefined;
-  /** Icon to display after the tab content */
+  /** Icon name to display after the tab content */
   "suffix-icon"?: string | undefined;
   /** Enables the dismiss button to remove the tab */
   dismissible?: boolean;
@@ -1180,9 +1167,9 @@ This is controlled by the parent tab-group */
 type PlusTabPanelProps = {
   /** Sets the value of the tab panel, used for matching with a tab */
   value?: string;
-  /** Indicates if the panel is currently visible */
+  /** Indicates whether the panel is currently active/visible. */
   active?: boolean;
-  /** Custom CSS class to apply to the panel */
+  /** An optional class to apply to the panel container. */
   panelClass?: string;
 } & JSX.DirectiveFunctionAttributes<PlusTabPanel> &
   JSX.OnAttributes<PlusTabPanel> &
@@ -1200,7 +1187,7 @@ type PlusTabGroupProps = {
   orientation?: "horizontal" | "vertical";
   /** Disables all tabs */
   disabled?: boolean;
-  /** Enables the dismiss button on all tabs */
+  /** Allows individual tabs to be dismissed (closed). */
   dismissible?: boolean;
   /** Currently active tab value */
   value?: string;
@@ -1252,13 +1239,6 @@ export type CustomElements = {
    */
   "plus-button-group": Partial<PlusButtonGroupProps & BaseProps & BaseEvents>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
-
   /**
    *
    * ---
@@ -1284,8 +1264,16 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **CSS Properties:**
+   *  - **--icon-size** - Custom icon size (overrides size variants) _(default: undefined)_
+   * - **--icon-color** - Custom icon color (overrides currentColor) _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper
+   * - **icon** - The SVG icon element
    */
-  "plus-svg-icon": Partial<PlusSvgIconProps & BaseProps & BaseEvents>;
+  "plus-icon": Partial<PlusIconProps & BaseProps & BaseEvents>;
 
   /**
    *
@@ -1375,6 +1363,9 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The content of the item.
    *
+   * ### **CSS Properties:**
+   *  - **--active-color** - Color of the active indicator _(default: undefined)_
+   *
    * ### **CSS Parts:**
    *  - **label** - The label element.
    * - **input** - The input element.