@uxf/ui 1.0.0-beta.93 → 1.0.0-beta.95

package/color-radio-group/color-radio-group.d.ts

@@ -1,7 +1,6 @@
 import React, { CSSProperties, ReactNode } from "react";
-import { FormControlProps } from "../types";
-import { HexCodeString } from "../utils/is-light-background";
-export declare type ColorRadioGroupOptionValue = HexCodeString;
+import { FormControlProps, HexColor } from "../types";
+export declare type ColorRadioGroupOptionValue = HexColor;
 export interface ColorRadioGroupOption {
     label: string;
     value: ColorRadioGroupOptionValue;

package/color-radio-group/color-radio.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-import { FormControlProps } from "../types";
-import { HexCodeString } from "../utils/is-light-background";
+import { FormControlProps, HexColor } from "../types";
 export interface ColorRadioProps extends FormControlProps<boolean> {
-    color: HexCodeString;
+    color: HexColor;
     colorLabel: string;
 }
 export declare const ColorRadio: React.ForwardRefExoticComponent<ColorRadioProps & React.RefAttributes<HTMLDivElement>>;

package/color-radio-group/color-radio.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorRadio = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const is_light_background_1 = require("../utils/is-light-background");
+const color2k_1 = require("color2k");
+const react_1 = __importDefault(require("react"));
 function CheckIcon() {
     return (react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 16 16" },
         react_1.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
@@ -17,6 +17,6 @@ exports.ColorRadio = (0, forwardRef_1.forwardRef)("ColorRadio", (props, ref) =>
     const colorRadioStyle = { "--bg-color": props.color };
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-color-radio", props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref, style: colorRadioStyle },
         react_1.default.createElement("span", { className: "uxf-color-radio__label" }, props.colorLabel),
-        react_1.default.createElement("span", { className: `uxf-color-radio__icon ${(0, is_light_background_1.isLightBackground)(props.color) ? "uxf-color-radio__icon--dark" : ""}` },
+        react_1.default.createElement("span", { className: `uxf-color-radio__icon ${(0, color2k_1.readableColorIsBlack)(props.color) ? "uxf-color-radio__icon--dark" : ""}` },
             react_1.default.createElement(CheckIcon, null))));
 });

package/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from "@floating-ui/react-dom";
+import { Placement } from "@floating-ui/react";
 import React, { ReactNode } from "react";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";

package/css/multi-combobox.css

@@ -3,7 +3,7 @@
 
     &__button {
         @apply relative flex flex-row w-full cursor-default flex-wrap items-center rounded-lg pl-4 pr-8 pb-2 text-left
-        outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
+            outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
 
         .uxf-icon {
             @apply absolute top-3 right-4 h-4;

package/css/typography.css

@@ -0,0 +1,51 @@
+.uxf-typo-h1 {
+    @apply text-desktopH1 font-bold;
+}
+
+.uxf-typo-h2 {
+    @apply text-desktopH2 font-bold;
+}
+
+.uxf-typo-h3 {
+    @apply text-desktopH3 font-bold;
+}
+
+.uxf-typo-h4 {
+    @apply text-desktopH4 font-bold;
+}
+
+.uxf-typo-h5 {
+    @apply text-desktopH5 font-bold;
+}
+
+.uxf-typo-h6 {
+    @apply text-desktopH6 font-bold;
+}
+
+.uxf-typo-body {
+    @apply text-body;
+}
+
+.uxf-typo-body2 {
+    @apply text-body2;
+}
+
+.uxf-typo-button {
+    @apply text-body font-bold;
+}
+
+.uxf-typo-caption {
+    @apply text-caption;
+}
+
+.uxf-typo-medium {
+    @apply text-medium font-medium;
+}
+
+.uxf-typo-medium2 {
+    @apply text-medium2 font-medium;
+}
+
+.uxf-typo-overline {
+    @apply text-overline font-bold;
+}

package/date-picker-input/date-picker-input.js

@@ -27,20 +27,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerInput = void 0;
-const react_dom_1 = require("@floating-ui/react-dom");
-const react_1 = require("@headlessui/react");
+const react_1 = require("@floating-ui/react");
+const react_2 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const dayjs_1 = __importDefault(require("dayjs"));
-const react_2 = __importStar(require("react"));
+const react_3 = __importStar(require("react"));
 const form_control_1 = require("../form-control");
 const date_picker_provider_1 = require("./date-picker-provider");
 exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props, ref) => {
     var _a;
-    const [isFocused, setIsFocused] = (0, react_2.useState)(false);
-    const generatedId = (0, react_2.useId)();
+    const [isFocused, setIsFocused] = (0, react_3.useState)(false);
+    const generatedId = (0, react_3.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const rootClassName = (0, cx_1.cx)("uxf-date-picker-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.leftElement && "uxf-date-picker-input--has-left-element", props.rightElement && "uxf-date-picker-input--has-right-element", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY);
@@ -54,13 +54,13 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
         setIsFocused(false);
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    const floatingDatePicker = (0, react_dom_1.useFloating)({
+    const floatingDatePicker = (0, react_1.useFloating)({
         placement: "bottom",
         middleware: [
-            (0, react_dom_1.offset)(8),
-            (0, react_dom_1.flip)(),
-            (0, react_dom_1.shift)(),
-            (0, react_dom_1.size)({
+            (0, react_1.offset)(8),
+            (0, react_1.flip)(),
+            (0, react_1.shift)(),
+            (0, react_1.size)({
                 apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
                     Object.assign(elements.floating.style, {
                         left: x + "px",
@@ -72,17 +72,17 @@ exports.DatePickerInput = (0, forwardRef_1.forwardRef)("DatePickerInput", (props
                 },
             }),
         ],
-        whileElementsMounted: (reference, floating, update) => (0, react_dom_1.autoUpdate)(reference, floating, update, {
+        whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingDatePicker.reference), [ref, floatingDatePicker.reference]);
-    return (react_2.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
-        react_2.default.createElement(react_1.Popover, { className: "relative" },
-            react_2.default.createElement(react_1.Popover.Button, { as: "div", className: "uxf-date-picker-input__wrapper", ref: stableRef },
-                react_2.default.createElement("span", { className: "uxf-date-picker-input__left-element" }, props.leftElement),
-                react_2.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-date-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "none", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte datum...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value ? (0, dayjs_1.default)(props.value).format("l") : "" }),
-                react_2.default.createElement("span", { className: "uxf-date-picker-input__right-element" }, props.rightElement)),
-            !props.isDisabled && !props.isReadOnly && (react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
-                react_2.default.createElement(react_1.Popover.Panel, { className: "uxf-date-picker-input__popover", ref: floatingDatePicker.floating, static: true }, ({ close }) => (react_2.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
+    const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingDatePicker.reference), [ref, floatingDatePicker.reference]);
+    return (react_3.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_3.default.createElement(react_2.Popover, { className: "relative" },
+            react_3.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-date-picker-input__wrapper", ref: stableRef },
+                react_3.default.createElement("span", { className: "uxf-date-picker-input__left-element" }, props.leftElement),
+                react_3.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-date-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "none", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte datum...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value ? (0, dayjs_1.default)(props.value).format("l") : "" }),
+                react_3.default.createElement("span", { className: "uxf-date-picker-input__right-element" }, props.rightElement)),
+            !props.isDisabled && !props.isReadOnly && (react_3.default.createElement(react_2.Transition, { as: react_3.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
+                react_3.default.createElement(react_2.Popover.Panel, { className: "uxf-date-picker-input__popover", ref: floatingDatePicker.floating, static: true }, ({ close }) => (react_3.default.createElement(date_picker_provider_1.DatePickerProvider, { closePopoverHandler: close, onChange: props.onChange, selectedDate: props.value }))))))));
 });

package/hooks/use-dropdown.d.ts

@@ -1,2 +1,2 @@
-import { Placement } from "@floating-ui/react-dom";
-export declare function useDropdown(placement: Placement, matchWidth?: boolean): import("@floating-ui/react-dom").UseFloatingReturn<import("@floating-ui/react-dom").ReferenceType>;
+import { Placement } from "@floating-ui/react";
+export declare function useDropdown(placement: Placement, matchWidth?: boolean): import("@floating-ui/react").UseFloatingReturn<import("@floating-ui/react").ReferenceType>;

package/hooks/use-dropdown.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDropdown = void 0;
-const react_dom_1 = require("@floating-ui/react-dom");
+const react_1 = require("@floating-ui/react");
 function useDropdown(placement, matchWidth = false) {
-    return (0, react_dom_1.useFloating)({
+    return (0, react_1.useFloating)({
         placement,
         middleware: [
-            (0, react_dom_1.flip)(),
-            (0, react_dom_1.shift)(),
-            (0, react_dom_1.size)({
+            (0, react_1.flip)(),
+            (0, react_1.shift)(),
+            (0, react_1.size)({
                 apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
                     Object.assign(elements.floating.style, {
                         left: x + "px",
@@ -22,7 +22,7 @@ function useDropdown(placement, matchWidth = false) {
                 },
             }),
         ],
-        whileElementsMounted: (reference, floating, update) => (0, react_dom_1.autoUpdate)(reference, floating, update, {
+        whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });

package/image-gallery/components/gallery.js

@@ -26,13 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const image_1 = require("../../utils/image");
+const image_1 = require("@uxf/core/utils/image");
+const resizer_1 = require("@uxf/core/utils/resizer");
+const react_1 = __importStar(require("react"));
 const close_button_1 = __importDefault(require("./close-button"));
-const previous_button_1 = __importDefault(require("./previous-button"));
-const next_button_1 = __importDefault(require("./next-button"));
 const dot_1 = __importDefault(require("./dot"));
-const react_1 = __importStar(require("react"));
-const resizer_1 = require("@uxf/core/utils/resizer");
+const next_button_1 = __importDefault(require("./next-button"));
+const previous_button_1 = __importDefault(require("./previous-button"));
 function Gallery(props) {
     var _a;
     (0, react_1.useEffect)(() => {

package/image-gallery/image-gallery.stories.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
+const image_1 = require("@uxf/core/utils/image");
 const react_1 = __importDefault(require("react"));
-const image_1 = require("../utils/image");
 const image_2 = __importDefault(require("./image"));
 const image_gallery_1 = __importDefault(require("./image-gallery"));
 exports.default = {

package/mutli-combobox/multi-combobox.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from "@floating-ui/react-dom";
+import { Placement } from "@floating-ui/react";
 import React, { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.93",
+  "version": "1.0.0-beta.95",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,11 +13,12 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react-dom": "^1.1.0",
+    "@floating-ui/react": "^0.17.0",
     "@headlessui/react": "^1.7.7",
-    "@uxf/core": "^4.1.2",
+    "@uxf/core": "^4.3.0",
     "@uxf/datepicker": "^1.2.0",
-    "@uxf/styles": "^2.1.1",
+    "@uxf/styles": "^2.1.2",
+    "color2k": "^2.0.1",
     "dayjs": "^1.11.7",
     "jump.js": "^1.0.2"
   },

package/raster-image/raster-image.d.ts

@@ -1,6 +1,6 @@
+import { Quality } from "@uxf/core/utils/image";
 import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
 import { FC, ImgHTMLAttributes, ReactNode } from "react";
-import { Quality } from "../utils/image";
 declare type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
 declare type Props = {
     alt: string;

package/raster-image/raster-image.js

@@ -5,31 +5,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RasterImage = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
+const image_1 = require("@uxf/core/utils/image");
 const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
-const image_1 = require("../utils/image");
 const RasterImage = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const componentContext = (0, context_1.useComponentContext)("rasterImage");
     const className = [
+        "uxf-raster-image",
         props.mode === "contain" && "uxf-raster-image--contain",
         props.mode === "cover" && "uxf-raster-image--cover",
         props.className,
     ];
-    const breakpoints = ["0em", ...Object.values((_a = props.breakpoints) !== null && _a !== void 0 ? _a : componentContext.breakpoints)];
-    const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_b = props.width) !== null && _b !== void 0 ? _b : "auto", (_c = props.height) !== null && _c !== void 0 ? _c : "auto", {
-        ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+    const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_a = props.width) !== null && _a !== void 0 ? _a : "auto", (_b = props.height) !== null && _b !== void 0 ? _b : "auto", {
+        ...((_c = props.options) !== null && _c !== void 0 ? _c : {}),
         quality: (0, image_1.getImgQuality)(props.quality, "original"),
     });
     if (!resizerSrc) {
-        return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image uxf-raster-image--no-image", ...className) }, props.noImageContent));
+        return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image--no-image", ...className) }, props.noImageContent);
     }
-    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)("uxf-raster-image", ...className) }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
+    const imgClassName = [
+        "uxf-raster-image__img",
+        props.mode === "contain" && "uxf-raster-image__img--contain",
+        props.mode === "cover" && "uxf-raster-image__img--cover",
+        props.imgClassName,
+    ];
+    const svgUrl = props.src && (0, image_1.getSvgImgUrl)(props.src);
+    if (svgUrl === "svg") {
+        return (react_1.default.createElement("picture", { className: (0, cx_1.cx)(className) },
+            react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: svgUrl, width: props.width })));
+    }
+    const breakpoints = ["0em", ...Object.values((_d = props.breakpoints) !== null && _d !== void 0 ? _d : componentContext.breakpoints)];
+    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)(className) }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
             ? props.heights[i]
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
                 : "auto", key: w, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
-        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)("uxf-raster-image__img", props.mode === "contain" && "uxf-raster-image__img--contain", props.mode === "cover" && "uxf-raster-image__img--cover", props.imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
+        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
 };
 exports.RasterImage = RasterImage;

package/raster-image/raster-image.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         mode?: "contain" | "cover" | "responsive" | undefined;
         noImageContent?: React.ReactNode;
         options?: Omit<import("@uxf/core/utils/resizer").ResizerImageProps, "quality" | "toFormat"> | undefined;
-        quality?: import("../utils/image").Quality | undefined;
+        quality?: import("@uxf/core/utils/image").Quality | undefined;
         role?: React.AriaRole | undefined;
         src: import("@uxf/core/utils/resizer").ImageSource | null | undefined;
         widths?: number[] | undefined;

package/select/select.d.ts

@@ -1,4 +1,4 @@
-import type { Placement } from "@floating-ui/react-dom";
+import type { Placement } from "@floating-ui/react";
 import React, { ReactNode } from "react";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";

package/time-picker-input/time-picker-input.d.ts

@@ -1,7 +1,7 @@
+import { TimeType } from "@uxf/datepicker/hooks/use-time-picker";
 import React, { ReactNode } from "react";
 import { InputProps } from "../input/input";
 import { FormControlProps } from "../types";
-import { TimeType } from "@uxf/datepicker/hooks/use-time-picker";
 export interface TimePickerInputProps extends Omit<FormControlProps<TimeType | null>, "value">, Pick<InputProps, "size" | "variant"> {
     className?: string;
     defaultValue?: string;

package/time-picker-input/time-picker-input.js

@@ -24,19 +24,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerInput = void 0;
+const react_1 = require("@floating-ui/react");
+const react_2 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importStar(require("react"));
-const form_control_1 = require("../form-control");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_2 = require("@headlessui/react");
+const react_3 = __importStar(require("react"));
+const form_control_1 = require("../form-control");
 const time_picker_1 = require("./time-picker");
-const react_dom_1 = require("@floating-ui/react-dom");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props, ref) => {
     var _a;
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const generatedId = (0, react_1.useId)();
+    const [isFocused, setIsFocused] = (0, react_3.useState)(false);
+    const generatedId = (0, react_3.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const rootClassName = (0, cx_1.cx)("uxf-time-picker-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.leftElement && "uxf-time-picker-input--has-left-element", props.rightElement && "uxf-time-picker-input--has-right-element", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY);
@@ -50,13 +50,13 @@ exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props
         setIsFocused(false);
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    const floatingTimePicker = (0, react_dom_1.useFloating)({
+    const floatingTimePicker = (0, react_1.useFloating)({
         placement: "bottom",
         middleware: [
-            (0, react_dom_1.offset)(8),
-            (0, react_dom_1.flip)(),
-            (0, react_dom_1.shift)(),
-            (0, react_dom_1.size)({
+            (0, react_1.offset)(8),
+            (0, react_1.flip)(),
+            (0, react_1.shift)(),
+            (0, react_1.size)({
                 apply({ availableHeight, availableWidth, elements, strategy, x, y }) {
                     Object.assign(elements.floating.style, {
                         left: x + "px",
@@ -68,22 +68,22 @@ exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props
                 },
             }),
         ],
-        whileElementsMounted: (reference, floating, update) => (0, react_dom_1.autoUpdate)(reference, floating, update, {
+        whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });
-    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingTimePicker.reference), [ref, floatingTimePicker.reference]);
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
-        react_1.default.createElement(react_2.Popover, { className: "relative" },
-            react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-time-picker-input__wrapper", ref: stableRef },
-                react_1.default.createElement("span", { className: "uxf-time-picker-input__left-element" }, props.leftElement),
-                react_1.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-time-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "text", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte \u010Das...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value
+    const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, floatingTimePicker.reference), [ref, floatingTimePicker.reference]);
+    return (react_3.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_3.default.createElement(react_2.Popover, { className: "relative" },
+            react_3.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-time-picker-input__wrapper", ref: stableRef },
+                react_3.default.createElement("span", { className: "uxf-time-picker-input__left-element" }, props.leftElement),
+                react_3.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-time-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "text", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte \u010Das...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value
                         ? `${props.value.hour}:${props.value.minute < 10 ? "0" + props.value.minute : props.value.minute}`
                         : "" }),
-                react_1.default.createElement("span", { className: "uxf-time-picker-input__right-element" }, props.rightElement)),
-            !props.isDisabled && !props.isReadOnly && (react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
-                react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-time-picker-input__popover", ref: floatingTimePicker.floating, static: true }, ({ close }) => {
+                react_3.default.createElement("span", { className: "uxf-time-picker-input__right-element" }, props.rightElement)),
+            !props.isDisabled && !props.isReadOnly && (react_3.default.createElement(react_2.Transition, { as: react_3.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
+                react_3.default.createElement(react_2.Popover.Panel, { className: "uxf-time-picker-input__popover", ref: floatingTimePicker.floating, static: true }, ({ close }) => {
                     var _a;
-                    return props.onChange ? (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: props.onChange, selectedTime: (_a = props.value) !== null && _a !== void 0 ? _a : null })) : (react_1.default.createElement(react_1.default.Fragment, null));
+                    return props.onChange ? (react_3.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: props.onChange, selectedTime: (_a = props.value) !== null && _a !== void 0 ? _a : null })) : (react_3.default.createElement(react_3.default.Fragment, null));
                 }))))));
 });

package/tw-tokens/tw-box-shadow.d.ts

@@ -7,5 +7,6 @@ export declare const twBoxShadow: {
     "2xl": string;
     inner: string;
     none: string;
+    paper: string;
 };
 export declare type TwBoxShadow = typeof twBoxShadow;

package/tw-tokens/tw-box-shadow.js

@@ -11,4 +11,5 @@ exports.twBoxShadow = {
     "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
     inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
     none: "none",
+    paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
 };

package/tw-tokens/tw-font-size.d.ts

@@ -38,5 +38,18 @@ export declare const twFontSize: {
     "9xl": (string | {
         lineHeight: string;
     })[];
+    desktopH1: (string | number)[];
+    desktopH2: (string | number)[];
+    desktopH3: (string | number)[];
+    desktopH4: (string | number)[];
+    desktopH5: (string | number)[];
+    desktopH6: (string | number)[];
+    body: (string | number)[];
+    body2: (string | number)[];
+    button: (string | number)[];
+    caption: (string | number)[];
+    medium: (string | number)[];
+    medium2: (string | number)[];
+    overline: (string | number)[];
 };
 export declare type TwFontSize = typeof twFontSize;

package/tw-tokens/tw-font-size.js

@@ -16,4 +16,17 @@ exports.twFontSize = {
     "7xl": ["4.5rem", { lineHeight: "1" }],
     "8xl": ["6rem", { lineHeight: "1" }],
     "9xl": ["8rem", { lineHeight: "1" }],
+    desktopH1: ["6rem", 1.1666666666666667],
+    desktopH2: ["3.75rem", 1.2],
+    desktopH3: ["3rem", 1.3333333333333333],
+    desktopH4: ["2.125rem", 1.1764705882352942],
+    desktopH5: ["1.5rem", 1.3333333333333333],
+    desktopH6: ["1rem", 1.375],
+    body: ["1rem", 1.5],
+    body2: ["0.875rem", 1.4285714285714286],
+    button: ["1rem", 1.5],
+    caption: ["0.75rem", 1.3333333333333333],
+    medium: ["1rem", 1.5],
+    medium2: ["0.875rem", 1.4285714285714286],
+    overline: ["0.625rem", 1.6],
 };

package/types/color.d.ts

@@ -0,0 +1 @@
+export declare type HexColor = `#${string}`;

package/types/color.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/index.d.ts

@@ -1 +1,2 @@
+export * from "./color";
 export * from "./form-control-props";

package/types/index.js

@@ -14,4 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./color"), exports);
 __exportStar(require("./form-control-props"), exports);

package/typography/typography.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/typography/typography.spec.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
+    react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
+    react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),
+    react_1.default.createElement("h4", { className: "uxf-typo-h4" }, ".uxf-typo-h4"),
+    react_1.default.createElement("h5", { className: "uxf-typo-h5" }, ".uxf-typo-h5"),
+    react_1.default.createElement("h6", { className: "uxf-typo-h6" }, ".uxf.typo-h6"),
+    react_1.default.createElement("p", { className: "uxf-typo-body" }, ".uxf-typo-body"),
+    react_1.default.createElement("p", { className: "uxf-typo-body2" }, ".uxf-typo-body2"),
+    react_1.default.createElement("p", { className: "uxf-typo-button" }, ".uxf-typo-button"),
+    react_1.default.createElement("p", { className: "uxf-typo-caption" }, ".uxf-typo-caption"),
+    react_1.default.createElement("p", { className: "uxf-typo-medium" }, ".uxf-typo-medium"),
+    react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
+    react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));

package/typography/typography.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: null;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/typography/typography.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/Typography",
+    component: null,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
+        react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
+        react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),
+        react_1.default.createElement("h4", { className: "uxf-typo-h4" }, ".uxf-typo-h4"),
+        react_1.default.createElement("h5", { className: "uxf-typo-h5" }, ".uxf-typo-h5"),
+        react_1.default.createElement("h6", { className: "uxf-typo-h6" }, ".uxf.typo-h6"),
+        react_1.default.createElement("p", { className: "uxf-typo-body" }, ".uxf-typo-body"),
+        react_1.default.createElement("p", { className: "uxf-typo-body2" }, ".uxf-typo-body2"),
+        react_1.default.createElement("p", { className: "uxf-typo-button" }, ".uxf-typo-button"),
+        react_1.default.createElement("p", { className: "uxf-typo-caption" }, ".uxf-typo-caption"),
+        react_1.default.createElement("p", { className: "uxf-typo-medium" }, ".uxf-typo-medium"),
+        react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
+        react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));
+}
+exports.Default = Default;

package/utils/tailwind-config.js

@@ -99,6 +99,21 @@ module.exports = {
             boxShadow: {
                 paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
             },
+            fontSize: {
+                desktopH1: [rem(96), 112 / 96],
+                desktopH2: [rem(60), 72 / 60],
+                desktopH3: [rem(48), 64 / 48],
+                desktopH4: [rem(34), 40 / 34],
+                desktopH5: [rem(24), 32 / 24],
+                desktopH6: [rem(16), 22 / 16],
+                body: [rem(16), 24 / 16],
+                body2: [rem(14), 20 / 14],
+                button: [rem(16), 24 / 16],
+                caption: [rem(12), 16 / 12],
+                medium: [rem(16), 24 / 16],
+                medium2: [rem(14), 20 / 14],
+                overline: [rem(10), 16 / 10],
+            },
             spacing: {
                 inherit: "inherit",
             },

package/utils/image.d.ts

@@ -1,19 +0,0 @@
-import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
-import { FC } from "react";
-export declare type Dimension = number | "auto";
-export declare type Format = "avif" | "webp" | "original";
-export declare type Quality = number | Record<Format, number>;
-export declare function getImgQuality(quality: Quality | undefined, format: Format): number | undefined;
-export declare function getImgUniqueIdentifier(src: ImageSource): string | undefined;
-export declare function getImgSrcSet(src?: ImageSource, width?: Dimension, height?: Dimension, options?: ResizerImageProps): string | undefined;
-interface ImageSourcesProps {
-    breakpointIndex?: number;
-    breakpoints?: string[];
-    height: Dimension;
-    options?: Omit<ResizerImageProps, "quality" | "toFormat">;
-    quality?: Quality;
-    src: ImageSource;
-    width: Dimension;
-}
-export declare const ImgSources: FC<ImageSourcesProps>;
-export {};

package/utils/image.js

@@ -1,104 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImgSources = exports.getImgSrcSet = exports.getImgUniqueIdentifier = exports.getImgQuality = void 0;
-const resizer_1 = require("@uxf/core/utils/resizer");
-const react_1 = __importDefault(require("react"));
-function toFileResponse(src) {
-    return typeof src !== "string" && "uuid" in src ? src : undefined;
-}
-function toStaticImageData(src) {
-    return typeof src !== "string" && "src" in src ? src : undefined;
-}
-function getImgExtension(src) {
-    const ext = src.slice(src.lastIndexOf(".") + 1);
-    return ext.length > 1 ? ext : undefined;
-}
-function getImgQuality(quality, format) {
-    return typeof quality === "number" ? quality : quality ? quality[format] : undefined;
-}
-exports.getImgQuality = getImgQuality;
-function getImgUniqueIdentifier(src) {
-    var _a;
-    const fileResponse = toFileResponse(src);
-    const staticImageData = toStaticImageData(src);
-    return typeof src === "string" ? src : (_a = fileResponse === null || fileResponse === void 0 ? void 0 : fileResponse.uuid) !== null && _a !== void 0 ? _a : staticImageData === null || staticImageData === void 0 ? void 0 : staticImageData.src;
-}
-exports.getImgUniqueIdentifier = getImgUniqueIdentifier;
-const HIDPI_SIZES = [3, 2, 1];
-function getImgSrcSet(src, width, height, options = {}) {
-    if (!src) {
-        return undefined;
-    }
-    let toFormat;
-    let h = height !== null && height !== void 0 ? height : "auto";
-    let w = width !== null && width !== void 0 ? width : "auto";
-    if (typeof src === "string") {
-        const extension = getImgExtension(src);
-        if (extension === "svg") {
-            return undefined;
-        }
-        toFormat = extension;
-    }
-    const fileResponse = toFileResponse(src);
-    if (fileResponse) {
-        if (!fileResponse.uuid || fileResponse.extension === "svg") {
-            return undefined;
-        }
-        toFormat = fileResponse.extension;
-    }
-    const staticImageData = toStaticImageData(src);
-    if (staticImageData) {
-        const extension = getImgExtension(staticImageData.src);
-        if (!staticImageData.src || extension === "svg") {
-            return undefined;
-        }
-        toFormat = extension;
-        h = h || staticImageData.height;
-        w = w || staticImageData.width;
-    }
-    if (typeof h === "number" || typeof w === "number") {
-        return HIDPI_SIZES.map((size) => (0, resizer_1.resizerImageUrl)(src, w * size, h * size, {
-            toFormat,
-            ...options,
-        }) + (size > 1 ? ` ${size}x` : "")).join(", ");
-    }
-    return (0, resizer_1.resizerImageUrl)(src, w, h, { toFormat, ...options });
-}
-exports.getImgSrcSet = getImgSrcSet;
-const ImgSources = (props) => {
-    var _a, _b, _c;
-    if (!props.src || (typeof props.src === "string" && getImgExtension(props.src) === "svg")) {
-        return null;
-    }
-    const fileResponse = toFileResponse(props.src);
-    if (fileResponse && (!fileResponse.uuid || fileResponse.extension === "svg")) {
-        return null;
-    }
-    const staticImageData = toStaticImageData(props.src);
-    if (staticImageData && (!staticImageData.src || getImgExtension(staticImageData.src))) {
-        return null;
-    }
-    let media;
-    if (props.breakpoints && props.breakpointIndex) {
-        media = `(min-width: ${props.breakpoints[props.breakpointIndex]})`;
-    }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
-                ...((_a = props.options) !== null && _a !== void 0 ? _a : {}),
-                quality: getImgQuality(props.quality, "avif"),
-                toFormat: "avif",
-            }), type: "image/avif" }),
-        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
-                ...((_b = props.options) !== null && _b !== void 0 ? _b : {}),
-                quality: getImgQuality(props.quality, "webp"),
-                toFormat: "webp",
-            }), type: "image/webp" }),
-        react_1.default.createElement("source", { media: media, srcSet: getImgSrcSet(props.src, props.width, props.height, {
-                ...((_c = props.options) !== null && _c !== void 0 ? _c : {}),
-                quality: getImgQuality(props.quality, "original"),
-            }) })));
-};
-exports.ImgSources = ImgSources;

package/utils/is-light-background.d.ts

@@ -1,2 +0,0 @@
-export declare type HexCodeString = `#${string}`;
-export declare function isLightBackground(bgColor: HexCodeString): boolean;

package/utils/is-light-background.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isLightBackground = void 0;
-function isLightBackground(bgColor) {
-    const color = bgColor.substring(1, 7);
-    const r = parseInt(color.substring(0, 2), 16); // hexToR
-    const g = parseInt(color.substring(2, 4), 16); // hexToG
-    const b = parseInt(color.substring(4, 6), 16); // hexToB
-    return r * 0.299 + g * 0.587 + b * 0.114 > 146;
-}
-exports.isLightBackground = isLightBackground;