@uxf/ui 11.80.1 → 11.80.4

package/README.md

@@ -9,3 +9,4 @@
 ```bash
 yarn add @uxf/ui
 ```
+

package/accordion/accordion.stories.js

@@ -14,7 +14,7 @@ function Default() {
             react_1.default.createElement(accordion_1.Accordion.Item, { id: "item2", title: "Hodn\u011B dobr\u00FD dotaz" }, "P\u0159evedl spr\u00E1vn\u00ED, kter\u00FDmi v\u00FDkonn\u00E9mu st\u00E1tn\u00EDho a \u00FA\u010Deln\u00FD tuto org\u00E1nu, mohlo k zdr\u017Eet n\u011Bho\u017E prok\u00E1z\u00E1n 1950 i n\u011Bm\u017E p\u00EDsmenny a velk\u00E9 v\u00FDznamn\u00E9 p\u0159\u00EDpady, kter\u00E9 se neboj\u00ED v\u00FDznamn\u00E9 p\u0159\u00EDpady, kter\u00E9 se"),
             react_1.default.createElement(accordion_1.Accordion.Item, { id: "item3", title: "Kdo v\u00ED kde se skr\u00FDv\u00E1 v\u0161ev\u011Bdouc\u00ED..." }, "Spr\u00E1vn\u00ED, kter\u00FDmi v\u00FDkonn\u00E9mu st\u00E1tn\u00EDho a \u00FA\u010Deln\u00FD tuto org\u00E1nu, mohlo k zdr\u017Eet n\u011Bho\u017E prok\u00E1z\u00E1n 1950 i n\u011Bm\u017E p\u00EDsmenny a velk\u00E9 v\u00FDznamn\u00E9 p\u0159\u00EDpady, kter\u00E9 se neboj\u00ED v\u00FDznamn\u00E9 p\u0159\u00EDpady, kter\u00E9 se")),
         react_1.default.createElement("p", { className: "mb-4 mt-10" }, "Accordion - itemOpenBehavior multiple, custom icons, default open"),
-        react_1.default.createElement(accordion_1.Accordion, { closeIconName: "minus", itemOpenBehavior: "multiple", openIconName: "plus" },
+        react_1.default.createElement(accordion_1.Accordion, { closeIconName: "minus", itemOpenBehavior: "multiple", openIconName: "check" },
             react_1.default.createElement(accordion_1.Accordion.Item, { id: "item1", isOpen: true, title: "Item 1" }, "Opr\u00E1vn\u011Bn\u00E9 ani\u017E i odstoupil o snadno osoby vede kter\u00FDmi v\u00FDkonn\u00E9mu st\u00E1tn\u00EDho a \u00FA\u010Deln\u00FD tuto org\u00E1nu"),
             react_1.default.createElement(accordion_1.Accordion.Item, { id: "item2", title: "Item 2" }, "P\u0159evedl spr\u00E1vn\u00ED, kter\u00FDmi v\u00FDkonn\u00E9mu st\u00E1tn\u00EDho a \u00FA\u010Deln\u00FD tuto org\u00E1nu, mohlo k zdr\u017Eet n\u011Bho\u017E prok\u00E1z\u00E1n 1950 i n\u011Bm\u017E p\u00EDsmenny a velk\u00E9 v\u00FDznamn\u00E9 p\u0159\u00EDpady, kter\u00E9 se neboj\u00ED v\u00FDznamn\u00E9 p\u0159\u00EDpady, kter\u00E9 se"))));
 }

package/combobox/combobox.d.ts

@@ -1,8 +1,8 @@
 import { Placement, Strategy } from "@floating-ui/react";
-import { IconsSet } from "@uxf/ui/icon";
 import { InputGroupSize, InputGroupVariant } from "@uxf/ui/input";
 import { Clearable, FormControlProps } from "@uxf/ui/types";
 import React, { CSSProperties, ReactNode, Ref } from "react";
+import { IconName } from "../icon/types";
 export type ComboboxValueId = number | string;
 export type ComboboxValue<Id = ComboboxValueId> = {
     id: Id;
@@ -22,7 +22,7 @@ export interface ComboboxProps<Id = ComboboxValueId, Option = ComboboxOption<Id>
     form?: string;
     helperText?: ReactNode;
     hiddenLabel?: boolean;
-    iconName?: keyof IconsSet;
+    iconName?: IconName;
     id?: string;
     inputArrow?: (open: boolean) => ReactNode;
     keyExtractor?: (option: Option) => string | number;

package/config/icons.d.ts

@@ -1,4 +1,12 @@
 export declare const ICONS: {
+    readonly "angle-left": {
+        readonly w: 320;
+        readonly h: 512;
+    };
+    readonly "angle-right": {
+        readonly w: 320;
+        readonly h: 512;
+    };
     readonly "arrow-left": {
         readonly w: 448;
         readonly h: 512;
@@ -67,6 +75,14 @@ export declare const ICONS: {
         readonly w: 128;
         readonly h: 512;
     };
+    readonly eye: {
+        readonly w: 576;
+        readonly h: 512;
+    };
+    readonly "eye-slash": {
+        readonly w: 640;
+        readonly h: 512;
+    };
     readonly file: {
         readonly w: 384;
         readonly h: 512;
@@ -75,10 +91,42 @@ export declare const ICONS: {
         readonly w: 384;
         readonly h: 512;
     };
+    readonly minus: {
+        readonly w: 24;
+        readonly h: 24;
+    };
+    readonly plus: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly "solid-badge-check": {
+        readonly w: 24;
+        readonly h: 24;
+    };
+    readonly "solid-triangle-exclamation": {
+        readonly w: 24;
+        readonly h: 24;
+    };
+    readonly "solid-octagon-xmark": {
+        readonly w: 24;
+        readonly h: 24;
+    };
+    readonly "solid-circle-info": {
+        readonly w: 24;
+        readonly h: 24;
+    };
+    readonly trash: {
+        readonly w: 448;
+        readonly h: 512;
+    };
     readonly "triangle-exclamation": {
         readonly w: 512;
         readonly h: 512;
     };
+    readonly "triangle-exclamation-solid": {
+        readonly w: 512;
+        readonly h: 512;
+    };
     readonly user: {
         readonly w: 448;
         readonly h: 512;
@@ -97,31 +145,3 @@ export declare const ICONS: {
     };
 };
 export type IconsType = keyof typeof ICONS;
-declare module "@uxf/ui/icon/theme" {
-    interface IconsSet {
-        "arrow-left": true;
-        "arrow-right": true;
-        "calendar": true;
-        "camera": true;
-        "caretDown": true;
-        "clock": true;
-        "bars": true;
-        "check": true;
-        "chevronDown": true;
-        "chevronLeft": true;
-        "chevronsLeft": true;
-        "chevronRight": true;
-        "chevronsRight": true;
-        "chevronUp": true;
-        "cloud": true;
-        "copy": true;
-        "ellipsis-vertical": true;
-        "file": true;
-        "imageFile": true;
-        "triangle-exclamation": true;
-        "user": true;
-        "videoFile": true;
-        "xmark": true;
-        "xmarkLarge": true;
-    }
-}

package/config/icons.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ICONS = void 0;
 exports.ICONS = {
+    "angle-left": { w: 320, h: 512 },
+    "angle-right": { w: 320, h: 512 },
     "arrow-left": { w: 448, h: 512 },
     "arrow-right": { w: 448, h: 512 },
     "calendar": { w: 448, h: 512 },
@@ -20,9 +22,19 @@ exports.ICONS = {
     "cloud": { w: 640, h: 512 },
     "copy": { w: 512, h: 512 },
     "ellipsis-vertical": { w: 128, h: 512 },
+    "eye": { w: 576, h: 512 },
+    "eye-slash": { w: 640, h: 512 },
     "file": { w: 384, h: 512 },
     "imageFile": { w: 384, h: 512 },
+    "minus": { w: 24, h: 24 },
+    "plus": { w: 448, h: 512 },
+    "solid-badge-check": { w: 24, h: 24 },
+    "solid-triangle-exclamation": { w: 24, h: 24 },
+    "solid-octagon-xmark": { w: 24, h: 24 },
+    "solid-circle-info": { w: 24, h: 24 },
+    "trash": { w: 448, h: 512 },
     "triangle-exclamation": { w: 512, h: 512 },
+    "triangle-exclamation-solid": { w: 512, h: 512 },
     "user": { w: 448, h: 512 },
     "videoFile": { w: 384, h: 512 },
     "xmark": { w: 384, h: 512 },

package/icon/icon.stories.js

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

package/icon/theme.d.ts

@@ -1,4 +1,5 @@
-export interface IconsSet extends Record<string, boolean> {
+export interface IconsSet {
+    "": true;
 }
 export interface IconColors {
     default: true;

package/icons-config.js

@@ -120,6 +120,11 @@ module.exports = {
         height: 24,
         data: `<path fill="currentColor" d="M22.875 10.833c.623 0 1.125.544 1.125 1.125 0 .666-.502 1.125-1.125 1.125H1.083c-.58 0-1.083-.46-1.083-1.125 0-.581.503-1.125 1.083-1.125h21.792Z"/>`,
     },
+    plus: {
+        width: 448,
+        height: 512,
+        data: `<path fill="currentColor" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/>`,
+    },
     "triangle-exclamation": {
         width: 512,
         height: 512,
@@ -170,4 +175,9 @@ module.exports = {
         height: 24,
         data: `<path d="M12.5 22.5C8.90625 22.5 5.625 20.625 3.82812 17.5C2.03125 14.4141 2.03125 10.625 3.82812 7.5C5.625 4.41406 8.90625 2.5 12.5 2.5C16.0547 2.5 19.3359 4.41406 21.1328 7.5C22.9297 10.625 22.9297 14.4141 21.1328 17.5C19.3359 20.625 16.0547 22.5 12.5 22.5ZM10.9375 15.625C10.3906 15.625 10 16.0547 10 16.5625C10 17.1094 10.3906 17.5 10.9375 17.5H14.0625C14.5703 17.5 15 17.1094 15 16.5625C15 16.0547 14.5703 15.625 14.0625 15.625H13.75V12.1875C13.75 11.6797 13.3203 11.25 12.8125 11.25H10.9375C10.3906 11.25 10 11.6797 10 12.1875C10 12.7344 10.3906 13.125 10.9375 13.125H11.875V15.625H10.9375ZM12.5 7.5C11.7969 7.5 11.25 8.08594 11.25 8.75C11.25 9.45312 11.7969 10 12.5 10C13.1641 10 13.75 9.45312 13.75 8.75C13.75 8.08594 13.1641 7.5 12.5 7.5Z" fill="currentColor"/>`,
     },
+    trash: {
+        width: 448,
+        height: 512,
+        data: `<path d="M424 80C437.3 80 448 90.75 448 104C448 117.3 437.3 128 424 128H412.4L388.4 452.7C385.9 486.1 358.1 512 324.6 512H123.4C89.92 512 62.09 486.1 59.61 452.7L35.56 128H24C10.75 128 0 117.3 0 104C0 90.75 10.75 80 24 80H93.82L130.5 24.94C140.9 9.357 158.4 0 177.1 0H270.9C289.6 0 307.1 9.358 317.5 24.94L354.2 80H424zM177.1 48C174.5 48 171.1 49.34 170.5 51.56L151.5 80H296.5L277.5 51.56C276 49.34 273.5 48 270.9 48H177.1zM364.3 128H83.69L107.5 449.2C108.1 457.5 115.1 464 123.4 464H324.6C332.9 464 339.9 457.5 340.5 449.2L364.3 128z" fill="currentColor"/>`,
+    },
 };

package/icons.d.ts

@@ -0,0 +1,40 @@
+declare module "@uxf/ui/icon/theme" {
+    interface IconsSet {
+        "angle-left": true;
+        "angle-right": true;
+        "arrow-left": true;
+        "arrow-right": true;
+        bars: true;
+        calendar: true;
+        camera: true;
+        caretDown: true;
+        check: true;
+        chevronDown: true;
+        chevronLeft: true;
+        chevronRight: true;
+        chevronUp: true;
+        chevronsLeft: true;
+        chevronsRight: true;
+        clock: true;
+        cloud: true;
+        copy: true;
+        "ellipsis-vertical": true;
+        eye: true;
+        "eye-slash": true;
+        file: true;
+        imageFile: true;
+        minus: true;
+        plus: true;
+        "solid-badge-check": true;
+        "solid-circle-info": true;
+        "solid-octagon-xmark": true;
+        "solid-triangle-exclamation": true;
+        trash: true;
+        "triangle-exclamation": true;
+        "triangle-exclamation-solid": true;
+        user: true;
+        videoFile: true;
+        xmark: true;
+        xmarkLarge: true;
+    }
+}

package/input/input-arrow-icon.d.ts

@@ -1,7 +1,7 @@
-import { IconsSet } from "@uxf/ui/icon";
 import React from "react";
+import { IconName } from "../icon/types";
 interface Props {
-    iconName?: keyof IconsSet;
+    iconName?: IconName;
     isOpen: boolean;
 }
 export declare function InputArrowIcon(props: Props): React.JSX.Element;

package/modal-dialog/modal-dialog.stories.js

@@ -18,11 +18,11 @@ function Default() {
                 react_1.default.createElement(button_1.Button, { color: "warning" }, "Button")), icon: react_1.default.createElement(icon_1.Icon, { color: "warning", name: "triangle-exclamation" }), title: "Warning dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
         react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { color: "positive" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "positive", name: "youtube" }), title: "Positive dialog asda ksdjahs kjdhakj shdk jahksdjh kajsdh k" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
+                react_1.default.createElement(button_1.Button, { color: "positive" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "positive", name: "camera" }), title: "Positive dialog asda ksdjahs kjdhakj shdk jahksdjh kajsdh k" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
         react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
                 react_1.default.createElement(button_1.Button, { color: "negative" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "negative", name: "xmark", size: 48 }), title: "Negative dialog" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
         react_1.default.createElement(modal_dialog_1.ModalDialog, { footer: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { color: "info" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "info", name: "circle-info" }), title: "Info dialog", width: "lg" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
+                react_1.default.createElement(button_1.Button, { color: "info" }, "Save")), icon: react_1.default.createElement(icon_1.Icon, { color: "info", name: "solid-circle-info" }), title: "Info dialog", width: "lg" }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
 }

package/multi-combobox/types.d.ts

@@ -2,7 +2,7 @@ import { Placement, Strategy } from "@floating-ui/react";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import { CSSProperties, ReactNode } from "react";
 import { ChipColor } from "../chip";
-import { IconsSet } from "../icon/theme";
+import { IconName } from "../icon/types";
 import { FormControlProps } from "../types";
 export type MultiComboboxValueId = number | string;
 export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
@@ -24,7 +24,7 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     form?: string;
     helperText?: ReactNode;
     hiddenLabel?: boolean;
-    iconName?: keyof IconsSet;
+    iconName?: IconName;
     id?: string;
     inputArrow?: (open: boolean) => ReactNode;
     keyExtractor?: (option: Option) => string | number;

package/multi-select/types.d.ts

@@ -3,7 +3,7 @@ import { SelectableId } from "@uxf/core/types";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import { CSSProperties, ReactNode } from "react";
 import { ChipColor } from "../chip";
-import { IconsSet } from "../icon/theme";
+import { IconName } from "../icon/types";
 import { FormControlProps } from "../types";
 /** @deprecated use import { SelectableId } from "@uxf/core/types" */
 export type MultiSelectValueId = SelectableId;
@@ -25,7 +25,7 @@ export interface MultiSelectProps<ValueId extends SelectableId = SelectableId, O
     form?: string;
     helperText?: ReactNode;
     hiddenLabel?: boolean;
-    iconName?: keyof IconsSet;
+    iconName?: IconName;
     id?: string;
     inputArrow?: (open: boolean) => ReactNode;
     keyExtractor?: (option: Option) => string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.80.1",
+    "version": "11.80.4",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.80.0",
-        "@uxf/core-react": "11.80.0",
-        "@uxf/datepicker": "11.61.0",
-        "@uxf/styles": "11.80.0",
+        "@uxf/core": "11.80.4",
+        "@uxf/core-react": "11.80.4",
+        "@uxf/datepicker": "11.80.4",
+        "@uxf/styles": "11.80.4",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",

package/select/select.d.ts

@@ -1,5 +1,5 @@
 import { Placement, Strategy } from "@floating-ui/react";
-import { IconsSet } from "@uxf/ui/icon";
+import { IconName } from "@uxf/ui/icon/types";
 import { InputGroupSize, InputGroupVariant } from "@uxf/ui/input";
 import { Clearable, FormControlProps } from "@uxf/ui/types";
 import React, { CSSProperties, ReactNode, Ref } from "react";
@@ -20,7 +20,7 @@ export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>>
     form?: string;
     helperText?: ReactNode;
     hiddenLabel?: boolean;
-    iconName?: keyof IconsSet;
+    iconName?: IconName;
     id?: string;
     inputArrow?: (open: boolean) => ReactNode;
     keyExtractor?: (option: Option) => string | number;