@kemu-io/hs-react 0.3.0 → 0.3.1

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/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;

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.
  *
@@ -364,8 +369,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/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;

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.
  *
@@ -364,8 +369,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.1",
   "description": "Kemu Hub Service library for React",
   "author": "Kemu Pty Ltd",
   "main": "cjs/WidgetWrapper.js",