@kemu-io/hs-react 0.2.39 → 0.3.0

package/cjs/WidgetWrapper.d.ts

@@ -126,6 +126,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 = {
@@ -150,6 +161,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;
 };
@@ -179,7 +193,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;
@@ -189,7 +216,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;
@@ -271,6 +308,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
@@ -343,9 +406,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

package/cjs/components/BaseWidget.d.ts

@@ -0,0 +1,61 @@
+import { Theme } from '@mui/material';
+import { ReactNode } from 'react';
+
+/**
+ * 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?: ReactNode;
+	showSettings?: boolean;
+	onOpenSettings?: () => void;
+	width?: number;
+	height?: number;
+	showIcon?: boolean;
+	customIcon?: ReactNode;
+	settingsIconColor?: string;
+	customTheme?: Theme;
+}
+declare const BaseWidget: ({ children, showSettings, onOpenSettings, width, height, showIcon, customIcon, settingsIconColor, customTheme, }: BaseWidgetProps) => import("react/jsx-runtime.js").JSX.Element;
+
+export {
+	BaseWidget as default,
+};
+
+export {};

package/cjs/components/BaseWidget.js

@@ -0,0 +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`
+          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;

package/cjs/components/CheckboxField.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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;
+};
+declare const CheckboxField: (props: CheckboxFieldProps) => import("react/jsx-runtime.js").JSX.Element;
+
+export {
+	CheckboxField as default,
+};
+
+export {};

package/cjs/components/CheckboxField.js

@@ -0,0 +1,3 @@
+"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"),HorizontalField_js_1=__importDefault(require("./HorizontalField.js")),material_1=require("@mui/material"),CheckboxField=e=>{const t=(0,react_1.useCallback)((t=>{const r=t.target.checked;e.onChange&&e.onChange(r)}),[e.onChange]);return(0,jsx_runtime_1.jsx)(HorizontalField_js_1.default,{children:(0,jsx_runtime_1.jsx)(material_1.FormControlLabel,{css:material_1.css`
+          margin-left: 0px;
+        `,control:(0,jsx_runtime_1.jsx)(material_1.Checkbox,{style:{paddingRight:8},onChange:t,checked:e.checked,disabled:e.disabled}),label:e.label})})};exports.default=CheckboxField;

package/cjs/components/CommonElements.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from '@mui/material';
+
+export declare const ButtonWithoutRipple: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").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;
+}, {}, {}>;
+
+export {};

package/cjs/components/CommonElements.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ButtonWithoutRipple=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_1=__importDefault(require("@emotion/styled")),Button_1=__importDefault(require("@mui/material/Button"));exports.ButtonWithoutRipple=(0,styled_1.default)((({...t})=>(0,jsx_runtime_1.jsx)(Button_1.default,{disableRipple:!0,...t})))``;

package/cjs/components/Field.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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;
+}
+declare const Field: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React.ElementType;
+} & FieldProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export {
+	Field as default,
+};
+
+export {};

package/cjs/components/Field.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")),Field=styled_1.default.div`
+  display: flex;
+  margin-bottom: ${e=>e.mb||10}px;
+  flex-direction: column;
+  margin-top: ${e=>e.mt||0}px;
+  label {
+    margin-bottom: 5px;
+  }
+`;exports.default=Field;

package/cjs/components/FieldWithLabel.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+/**
+ * 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?: ReactNode;
+	mb?: number;
+	mt?: number;
+}
+declare const FieldWithLabel: ({ label, children, mb, mt }: FieldWithLabelProps) => import("react/jsx-runtime.js").JSX.Element;
+
+export {
+	FieldWithLabel as default,
+};
+
+export {};

package/cjs/components/FieldWithLabel.js

@@ -0,0 +1 @@
+"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"),Field_js_1=__importDefault(require("./Field.js")),FieldWithLabel=({label:e,children:t,mb:i,mt:l})=>(0,jsx_runtime_1.jsxs)(Field_js_1.default,{mb:i,mt:l,children:[(0,jsx_runtime_1.jsx)("label",{children:e}),t]});exports.default=FieldWithLabel;

package/cjs/components/HorizontalField.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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;
+}
+declare const HorizontalField: import("@emotion/styled").StyledComponent<{
+	theme?: import("@emotion/react").Theme;
+	as?: React.ElementType;
+} & HorizontalFieldProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export {
+	HorizontalField as default,
+};
+
+export {};

package/cjs/components/HorizontalField.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")),HorizontalField=styled_1.default.div`
+  display: flex;
+  margin-bottom: 10px;
+  flex-direction: row;
+  align-items: ${e=>e.alignItems||"flex-start"};
+  label {
+    margin-right: 5px;
+  }
+`;exports.default=HorizontalField;

package/cjs/components/KemuLightButton.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material';
+
+export interface KemuLightButtonProps {
+	noShadow?: boolean;
+}
+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 {
+	KemuLightButton as default,
+};
+
+export {};

package/cjs/components/KemuLightButton.js

@@ -0,0 +1,43 @@
+"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")),CommonElements_js_1=require("./CommonElements.js"),KemuLightButton=(0,styled_1.default)(CommonElements_js_1.ButtonWithoutRipple)`
+  background-color: var(--kemu-color-light);
+  border-color: var(--kemu-color-light);
+  color: #191d21;
+  box-shadow: ${({noShadow:e})=>e?"unset":"0 2px 6px var(--kemu-color-light)"};
+
+  margin-left: .25rem;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 24px;
+  padding: .3rem .8rem;
+  letter-spacing: .5px;
+  border-radius: .25rem;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  height: initial;
+  display: inline-flex;
+
+  &:hover:not(:disabled) {
+    box-shadow: ${({noShadow:e})=>e?"unset":"0 2px 6px var(--kemu-color-light-darken-10)"};
+    color: #7866ff;
+    border-color: #7866ff;
+    background: #ffffff;
+
+    &:active {
+      color: #3229d9;
+      border-color: #3229d9;
+      box-shadow: unset;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.65;
+    pointer-events: none;
+    background: rgba(24, 33, 45, 0.04);
+  }
+`;exports.default=KemuLightButton;

package/cjs/components/KemuPrimaryButton.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material';
+
+export interface KemuPrimaryButtonProps {
+	noShadow?: boolean;
+}
+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 {
+	KemuPrimaryButton as default,
+};
+
+export {};

package/cjs/components/KemuPrimaryButton.js

@@ -0,0 +1,43 @@
+"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")),CommonElements_js_1=require("./CommonElements.js"),KemuPrimaryButton=(0,styled_1.default)(CommonElements_js_1.ButtonWithoutRipple)`
+  color: #fff;
+  box-shadow: ${({noShadow:e})=>e?"none":"0 2px 6px var(--kemu-color-primary)"};
+  background-color: var(--kemu-color-primary);
+  border-color: var(--kemu-color-primary);
+  
+  margin-left: .25rem;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 24px;
+  padding: .3rem .8rem;
+  letter-spacing: .5px;
+  border-radius: .25rem;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  height: auto;
+  height: initial;
+  display: inline-flex;
+
+  &:hover:not(:disabled) {
+    border-color: transparent;
+    background-color: var(--kemu-color-primary-darken-10);
+    box-shadow: ${({noShadow:e})=>e?"none":"0 2px 6px var(--kemu-color-primary-darken-10)"};
+
+    &:active {
+      border-color: transparent;
+      background-color: var(--kemu-color-primary-darken-20);
+      box-shadow: unset;
+    }
+  }
+
+
+  &:disabled {
+    opacity: 0.65;
+    pointer-events: none;
+  }
+`;exports.default=KemuPrimaryButton;

package/cjs/components/KemuThemeWrapper.d.ts

@@ -0,0 +1,44 @@
+import { Theme } from '@mui/material';
+import { 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: ReactNode;
+	theme?: Theme;
+}
+export declare const defaultKemuTheme: Theme;
+declare const KemuThemeWrapper: ({ children, theme }: KemuThemeWrapperProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	KemuThemeWrapper as default,
+	Theme,
+};
+
+export {};

package/cjs/components/KemuThemeWrapper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.defaultKemuTheme=void 0;const jsx_runtime_1=require("react/jsx-runtime"),material_1=require("@mui/material");exports.defaultKemuTheme=(0,material_1.createTheme)({palette:{primary:{main:"#4e3eff"}},typography:{fontFamily:'Nunito, "Segoe UI", arial'},components:{MuiButton:{styleOverrides:{root:{textTransform:"none"}}},MuiTab:{styleOverrides:{root:{textTransform:"none"}}},MuiChip:{styleOverrides:{root:{textTransform:"none"}}}}});const KemuThemeWrapper=({children:e,theme:r})=>{const t=r?(0,material_1.createTheme)(exports.defaultKemuTheme,r):exports.defaultKemuTheme;return(0,jsx_runtime_1.jsx)(material_1.ThemeProvider,{theme:t,children:e})};exports.default=KemuThemeWrapper;

package/cjs/components/SettingsBar.d.ts

@@ -0,0 +1,36 @@
+import React$1 from 'react';
+
+/**
+ * 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;
+}
+declare const SettingsBar: ({ iconColor, onSettingsClick, children }: SettingsBarProps) => import("react/jsx-runtime").JSX.Element;
+
+export {
+	SettingsBar as default,
+};
+
+export {};

package/cjs/components/SettingsBar.js

@@ -0,0 +1,8 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const jsx_runtime_1=require("react/jsx-runtime"),styled_1=__importDefault(require("@emotion/styled")),IconButton_1=__importDefault(require("@mui/material/IconButton")),Settings_1=__importDefault(require("@mui/icons-material/Settings")),SettingsBarContainer=styled_1.default.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+`,SettingsBar=({iconColor:t="white",onSettingsClick:e,children:i})=>(0,jsx_runtime_1.jsx)(SettingsBarContainer,{iconColor:t,children:i||(e?(0,jsx_runtime_1.jsx)(IconButton_1.default,{"aria-label":"settings",onClick:e,children:(0,jsx_runtime_1.jsx)(Settings_1.default,{style:{color:t},sx:{fontSize:10}})}):null)});exports.default=SettingsBar;

package/cjs/components/SettingsDialog.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+
+/**
+ * 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: 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;
+}
+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 {
+	SettingsDialog as default,
+};
+
+export {};