@muraldevkit/ui-toolkit 1.6.3 → 1.7.1

package/dist/components/button/MrlButton/MrlButton.d.ts

@@ -3,6 +3,10 @@ import { MrlButtonKind, MrlButtonSize, MrlButtonState, ToggleAria, ToggleStyle,
 import { AttrsObject } from '../../../utils';
 import './MrlButton.global.scss';
 interface MrlButtonProps {
+    /**
+     * Applies additional HTML attributes to the button element.
+     */
+    attrs?: AttrsObject;
     /**
      * Allow developers to add badge to buttons.
      */
@@ -12,26 +16,31 @@ interface MrlButtonProps {
      * Allow developers to change the disabled state based on user interactions.
      */
     disabled?: boolean;
+    /**
+     * Allows developers the ability to disable built in event listeners so they can manage user
+     * interactions from the application.
+     */
+    disableEvents?: boolean;
     /**
      * Allow developers to add icon to buttons.
      */
     icon?: React.ReactElement;
     /**
-     * onClick event for the button.
+     * Allows developers to right-align an icon within a button.
      */
-    onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    iconPos?: IconPosition;
     /**
      * Changes the visual emphasis of the button.
      */
     kind?: MrlButtonKind;
     /**
-     * Changes the size of the button so it can scale with its surrounding context.
+     * onClick event for the button.
      */
-    size?: MrlButtonSize;
+    onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
     /**
-     * The textual label describing the button's purpose/action.
+     * Changes the size of the button so it can scale with its surrounding context.
      */
-    text: string;
+    size?: MrlButtonSize;
     /**
      * Changes the state of the button based on user permissions or actions.
      *
@@ -41,12 +50,10 @@ interface MrlButtonProps {
      */
     state: MrlButtonState;
     /**
-     * Selected state variant when the button is a Toggle Button. The visual styles
-     * are also impacted by the "kind" prop. Toggle buttons are only supported
-     * when "kind" is set to either "ghost" or "ghost-inverse". Setting this prop
-     * informs the component that this is a toggle button and to add that functionality
+     * The textual label describing the button's purpose/action.
+     * Icon buttons require a text label to ensure accessibility.
      */
-    toggleStyle?: ToggleStyle;
+    text: string;
     /**
      * Determines which aria setup to use for various toggle/selected styles.
      * pressed - use for an traditional “toggle button”
@@ -57,22 +64,12 @@ interface MrlButtonProps {
      */
     toggleAria?: ToggleAria;
     /**
-     * Allows developers to right-align an icon within a button.
-     */
-    iconPos?: IconPosition;
-    /**
-     * Applies additional HTML attributes to the nested `button` element during the
-     * hydration process.
-     * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.
-     * Otherwise, the value object needs to be stringified to not receive `"[Object object]"`.
-     * Example: `attrs='{ "type": "reset" }'`
-     */
-    attrs?: AttrsObject | string;
-    /**
-     * Allows developers the ability to disable built in event listeners so they can manage user
-     * interactions from the application.
+     * Selected state variant when the button is a Toggle Button. The visual styles
+     * are also impacted by the "kind" prop. Toggle buttons are only supported
+     * when "kind" is set to either "ghost" or "ghost-inverse". Setting this prop
+     * informs the component that this is a toggle button and to add that functionality
      */
-    disableEvents?: boolean;
+    toggleStyle?: ToggleStyle;
 }
 export declare const MrlButton: React.ForwardRefExoticComponent<MrlButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/button/MrlIconButton/MrlIconButton.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { MrlButtonKind, MrlButtonSize, MrlButtonState, MrlGhostIconButtonSize, ToggleAria, ToggleStyle } from '../constants';
+import { AttrsObject } from '../../../utils';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../../tooltip/constants';
+import './MrlIconButton.scss';
+interface MrlIconButtonProps {
+    /**
+     * Applies additional HTML attributes to the button element.
+     */
+    attrs?: AttrsObject;
+    /**
+     * Allow developers to add badge to buttons.
+     */
+    badge?: React.ReactElement;
+    /**
+     * Allows developers the ability to disable built in event listeners so they can manage user
+     * interactions from the application.
+     */
+    disableEvents?: boolean;
+    /**
+     * The icon that will be rendered.
+     */
+    icon: React.ReactElement;
+    /**
+     * Changes the visual emphasis of the button.
+     */
+    kind?: MrlButtonKind;
+    /**
+     * onClick event for the button.
+     */
+    onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * The placement of the tooltip in relation to the button.
+     */
+    position?: MrlTooltipPosition;
+    /**
+     * Changes the size of the button so it can scale with its surrounding context.
+     */
+    size?: MrlButtonSize | MrlGhostIconButtonSize;
+    /**
+     * Changes the state of the button based on user permissions or actions.
+     *
+     * Note: The Basic Button does not fully support state="disabled", use
+     * the 'disabled' prop instead. Since it does not support state="disabled",
+     * it also doesn't not support state="selected-disabled".
+     */
+    state: MrlButtonState;
+    /**
+     * The textual label describing the button's purpose/action.
+     * Icon buttons require a text label to ensure accessibility.
+     */
+    text: string;
+    /**
+     * The arrow position of the tooltip in relation to the button.
+     */
+    tipAnchor?: MrlTooltipAnchor;
+    /**
+     * Determines which aria setup to use for various toggle/selected styles.
+     * pressed - use for an traditional “toggle button”
+     * selected - use for tabs and custom select options
+     * expanded - use for menus, panels, and popovers
+     * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)
+     * 		or [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs
+     */
+    toggleAria?: ToggleAria;
+    /**
+     * Selected state variant when the button is a Toggle Button. The visual styles
+     * are also impacted by the "kind" prop. Toggle buttons are only supported
+     * when "kind" is set to either "ghost" or "ghost-inverse". Setting this prop
+     * informs the component that this is a toggle button and to add that functionality
+     */
+    toggleStyle?: ToggleStyle;
+}
+export declare const MrlIconButton: React.ForwardRefExoticComponent<MrlIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/button/MrlIconButton/index.d.ts

@@ -0,0 +1 @@
+export { MrlIconButton } from "./MrlIconButton";

package/dist/components/button/{MrlButton/helpers.d.ts → helpers.d.ts}

@@ -1,4 +1,4 @@
-import { MrlButtonState } from '../constants';
+import { MrlButtonState } from './constants';
 /**
  * Determines if the button is disabled since multiple states represent disabled
  *

package/dist/components/button/index.d.ts

@@ -1 +1,2 @@
 export * from "./MrlButton";
+export * from "./MrlIconButton";

package/dist/components/svg/MrlSvg/MrlSvg.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MrlComponentProps } from '../../../utils';
 import { SVGSize } from '../constants';
-export interface SvgPropTypes extends Omit<MrlComponentProps, "style">, React.ComponentProps<"svg"> {
+export interface SvgPropTypes extends Omit<MrlComponentProps, 'style'>, React.ComponentProps<'svg'> {
     /**
      * @todo: Add optional path prop to point to a static SVG url
      * @todo: Make SVG prop optional and must pass one of path or SVG

package/dist/components/tooltip/constants.d.ts

@@ -1,9 +1,4 @@
 import { AttrsObject } from '../../utils';
-/**
- * Important Note:
- * If you update this file, you need to update the constants file in "component-button"
- * because the Icon button uses the tooltip component. This is known tech debt.
- */
 /**
  * Defines all the values allowed for tooltip props.
  * Used for Storybook and testing