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

package/multi-select/_multi-select-base.js

@@ -24,7 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._MultiSelectBase = void 0;
-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 useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
@@ -33,14 +34,13 @@ const icon_1 = require("@uxf/ui//icon");
 const chip_1 = require("@uxf/ui/chip");
 const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
 const label_1 = require("@uxf/ui/label");
-const react_2 = __importStar(require("react"));
-const react_3 = require("@floating-ui/react");
-exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
+const react_3 = __importStar(require("react"));
+exports._MultiSelectBase = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c;
-    const innerRef = (0, react_2.useRef)(null);
+    const innerRef = (0, react_3.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_a = props.dropdownPlacement) !== null && _a !== void 0 ? _a : "bottom", true, props.dropdownStrategy);
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
+    const stableRef = (0, react_3.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.refs.setReference), [ref, dropdown.refs.setReference]);
     const iconName = (_b = props.iconName) !== null && _b !== void 0 ? _b : "caretDown";
     const selectedOptions = (_c = props.value) !== null && _c !== void 0 ? _c : [];
     const filteredOptions = props.options.filter((option) => !selectedOptions.map((i) => i.id).includes(option.id));
@@ -54,25 +54,25 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
         props.onChange((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.filter((v) => v.id !== valueId)) !== null && _b !== void 0 ? _b : []);
     };
     const withoutPopover = !props.withPopover;
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
         var _a, _b;
-        const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement(react_1.Listbox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef },
-                react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
+        const inputElement = (react_3.default.createElement(react_3.default.Fragment, null,
+            react_3.default.createElement(react_2.Listbox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef },
+                react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
                     ? props.placeholder
-                    : selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label)))),
-                react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
-            renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
-                react_2.default.createElement(react_1.Listbox.Options, { className: (0, cx_1.cx)("uxf-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"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
-                    var _a;
+                    : selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label)))),
+                react_3.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
+            renderProps.open && (react_3.default.createElement(react_1.FloatingPortal, null,
+                react_3.default.createElement(react_2.Listbox.Options, { className: (0, cx_1.cx)("uxf-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"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
+                    var _a, _b, _c;
                     const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
-                    return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, optionKey !== null && optionKey !== void 0 ? optionKey : option.label));
+                    return (react_3.default.createElement(react_2.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option, disabled: option.disabled }, (_c = (_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) !== null && _c !== void 0 ? _c : option.label));
                 })))),
-            props.helperText && withoutPopover && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
-        return (react_2.default.createElement(react_2.default.Fragment, null, withoutPopover ? (react_2.default.createElement(react_2.default.Fragment, null,
-            react_2.default.createElement("div", { className: "uxf-form-component__label" },
-                react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
-            react_2.default.createElement("div", { className: "uxf-form-component__input" }, inputElement))) : (inputElement)));
+            props.helperText && withoutPopover && (react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
+        return (react_3.default.createElement(react_3.default.Fragment, null, withoutPopover ? (react_3.default.createElement(react_3.default.Fragment, null,
+            react_3.default.createElement("div", { className: "uxf-form-component__label" },
+                react_3.default.createElement(react_2.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
+            react_3.default.createElement("div", { className: "uxf-form-component__input" }, inputElement))) : (inputElement)));
     }));
 });
 exports._MultiSelectBase.displayName = "UxfUiMultiSelectBase";

package/multi-select/index.d.ts

@@ -1,2 +1,2 @@
 export { MultiSelect } from "./multi-select";
-export type { MultiSelectOption, MultiSelectProps, MultiSelectValueId, MultiSelectTypeRef } from "./types";
+export type { MultiSelectOption, MultiSelectProps, MultiSelectTypeRef, MultiSelectValueId } from "./types";

package/multi-select/multi-select.js

@@ -27,9 +27,9 @@ exports.MultiSelect = 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 form_component_1 = require("../form-component");
 const icon_1 = require("@uxf/ui/icon");
 const react_2 = __importStar(require("react"));
+const form_component_1 = require("../form-component");
 const _multi_select_base_1 = require("./_multi-select-base");
 exports.MultiSelect = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b, _c;

package/multi-select/multi-select.stories.js

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Default = void 0;
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
 const react_1 = __importStar(require("react"));
-const index_1 = require("./index");
 const action_1 = require("../utils/action");
+const index_1 = require("./index");
 exports.default = {
     title: "UI/MultiSelect",
     component: index_1.MultiSelect,
@@ -40,7 +40,7 @@ const options = [
     { id: "two", label: "Option blue", color: "blue" },
     { id: "three", label: "Option green", color: "green" },
     { id: "four", label: "Option four" },
-    { id: "five", label: "Option five" },
+    { id: "five", label: "Option five disabled", disabled: true },
     { id: "six", label: "Option with diacritics (ěščřžýáíé)" },
 ];
 const Default = () => {
@@ -52,7 +52,10 @@ const Default = () => {
     });
     const component = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-1", label: "MultiSelect", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", value: value }),
-        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true })));
+        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-2", label: "MultiSelect with popover", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, withPopover: true }),
+        react_1.default.createElement(index_1.MultiSelect, { id: "multi-select-3", label: "MultiSelect with renderOption", name: "multi-select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Option: ",
+                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" }, component),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, component)));

package/multi-select/types.d.ts

@@ -1,9 +1,9 @@
 import { Placement, Strategy } from "@floating-ui/react";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
-import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 export type MultiSelectValueId = number | string;
 export type MultiSelectOption<T = MultiSelectValueId> = {
     color?: ChipColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.0.0-beta.8",
+  "version": "10.0.0-beta.80",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -8,24 +8,31 @@
   "scripts": {
     "prepareCss": "rm -rf ./css && mkdir css && cp ./**/*.css ./css/",
     "build": "npm run prepareCss && tsc -P tsconfig.json",
+    "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/\"",
     "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
   },
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react": "0.24.2",
+    "@floating-ui/react": "0.26.0",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "10.0.0-beta.8",
-    "@uxf/datepicker": "1.2.1",
-    "@uxf/styles": "2.1.2",
-    "color2k": "^2.0.2",
-    "dayjs": "^1.11.7",
-    "jump.js": "^1.0.2",
+    "@uxf/core": "10.0.0-beta.80",
+    "@uxf/datepicker": "10.0.0-beta.80",
+    "@uxf/styles": "10.0.0-beta.80",
+    "color2k": "2.0.2",
+    "dayjs": "1.11.10",
+    "jump.js": "1.0.2",
     "react-dropzone": "14.2.3",
     "react-swipeable": "7.0.1"
   },
+  "peerDependencies": {
+    "react": ">= 18.2.0",
+    "react-dom": ">= 18.2.0"
+  },
   "devDependencies": {
-    "@types/jump.js": "^1.0.4",
-    "@uxf/icons-generator": "^1.3.0"
+    "@types/jump.js": "1.0.4",
+    "@types/react": "18.2.27",
+    "@types/react-dom": "18.2.12"
   }
 }

package/pagination/README.md

@@ -0,0 +1,31 @@
+# Pagination
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/pagination/pagination.css");
+@import url("@uxf/ui/icon/icon.css");
+```
+
+## Required icons
+
+- `chevronsLeft`
+- `chevronLeft`
+- `chevronRight`
+- `chevronsRight`
+
+## Props configuration
+
+```tsx
+// pagination.d.ts
+
+declare module "@uxf/ui/pagination/theme" {
+    export interface PaginationSizes {
+        xs: true;
+        sm: true;
+        default: true;
+        lg: true;
+        xl: true;
+    }
+}
+```

package/pagination/index.d.ts

@@ -1,2 +1,2 @@
-export type { PaginationProps } from "./pagination";
 export { Pagination } from "./pagination";
+export type { PaginationProps } from "./pagination";

package/pagination/pagination.d.ts

@@ -1,5 +1,5 @@
-import { FC } from "react";
 import { PaginationSizes } from "@uxf/ui/pagination/theme";
+import { FC } from "react";
 export interface PaginationProps {
     count: number;
     page: number;

package/pagination/pagination.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = void 0;
+const usePagination_1 = require("@uxf/core/hooks/usePagination");
+const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
-const cx_1 = require("@uxf/core/utils/cx");
-const usePagination_1 = require("@uxf/core/hooks/usePagination");
 const Pagination = (props) => {
     var _a;
     const isCurrentPageFirst = props.page === 1;

package/pagination/pagination.stories.d.ts

@@ -2,9 +2,6 @@ import React from "react";
 declare const _default: {
     title: string;
     component: React.FC<import("./pagination").PaginationProps>;
-    parameters: {
-        docs: {};
-    };
 };
 export default _default;
 export declare function Default(): React.JSX.Element;

package/pagination/pagination.stories.js

@@ -24,44 +24,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const pagination_1 = require("./pagination");
 const react_1 = __importStar(require("react"));
-// import Docs from "./pagination.docs.mdx";
 const action_1 = require("../utils/action");
+const pagination_1 = require("./pagination");
 exports.default = {
     title: "UI/Pagination",
     component: pagination_1.Pagination,
-    parameters: {
-        docs: {
-        // page: Docs,
-        },
-    },
 };
 function Default() {
     const [page, setPage] = (0, react_1.useState)(1);
     const onPageChange = (0, action_1.action)("onPageChange", setPage);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("p", { className: "pb-4" },
-            "Je pot\u0159eba ikona ",
-            react_1.default.createElement("b", null, "chevronsLeft"),
-            ", ",
-            react_1.default.createElement("b", null, "chevronLeft"),
-            ", ",
-            react_1.default.createElement("b", null, "chevronRight"),
-            " a ",
-            react_1.default.createElement("b", null, "chevronsRight")),
-        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" },
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xs" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "sm" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "default" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "lg" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xl" })),
-            react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" },
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xs" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "sm" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "default" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "lg" }),
-                react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xl" })))));
+    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" },
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xs" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "sm" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "default" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "lg" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xl" })),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 text-white lg:w-1/2" },
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xs" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "sm" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "default" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "lg" }),
+            react_1.default.createElement(pagination_1.Pagination, { count: 10, page: page, onPageChange: onPageChange, size: "xl" }))));
 }
 exports.Default = Default;

package/paper/README.md

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

package/paper/index.d.ts

@@ -1,2 +1,2 @@
-export type { PaperProps } from "./paper";
 export { Paper } from "./paper";
+export type { PaperProps } from "./paper";

package/paper/paper.stories.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const paper_1 = require("./paper");
 const react_1 = __importDefault(require("react"));
+const paper_1 = require("./paper");
 exports.default = {
     title: "UI/Paper",
     component: paper_1.Paper,

package/radio/README.md

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

package/radio/index.d.ts

@@ -1,3 +1,3 @@
+export { Radio } from "./radio";
 export type { RadioProps } from "./radio";
 export type { RadioSize } from "./theme";
-export { Radio } from "./radio";

package/radio/radio.stories.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
 exports.default = {
     title: "UI/Radio",
     component: index_1.Radio,

package/radio-group/README.md

@@ -0,0 +1,8 @@
+# RadioGroup
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/radio/radio.css");
+@import url("@uxf/ui/radio-group/radio-group.css");
+```

package/radio-group/index.d.ts

@@ -1,3 +1,3 @@
-export type { RadioGroupOption, RadioGroupOptionValue, RadioGroupProps } from "./radio-group";
-export type { RadioGroupVariant } from "./theme";
 export { RadioGroup } from "./radio-group";
+export type { RadioGroupOption, RadioGroupOptionValueId, RadioGroupProps } from "./radio-group";
+export type { RadioGroupVariant } from "./theme";

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

@@ -2,13 +2,13 @@ import React, { CSSProperties, ReactNode } from "react";
 import { RadioSize } from "../radio";
 import { FormControlProps } from "../types";
 import { RadioGroupVariant } from "./theme";
-export type RadioGroupOptionValue = string | number;
+export type RadioGroupOptionValueId = string | number;
 export interface RadioGroupOption {
     disabled?: boolean;
+    id: RadioGroupOptionValueId;
     label: string;
-    value: RadioGroupOptionValue;
 }
-export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue | null> {
+export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueId | null> {
     className?: string;
     helperText?: ReactNode;
     forceColumn?: boolean;

package/radio-group/radio-group.js

@@ -43,9 +43,9 @@ exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
         react_2.default.createElement("div", { className: "uxf-form-component__label" },
             react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label)),
         react_2.default.createElement("div", { className: "uxf-form-component__input" },
-            react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
+            react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.id.toString(), value: option.id }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
                 react_2.default.createElement("span", { className: "uxf-radio-group__option-label" }, option.label),
-                react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.value }))))))),
+                react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.id }))))))),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
 });
 exports.RadioGroup.displayName = "UxfUiRadioGroup";

package/radio-group/radio-group.stories.js

@@ -24,29 +24,29 @@ 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/RadioGroup",
     component: index_1.RadioGroup,
 };
 const options = [
     {
-        value: "1",
+        id: "1",
         label: "Radio one",
     },
     {
-        value: "2",
+        id: "2",
         label: "Radio two",
     },
     {
-        value: "3",
+        id: "3",
         label: "Radio three-sixty",
     },
 ];
 function Default() {
-    const [value, setValue] = (0, react_1.useState)(options[0].value);
+    const [value, setValue] = (0, react_1.useState)(options[0].id);
     const onChange = (0, action_1.action)("onChange", setValue);
     const testRadioGroups = (react_1.default.createElement("div", { className: "space-y-10" },
         react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: onChange, options: options, value: value }),

package/raster-image/README.md

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

package/raster-image/index.d.ts

@@ -1,2 +1,2 @@
-export type { RasterImageProps } from "./raster-image";
 export { RasterImage } from "./raster-image";
+export type { RasterImageProps } from "./raster-image";

package/raster-image/raster-image.js

@@ -42,7 +42,7 @@ const RasterImage = (props) => {
             : props.width && props.height
                 ? Math.ceil((props.height / props.width) * w)
                 : "auto", key: `${w}-${i}`, 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)(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: (0, image_1.getImgElementHeight)(props.src, props.width, props.height), loading: props.loading, src: resizerSrc, width: (0, image_1.getImgElementWidth)(props.src, props.width, props.height) })));
 };
 exports.RasterImage = RasterImage;
 exports.RasterImage.displayName = "UxfUiRasterImage";

package/scripts/generate-tw-tokens.js

@@ -47,48 +47,56 @@ const TW_TOKENS = [
 
 let error = false;
 
-try {
-    const mode = process.argv.filter((c) => c.includes("--mode="))[0]?.split("=")[1];
-    const twConfig = process.argv.filter((c) => c.includes("--twConfig="))[0]?.split("=")[1];
-    const outputPath = process.argv.filter((c) => c.includes("--outputPath="))[0]?.split("=")[1];
+async function generateTwTokens() {
+    try {
+        const mode = process.argv.filter((c) => c.includes("--mode="))[0]?.split("=")[1];
+        const twConfig = process.argv.filter((c) => c.includes("--twConfig="))[0]?.split("=")[1];
+        const outputPath = process.argv.filter((c) => c.includes("--outputPath="))[0]?.split("=")[1];
+
+        if (!twConfig) {
+            throw Error(`Provide valid path to tailwind config. Use "--twConfig" argument.`);
+        }
 
-    if (!twConfig) {
-        throw Error(`Provide valid path to tailwind config. Use "--twConfig" argument.`);
-    }
+        if (!outputPath) {
+            throw Error(`Provide valid output path to tailwind tokens. Use "--outputPath" argument.`);
+        }
 
-    if (!outputPath) {
-        throw Error(`Provide valid output path to tailwind tokens. Use "--outputPath" argument.`);
-    }
+        const loadedTwConfig = resolveConfig(require(path.resolve(process.cwd(), twConfig)));
 
-    const loadedTwConfig = resolveConfig(require(path.resolve(process.cwd(), twConfig)));
+        const outputDir = path.resolve(process.cwd(), outputPath);
 
-    TW_TOKENS.forEach((property) => {
-        const result = resolveProperty(property, loadedTwConfig.theme) || "";
+        if (mode !== "check" && !fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir);
+        }
 
-        const filePath = path.resolve(process.cwd(), `${outputPath}tw-${camelToSnakeCase(property)}.ts`);
+        for (const token of TW_TOKENS) {
+            const result = resolveProperty(token, loadedTwConfig.theme) || "";
 
-        if (!result && mode !== "check" && fs.existsSync(filePath)) {
-            fs.rmSync(filePath);
-        }
+            const filePath = path.resolve(process.cwd(), `${outputPath}tw-${camelToSnakeCase(token)}.ts`);
+
+            if (!result && mode !== "check" && fs.existsSync(filePath)) {
+                fs.rmSync(filePath);
+            }
 
-        const newContent = prettier.format(result, {
-            parser: "babel",
-            tabWidth: 4,
-        });
+            const newContent = await prettier.format(result, {
+                parser: "typescript",
+                tabWidth: 4,
+            });
 
-        if (mode === "check") {
-            const oldContent = fs.existsSync(filePath) ? fs.readFileSync(filePath).toString() : "";
+            if (mode === "check") {
+                const oldContent = fs.existsSync(filePath) ? fs.readFileSync(filePath).toString() : "";
 
-            if (newContent !== oldContent) {
-                throw new Error("Generated tailwind tokens doesn't match with current tailwind config.");
+                if (newContent !== oldContent) {
+                    throw new Error("Generated tailwind tokens doesn't match with current tailwind config.");
+                }
+            } else if (newContent) {
+                fs.writeFileSync(filePath, newContent, "utf-8");
             }
-        } else if (newContent) {
-            fs.writeFileSync(filePath, newContent, "utf-8");
         }
-    });
-} catch (err) {
-    console.error(err.message);
-    error = true;
+    } catch (err) {
+        console.error(err.message);
+        error = true;
+    }
 }
 
-process.exit(error ? 1 : 0);
+generateTwTokens().then(() => process.exit(error ? 1 : 0));

package/select/README.md

@@ -0,0 +1,11 @@
+# Select
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/dropdown/dropdown.css");
+```

package/select/index.d.ts

@@ -1,2 +1,2 @@
-export type { SelectValue, SelectOption, SelectProps } from "./select";
 export { Select } from "./select";
+export type { SelectOption, SelectProps, SelectValue } from "./select";

package/select/select.d.ts

@@ -13,7 +13,7 @@ export interface SelectProps<ValueId = SelectValue, Option = SelectOption<ValueI
     noQueryMessage?: string;
     notFoundMessage?: string;
     options: Option[];
-    renderOption?: (option: Option) => ReactNode;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
     renderSelectedOption?: (option: Option) => ReactNode;
 }
 export declare const Select: {

package/select/select.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
 const react_2 = __importDefault(require("react"));
 const _select_base_1 = require("../_select-base");
-const classes_1 = require("@uxf/core/constants/classes");
 const Select = (props) => {
     var _a, _b, _c, _d;
     const onChange = (v) => { var _a; return props.onChange((_a = v === null || v === void 0 ? void 0 : v.id) !== null && _a !== void 0 ? _a : null); };