hiver-ui-kit-extended 1.0.0-beta.14 → 1.0.0-beta.16

package/dist/env.prime.d.ts

@@ -1,6 +1,8 @@
 import { BreadCrumbProps } from 'primereact/breadcrumb';
 import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps as ButtonProps_2 } from 'primereact/button';
 import { ChipProps as ChipProps_2 } from 'primereact/chip';
+import { CSSProperties } from 'react';
 import { DataTableProps as DataTableProps_2 } from 'primereact/datatable';
 import { default as default_2 } from 'react';
 import { DialogProps as DialogProps_2 } from 'primereact/dialog';
@@ -101,13 +103,94 @@ export declare interface DialogProps {
     variant?: 'standard' | 'confirmation';
     /** Callback fired when the back button is clicked (for confirmation variant) */
     onBack?: () => void;
+    /** If true, shows the back button in confirmation variant (defaults to true) */
+    showBackButton?: boolean;
+    /** If true, shows the close button (defaults to true) */
+    showCloseButton?: boolean;
     className?: string;
     style?: React.CSSProperties;
     rest?: DialogProps_2;
 }
 
+export declare const IconButton: default_2.FC<IconButtonProps_2>;
+
+declare type IconButtonColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+
+export declare interface IconButtonProps {
+    /** The icon element to display (for HUI) */
+    children?: ReactNode;
+    /** PrimeReact icon class (e.g., 'pi pi-check') */
+    icon?: string;
+    /** Image source for custom icon (alternative to icon prop) */
+    image?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** The color of the button (for HUI) */
+    color?: IconButtonColor;
+    /** The size of the button (for HUI) */
+    size?: IconButtonSize | PrimeReactSize;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional CSS classes for the icon wrapper */
+    iconWrapperClassName?: string;
+    /** Additional CSS classes for the icon/image */
+    iconClassName?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** The edge placement of the button (for HUI) */
+    edge?: 'start' | 'end' | false;
+    /** Aria label for accessibility */
+    ariaLabel?: string;
+    /** Aria label for accessibility (alternative) */
+    'aria-label'?: string;
+    /** Rounded corners */
+    rounded?: boolean;
+    /** Outlined style */
+    outlined?: boolean;
+    /** Text style (no background) */
+    text?: boolean;
+    /** Raised/elevated style */
+    raised?: boolean;
+}
+
+declare interface IconButtonProps_2 extends Omit<ButtonProps_2, 'icon' | 'size'> {
+    /** PrimeReact icon class (e.g., 'pi pi-check') */
+    icon?: string;
+    /** Image source for custom icon (alternative to icon prop) */
+    image?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Click handler */
+    onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
+    /** Additional CSS classes for the button */
+    className?: string;
+    /** Additional CSS classes for the icon wrapper */
+    iconWrapperClassName?: string;
+    /** Additional CSS classes for the icon/image */
+    iconClassName?: string;
+    /** Aria label for accessibility */
+    ariaLabel?: string;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Severity/color variant */
+    /** Size variant */
+    size?: Size;
+    /** Rounded corners */
+    rounded?: boolean;
+    /** Outlined style */
+    outlined?: boolean;
+}
+
+declare type IconButtonSize = 'small' | 'medium' | 'large';
+
 declare type IconType = ReactNode | string;
 
+declare type PrimeReactSize = 'sm' | 'md' | 'lg' | 'xl';
+
 export declare const PrimeReactTheme: {
     primitive: {
         borderRadius: {
@@ -998,6 +1081,8 @@ declare interface PrimeReactThemeProviderProps {
     theme?: typeof PrimeReactTheme;
 }
 
+declare type Size = 'sm' | 'md' | 'lg' | 'xl';
+
 export declare type SxProps = React.CSSProperties | ((theme: any) => React.CSSProperties);
 
 export declare const Tab: default_2.FC<TabProps>;

package/dist/env.prime.js

@@ -3392,6 +3392,10 @@ const Toast = forwardRef(({ position = "top-right", className }, ref) => {
 });
 Toast.displayName = "Toast";
 
+const closeIcon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%3e%3cpath%20d='M10.5%203.5L3.5%2010.5M3.5%203.5L10.5%2010.5'%20stroke='%2364758B'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+
+const backIcon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%3e%3cpath%20d='M13.3334%208H2.66675M2.66675%208L6.66675%2012M2.66675%208L6.66675%204'%20stroke='%23334155'%20stroke-width='1.3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+
 function Dialog(props) {
   const {
     children,
@@ -3407,6 +3411,8 @@ function Dialog(props) {
     footer,
     variant = "confirmation",
     onBack,
+    showBackButton = true,
+    showCloseButton = true,
     ...rest
   } = props;
   const handleHide = () => {
@@ -3440,21 +3446,37 @@ function Dialog(props) {
       onClose({}, "backdropClick");
     }
   };
+  const handleClose = () => {
+    if (onClose) {
+      onClose({}, "backdropClick");
+    }
+  };
   const renderHeader = () => {
     if (variant === "confirmation" && title) {
-      return /* @__PURE__ */ jsxs("div", { className: "omni-dialog-header-confirmation", children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: "omni-dialog-header-confirmation", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-start gap-2.5", children: [
+          showBackButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "omni-dialog-back-button",
+              onClick: handleBack,
+              "aria-label": "Go back",
+              children: /* @__PURE__ */ jsx("img", { src: backIcon, alt: "Close" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "omni-dialog-title-confirmation", children: title })
+        ] }),
+        showCloseButton && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: "omni-dialog-back-button",
-            onClick: handleBack,
-            "aria-label": "Go back",
-            children: /* @__PURE__ */ jsx("i", { className: "pi pi-arrow-left" })
+            className: "omni-dialog-close-button",
+            onClick: handleClose,
+            children: /* @__PURE__ */ jsx("img", { src: closeIcon, alt: "Close" })
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "omni-dialog-title-confirmation", children: title })
-      ] });
+        )
+      ] }) });
     }
     return title;
   };
@@ -3657,5 +3679,56 @@ function Typography({
   return /* @__PURE__ */ jsx(Component, { className: classes, ...rest, children: children || text });
 }
 
-export { Breadcrumb, Button, Chip, DataTable, Dialog, Tab, Tabs, TextField, Toast, Typography };
+const IconButton = ({
+  icon,
+  image,
+  alt = "",
+  onClick,
+  className = "",
+  iconWrapperClassName = "",
+  iconClassName = "",
+  ariaLabel,
+  disabled = false,
+  size = "md",
+  rounded = false,
+  outlined = false,
+  text = false,
+  raised = false,
+  ...rest
+}) => {
+  const sizeClass = `icon-button--${size}`;
+  const variantClasses = [
+    outlined && "icon-button--outlined",
+    text && "icon-button--text",
+    rounded && "icon-button--rounded",
+    raised && "icon-button--raised"
+  ].filter(Boolean).join(" ");
+  if (image) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `icon-button ${sizeClass} ${variantClasses} ${className}`.trim(),
+        onClick,
+        "aria-label": ariaLabel,
+        disabled,
+        children: /* @__PURE__ */ jsx("div", { className: `icon-button__icon-wrapper ${iconWrapperClassName}`, children: /* @__PURE__ */ jsx("img", { src: image, alt, className: `icon-button__icon ${iconClassName}` }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      icon,
+      onClick,
+      className,
+      "aria-label": ariaLabel,
+      disabled,
+      rounded,
+      outlined,
+      ...rest
+    }
+  );
+};
+
+export { Breadcrumb, Button, Chip, DataTable, Dialog, IconButton, Tab, Tabs, TextField, Toast, Typography };
 //# sourceMappingURL=env.prime.js.map