@fibery/ui-kit 1.42.0 → 2.0.1

package/.oxlintrc.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../../node_modules/oxlint/configuration_schema.json",
+  "extends": ["../../.oxlintrc.json"],
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["@fibery/ui-kit/*"]
+          }
+        ]
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["src/icons/**/*"],
+      "rules": {
+        "unicorn/filename-case": "off"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @fibery/ui-kit
 
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies [7091c2b]
+  - @fibery/emoji-data@2.7.3
+
+## 2.0.0
+
+### Major Changes
+
+- 99bfef2: helpers/types
+
+### Patch Changes
+
+- Updated dependencies [99bfef2]
+  - @fibery/helpers@2.0.0
+  - @fibery/emoji-data@2.7.2
+  - @fibery/react@1.5.1
+
 ## 1.42.0
 
 ### Minor Changes

package/eslint.config.mjs

@@ -1,4 +1,4 @@
-import baseConfig from "@fibery/eslint-config";
+import baseConfig from "../../eslint.config.mjs";
 
 export default [
   ...baseConfig,

package/jest.config.cjs

@@ -0,0 +1,36 @@
+/** @type {import('@jest/schemas').InitialOptions} */
+const config = {
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  coverageReporters: ["text", "cobertura"],
+  moduleNameMapper: {
+    "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js",
+  },
+  setupFilesAfterEnv: ["<rootDir>/config/jest/testFrameworkSetup.js"],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["@fibery/source"],
+  },
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx)$": [
+      "@swc/jest",
+      {
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true,
+            decorators: true,
+            dynamicImport: true,
+          },
+          transform: {
+            react: {
+              runtime: "automatic",
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.42.0",
+  "version": "2.0.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -46,13 +46,9 @@
     "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
-    "@fibery/emoji-data": "2.7.1",
-    "@fibery/helpers": "1.5.0",
-    "@fibery/react": "1.5.0"
-  },
-  "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@fibery/emoji-data": "2.7.3",
+    "@fibery/helpers": "2.0.0",
+    "@fibery/react": "1.5.1"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
@@ -69,6 +65,7 @@
     "@types/prop-types": "15.7.5",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
+    "@typescript/native-preview": "7.0.0-dev.20260225.1",
     "@wyw-in-js/babel-preset": "0.5.5",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
@@ -79,57 +76,20 @@
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "5.9.3",
+    "typescript": "6.0.0-beta",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.1",
-    "@fibery/eslint-config": "9.0.0"
+    "@fibery/babel-preset": "7.4.2"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "coveragePathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "coverageReporters": [
-      "text",
-      "cobertura"
-    ],
-    "moduleNameMapper": {
-      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js"
-    },
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": [
-        "@swc/jest",
-        {
-          "jsc": {
-            "parser": {
-              "syntax": "typescript",
-              "tsx": true,
-              "decorators": true,
-              "dynamicImport": true
-            },
-            "transform": {
-              "react": {
-                "runtime": "automatic"
-              }
-            }
-          }
-        }
-      ]
-    },
-    "setupFilesAfterEnv": [
-      "<rootDir>/config/jest/testFrameworkSetup.js"
-    ]
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "scripts": {
     "test": "TZ=Europe/Minsk jest",
     "test:ci": "pnpm run test --reporters=default --reporters=jest-junit",
     "test:coverage": "pnpm run test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
-    "lint": "eslint .",
+    "lint": "../../scripts/lint.sh",
     "generate-icons": "node scripts/generate-icons.mjs",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "../../scripts/typecheck.sh"
   }
 }

package/src/@types/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css" {}

package/src/actions-menu/actions-menu-checkbox-item.tsx

@@ -0,0 +1,74 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css, cx} from "@linaria/core";
+import {FunctionComponent, memo, ReactNode} from "react";
+import {layoutVars, space, themeVars} from "../design-system";
+import CheckedIcon from "../icons/react/Checked";
+import {IconBaseProps} from "../icons/types";
+import {mobileRootSelector} from "../mobile-styles";
+import {useIsPhone} from "../use-is-phone";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+const rowCss = css`
+  display: flex;
+  align-items: center;
+  min-height: ${layoutVars.menuItemHeight};
+  gap: ${space.s6}px;
+  ${mobileRootSelector} & {
+    gap: ${space.s8}px;
+  }
+`;
+
+const rowContentCss = css`
+  flex-grow: 1;
+`;
+
+const cornerCss = css`
+  display: flex;
+  align-items: center;
+`;
+
+export type ActionsMenuCheckboxItemProps = {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  Icon?: FunctionComponent<IconBaseProps>;
+  iconColor?: string;
+  disabled?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+export const ActionsMenuCheckboxItem: React.FC<ActionsMenuCheckboxItemProps> = memo(function ActionsMenuCheckboxItem({
+  checked,
+  onCheckedChange,
+  Icon,
+  iconColor,
+  disabled,
+  children,
+  className,
+}) {
+  const {MenuPrimitive} = useActionsMenuContext();
+  const isPhone = useIsPhone();
+
+  return (
+    <MenuPrimitive.CheckboxItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      onClick={stopPropagation}
+      className={cx(rowCss, className)}
+      disabled={disabled}
+    >
+      {Icon && (
+        <div className={cornerCss}>
+          <Icon
+            color={`var(--actions-menu-item-icon-color, ${iconColor ?? themeVars.iconColor})`}
+            iconSize={isPhone ? 20 : 18}
+          />
+        </div>
+      )}
+      <div className={rowContentCss}>{children}</div>
+      <div className={cornerCss}>
+        {checked && <CheckedIcon iconSize={isPhone ? 20 : 18} color={themeVars.textColor} />}
+      </div>
+    </MenuPrimitive.CheckboxItem>
+  );
+});

package/src/actions-menu/contexts/actions-menu-context.tsx

@@ -4,6 +4,7 @@ import {ActionsMenuConfirmationProps} from "../actions-menu-confirmation";
 
 type MenuPrimitive = {
   Item: React.ElementType;
+  CheckboxItem: React.ElementType;
   Label: React.ElementType;
   Group: React.ElementType;
   Separator: React.ElementType;

package/src/actions-menu/index.tsx

@@ -3,6 +3,7 @@ import {$TSFixMe} from "../tsfixme";
 
 export {ActionsMenu} from "./actions-menu";
 export {ActionsMenuItem} from "./actions-menu-item";
+export {ActionsMenuCheckboxItem} from "./actions-menu-checkbox-item";
 export {AsyncActionsMenuItem} from "./async-actions-menu-item";
 export {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
 export {useActionsMenuContext} from "./contexts/actions-menu-context";

package/src/animated-number.tsx

@@ -19,8 +19,8 @@ export function AnimatedNumber({children, speed = 300, fps = 12, fixed, format}:
     fixed === undefined
       ? currentValue
       : fixed === 0
-      ? Math.round(currentValue)
-      : parseFloat(currentValue.toFixed(fixed));
+        ? Math.round(currentValue)
+        : parseFloat(currentValue.toFixed(fixed));
   useEffect(() => {
     let timeout: number | undefined;
     if (step < 0 ? currentValue > children : currentValue < children && currentValue !== children) {

package/src/antd/AutoComplete.d.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const AntAutoComplete: FunctionComponent<any>;

package/src/app-icon-with-fallback.tsx

@@ -3,7 +3,7 @@ import fromPairs from "lodash/fromPairs";
 import {FC, lazy, Suspense} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWrapper} from "./app-icon-wrapper";
-import {getOpacities, iconSize, layout} from "./design-system";
+import {alpha, iconSize, layout} from "./design-system";
 import {Icon} from "./icons/Icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -129,9 +129,9 @@ export const AppIcon: FC<AppIconProps> = ({icon, color, isSelected, ...rest}) =>
   const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
   const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
   const iconColor = theme.select({
-    dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
-    light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
-    light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+    dark: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
+    light: a11yColor(alpha(color, 0.95), theme.whiteColor, 3),
+    light2: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
   });
 
   const bgColor = theme.fns.getAppIconBackground(color);

package/src/app-icon.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 import {FC} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWithFallback} from "./app-icon-with-fallback";
-import {border, getOpacities} from "./design-system";
+import {alpha, border} from "./design-system";
 import {useTheme} from "./theme-provider";
 
 interface AppIconProps {
@@ -17,9 +17,9 @@ interface AppIconProps {
 export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, iconSize = 36, className}) => {
   const theme = useTheme();
   const iconColor = theme.select({
-    dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
-    light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
-    light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
+    dark: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
+    light: a11yColor(alpha(color, 0.95), theme.whiteColor, 3),
+    light2: a11yColor(alpha(color, 0.95), theme.menuBg, 5),
   });
 
   const bgColor = theme.fns.getAppIconBackground(color);