@uxf/ui 11.80.4 → 11.85.0

package/checkbox-list/checkbox-list.d.ts

@@ -1,6 +1,3 @@
 import React from "react";
-import { CheckboxListProps } from "./types";
-export declare const CheckboxList: {
-    (props: CheckboxListProps): React.JSX.Element;
-    displayName: string;
-};
+import { CheckboxListProps, CheckboxListValueId } from "./types";
+export declare const CheckboxList: React.ForwardRefExoticComponent<CheckboxListProps<CheckboxListValueId, import("./types").CheckboxListOption<CheckboxListValueId>> & React.RefAttributes<HTMLDivElement>>;

package/checkbox-list/checkbox-list.js

@@ -1,4 +1,5 @@
 "use strict";
+"use-client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,7 +30,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const checkbox_input_1 = require("../checkbox-input");
 const form_component_1 = require("../form-component");
-const CheckboxList = (props) => {
+exports.CheckboxList = (0, react_1.forwardRef)((props, ref) => {
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
@@ -41,12 +42,11 @@ const CheckboxList = (props) => {
         props.onChange(newValue);
     };
     const rootClassName = (0, cx_1.cx)("uxf-checkbox-list", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, helperText: props.helperText, hiddenLabel: props.hasHiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, helperText: props.helperText, hiddenLabel: props.hasHiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name, ref: ref },
         react_1.default.createElement("ul", { className: "uxf-checkbox-list__grid" }, props.options.map((option) => {
             var _a;
             return (react_1.default.createElement("li", { key: option.id },
                 react_1.default.createElement(checkbox_input_1.CheckboxInput, { id: `${id}-${option.id}`, isDisabled: option.isDisabled || props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, key: option.id, label: option.label, name: props.name, onBlur: props.onBlur, onChange: (value) => onChange(option.id, value || false), onFocus: props.onFocus, value: (_a = props.value) === null || _a === void 0 ? void 0 : _a.includes(option.id) })));
         }))));
-};
-exports.CheckboxList = CheckboxList;
+});
 exports.CheckboxList.displayName = "UxfUiCheckboxList";

package/checkbox-list/index.d.ts

@@ -1,2 +1,2 @@
 export { CheckboxList } from "./checkbox-list";
-export type { CheckboxListProps } from "./types";
+export type { CheckboxListOption, CheckboxListProps, CheckboxListValueId } from "./types";

package/dialog/dialog.d.ts

@@ -7,7 +7,6 @@ export interface DialogProps {
     children?: ReactNode;
     className?: string;
     context: UseFloatingReturn["context"];
-    isBackdropCloseDisabled?: boolean;
     forwardedRef: Ref<HTMLDivElement>;
     getFloatingProps: GetFloatingElementProps;
     isOpen: boolean;
@@ -17,8 +16,9 @@ type DialogProviderProps = Pick<DialogProps, "variant" | "className" | "children
 export declare const Dialog: React.NamedExoticComponent<DialogProps>;
 type DialogCloseHandler = () => void;
 export declare function useDialog(dialogConfig?: {
-    onDialogClose?: DialogCloseHandler;
     isBackdropCloseDisabled?: boolean;
+    isEscapeKeyCloseDisabled?: boolean;
+    onDialogClose?: DialogCloseHandler;
 }): {
     openDialog: (children: ReactNode) => void;
     DialogProvider: FC<DialogProviderProps>;

package/dialog/dialog.js

@@ -60,7 +60,11 @@ function useDialog(dialogConfig) {
     });
     const click = (0, react_1.useClick)(context);
     const role = (0, react_1.useRole)(context);
-    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown" });
+    const dismiss = (0, react_1.useDismiss)(context, {
+        escapeKey: !(dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.isEscapeKeyCloseDisabled),
+        outsidePress: !(dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.isBackdropCloseDisabled),
+        outsidePressEvent: "mousedown",
+    });
     const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
     const latestContext = (0, use_latest_1.useLatest)(context);
     const DialogProvider = (0, react_2.useCallback)((config) => {

package/icon/icon.stories.js

@@ -40,6 +40,6 @@ function SpriteIcon() {
 }
 function SpriteIconNotExists() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
+    // @ts-ignore
     return react_1.default.createElement(icon_1.Icon, { name: "not-exists", size: 16 });
 }

package/icon/theme.d.ts

@@ -1,5 +1,5 @@
 export interface IconsSet {
-    "": true;
+    [key: string]: true;
 }
 export interface IconColors {
     default: true;

package/modal/modal-provider.js

@@ -31,8 +31,9 @@ exports.ModalProvider = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const [content, setContent] = (0, react_1.useState)();
     const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)({
-        onDialogClose: content === null || content === void 0 ? void 0 : content.onClose,
         isBackdropCloseDisabled: content === null || content === void 0 ? void 0 : content.isBackdropCloseDisabled,
+        isEscapeKeyCloseDisabled: content === null || content === void 0 ? void 0 : content.isEscapeKeyCloseDisabled,
+        onDialogClose: content === null || content === void 0 ? void 0 : content.onClose,
     });
     const openModalHandler = (modal) => {
         openDialog(modal.children);

package/modal/modal.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -14,13 +15,17 @@ function Modal(props) {
         open: props.isOpen,
         onOpenChange(nextOpen, event, reason) {
             if (!props.isBackdropCloseDisabled && (reason === "escape-key" || reason === "outside-press")) {
-                props.close();
+                props.onClose();
             }
         },
     });
     const click = (0, react_1.useClick)(context);
     const role = (0, react_1.useRole)(context);
-    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown", escapeKey: true });
+    const dismiss = (0, react_1.useDismiss)(context, {
+        escapeKey: !props.isEscKeyCloseDisabled,
+        outsidePress: !props.isBackdropCloseDisabled,
+        outsidePressEvent: "mousedown",
+    });
     const { getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
     const latestContext = (0, use_latest_1.useLatest)(context);
     return (react_2.default.createElement(dialog_1.Dialog, { className: `uxf-modal uxf-modal--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isOpen: props.isOpen, variant: props.variant }, props.children));

package/modal/modal.stories.js

@@ -37,15 +37,15 @@ function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
         react_1.default.createElement("div", null,
             react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenXs(true) }, "Click to open modal xs"),
-            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenXs(false), isOpen: isOpenXs },
+            react_1.default.createElement(modal_1.Modal, { isOpen: isOpenXs, onClose: () => setIsOpenXs(false) },
                 react_1.default.createElement(dialog_1.DialogPanel, { width: "xs" }, "Whatever content inside Modal xs"))),
         react_1.default.createElement("div", null,
             react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenRightDrawer(true) }, "Click to open modal drawer-right"),
-            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenRightDrawer(false), isOpen: isOpenRightDrawer, variant: "drawer-right" },
+            react_1.default.createElement(modal_1.Modal, { isOpen: isOpenRightDrawer, onClose: () => setIsOpenRightDrawer(false), variant: "drawer-right" },
                 react_1.default.createElement(dialog_1.DialogPanel, null, "Whatever content inside Modal drawer-right"))),
         react_1.default.createElement("div", null,
             react_1.default.createElement(button_1.Button, { onClick: () => setIsOpenDisableBackdrop(true) }, "Click to open modal DisableBackdrop"),
-            react_1.default.createElement(modal_1.Modal, { close: () => setIsOpenDisableBackdrop(false), isBackdropCloseDisabled: true, isOpen: isOpenDisableBackdrop },
+            react_1.default.createElement(modal_1.Modal, { isBackdropCloseDisabled: true, isOpen: isOpenDisableBackdrop, onClose: () => setIsOpenDisableBackdrop(false) },
                 react_1.default.createElement(dialog_1.DialogPanel, null,
                     react_1.default.createElement("div", { className: "p-4" },
                         react_1.default.createElement("p", null, "Whatever content inside DisableBackdrop:"),

package/modal/types.d.ts

@@ -1,3 +1,4 @@
+import { Noop } from "@uxf/core/types";
 import { ModalVariants } from "@uxf/ui/modal/theme";
 import { ReactNode } from "react";
 import type { DialogProps } from "../dialog";
@@ -5,19 +6,21 @@ export type ModalVariant = keyof ModalVariants;
 export interface ModalProviderProps {
     children: ReactNode;
     className?: DialogProps["className"];
-    isBackdropCloseDisabled?: DialogProps["isBackdropCloseDisabled"];
-    onClose?: () => void;
+    isBackdropCloseDisabled?: boolean;
+    isEscapeKeyCloseDisabled?: boolean;
+    onClose?: Noop;
     variant?: ModalVariant;
 }
 export interface ModalRef {
-    close: () => void;
+    close: Noop;
     open: (modal: ModalProviderProps) => void;
 }
 export interface ModalProps {
     children: ReactNode;
     className?: DialogProps["className"];
-    close: () => void;
     isBackdropCloseDisabled?: boolean;
+    isEscKeyCloseDisabled?: boolean;
     isOpen: boolean;
+    onClose: Noop;
     variant?: ModalVariant;
 }

package/multi-combobox/multi-combobox.js

@@ -71,7 +71,7 @@ function Options(props) {
     return (react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-multi-combobox__dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, props.matchWidth ? "uxf-dropdown--match-width" : "uxf-dropdown--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, (0, is_not_empty_1.isNotEmpty)(props.options) ? (props.options.map((option) => {
         var _a, _b;
         const optionTyped = option;
-        return (react_3.default.createElement(Option, { handleCheckboxChange: props.onCheckboxChange(optionTyped.id), key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : optionTyped.id, option: optionTyped, withCheckboxes: props.withCheckboxes }));
+        return (react_3.default.createElement(Option, { handleCheckboxChange: props.onCheckboxChange(optionTyped.id), key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : optionTyped.id, option: option, renderOption: props.renderOption, withCheckboxes: props.withCheckboxes }));
     })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage))));
 }
 Options.displayName = "UxfUiMultiComboboxOptions";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.80.4",
+    "version": "11.85.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -11,8 +11,8 @@
         "css-tokens:gen": "bin/generate-css-tokens.js --source=./_tokens --output=./_tokens/generated/",
         "css:prepare": "rm -rf ./css && mkdir css && cp ./**/*.css ./css/ && cp ./_tokens/generated/figma-colors.css ./css/",
         "tokens:prepare": "rm -rf ./tokens && mkdir tokens && cp ./_tokens/generated/figma-colors.js ./tokens/",
-        "tw-tokens:check": "ts-node ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
-        "tw-tokens:gen": "ts-node ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
+        "tw-tokens:check": "tsx ./scripts/generate-tw-tokens.js --mode=\"check\" --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
+        "tw-tokens:gen": "tsx ./scripts/generate-tw-tokens.js --twConfig=\"./utils/tailwind-config.js\" --outputPath=\"./tw-tokens/\"",
         "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
     },
     "author": "UX Fans s.r.o",
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.80.4",
-        "@uxf/core-react": "11.80.4",
+        "@uxf/core": "11.85.0",
+        "@uxf/core-react": "11.85.0",
         "@uxf/datepicker": "11.80.4",
-        "@uxf/styles": "11.80.4",
+        "@uxf/styles": "11.85.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",
@@ -38,6 +38,7 @@
     },
     "devDependencies": {
         "@types/jump.js": "1.0.6",
+        "@types/node": "22",
         "@types/react": "18.3.5",
         "@types/react-dom": "18.3.0"
     }

package/raster-image/README.md

@@ -1,7 +1,143 @@
 # RasterImage
 
-## CSS dependencies
+A React component for rendering raster images (JPG/PNG/WebP/AVIF, etc.) with optional responsive sources and graceful fallback when no image is available. SVG sources are detected automatically and rendered as-is. The component integrates with the UXF image resizer utilities to generate optimized images for different breakpoints.
+
+## Installation / CSS dependency
+
+Add the package stylesheet to your global CSS if you haven't already:
 
 ```css
 @import url("@uxf/ui/raster-image/raster-image.css");
-```
+```
+
+## When to use
+- You need a drop-in `<img/`>-like component that works with UXF's resizer service.
+- You want responsive images via `<picture/>` + `<source/>` with different widths/heights per breakpoint.
+- You want consistent empty-state rendering when the image is missing.
+
+## Basic usage
+```tsx
+import { RasterImage } from "@uxf/ui/raster-image";
+
+export function CardThumb() {
+  return (
+    <RasterImage
+      alt="A beautiful landscape"
+      src="images/landscape.jpg"
+      width={400}
+      height={300}
+      loading="lazy"
+    />
+  );
+}
+```
+
+- Provide at least one of width or height. If you provide both, the exact dimensions will be requested from the resizer.
+- If the provided source is an SVG, the component will render a simple `<img/>` with the SVG URL (no resizer involved).
+
+## Modes (object-fit helpers)
+Use the mode prop to control fit behavior via CSS classes:
+
+- mode="contain" → adds classes to make the image fit entirely inside the box without cropping.
+- mode="cover" → adds classes to cover the box, possibly cropping.
+- mode="responsive" → reserved for responsive layouts; adds a class you can target. Actual responsiveness is configured via widths/heights props below.
+
+Example:
+```tsx
+<RasterImage alt="Product" src="p/1.jpg" width={320} height={320} mode="cover" />
+```
+
+## Responsive images (sizes/srcset)
+To provide multiple sources for different viewports, pass widths and/or heights arrays and optionally breakpoints. (Default breakpoints are passed from `UiContext`.) The component will render a `<picture/>` with `<source/>` tags via ResponsiveImgSources.
+
+```tsx
+import { em } from "./em";
+
+<RasterImage
+    alt="Hero"
+    src="images/hero.jpg"
+    // Desired element box in CSS might be responsive; request multiple candidate widths
+    widths={[360, 640, 960, 1280]}
+    // Optional heights if you need height-based variants
+    // heights={[180, 320, 480, 640]}
+    // Optional map of named breakpoints to CSS media queries (passed through to `<source media="..."/>`)
+    breakpoints={{
+        sm: em(576),
+        md: em(768),
+        lg: em(1024)
+    }}
+    // You can still provide width/height to define the fallback `<img/>` dimensions
+    width={960}
+    height={540}
+/>
+```
+
+Notes:
+- If a resizer URL can be constructed for the provided src, the component renders a `<picture/>` with responsive sources plus a fallback `<img/>`.
+- If resizer cannot be used for the src, or it is an SVG, a simple `<img/>` is rendered.
+
+## Empty state
+If src is null/undefined or cannot be resolved, the component renders an EmptyImage placeholder. You can customize its content:
+
+```tsx
+<RasterImage
+  alt="Missing"
+  src={null}
+  width={200}
+  height={150}
+  noImageContent={<span>No image</span>}
+/>
+```
+
+## Props
+```ts
+export type RasterImageProps = {
+  alt: string;                              // Required alt text for accessibility
+  breakpoints?: Record<string, string>;     // Named breakpoints -> media queries used by `<source/>`
+  className?: string;                       // Wrapper `<picture/>` class
+  heights?: number[];                       // Candidate heights for responsive sources
+  imgClassName?: string;                    // `<img/>` element class
+  loading?: ImgHTMLAttributes<HTMLImageElement>["loading"]; // "lazy" | "eager"
+  mode?: "contain" | "cover" | "responsive"; // Adds CSS helper classes
+  noImageContent?: React.ReactNode;         // Custom placeholder content when no image
+  options?: ImageSourcesOptions;            // Resizer/source generation options (passed through)
+  quality?: Quality;                        // Preferred quality; defaults to original if not specified
+  role?: ImgHTMLAttributes<HTMLImageElement>["role"];       // Optional ARIA role override
+  src: ImageSource | null | undefined;      // Image source compatible with @uxf/core/utils/resizer
+  widths?: number[];                        // Candidate widths for responsive sources
+} & (
+  | { width: number; height: number }
+  | { width?: never; height: number }
+  | { width: number; height?: never }
+);
+```
+
+### Sizing behavior
+- The fallback `<img/>` receives width/height computed via getImgElementWidth/Height based on your provided width/height and the intrinsic ratio when available.
+- When both width and height are omitted, TypeScript will error by design (you must provide at least one dimension).
+
+### Quality and options
+- quality controls the requested resizer quality; when omitted, the component uses getImgQuality(..., "original").
+- options are passed to the underlying resizer/source helpers. See @uxf/core/utils/resizer and ImageSourcesOptions for details.
+
+### Accessibility
+- alt is required. Use an empty string ("") only for purely decorative images.
+- role is rarely needed; rely on native img semantics where possible.
+- Consider loading="lazy" for below-the-fold images to improve performance.
+
+## Styling
+Wrapper and image classes you can target:
+- Wrapper `<picture/>`: "uxf-raster-image"
+  - Modifiers: "uxf-raster-image--contain", "uxf-raster-image--cover"
+- `<img/>`: "uxf-raster-image__img"
+  - Modifiers: "uxf-raster-image__img--contain", "uxf-raster-image__img--cover"
+
+You can also pass className and imgClassName to append your own classes.
+
+## SVG handling
+If getSvgImgUrl(src) returns a URL, the component renders a plain `<img src="...svg"/>` inside `<picture/>`, bypassing the resizer.
+
+## Notes on integration with the resizer
+- resizerImageUrl is used to produce the fallback `<img/>` source when possible.
+- Responsive `<source/>` tags are produced by ResponsiveImgSources using widths/heights and breakpoints.
+- If resizerSrc cannot be generated, the component falls back to the EmptyImage placeholder.