@kemu-io/hs-react 0.2.38 → 0.3.0

package/cjs/types/widgetUI_t.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

package/mjs/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/mjs/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/mjs/components/BaseWidget.js

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

package/mjs/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/mjs/components/CheckboxField.js

@@ -0,0 +1,3 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useCallback}from"react";import HorizontalField from"./HorizontalField.js";import{Checkbox,css,FormControlLabel}from"@mui/material";const CheckboxField=e=>{const o=useCallback((o=>{const l=o.target.checked;e.onChange&&e.onChange(l)}),[e.onChange]);return _jsx(HorizontalField,{children:_jsx(FormControlLabel,{css:css`
+          margin-left: 0px;
+        `,control:_jsx(Checkbox,{style:{paddingRight:8},onChange:o,checked:e.checked,disabled:e.disabled}),label:e.label})})};export default CheckboxField;

package/mjs/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/mjs/components/CommonElements.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";import Button from"@mui/material/Button";export const ButtonWithoutRipple=styled((({...t})=>_jsx(Button,{disableRipple:!0,...t})))``;

package/mjs/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/mjs/components/Field.js

@@ -0,0 +1,9 @@
+import styled from"@emotion/styled";const Field=styled.div`
+  display: flex;
+  margin-bottom: ${t=>t.mb||10}px;
+  flex-direction: column;
+  margin-top: ${t=>t.mt||0}px;
+  label {
+    margin-bottom: 5px;
+  }
+`;export default Field;

package/mjs/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/mjs/components/FieldWithLabel.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import Field from"./Field.js";const FieldWithLabel=({label:e,children:l,mb:s,mt:i})=>_jsxs(Field,{mb:s,mt:i,children:[_jsx("label",{children:e}),l]});export default FieldWithLabel;

package/mjs/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/mjs/components/HorizontalField.js

@@ -0,0 +1,9 @@
+import styled from"@emotion/styled";const HorizontalField=styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  flex-direction: row;
+  align-items: ${t=>t.alignItems||"flex-start"};
+  label {
+    margin-right: 5px;
+  }
+`;export default HorizontalField;

package/mjs/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/mjs/components/KemuLightButton.js

@@ -0,0 +1,43 @@
+import styled from"@emotion/styled";import{ButtonWithoutRipple}from"./CommonElements.js";const KemuLightButton=styled(ButtonWithoutRipple)`
+  background-color: var(--kemu-color-light);
+  border-color: var(--kemu-color-light);
+  color: #191d21;
+  box-shadow: ${({noShadow:o})=>o?"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:o})=>o?"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);
+  }
+`;export default KemuLightButton;

package/mjs/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/mjs/components/KemuPrimaryButton.js

@@ -0,0 +1,43 @@
+import styled from"@emotion/styled";import{ButtonWithoutRipple}from"./CommonElements.js";const KemuPrimaryButton=styled(ButtonWithoutRipple)`
+  color: #fff;
+  box-shadow: ${({noShadow:o})=>o?"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:o})=>o?"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;
+  }
+`;export default KemuPrimaryButton;

package/mjs/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/mjs/components/KemuThemeWrapper.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{ThemeProvider,createTheme}from"@mui/material";export const defaultKemuTheme=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?createTheme(defaultKemuTheme,r):defaultKemuTheme;return _jsx(ThemeProvider,{theme:t,children:e})};export default KemuThemeWrapper;

package/mjs/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/mjs/components/SettingsBar.js

@@ -0,0 +1,8 @@
+import{jsx as _jsx}from"react/jsx-runtime";import styled from"@emotion/styled";import IconButton from"@mui/material/IconButton";import SettingsIcon from"@mui/icons-material/Settings";const SettingsBarContainer=styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+`,SettingsBar=({iconColor:t="white",onSettingsClick:i,children:n})=>_jsx(SettingsBarContainer,{iconColor:t,children:n||(i?_jsx(IconButton,{"aria-label":"settings",onClick:i,children:_jsx(SettingsIcon,{style:{color:t},sx:{fontSize:10}})}):null)});export default SettingsBar;