@kemu-io/hs-react 0.3.0 → 0.3.3

package/cjs/components/BaseWidget.d.ts

@@ -47,12 +47,17 @@ export interface BaseWidgetProps {
 	onOpenSettings?: () => void;
 	width?: number;
 	height?: number;
+	iconWidth?: number;
+	iconHeight?: number;
 	showIcon?: boolean;
 	customIcon?: ReactNode;
 	settingsIconColor?: string;
 	customTheme?: Theme;
+	svgContainerClassName?: string;
+	widgetContainerClassName?: string;
+	widgetBodyClassName?: string;
 }
-declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, showIcon, customIcon, settingsIconColor, customTheme, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, iconWidth, iconHeight, showIcon, customIcon, settingsIconColor, customTheme, svgContainerClassName, widgetContainerClassName, widgetBodyClassName, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	BaseWidget as default,

package/cjs/components/BaseWidget.js

@@ -1,6 +1,6 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("@emotion/react"),WidgetContainer_js_1=__importDefault(require("./WidgetContainer.js")),SettingsBar_js_1=__importDefault(require("./SettingsBar.js")),WidgetBody_js_1=__importDefault(require("./WidgetBody.js")),SvgContainer_js_1=__importDefault(require("./SvgContainer.js")),KemuThemeWrapper_js_1=__importDefault(require("./KemuThemeWrapper.js")),BaseWidget=({children:e,showSettings:t=!0,onOpenSettings:i,width:r=84,height:s=134,showIcon:_=!0,customIcon:n,settingsIconColor:o="white",customTheme:u})=>(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{theme:u,children:(0,jsx_runtime_1.jsxs)(WidgetContainer_js_1.default,{width:r,height:s,css:react_1.css`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("@emotion/react"),WidgetContainer_js_1=__importDefault(require("./WidgetContainer.js")),SettingsBar_js_1=__importDefault(require("./SettingsBar.js")),WidgetBody_js_1=__importDefault(require("./WidgetBody.js")),SvgContainer_js_1=__importDefault(require("./SvgContainer.js")),KemuThemeWrapper_js_1=__importDefault(require("./KemuThemeWrapper.js")),BaseWidget=({children:e,showSettings:t=!0,onOpenSettings:i,width:s=84,height:r=134,iconWidth:n=38,iconHeight:_=38,showIcon:a=!0,customIcon:o,settingsIconColor:u="white",customTheme:l,svgContainerClassName:d,widgetContainerClassName:m,widgetBodyClassName:c})=>(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{theme:l,children:(0,jsx_runtime_1.jsxs)(WidgetContainer_js_1.default,{className:m,width:s,height:r,css:react_1.css`
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
-        `,children:[t&&i&&(0,jsx_runtime_1.jsx)(SettingsBar_js_1.default,{iconColor:o,onSettingsClick:i}),(0,jsx_runtime_1.jsxs)(WidgetBody_js_1.default,{children:[_&&n&&(0,jsx_runtime_1.jsx)(SvgContainer_js_1.default,{children:n}),e]})]})});exports.default=BaseWidget;
+        `,children:[t&&i&&(0,jsx_runtime_1.jsx)(SettingsBar_js_1.default,{iconColor:u,onSettingsClick:i}),(0,jsx_runtime_1.jsxs)(WidgetBody_js_1.default,{className:c,children:[a&&o&&(0,jsx_runtime_1.jsx)(SvgContainer_js_1.default,{width:n,height:_,className:d,children:o}),e]})]})});exports.default=BaseWidget;

package/cjs/components/KemuPrimaryButton.js

@@ -39,5 +39,6 @@
   &:disabled {
     opacity: 0.65;
     pointer-events: none;
+    color: #ffffffb0;
   }
 `;exports.default=KemuPrimaryButton;

package/cjs/components/SettingsDialog.d.ts

@@ -63,6 +63,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -72,7 +74,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	SettingsDialog as default,

package/cjs/components/SettingsDialog.js

@@ -8,7 +8,7 @@
   height: 100%;
   overflow-y: unset;
   padding: unset;
-  padding-top: 40px;
+  padding-top: 20px;
 `,Header=styled_1.default.div`
   line-height: 30px;
   align-self: center;
@@ -53,7 +53,7 @@
   position: absolute;
   margin-top: 20px;
   width: 100%;
-  padding: 0 25px 20px;
+  padding: 10px 25px 20px;
   bottom: 0;
   right: 0;
   background-color: white;
@@ -71,4 +71,4 @@
   &:hover {
     background-color: rgba(255, 255, 255, 1);
   }
-`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:r,serviceOnline:l=!0,saveDisabled:n=!1,minHeight:s=400,minWidth:d=500,maxWidth:u,maxHeight:_,cancelButtonText:m="Cancel",saveButtonText:p="Save",disableResizing:c=!1,disableExpansion:x=!1,dialogClassName:h,resizableClassName:g,dialogContentClassName:b,dialogActionsClassName:f})=>{const[j,D]=(0,react_1.useState)({width:d,height:s}),[y,C]=(0,react_1.useState)(!1),[w,S]=(0,react_1.useState)({width:d,height:s}),k=(0,react_1.useCallback)(((e,t,i,o)=>{if(c)return;const a={width:i.offsetWidth,height:i.offsetHeight};D(a)}),[c]),v=(0,react_1.useCallback)(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),z=(0,react_1.useCallback)((()=>{if(y)D(w),C(!1);else{S(j);const e=window.innerWidth-180,t=window.innerHeight-120-60;D({width:Math.max(d,e),height:Math.max(s,t)}),C(!0)}}),[y,j,w,d,s]),q={pointerEvents:"none"},B=!x,K=!c&&!y,N=(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[!i&&(0,jsx_runtime_1.jsx)(Header,{children:(0,jsx_runtime_1.jsx)(Title,{children:e})}),B&&(0,jsx_runtime_1.jsx)(ExpandButton,{onClick:z,size:"small",children:y?(0,jsx_runtime_1.jsx)(FullscreenExit_1.default,{}):(0,jsx_runtime_1.jsx)(Fullscreen_1.default,{})}),(0,jsx_runtime_1.jsx)(StyledDialogContent,{className:b,children:(0,jsx_runtime_1.jsx)(ScrollableContainer,{children:r})}),(0,jsx_runtime_1.jsxs)(StyledDialogActions,{className:f,children:[(0,jsx_runtime_1.jsx)(KemuLightButton_js_1.default,{onClick:o,children:m}),(0,jsx_runtime_1.jsx)(KemuPrimaryButton_js_1.default,{disabled:!l||n,onClick:a,children:p})]})]});return(0,jsx_runtime_1.jsx)(ResizableDialog,{onClose:v,open:t,className:h,children:(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{children:c?(0,jsx_runtime_1.jsx)("div",{className:g,style:{width:j.width,height:j.height},children:N}):(0,jsx_runtime_1.jsx)(re_resizable_1.Resizable,{enable:{top:K,right:K,bottom:K,left:K,topRight:K,bottomRight:K,bottomLeft:K,topLeft:K},handleStyles:{bottomLeft:q,bottomRight:{zIndex:2},bottom:q,top:q,topLeft:q,topRight:q},minHeight:s,minWidth:d,maxWidth:u,maxHeight:_,size:j,onResizeStop:k,className:g,children:N})})})};exports.default=SettingsDialog;
+`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:r,serviceOnline:l=!0,saveDisabled:n=!1,minHeight:s=250,minWidth:d=450,maxWidth:u,maxHeight:_=(window.visualViewport?.height??window.innerHeight)-100,initialHeight:m=Math.min(800,(window.visualViewport?.height??window.innerHeight)-100),initialWidth:h=450,cancelButtonText:p="Cancel",saveButtonText:c="Save",disableResizing:g=!1,disableExpansion:x=!1,dialogClassName:b,resizableClassName:f,dialogContentClassName:j,dialogActionsClassName:D})=>{const[w,y]=(0,react_1.useState)({width:h,height:m}),[C,v]=(0,react_1.useState)(!1),[S,k]=(0,react_1.useState)({width:h,height:m}),z=(0,react_1.useCallback)(((e,t,i,o)=>{if(g)return;const a={width:i.offsetWidth,height:i.offsetHeight};y(a)}),[g]),q=(0,react_1.useCallback)(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),B=(0,react_1.useCallback)((()=>{if(C)y(S),v(!1);else{k(w);const e=window.innerWidth-180,t=window.innerHeight-120-60;y({width:Math.max(d,e),height:Math.max(s,t)}),v(!0)}}),[C,w,S,d,s]),H={pointerEvents:"none"},K=!x,N=!g&&!C,W=(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[!i&&(0,jsx_runtime_1.jsx)(Header,{children:(0,jsx_runtime_1.jsx)(Title,{children:e})}),K&&(0,jsx_runtime_1.jsx)(ExpandButton,{onClick:B,size:"small",children:C?(0,jsx_runtime_1.jsx)(FullscreenExit_1.default,{}):(0,jsx_runtime_1.jsx)(Fullscreen_1.default,{})}),(0,jsx_runtime_1.jsx)(StyledDialogContent,{className:j,children:(0,jsx_runtime_1.jsx)(ScrollableContainer,{children:r})}),(0,jsx_runtime_1.jsxs)(StyledDialogActions,{className:D,children:[(0,jsx_runtime_1.jsx)(KemuLightButton_js_1.default,{onClick:o,children:p}),(0,jsx_runtime_1.jsx)(KemuPrimaryButton_js_1.default,{disabled:!l||n,onClick:a,children:c})]})]});return(0,jsx_runtime_1.jsx)(ResizableDialog,{onClose:q,open:t,className:b,children:(0,jsx_runtime_1.jsx)(KemuThemeWrapper_js_1.default,{children:g?(0,jsx_runtime_1.jsx)("div",{className:f,style:{width:w.width,height:w.height},children:W}):(0,jsx_runtime_1.jsx)(re_resizable_1.Resizable,{enable:{top:N,right:N,bottom:N,left:N,topRight:N,bottomRight:N,bottomLeft:N,topLeft:N},handleStyles:{bottomLeft:H,bottomRight:{zIndex:2},bottom:H,top:H,topLeft:H,topRight:H},minHeight:s,minWidth:d,maxWidth:u,maxHeight:_,size:w,onResizeStop:z,className:f,children:W})})})};exports.default=SettingsDialog;

package/cjs/components/SvgContainer.d.ts

@@ -13,8 +13,11 @@ import { ReactNode } from 'react';
 export interface SvgContainerProps {
 	fill?: string;
 	children?: ReactNode;
+	width?: number;
+	height?: number;
+	className?: string;
 }
-declare const SvgContainer: ({ fill, children }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SvgContainer: ({ fill, children, width, height, className }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
 
 export {
 	SvgContainer as default,

package/cjs/components/SvgContainer.js

@@ -3,7 +3,7 @@
   margin-top: 10px;
 
   svg {
-    width: 38px;
-    height: 38px;
+    width: ${e=>e.width||38}px;
+    height: ${e=>e.height||38}px;
   }
-`,SvgContainer=({fill:e,children:t})=>(0,jsx_runtime_1.jsx)(StyledSvgContainer,{fill:e,children:t});exports.default=SvgContainer;
+`,SvgContainer=({fill:e,children:t,width:i,height:l,className:r})=>(0,jsx_runtime_1.jsx)(StyledSvgContainer,{fill:e,width:i,height:l,className:r,children:t});exports.default=SvgContainer;

package/cjs/components/index.d.ts

@@ -82,12 +82,17 @@ export interface BaseWidgetProps {
 	onOpenSettings?: () => void;
 	width?: number;
 	height?: number;
+	iconWidth?: number;
+	iconHeight?: number;
 	showIcon?: boolean;
 	customIcon?: React$1.ReactNode;
 	settingsIconColor?: string;
 	customTheme?: Theme;
+	svgContainerClassName?: string;
+	widgetContainerClassName?: string;
+	widgetBodyClassName?: string;
 }
-export declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, showIcon, customIcon, settingsIconColor, customTheme, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, iconWidth, iconHeight, showIcon, customIcon, settingsIconColor, customTheme, svgContainerClassName, widgetContainerClassName, widgetBodyClassName, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * A checkbox field component with label, wrapped in a horizontal field layout.
  *
@@ -341,6 +346,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -350,7 +357,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * Container for SVG icons with customizable fill color.
  *
@@ -364,8 +371,11 @@ export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave,
 export interface SvgContainerProps {
 	fill?: string;
 	children?: React$1.ReactNode;
+	width?: number;
+	height?: number;
+	className?: string;
 }
-export declare const SvgContainer: ({ fill, children }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SvgContainer: ({ fill, children, width, height, className }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A container for widget body content. Provides centered flexbox layout with padding.
  *

package/mjs/components/BaseWidget.d.ts

@@ -47,12 +47,17 @@ export interface BaseWidgetProps {
 	onOpenSettings?: () => void;
 	width?: number;
 	height?: number;
+	iconWidth?: number;
+	iconHeight?: number;
 	showIcon?: boolean;
 	customIcon?: ReactNode;
 	settingsIconColor?: string;
 	customTheme?: Theme;
+	svgContainerClassName?: string;
+	widgetContainerClassName?: string;
+	widgetBodyClassName?: string;
 }
-declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, showIcon, customIcon, settingsIconColor, customTheme, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, iconWidth, iconHeight, showIcon, customIcon, settingsIconColor, customTheme, svgContainerClassName, widgetContainerClassName, widgetBodyClassName, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	BaseWidget as default,

package/mjs/components/BaseWidget.js

@@ -1,6 +1,6 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{css}from"@emotion/react";import WidgetContainer from"./WidgetContainer.js";import SettingsBar from"./SettingsBar.js";import WidgetBody from"./WidgetBody.js";import SvgContainer from"./SvgContainer.js";import KemuThemeWrapper from"./KemuThemeWrapper.js";const BaseWidget=({children:e,showSettings:t=!0,onOpenSettings:i,width:s=84,height:o=134,showIcon:r=!0,customIcon:n,settingsIconColor:m="white",customTheme:c})=>_jsx(KemuThemeWrapper,{theme:c,children:_jsxs(WidgetContainer,{width:s,height:o,css:css`
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{css}from"@emotion/react";import WidgetContainer from"./WidgetContainer.js";import SettingsBar from"./SettingsBar.js";import WidgetBody from"./WidgetBody.js";import SvgContainer from"./SvgContainer.js";import KemuThemeWrapper from"./KemuThemeWrapper.js";const BaseWidget=({children:e,showSettings:t=!0,onOpenSettings:i,width:s=84,height:o=134,iconWidth:n=38,iconHeight:r=38,showIcon:a=!0,customIcon:m,settingsIconColor:c="white",customTheme:d,svgContainerClassName:g,widgetContainerClassName:h,widgetBodyClassName:l})=>_jsx(KemuThemeWrapper,{theme:d,children:_jsxs(WidgetContainer,{className:h,width:s,height:o,css:css`
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
-        `,children:[t&&i&&_jsx(SettingsBar,{iconColor:m,onSettingsClick:i}),_jsxs(WidgetBody,{children:[r&&n&&_jsx(SvgContainer,{children:n}),e]})]})});export default BaseWidget;
+        `,children:[t&&i&&_jsx(SettingsBar,{iconColor:c,onSettingsClick:i}),_jsxs(WidgetBody,{className:l,children:[a&&m&&_jsx(SvgContainer,{width:n,height:r,className:g,children:m}),e]})]})});export default BaseWidget;

package/mjs/components/KemuPrimaryButton.js

@@ -39,5 +39,6 @@ import styled from"@emotion/styled";import{ButtonWithoutRipple}from"./CommonElem
   &:disabled {
     opacity: 0.65;
     pointer-events: none;
+    color: #ffffffb0;
   }
 `;export default KemuPrimaryButton;

package/mjs/components/SettingsDialog.d.ts

@@ -63,6 +63,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -72,7 +74,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 
 export {
 	SettingsDialog as default,

package/mjs/components/SettingsDialog.js

@@ -8,7 +8,7 @@ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";i
   height: 100%;
   overflow-y: unset;
   padding: unset;
-  padding-top: 40px;
+  padding-top: 20px;
 `,Header=styled.div`
   line-height: 30px;
   align-self: center;
@@ -53,7 +53,7 @@ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";i
   position: absolute;
   margin-top: 20px;
   width: 100%;
-  padding: 0 25px 20px;
+  padding: 10px 25px 20px;
   bottom: 0;
   right: 0;
   background-color: white;
@@ -71,4 +71,4 @@ import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";i
   &:hover {
     background-color: rgba(255, 255, 255, 1);
   }
-`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:l,serviceOnline:n=!0,saveDisabled:r=!1,minHeight:s=400,minWidth:d=500,maxWidth:m,maxHeight:p,cancelButtonText:g="Cancel",saveButtonText:h="Save",disableResizing:c=!1,disableExpansion:x=!1,dialogClassName:u,resizableClassName:b,dialogContentClassName:f,dialogActionsClassName:y})=>{const[C,j]=useState({width:d,height:s}),[w,D]=useState(!1),[S,_]=useState({width:d,height:s}),k=useCallback(((e,t,i,o)=>{if(c)return;const a={width:i.offsetWidth,height:i.offsetHeight};j(a)}),[c]),z=useCallback(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),v=useCallback((()=>{if(w)j(S),D(!1);else{_(C);const e=window.innerWidth-180,t=window.innerHeight-120-60;j({width:Math.max(d,e),height:Math.max(s,t)}),D(!0)}}),[w,C,S,d,s]),B={pointerEvents:"none"},K=!x,N=!c&&!w,R=_jsxs(_Fragment,{children:[!i&&_jsx(Header,{children:_jsx(Title,{children:e})}),K&&_jsx(ExpandButton,{onClick:v,size:"small",children:_jsx(w?FullscreenExit:Fullscreen,{})}),_jsx(StyledDialogContent,{className:f,children:_jsx(ScrollableContainer,{children:l})}),_jsxs(StyledDialogActions,{className:y,children:[_jsx(KemuLightButton,{onClick:o,children:g}),_jsx(KemuPrimaryButton,{disabled:!n||r,onClick:a,children:h})]})]});return _jsx(ResizableDialog,{onClose:z,open:t,className:u,children:_jsx(KemuThemeWrapper,{children:c?_jsx("div",{className:b,style:{width:C.width,height:C.height},children:R}):_jsx(Resizable,{enable:{top:N,right:N,bottom:N,left:N,topRight:N,bottomRight:N,bottomLeft:N,topLeft:N},handleStyles:{bottomLeft:B,bottomRight:{zIndex:2},bottom:B,top:B,topLeft:B,topRight:B},minHeight:s,minWidth:d,maxWidth:m,maxHeight:p,size:C,onResizeStop:k,className:b,children:R})})})};export default SettingsDialog;
+`,SettingsDialog=({title:e="Settings",open:t,noHeader:i=!1,onClose:o,onSave:a,children:l,serviceOnline:n=!0,saveDisabled:r=!1,minHeight:s=250,minWidth:d=450,maxWidth:m,maxHeight:h=(window.visualViewport?.height??window.innerHeight)-100,initialHeight:p=Math.min(800,(window.visualViewport?.height??window.innerHeight)-100),initialWidth:g=450,cancelButtonText:c="Cancel",saveButtonText:x="Save",disableResizing:u=!1,disableExpansion:b=!1,dialogClassName:f,resizableClassName:w,dialogContentClassName:y,dialogActionsClassName:C})=>{const[j,D]=useState({width:g,height:p}),[S,_]=useState(!1),[k,v]=useState({width:g,height:p}),z=useCallback(((e,t,i,o)=>{if(u)return;const a={width:i.offsetWidth,height:i.offsetHeight};D(a)}),[u]),B=useCallback(((e,t)=>{"backdropClick"!==t&&"escapeKeyDown"!==t&&o()}),[o]),H=useCallback((()=>{if(S)D(k),_(!1);else{v(j);const e=window.innerWidth-180,t=window.innerHeight-120-60;D({width:Math.max(d,e),height:Math.max(s,t)}),_(!0)}}),[S,j,k,d,s]),K={pointerEvents:"none"},N=!b,R=!u&&!S,W=_jsxs(_Fragment,{children:[!i&&_jsx(Header,{children:_jsx(Title,{children:e})}),N&&_jsx(ExpandButton,{onClick:H,size:"small",children:_jsx(S?FullscreenExit:Fullscreen,{})}),_jsx(StyledDialogContent,{className:y,children:_jsx(ScrollableContainer,{children:l})}),_jsxs(StyledDialogActions,{className:C,children:[_jsx(KemuLightButton,{onClick:o,children:c}),_jsx(KemuPrimaryButton,{disabled:!n||r,onClick:a,children:x})]})]});return _jsx(ResizableDialog,{onClose:B,open:t,className:f,children:_jsx(KemuThemeWrapper,{children:u?_jsx("div",{className:w,style:{width:j.width,height:j.height},children:W}):_jsx(Resizable,{enable:{top:R,right:R,bottom:R,left:R,topRight:R,bottomRight:R,bottomLeft:R,topLeft:R},handleStyles:{bottomLeft:K,bottomRight:{zIndex:2},bottom:K,top:K,topLeft:K,topRight:K},minHeight:s,minWidth:d,maxWidth:m,maxHeight:h,size:j,onResizeStop:z,className:w,children:W})})})};export default SettingsDialog;

package/mjs/components/SvgContainer.d.ts

@@ -13,8 +13,11 @@ import { ReactNode } from 'react';
 export interface SvgContainerProps {
 	fill?: string;
 	children?: ReactNode;
+	width?: number;
+	height?: number;
+	className?: string;
 }
-declare const SvgContainer: ({ fill, children }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const SvgContainer: ({ fill, children, width, height, className }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
 
 export {
 	SvgContainer as default,

package/mjs/components/SvgContainer.js

@@ -3,7 +3,7 @@ import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";c
   margin-top: 10px;
 
   svg {
-    width: 38px;
-    height: 38px;
+    width: ${t=>t.width||38}px;
+    height: ${t=>t.height||38}px;
   }
-`,SvgContainer=({fill:t,children:i})=>_jsx(StyledSvgContainer,{fill:t,children:i});export default SvgContainer;
+`,SvgContainer=({fill:t,children:i,width:e,height:l,className:h})=>_jsx(StyledSvgContainer,{fill:t,width:e,height:l,className:h,children:i});export default SvgContainer;

package/mjs/components/index.d.ts

@@ -82,12 +82,17 @@ export interface BaseWidgetProps {
 	onOpenSettings?: () => void;
 	width?: number;
 	height?: number;
+	iconWidth?: number;
+	iconHeight?: number;
 	showIcon?: boolean;
 	customIcon?: React$1.ReactNode;
 	settingsIconColor?: string;
 	customTheme?: Theme;
+	svgContainerClassName?: string;
+	widgetContainerClassName?: string;
+	widgetBodyClassName?: string;
 }
-export declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, showIcon, customIcon, settingsIconColor, customTheme, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, iconWidth, iconHeight, showIcon, customIcon, settingsIconColor, customTheme, svgContainerClassName, widgetContainerClassName, widgetBodyClassName, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * A checkbox field component with label, wrapped in a horizontal field layout.
  *
@@ -341,6 +346,8 @@ export interface SettingsDialogProps {
 	minWidth?: number;
 	maxWidth?: number;
 	maxHeight?: number;
+	initialHeight?: number;
+	initialWidth?: number;
 	cancelButtonText?: string;
 	saveButtonText?: string;
 	disableResizing?: boolean;
@@ -350,7 +357,7 @@ export interface SettingsDialogProps {
 	dialogContentClassName?: string;
 	dialogActionsClassName?: string;
 }
-export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave, children, serviceOnline, saveDisabled, minHeight, minWidth, maxWidth, maxHeight, initialHeight, initialWidth, cancelButtonText, saveButtonText, disableResizing, disableExpansion, dialogClassName, resizableClassName, dialogContentClassName, dialogActionsClassName, }: SettingsDialogProps) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * Container for SVG icons with customizable fill color.
  *
@@ -364,8 +371,11 @@ export declare const SettingsDialog: ({ title, open, noHeader, onClose, onSave,
 export interface SvgContainerProps {
 	fill?: string;
 	children?: React$1.ReactNode;
+	width?: number;
+	height?: number;
+	className?: string;
 }
-export declare const SvgContainer: ({ fill, children }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SvgContainer: ({ fill, children, width, height, className }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * A container for widget body content. Provides centered flexbox layout with padding.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kemu-io/hs-react",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Kemu Hub Service library for React",
   "author": "Kemu Pty Ltd",
   "main": "cjs/WidgetWrapper.js",
@@ -40,7 +40,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "re-resizable": "^6.9.17",
+    "re-resizable": "^6.11.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }