@uxf/ui 10.0.0-beta.8 → 10.0.0-beta.80

package/select/select.stories.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
+import { SelectOption } from "./index";
 declare const _default: {
     title: string;
     component: {
-        <ValueId = import("../_select-base").SelectBaseValueId, Option = import("./select").SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
+        <ValueId = import("../_select-base").SelectBaseValueId, Option = SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
         displayName: string;
     };
 };

package/select/select.stories.js

@@ -28,16 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Default = void 0;
 const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 const index_1 = require("./index");
-const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/Select",
     component: index_1.Select,
 };
 const options = [
     { id: "one", label: "Option one" },
-    { id: "two", label: "Option two" },
+    { id: "two", label: "Option two disabled", disabled: true },
     { id: "three", label: "Option three" },
     { id: "four", label: "Option four" },
     { id: "five", label: "Option five" },
@@ -64,7 +64,13 @@ function Default() {
         react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
         react_1.default.createElement(index_1.Select, { label: "Size sm", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "small" }),
         react_1.default.createElement(index_1.Select, { label: "Size default", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
-        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" })));
+        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" }),
+        react_1.default.createElement(index_1.Select, { label: "RenderOption & RenderSelectedOption", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Selected: ",
+                option.label) })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));

package/tabs/README.md

@@ -0,0 +1,7 @@
+# Tabs
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/tabs/tabs.css");
+```

package/tabs/index.d.ts

@@ -1,2 +1,2 @@
-export type { TabsProps, TabsPanelProps } from "./tabs";
 export { Tabs } from "./tabs";
+export type { TabsPanelProps, TabsProps } from "./tabs";

package/text-input/README.md

@@ -0,0 +1,10 @@
+# TextInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/icon/icon.css");
+```

package/text-input/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextInputProps } from "./text-input";
 export { TextInput } from "./text-input";
+export type { TextInputProps } from "./text-input";

package/text-input/text-input.d.ts

@@ -4,6 +4,7 @@ import React, { KeyboardEventHandler, ReactNode } from "react";
 type EnterKeyHint = "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
 type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
 export interface TextInputProps extends FormControlProps<string>, Pick<InputProps, "size" | "variant"> {
+    autoFocus?: boolean;
     autoComplete?: string;
     className?: string;
     enterKeyHint?: EnterKeyHint;

package/text-input/text-input.js

@@ -26,11 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const input_1 = require("@uxf/ui/input");
 const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const innerRef = (0, react_1.useRef)(null);
@@ -43,7 +43,7 @@ exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
         react_1.default.createElement(input_1.Input, { inputFocus: input, size: props.size, variant: props.variant },
             props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
             props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
-            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, autoComplete: props.autoComplete, form: props.form, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onChange: props.onChange, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), step: props.step, type: props.type, value: props.value }),
+            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, autoComplete: props.autoComplete, autoFocus: props.autoFocus, form: props.form, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onChange: props.onChange, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), step: props.step, type: props.type, value: props.value }),
             props.rightElement && react_1.default.createElement(input_1.Input.RightElement, null, props.rightElement),
             props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon))));
 });

package/text-link/README.md

@@ -0,0 +1,19 @@
+# TextLink
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/text-link/text-link.css");
+```
+
+## Props configuration
+
+```tsx
+// textLink.d.ts
+
+declare module "@uxf/ui/icon/theme" {
+    export interface TextLinkVariants {
+        default: true;
+    }
+}
+```

package/text-link/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextLinkProps } from "./text-link";
 export { TextLink } from "./text-link";
+export type { TextLinkProps } from "./text-link";

package/text-link/text-link.d.ts

@@ -1,6 +1,6 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
-import React, { AnchorHTMLAttributes } from "react";
 import { TextLinkVariants } from "@uxf/ui/text-link/theme";
+import React, { AnchorHTMLAttributes } from "react";
 export type TextLinkVariant = keyof TextLinkVariants;
 export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
     variant?: TextLinkVariant;

package/textarea/README.md

@@ -0,0 +1,9 @@
+# Textarea
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/textarea/textarea.css");
+@import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/form-component/form-component.css");
+```

package/textarea/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextareaProps } from "./textarea";
 export { Textarea } from "./textarea";
+export type { TextareaProps } from "./textarea";

package/textarea/textarea.js

@@ -33,11 +33,11 @@ const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
 function autoHeightHandler(element, rows = 4) {
     element.style.height = "auto";
-    if (rows > 1) {
+    if (rows >= 1) {
         const contentHeight = element.scrollHeight;
-        const lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue("line-height"), 10);
-        const fontSize = parseInt(window.getComputedStyle(element).getPropertyValue("font-size"), 10);
-        const targetHeight = rows * fontSize * (lineHeight / fontSize);
+        const lineHeight = parseFloat(window.getComputedStyle(element).getPropertyValue("line-height"));
+        const fontSize = parseFloat(window.getComputedStyle(element).getPropertyValue("font-size"));
+        const targetHeight = parseInt((rows * fontSize * (lineHeight / fontSize)).toFixed(3), 10);
         element.style.height = Math.max(targetHeight, contentHeight) + "px";
     }
 }
@@ -68,6 +68,6 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     const onWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     return (react_1.default.createElement(form_component_1.FormComponent, { 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("div", { className: "uxf-textarea__wrapper", onClick: onWrapperClick },
-            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, rows: props.rows, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";

package/textarea/textarea.stories.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
+const index_1 = require("./index");
 exports.default = {
     title: "UI/Textarea",
     component: index_1.Textarea,

package/time-picker/README.md

@@ -0,0 +1,8 @@
+# TimePicker
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/icon/icon.css");
+```

package/time-picker/index.d.ts

@@ -1,2 +1,2 @@
-export type { TimePickerProps } from "./time-picker";
 export { TimePicker } from "./time-picker";
+export type { TimePickerProps } from "./time-picker";

package/time-picker/time-picker-hour.js

@@ -24,16 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerHour = void 0;
-const react_1 = __importStar(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const use_hour_1 = require("@uxf/datepicker/hooks/use-hour");
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
+const react_1 = __importStar(require("react"));
 const TimePickerHour = (props) => {
     const hourRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { onClick, onKeyDown, tabIndex, isSelected } = (0, use_hour_1.useHour)({
         hour: props.hour,
         hourRef,
@@ -42,8 +41,9 @@ const TimePickerHour = (props) => {
         isHourSelected,
         onHourSelect,
         onHourFocus,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__hour", isSelected && classes_1.CLASSES.IS_SELECTED), ref: hourRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-hour", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: hourRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerHour = TimePickerHour;
 exports.TimePickerHour.displayName = "UxfUiTimePickerHour";

package/time-picker/time-picker-hours.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerHours = void 0;
+const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
 const react_1 = __importDefault(require("react"));
 const time_picker_hour_1 = require("./time-picker-hour");
-const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
 const TimePickerHours = () => {
     const { hours } = (0, use_hours_1.useHours)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
 };
 exports.TimePickerHours = TimePickerHours;
 exports.TimePickerHours.displayName = "UxfUiTimePickerHours";

package/time-picker/time-picker-minute.js

@@ -24,16 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerMinute = void 0;
-const react_1 = __importStar(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
+const react_1 = __importStar(require("react"));
 const TimePickerMinute = (props) => {
     const minuteRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { isSelected, onClick, onKeyDown, tabIndex } = (0, use_minute_1.useMinute)({
         minute: props.minute,
         minuteRef,
@@ -42,8 +41,9 @@ const TimePickerMinute = (props) => {
         isMinuteSelected,
         onMinuteFocus,
         onMinuteSelect,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__minute", isSelected && classes_1.CLASSES.IS_SELECTED), ref: minuteRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-minute", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: minuteRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerMinute = TimePickerMinute;
 exports.TimePickerMinute.displayName = "UxfUiTimePickerMinute";

package/time-picker/time-picker-minutes.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerMinutes = void 0;
+const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
 const react_1 = __importDefault(require("react"));
 const time_picker_minute_1 = require("./time-picker-minute");
-const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
 const TimePickerMinutes = () => {
     const { minutes } = (0, use_minutes_1.useMinutes)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
 };
 exports.TimePickerMinutes = TimePickerMinutes;
 exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";

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

@@ -1,8 +1,9 @@
-import { FC } from "react";
 import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picker";
+import { FC } from "react";
 export interface TimePickerProps {
     closePopoverHandler?: () => void;
     onChange: (data: OnTimeChangeType) => void;
+    preventScroll?: boolean;
     selectedTime: TimeType | null;
 }
 export declare const TimePicker: FC<TimePickerProps>;

package/time-picker/time-picker.js

@@ -24,19 +24,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
+const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
+const use_time_picker_1 = require("@uxf/datepicker/hooks/use-time-picker");
 const react_1 = __importStar(require("react"));
+const button_1 = require("../button");
+const icon_1 = require("../icon");
 const time_picker_hours_1 = require("./time-picker-hours");
 const time_picker_minutes_1 = require("./time-picker-minutes");
-const use_time_picker_1 = require("@uxf/datepicker/hooks/use-time-picker");
-const icon_1 = require("../icon");
-const button_1 = require("../button");
-const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const TimePicker = (props) => {
     const [viewMode, setViewMode] = (0, react_1.useState)("global");
     const { goToNextMinute, goToPrevHour, goToPrevMinute, goToNextHour, ...contextProps } = (0, use_time_picker_1.useTimePicker)({
         selectedTime: props.selectedTime,
         onTimeChange: props.onChange,
         onSelectCallback: () => setViewMode("global"),
+        preventScroll: props.preventScroll,
     });
     const timePickerComponents = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -45,7 +46,7 @@ const TimePicker = (props) => {
                 react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
-                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour) !== null && _b !== void 0 ? _b : "0"),
+                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
                 react_1.default.createElement("div", null, ":"),
@@ -55,7 +56,7 @@ const TimePicker = (props) => {
                     react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
                         ? props.selectedTime.minute < 10
                             ? "0" + props.selectedTime.minute
-                            : props.selectedTime.minute
+                            : props.selectedTime.minute.toString()
                         : "00"),
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))))),

package/time-picker-input/README.md

@@ -0,0 +1,9 @@
+# TimePickerInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/label/label.css");
+```

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

@@ -1,2 +1,2 @@
+export { ALLOWED_TIME_FORMAT, DISPLAY_TIME_FORMAT, OUTPUT_TIME_FORMAT, TimePickerInput } from "./time-picker-input";
 export type { TimePickerInputProps } from "./time-picker-input";
-export { TimePickerInput, DISPLAY_TIME_FORMAT, ALLOWED_TIME_FORMAT, OUTPUT_TIME_FORMAT } from "./time-picker-input";

package/time-picker-input/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OUTPUT_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.TimePickerInput = void 0;
+exports.TimePickerInput = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
 var time_picker_input_1 = require("./time-picker-input");
-Object.defineProperty(exports, "TimePickerInput", { enumerable: true, get: function () { return time_picker_input_1.TimePickerInput; } });
-Object.defineProperty(exports, "DISPLAY_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.DISPLAY_TIME_FORMAT; } });
 Object.defineProperty(exports, "ALLOWED_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.ALLOWED_TIME_FORMAT; } });
+Object.defineProperty(exports, "DISPLAY_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.DISPLAY_TIME_FORMAT; } });
 Object.defineProperty(exports, "OUTPUT_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.OUTPUT_TIME_FORMAT; } });
+Object.defineProperty(exports, "TimePickerInput", { enumerable: true, get: function () { return time_picker_input_1.TimePickerInput; } });

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

@@ -27,12 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerInput = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
-const react_1 = __importStar(require("react"));
-const time_picker_1 = require("../time-picker");
-const _input_with_popover_1 = require("../_input-with-popover");
+const cx_1 = require("@uxf/core/utils/cx");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const react_1 = __importStar(require("react"));
+const _input_with_popover_1 = require("../_input-with-popover");
 const icon_1 = require("../icon");
+const time_picker_1 = require("../time-picker");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_TIME_FORMAT = ["HH:mm", "H:mm"];
 exports.DISPLAY_TIME_FORMAT = "H:mm";
@@ -57,6 +58,7 @@ function getSelectedTime(value) {
 exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const onChange = props.onChange;
+    const className = (0, cx_1.cx)("uxf-time-picker-input", props.className);
     const onInputChange = (0, react_1.useCallback)((value) => {
         const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_TIME_FORMAT, true);
         if (value !== "" && parsedValue.isValid()) {
@@ -73,6 +75,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     }, [onChange]);
     const value = getValue(props.value);
     const selectedTime = getSelectedTime(props.value);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }) }, ({ close }) => (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, selectedTime: selectedTime }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }) }, ({ close }) => (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";

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

@@ -26,8 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const icon_1 = require("@uxf/ui//icon");
 const react_1 = __importStar(require("react"));
-const time_picker_input_1 = require("./time-picker-input");
 const action_1 = require("../utils/action");
+const time_picker_input_1 = require("./time-picker-input");
 exports.default = {
     title: "UI/TimePickerInput",
     component: time_picker_input_1.TimePickerInput,

package/toggle/README.md

@@ -0,0 +1,7 @@
+# Toggle
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/toggle/toggle.css");
+```

package/toggle/index.d.ts

@@ -1,3 +1,3 @@
-export type { ToggleProps } from "./toggle";
 export type { ToggleVariant } from "./theme";
 export { Toggle } from "./toggle";
+export type { ToggleProps } from "./toggle";

package/toggle/toggle.js

@@ -24,16 +24,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
+const react_1 = require("@headlessui/react");
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importStar(require("react"));
-const react_2 = require("@headlessui/react");
-exports.Toggle = (0, react_1.forwardRef)((props, ref) => {
+const react_2 = __importStar(require("react"));
+exports.Toggle = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b;
-    return (react_1.default.createElement(react_2.Switch.Group, null,
-        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
-            react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
-                react_1.default.createElement("span", { className: "uxf-toggle__inner" })),
-            react_1.default.createElement(react_2.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
+    return (react_2.default.createElement(react_1.Switch.Group, null,
+        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
+            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+                react_2.default.createElement("span", { className: "uxf-toggle__inner" })),
+            react_2.default.createElement(react_1.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
 });
 exports.Toggle.displayName = "UxfUiToggle";

package/toggle/toggle.stories.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
+const index_1 = require("./index");
 exports.default = {
     title: "UI/Toggle",
     component: index_1.Toggle,

package/tooltip/README.md

@@ -0,0 +1,7 @@
+# Tooltip
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/tooltip/tooltip.css");
+```

package/tooltip/index.d.ts

@@ -1,4 +1,4 @@
-export type { TooltipProps } from "./tooltip";
 export { Tooltip } from "./tooltip";
-export type { TooltipOptions } from "./use-tooltip";
+export type { TooltipProps } from "./tooltip";
 export { useTooltip } from "./use-tooltip";
+export type { TooltipOptions } from "./use-tooltip";

package/tooltip/tooltip.js

@@ -24,47 +24,49 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const react_1 = __importStar(require("react"));
-const use_tooltip_1 = require("./use-tooltip");
+const react_1 = require("@floating-ui/react");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
+const react_2 = __importStar(require("react"));
+const use_tooltip_1 = require("./use-tooltip");
 const STATIC_SIDES = {
     top: "bottom",
     right: "left",
     bottom: "top",
     left: "right",
 };
-exports.Tooltip = (0, react_1.forwardRef)(({ children, className, content, style, ...options }, ref) => {
+exports.Tooltip = (0, react_2.forwardRef)(({ children, className, content, style, ...options }, ref) => {
     var _a, _b;
-    const arrowRef = (0, react_1.useRef)(null);
+    const arrowRef = (0, react_2.useRef)(null);
     const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
     const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
     const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
     const staticSide = STATIC_SIDES[tooltip.placement.split("-")[0]];
-    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.refs.setReference, children.ref), [ref, tooltip.refs.setReference, children]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        (0, react_1.cloneElement)(children, tooltip.getReferenceProps({
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.refs.setReference, children.ref), [ref, tooltip.refs.setReference, children]);
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        (0, react_2.cloneElement)(children, tooltip.getReferenceProps({
             ref: stableRef,
             ...children.props,
             "data-state": tooltip.open ? "open" : "closed",
         })),
-        tooltip.open && (react_1.default.createElement("div", { ...tooltip.getFloatingProps({
-                className: (0, cx_1.cx)("uxf-tooltip", className),
-                ref: tooltip.refs.setFloating,
-                style: {
-                    ...tooltip.floatingStyles,
-                    ...style,
-                },
-            }) },
-            react_1.default.createElement("div", { className: "uxf-tooltip__arrow", ref: arrowRef, style: {
-                    height: "16px",
-                    left: arrowX !== undefined ? `${arrowX}px` : "",
-                    position: "absolute",
-                    top: arrowY !== undefined ? `${arrowY}px` : "",
-                    transform: "rotate(45deg)",
-                    width: "16px",
-                    [staticSide]: "-6px",
-                } }),
-            content))));
+        tooltip.open && (react_2.default.createElement(react_1.FloatingPortal, null,
+            react_2.default.createElement("div", { ...tooltip.getFloatingProps({
+                    className: (0, cx_1.cx)("uxf-tooltip", className),
+                    ref: tooltip.refs.setFloating,
+                    style: {
+                        ...tooltip.floatingStyles,
+                        ...style,
+                    },
+                }) },
+                react_2.default.createElement("div", { className: "uxf-tooltip__arrow", ref: arrowRef, style: {
+                        height: "16px",
+                        left: arrowX !== undefined ? `${arrowX}px` : "",
+                        position: "absolute",
+                        top: arrowY !== undefined ? `${arrowY}px` : "",
+                        transform: "rotate(45deg)",
+                        width: "16px",
+                        [staticSide]: "-6px",
+                    } }),
+                content)))));
 });
 exports.Tooltip.displayName = "UxfUiTooltip";

package/tooltip/tooltip.stories.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
-const tooltip_1 = require("./tooltip");
 const chip_1 = require("../chip");
+const tooltip_1 = require("./tooltip");
 exports.default = {
     title: "UI/Tooltip",
     component: tooltip_1.Tooltip,