@opencxh/ui-kit 3.141.0 → 3.145.0

package/dist/src/action/SegmentedToggle.d.ts

@@ -2,6 +2,11 @@ import { default as React } from 'react';
 export interface SegmentedOption<T extends string> {
     value: T;
     label: React.ReactNode;
+    /**
+     * Accessible name and tooltip, for a segment whose label is an icon. Without
+     * it an icon-only segment announces as an empty tab.
+     */
+    title?: string;
 }
 export interface SegmentedToggleProps<T extends string> {
     options: SegmentedOption<T>[];

package/dist/src/index.d.ts

@@ -13,6 +13,7 @@ export { Link, type LinkProps } from './action/Link';
 export { SegmentedToggle, type SegmentedOption, type SegmentedToggleProps } from './action/SegmentedToggle';
 export { SplitButton, type SplitButtonOption, type SplitButtonProps } from './action/SplitButton';
 export { Checkbox, type CheckboxProps } from './input/Checkbox';
+export { ImageField, type ImageFieldProps } from './input/ImageField';
 export { DatePicker, type DatePickerProps } from './input/DatePicker';
 export { FolderSelect, type FolderDestination, type FolderSelectProps } from './input/FolderSelect';
 export { SearchableTextField, type SearchableTextFieldProps } from './input/SearchableTextField';

package/dist/src/input/ImageField.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+export interface ImageFieldProps {
+    label?: string;
+    /** Current value as a base64 data URI, or undefined when empty. */
+    value?: string;
+    onChange: (value: string | undefined) => void;
+    /** Longest side after downscaling. */
+    maxDimension?: number;
+    /**
+     * Ceiling for the encoded result. The server checks this too — this one is
+     * here so the user finds out before saving, not so the rule is enforced.
+     */
+    maxBytes?: number;
+    /** Preview box shape. */
+    aspect?: "square" | "wide";
+    helperText?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    chooseLabel?: string;
+    removeLabel?: string;
+    /** Shown when the picked file is still too large after downscaling. */
+    tooLargeLabel?: string;
+}
+/**
+ * Pick an image and keep it inline as a base64 data URI.
+ *
+ * For the small brand assets that live on a row rather than in the storage app
+ * — an organisation logo, a help centre favicon. Not for content: an article
+ * image belongs in storage, once storage can serve a public URL.
+ *
+ * The canvas downscale is a courtesy, not a limit. The same ceiling is enforced
+ * server-side by `assertInlineImage`, because anyone can call the API without
+ * going through this field.
+ */
+export declare function ImageField({ label, value, onChange, maxDimension, maxBytes, aspect, helperText, disabled, className, chooseLabel, removeLabel, tooLargeLabel, }: ImageFieldProps): React.JSX.Element;
+/** Roughly how many bytes a data URI's payload decodes to. */
+export declare function approximateBytes(dataUri: string): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.141.0",
+  "version": "3.145.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {