@kemu-io/hs-react 0.2.38 → 0.3.0

package/cjs/components/SettingsDialog.js

@@ -0,0 +1,74 @@
+"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("react"),styled_1=__importDefault(require("@emotion/styled")),Dialog_1=__importDefault(require("@mui/material/Dialog")),DialogContent_1=__importDefault(require("@mui/material/DialogContent")),DialogActions_1=__importDefault(require("@mui/material/DialogActions")),IconButton_1=__importDefault(require("@mui/material/IconButton")),re_resizable_1=require("re-resizable"),Fullscreen_1=__importDefault(require("@mui/icons-material/Fullscreen")),FullscreenExit_1=__importDefault(require("@mui/icons-material/FullscreenExit")),KemuThemeWrapper_js_1=__importDefault(require("./KemuThemeWrapper.js")),KemuPrimaryButton_js_1=__importDefault(require("./KemuPrimaryButton.js")),KemuLightButton_js_1=__importDefault(require("./KemuLightButton.js")),ScrollableContainer=styled_1.default.div`
+  height: 100%;
+  overflow-y: auto;
+  padding: 0px 25px;
+  // Add extra pixels for the dialog actions
+  padding-bottom: 54px;
+`,StyledDialogContent=(0,styled_1.default)(DialogContent_1.default)`
+  height: 100%;
+  overflow-y: unset;
+  padding: unset;
+  padding-top: 40px;
+`,Header=styled_1.default.div`
+  line-height: 30px;
+  align-self: center;
+  width: 100%;
+  padding: 10px 25px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: 0px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+`,Title=styled_1.default.h4`
+  font-size: 16px;
+  line-height: 28px;
+  padding-right: 10px;
+  margin-bottom: 0;
+  font-weight: 700;
+  font-family: 'Nunito', 'Segoe UI', arial;
+  color: #6c757d;
+`,ResizableDialog=(0,styled_1.default)(Dialog_1.default)`
+  & .MuiDialog-paper {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: unset;
+    overflow: hidden;
+
+    /* Kemu modal style */
+    border-top-color: var(--kemu-color-primary);
+    border-top-style: solid;
+    border-top-width: 3px;
+    box-shadow: 0 4px 12px 0px rgb(0 0 0 / 28%);
+    border-radius: 10px;
+    background-clip: border-box;
+  }
+
+  & .MuiModal-backdrop {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+`,StyledDialogActions=(0,styled_1.default)(DialogActions_1.default)`
+  position: absolute;
+  margin-top: 20px;
+  width: 100%;
+  padding: 0 25px 20px;
+  bottom: 0;
+  right: 0;
+  background-color: white;
+  z-index: 2;
+  display: flex;
+  gap: 20px;
+`,ExpandButton=(0,styled_1.default)(IconButton_1.default)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  
+  &: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;

package/cjs/components/SvgContainer.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+/**
+ * Container for SVG icons with customizable fill color.
+ *
+ * @example
+ * ```tsx
+ * <SvgContainer fill="blue">
+ *   <svg>...</svg>
+ * </SvgContainer>
+ * ```
+ */
+export interface SvgContainerProps {
+	fill?: string;
+	children?: ReactNode;
+}
+declare const SvgContainer: ({ fill, children }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	SvgContainer as default,
+};
+
+export {};

package/cjs/components/SvgContainer.js

@@ -0,0 +1,9 @@
+"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"),styled_1=__importDefault(require("@emotion/styled")),StyledSvgContainer=styled_1.default.div`
+  fill: ${e=>e.fill||"white"};
+  margin-top: 10px;
+
+  svg {
+    width: 38px;
+    height: 38px;
+  }
+`,SvgContainer=({fill:e,children:t})=>(0,jsx_runtime_1.jsx)(StyledSvgContainer,{fill:e,children:t});exports.default=SvgContainer;

package/cjs/components/WidgetBody.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A container for widget body content. Provides centered flexbox layout with padding.
+ *
+ * @example
+ * ```tsx
+ * <WidgetBody>
+ *   <div>Widget content</div>
+ * </WidgetBody>
+ * ```
+ */
+declare const WidgetBody: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export {
+	WidgetBody as default,
+};
+
+export {};

package/cjs/components/WidgetBody.js

@@ -0,0 +1,9 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const styled_1=__importDefault(require("@emotion/styled")),WidgetBody=styled_1.default.div`
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;exports.default=WidgetBody;

package/cjs/components/WidgetContainer.d.ts

@@ -3,6 +3,11 @@ export type WrapperProps = {
 	cHeight?: number | string;
 	noPadding?: boolean;
 	noBorderRadius?: boolean;
+	/**
+	 * Overrides the default widget color from the manifest.
+	 * If not set, the widget will use the color defined in its manifest file.
+	 */
+	overrideColor?: string;
 };
 export type WidthLessProps = Omit<WrapperProps, "cWidth" | "cHeight"> & {
 	width?: number | string;

package/cjs/components/WidgetContainer.js

@@ -1,12 +1,13 @@
 "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"),styled_1=__importDefault(require("@emotion/styled")),constants_js_1=require("../constants.js"),react_1=require("react"),InstanceContext_js_1=require("../lib/InstanceContext.js"),WidgetContainer=styled_1.default.div`
   width: ${({cWidth:e})=>"number"==typeof e?`${e}px`:e||"64px"};
   height: ${({cHeight:e})=>"number"==typeof e?`${e}px`:e||"64px"};
-  background-color: ${({manifest:e,disabled:t,serviceOnline:s})=>t||!s?"#bbb":e.color};
+  background-color: ${({manifest:e,disabled:t,serviceOnline:r,overrideColor:i})=>t||!r?"#bbb":i||e.color};
   ${({noBorderRadius:e})=>e?"":"border-radius: 8px;"}
   ${({noPadding:e})=>e?"":"padding: 6px;"}
 
   /* Add a shadow when the widget is selected */
   .${constants_js_1.WIDGET_SELECTED_CLS} & {
-    box-shadow: 0px 0px 7px 1px ${({manifest:e,disabled:t,serviceOnline:s})=>t||!s?"#bbb":e.color};
+    box-shadow: 0px 0px 7px 1px
+      ${({manifest:e,disabled:t,serviceOnline:r,overrideColor:i})=>t||!r?"#bbb":i||e.color};
   }
-`,Wrap=e=>{const t=(0,react_1.useContext)(InstanceContext_js_1.WidgetInstanceContext).getWidgetProps(),{className:s,width:r,height:n,...i}=e;return(0,jsx_runtime_1.jsx)(WidgetContainer,{cWidth:r,cHeight:n,...i,...t,className:`k-hs-wrap ${s||""}`,children:e.children})};exports.default=Wrap;
+`,Wrap=e=>{const t=(0,react_1.useContext)(InstanceContext_js_1.WidgetInstanceContext).getWidgetProps(),{className:r,width:i,height:n,...o}=e,s=t.variantId?t.manifest.variants?.find((e=>e.id===t.variantId)):null,a=s?s.color||t.manifest.color:void 0;return(0,jsx_runtime_1.jsx)(WidgetContainer,{cWidth:i,cHeight:n,...o,...t,className:`k-hs-wrap ${r||""}`,overrideColor:e.overrideColor||a,children:e.children})};exports.default=Wrap;

package/cjs/components/index.d.ts

@@ -1,7 +1,194 @@
 import { CSSObject } from '@emotion/styled';
+import { Theme } from '@mui/material';
 import React$1 from 'react';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
+/**
+ * A theme wrapper component that provides Kemu's default Material-UI theme.
+ * Can be overridden with a custom theme.
+ *
+ * @example
+ * Using default theme:
+ * ```tsx
+ * <KemuThemeWrapper>
+ *   <MyComponent />
+ * </KemuThemeWrapper>
+ * ```
+ *
+ * @example
+ * With custom theme override:
+ * ```tsx
+ * const customTheme = createTheme({
+ *   palette: {
+ *     primary: {
+ *       main: '#ff0000',
+ *     },
+ *   },
+ * });
+ *
+ * <KemuThemeWrapper theme={customTheme}>
+ *   <MyComponent />
+ * </KemuThemeWrapper>
+ * ```
+ */
+export interface KemuThemeWrapperProps {
+	children: React$1.ReactNode;
+	theme?: Theme;
+}
+export declare const KemuThemeWrapper: ({ children, theme }: KemuThemeWrapperProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A base widget component with settings bar, icon support, and customizable layout.
+ *
+ * @example
+ * Basic usage with custom icon:
+ * ```tsx
+ * const MyIcon = () => <svg>...</svg>;
+ *
+ * <BaseWidget
+ *   onOpenSettings={() => setSettingsOpen(true)}
+ *   customIcon={<MyIcon />}
+ * >
+ *   <div>Widget Content</div>
+ * </BaseWidget>
+ * ```
+ *
+ * @example
+ * Without settings:
+ * ```tsx
+ * <BaseWidget
+ *   showSettings={false}
+ *   width={100}
+ *   height={150}
+ * >
+ *   <div>My Widget</div>
+ * </BaseWidget>
+ * ```
+ *
+ * @example
+ * With custom icon color:
+ * ```tsx
+ * <BaseWidget
+ *   onOpenSettings={handleSettings}
+ *   settingsIconColor="#333"
+ *   customIcon={<CustomIcon />}
+ * >
+ *   <div>Content</div>
+ * </BaseWidget>
+ * ```
+ */
+export interface BaseWidgetProps {
+	children?: React$1.ReactNode;
+	showSettings?: boolean;
+	onOpenSettings?: () => void;
+	width?: number;
+	height?: number;
+	showIcon?: boolean;
+	customIcon?: React$1.ReactNode;
+	settingsIconColor?: string;
+	customTheme?: Theme;
+}
+export declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, showIcon, customIcon, settingsIconColor, customTheme, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A checkbox field component with label, wrapped in a horizontal field layout.
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false);
+ *
+ * <CheckboxField
+ *   label="Enable feature"
+ *   checked={enabled}
+ *   onChange={(checked) => setEnabled(checked)}
+ * />
+ * ```
+ */
+export type CheckboxFieldProps = {
+	onChange?: (checked: boolean) => void;
+	checked: boolean;
+	label: string;
+	disabled?: boolean;
+};
+export declare const CheckboxField: (props: CheckboxFieldProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A vertical field container for form elements. Use for stacking form fields vertically.
+ *
+ * @example
+ * ```tsx
+ * <Field mb={20}>
+ *   <label>Name</label>
+ *   <input type="text" />
+ * </Field>
+ * ```
+ */
+export interface FieldProps {
+	mb?: number;
+	mt?: number;
+}
+export declare const Field: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React$1.ElementType;
+} & FieldProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * A field component with a built-in label. Use this for simple form fields.
+ *
+ * @example
+ * ```tsx
+ * <FieldWithLabel label="Username">
+ *   <input type="text" />
+ * </FieldWithLabel>
+ * ```
+ *
+ * @example
+ * With Material-UI components:
+ * ```tsx
+ * <FieldWithLabel label="Select Option">
+ *   <Select>
+ *     <MenuItem value="1">Option 1</MenuItem>
+ *   </Select>
+ * </FieldWithLabel>
+ * ```
+ */
+export interface FieldWithLabelProps {
+	label: string;
+	children?: React$1.ReactNode;
+	mb?: number;
+	mt?: number;
+}
+export declare const FieldWithLabel: ({ label, children, mb, mt }: FieldWithLabelProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A horizontal field container for form elements. Use for placing form fields side by side.
+ *
+ * @example
+ * ```tsx
+ * <HorizontalField alignItems="center">
+ *   <label>Option:</label>
+ *   <input type="checkbox" />
+ * </HorizontalField>
+ * ```
+ */
+export interface HorizontalFieldProps {
+	alignItems?: string;
+}
+export declare const HorizontalField: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React$1.ElementType;
+} & HorizontalFieldProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export interface KemuLightButtonProps {
+	noShadow?: boolean;
+}
+export declare const KemuLightButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent/index.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+	ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "children" | "style" | "className" | "size" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loading" | "loadingIndicator" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "loadingPosition" | "variant"> & {
+	theme?: import("@emotion/react").Theme;
+} & KemuLightButtonProps, {}, {}>;
+export interface KemuPrimaryButtonProps {
+	noShadow?: boolean;
+}
+export declare const KemuPrimaryButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button/Button.js").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent/index.js").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+	ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "children" | "style" | "className" | "size" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "loading" | "loadingIndicator" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "loadingPosition" | "variant"> & {
+	theme?: import("@emotion/react").Theme;
+} & KemuPrimaryButtonProps, {}, {}>;
 export type ResizableContainerProps = {
 	css?: CSSObject;
 	minWidth?: number;
@@ -63,11 +250,146 @@ export type WrapperProps = {
  * ```
  */
 export declare const ResizableContainer: (props: ResizableContainerProps & WrapperProps) => import("react/jsx-runtime.js").JSX.Element;
+/**
+ * A settings bar component with default settings icon. Renders in the top-right corner.
+ *
+ * @example
+ * With default settings icon:
+ * ```tsx
+ * <SettingsBar
+ *   iconColor="white"
+ *   onSettingsClick={() => console.log('Settings clicked')}
+ * />
+ * ```
+ *
+ * @example
+ * With custom content:
+ * ```tsx
+ * <SettingsBar iconColor="#333">
+ *   <IconButton onClick={handleClick}>
+ *     <CustomIcon />
+ *   </IconButton>
+ * </SettingsBar>
+ * ```
+ */
+export interface SettingsBarProps {
+	iconColor?: string;
+	onSettingsClick?: () => void;
+	children?: React$1.ReactNode;
+}
+export declare const SettingsBar: ({ iconColor, onSettingsClick, children }: SettingsBarProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A resizable and expandable settings dialog with customizable buttons and styling.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSave={() => {
+ *     // Save settings
+ *     setOpen(false);
+ *   }}
+ * >
+ *   <FieldWithLabel label="Setting 1">
+ *     <input type="text" />
+ *   </FieldWithLabel>
+ * </SettingsDialog>
+ * ```
+ *
+ * @example
+ * Disable resizing and expansion:
+ * ```tsx
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   onSave={handleSave}
+ *   disableResizing={true}
+ *   disableExpansion={true}
+ * >
+ *   {children}
+ * </SettingsDialog>
+ * ```
+ *
+ * @example
+ * Custom button text:
+ * ```tsx
+ * <SettingsDialog
+ *   open={open}
+ *   onClose={handleClose}
+ *   onSave={handleSave}
+ *   cancelButtonText="Discard"
+ *   saveButtonText="Apply Changes"
+ * >
+ *   {children}
+ * </SettingsDialog>
+ * ```
+ */
+export interface SettingsDialogProps {
+	title?: string;
+	open: boolean;
+	noHeader?: boolean;
+	onClose: () => void;
+	onSave: () => void;
+	children: React$1.ReactNode;
+	serviceOnline?: boolean;
+	saveDisabled?: boolean;
+	minHeight?: number;
+	minWidth?: number;
+	maxWidth?: number;
+	maxHeight?: number;
+	cancelButtonText?: string;
+	saveButtonText?: string;
+	disableResizing?: boolean;
+	disableExpansion?: boolean;
+	dialogClassName?: string;
+	resizableClassName?: string;
+	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;
+/**
+ * Container for SVG icons with customizable fill color.
+ *
+ * @example
+ * ```tsx
+ * <SvgContainer fill="blue">
+ *   <svg>...</svg>
+ * </SvgContainer>
+ * ```
+ */
+export interface SvgContainerProps {
+	fill?: string;
+	children?: React$1.ReactNode;
+}
+export declare const SvgContainer: ({ fill, children }: SvgContainerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A container for widget body content. Provides centered flexbox layout with padding.
+ *
+ * @example
+ * ```tsx
+ * <WidgetBody>
+ *   <div>Widget content</div>
+ * </WidgetBody>
+ * ```
+ */
+export declare const WidgetBody: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React$1.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type WrapperProps$1 = {
 	cWidth?: number | string;
 	cHeight?: number | string;
 	noPadding?: boolean;
 	noBorderRadius?: boolean;
+	/**
+	 * Overrides the default widget color from the manifest.
+	 * If not set, the widget will use the color defined in its manifest file.
+	 */
+	overrideColor?: string;
 };
 export type WidthLessProps = Omit<WrapperProps$1, "cWidth" | "cHeight"> & {
 	width?: number | string;

package/cjs/components/index.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ResizableContainer=exports.WidgetContainer=void 0;const WidgetContainer_js_1=__importDefault(require("./WidgetContainer.js"));exports.WidgetContainer=WidgetContainer_js_1.default;const ResizableContainer_js_1=__importDefault(require("./ResizableContainer.js"));exports.ResizableContainer=ResizableContainer_js_1.default;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.KemuLightButton=exports.KemuPrimaryButton=exports.KemuThemeWrapper=exports.BaseWidget=exports.WidgetBody=exports.FieldWithLabel=exports.CheckboxField=exports.HorizontalField=exports.Field=exports.SettingsBar=exports.SvgContainer=exports.SettingsDialog=exports.ResizableContainer=exports.WidgetContainer=void 0;const WidgetContainer_js_1=__importDefault(require("./WidgetContainer.js"));exports.WidgetContainer=WidgetContainer_js_1.default;const ResizableContainer_js_1=__importDefault(require("./ResizableContainer.js"));exports.ResizableContainer=ResizableContainer_js_1.default;const SettingsDialog_js_1=__importDefault(require("./SettingsDialog.js"));exports.SettingsDialog=SettingsDialog_js_1.default;const SvgContainer_js_1=__importDefault(require("./SvgContainer.js"));exports.SvgContainer=SvgContainer_js_1.default;const SettingsBar_js_1=__importDefault(require("./SettingsBar.js"));exports.SettingsBar=SettingsBar_js_1.default;const Field_js_1=__importDefault(require("./Field.js"));exports.Field=Field_js_1.default;const HorizontalField_js_1=__importDefault(require("./HorizontalField.js"));exports.HorizontalField=HorizontalField_js_1.default;const CheckboxField_js_1=__importDefault(require("./CheckboxField.js"));exports.CheckboxField=CheckboxField_js_1.default;const FieldWithLabel_js_1=__importDefault(require("./FieldWithLabel.js"));exports.FieldWithLabel=FieldWithLabel_js_1.default;const WidgetBody_js_1=__importDefault(require("./WidgetBody.js"));exports.WidgetBody=WidgetBody_js_1.default;const BaseWidget_js_1=__importDefault(require("./BaseWidget.js"));exports.BaseWidget=BaseWidget_js_1.default;const KemuThemeWrapper_js_1=__importDefault(require("./KemuThemeWrapper.js"));exports.KemuThemeWrapper=KemuThemeWrapper_js_1.default;const KemuPrimaryButton_js_1=__importDefault(require("./KemuPrimaryButton.js"));exports.KemuPrimaryButton=KemuPrimaryButton_js_1.default;const KemuLightButton_js_1=__importDefault(require("./KemuLightButton.js"));exports.KemuLightButton=KemuLightButton_js_1.default;

package/cjs/hooks/index.d.ts

@@ -124,6 +124,17 @@ export type WidgetPort = {
 	 * processor execution.
 	 */
 	triggerPort?: boolean;
+	/**
+	 * A path to a markdown file that will be rendered as the ports documentation.
+	 * If provided it will override the default 'description' property. Useful if the documentation of this port requires more than a simple text.
+	 *
+	 * The path can be relative to the service's `docs` folder. For example:
+	 *
+	 * ```
+	 * docs/ports/inputA.md
+	 * ```
+	 */
+	mdHelp?: string;
 };
 export type WidgetState<T extends Record<string, any> = Record<string, unknown>> = T;
 export type TargetOutput = {
@@ -148,6 +159,9 @@ export type TargetOutput = {
 	/** id of the variant that defined the output */
 	variantId?: string;
 };
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+	[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+}[Keys];
 export type WidgetPortStr = Omit<WidgetPort, "type"> & {
 	type: string;
 };
@@ -177,7 +191,20 @@ export type ServiceWidgetVariant<P extends WidgetPort | WidgetPortStr> = {
 	inputs?: P[];
 	outputs?: P[];
 };
-export type ValidPlatformArch = "win-x64" | "win-x86" | "win-arm" | "win-arm64" | "osx-x64" | "osx-arm64";
+/**
+ * A list of supported Linux distributions. This can be extended in the future.
+ * Use 'generic' for distribution-agnostic services.
+ */
+export type LinuxDistribution = 
+/** For distribution-agnostic services that run on most Linux systems. */
+"generic"
+/** Includes Debian, Ubuntu, Linux Mint, etc. (uses APT) */
+ | "debian"
+/** Includes RHEL, Fedora, CentOS, etc. (uses YUM/DNF) */
+ | "rhel"
+/** Includes Arch Linux, Manjaro, etc. (uses Pacman) */
+ | "arch";
+export type ValidPlatformArch = "win-x64" | "win-x86" | "win-arm" | "win-arm64" | "osx-x64" | "osx-arm64" | `linux-${LinuxDistribution}-x64` | `linux-${LinuxDistribution}-arm64`;
 export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
 	/** the unique name defined by the service */
 	name: string;
@@ -187,7 +214,17 @@ export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
 	title?: string;
 	/** a shorten title to be used in the canvas */
 	shortTitle?: string;
+	/** generic description shown when a service is selected from the Hub Services Grid */
 	description: string;
+	/**
+	 * Relative to the markdown file that will be rendered when the user clicks on the 'help' icon for this service.
+	 * The description is meant to be short and include video/sample images or a link to the description page. Eg:
+	 *
+	 * ```
+	 * docs/help.md
+	 * ```
+	 **/
+	mdHelp?: string;
 	processor: ProcessorType;
 	/** Id of the user that published the service */
 	author: string;
@@ -269,6 +306,32 @@ export type ServiceManifest<P extends WidgetPort | WidgetPortStr> = {
 	 * and be visually distinct.
 	 */
 	variants?: ServiceWidgetVariant<P>[];
+	/**
+	 * The default variant info. If provided, it allows overriding the default info
+	 * of the service. Useful when the default variant behaviour does not match the service description.
+	 */
+	defaultVariantInfo?: {
+		/**
+		 * The title of the default variant. If provided, it will override the `title` property.
+		 */
+		title?: string;
+		/**
+		 * The short title of the default variant. If provided, it will override the `shortTitle` property.
+		 */
+		shortTitle?: string;
+		/**
+		 * The description of the default variant. If provided, it will override the `description` property.
+		 */
+		description?: string;
+		/**
+		 * The color of the default variant. If provided, it will override the `color` property.
+		 */
+		color?: string;
+		/**
+		 * The SVG icon of the default variant. If provided, it will override the `svgIcon` property.
+		 */
+		svgIcon?: string;
+	};
 	/**
 	 * A list of relative paths to folders containing extra services that are part of this service. Eg:
 	 * ```json
@@ -341,9 +404,6 @@ export type ProcessedManifest<B extends Buffer | ArrayBuffer = Buffer> = Omit<Pa
 		version: string;
 	};
 };
-export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
-	[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
-}[Keys];
 export type DefineDynamicPortsArgs = RequireAtLeastOne<{
 	/**
 	 * Set to null to remove any previously defined ports or