@fibery/ui-kit 1.34.2 → 1.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.2",
+  "version": "1.34.3",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -74,9 +74,9 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/emoji-data": "2.6.0",
     "@fibery/helpers": "1.3.0",
-    "@fibery/react": "1.4.0"
+    "@fibery/react": "1.4.0",
+    "@fibery/emoji-data": "2.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/button/base-button.tsx

@@ -1,4 +1,4 @@
-import {CSSProperties, css, cx} from "@linaria/core";
+import {css, CSSProperties, cx} from "@linaria/core";
 import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";

package/src/button/button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
 import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 
 export type ButtonProps = {

package/src/button/icon-button.tsx

@@ -1,9 +1,9 @@
 import {css, cx} from "@linaria/core";
 import {forwardRef} from "react";
-import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
 import {border, space} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import Spinner from "../icons/react/Spinner";
+import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
 
 export type IconButtonProps = {
   size?: ButtonSize;

package/src/design-system.ts

@@ -341,12 +341,14 @@ export const themeColors = {
   ],
   // :focus
   colorBgEntityBoxDefaultFocus: [whiteA.whiteA0, slateDark.slate3],
+  colorOverlayEntityBoxDefaultFocus: [indigo.indigo9, indigoDark.indigo9],
   shadowStrokeEntityBoxDefaultFocus: [
     `0 0 0 2px ${getOpacities(indigo.indigo9).opacity40}`,
     `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity40}`,
   ],
   // :focus:hover
   colorBgEntityBoxDefaultFocusHover: [whiteA.whiteA0, slateDark.slate4],
+  colorOverlayEntityBoxDefaultFocusHover: [indigo.indigo9, indigoDark.indigo9],
   shadowStrokeEntityBoxDefaultFocusHover: [
     `0 0 0 2px ${getOpacities(indigo.indigo9).opacity60}`,
     `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity60}`,
@@ -426,6 +428,11 @@ export const themeColors = {
   allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
   relationViewBgColor: [slate.slate2, slateDark.slate3],
 
+  mySpaceIconColor: [blackA.blackA11, whiteA.whiteA11],
+  mySpaceIconBg: [getOpacities(blackA.blackA11).opacity20, getOpacities(whiteA.whiteA11).opacity20],
+  favoritesIconColor: [yellow.yellow8, yellowDark.yellow11],
+  favoritesIconBg: [getOpacities(yellow.yellow8).opacity20, getOpacities(yellowDark.yellow11).opacity20],
+
   // Unit
   unitBg: [slate.slate3, slateDark.slate6],
   unitBgHover: [slate.slate4, slateDark.slate7],
@@ -494,6 +501,7 @@ export const themeColors = {
   progressText: [slate.slate11, slate.slate11],
   progressFillBg: [slate.slate11, slate.slate11],
   progressFillText: [whiteA.whiteA0, whiteA.whiteA0],
+  progressBarFillNeutral: [getOpacities(slate.slate9).opacity20, getOpacities(slateDark.slate9).opacity20],
   progressBarFill: [indigo.indigo9, indigoDark.indigo10],
   progressBarBg: [getOpacities(indigo.indigo9).opacity25, getOpacities(indigoDark.indigo10).opacity25],
   searchFiltersBg: [slate.slate1, slateDark.slate2],
@@ -902,7 +910,7 @@ export const layout = {
   enumItemHeight: 32,
   menuItemHeight: 32,
   newMenuItemHeight: 28, // I'm ok
-  newMenuIconSize: 20,
+  newMenuIconSize: 18,
   viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,

package/src/icons/ast/Equation.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Equation: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.667 2.306a.75.75 0 0 0-.701.483L6.323 15.005l-1.55-3.374a.75.75 0 0 0-.68-.437H1.943a.75.75 0 0 0 0 1.5h1.667l2.096 4.563a.75.75 0 0 0 1.383-.046l5.094-13.405h5.872a.75.75 0 0 0 0-1.5h-6.39Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15.5 11.272c.62-.653 1.415-1.189 2.463-1.189a.75.75 0 1 1 0 1.5c-.479 0-.907.229-1.375.722-.402.422-.768.968-1.174 1.593.269.663.515 1.227.824 1.648.326.444.659.648 1.114.648a.75.75 0 0 1 0 1.5c-1.072 0-1.809-.56-2.323-1.26a6.493 6.493 0 0 1-.61-1.057 8.202 8.202 0 0 1-1.017 1.164c-.72.663-1.618 1.153-2.772 1.153a.75.75 0 1 1 0-1.5c.68 0 1.232-.273 1.754-.755.482-.445.906-1.037 1.347-1.705-.246-.6-.479-1.112-.765-1.502-.325-.444-.658-.649-1.114-.649a.75.75 0 0 1 0-1.5c1.072 0 1.81.56 2.324 1.262.202.275.379.585.537.905.248-.349.509-.685.787-.978Z"},"children":[]}],"metadata":""}]},"name":"equation"};
+
+export default Equation;

package/src/icons/ast/LockOutline.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LockOutline: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.912 2.44C7.594 1.488 8.647 1 10 1s2.406.487 3.088 1.44c.647.908.882 2.135.882 3.477v.913h.28c.707 0 1.408.2 1.939.692.54.5.811 1.216.811 2.058v5.67c0 .87-.54 1.56-1.041 1.986-.263.223-.55.406-.827.536-.26.122-.575.228-.882.228h-8.5C4.107 18 3 16.744 3 15.25V9.58c0-.842.273-1.559.813-2.059.53-.49 1.23-.691 1.937-.691h.28v-.913c0-1.342.235-2.569.882-3.476Zm.618 4.39h4.94v-.913c0-1.21-.22-2.067-.603-2.605-.35-.49-.908-.812-1.867-.812-.96 0-1.516.321-1.867.812-.384.538-.603 1.395-.603 2.605v.913ZM4.832 8.623c-.175.161-.332.445-.332.957v5.67c0 .715.484 1.25 1.25 1.25h8.502a.979.979 0 0 0 .242-.086c.155-.072.33-.183.493-.321.35-.298.513-.608.513-.843V9.58c0-.513-.157-.797-.33-.958-.184-.17-.484-.292-.92-.292h-8.5c-.434 0-.734.122-.918.293ZM10 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"lock-outline"};
+
+export default LockOutline;

package/src/icons/ast/ShowAuthor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ShowAuthor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10 9C8.07 9 6.5 7.43 6.5 5.5S8.07 2 10 2s3.5 1.57 3.5 3.5S11.93 9 10 9Zm0-5.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M8.78 17.95c-1.3-.1-2.57-.34-3.77-.72-.62-.2-1.13-.65-1.4-1.24-.26-.58-.27-1.25 0-1.83A7.002 7.002 0 0 1 10 9.99l.243.02c.437.035.67.053.9.095.262.048.52.126 1.074.294l.533.161c.38.16.56.6.39.98-.16.38-.6.56-.98.39-.7-.3-1.43-.45-2.16-.45-2.17 0-4.14 1.29-5.02 3.27-.09.19-.08.41 0 .6.09.2.27.36.48.43 1.09.34 2.24.56 3.43.65.41.03.72.39.69.8-.03.39-.41.72-.8.72Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.72 18.28c.14.14.33.22.53.22v-.01c.08 0 .16-.01.24-.04l2.46-.85c.25-.09.48-.23.67-.42l3.3-3.3c.78-.78.77-2.03 0-2.81-.78-.77-2.04-.77-2.81 0l-3.3 3.3c-.19.19-.34.42-.42.67l-.85 2.46c-.09.28-.02.58.18.78Zm5.45-6.14c.1-.09.22-.14.34-.14l-.01-.01c.13 0 .25.05.35.15.19.19.19.49 0 .68l-3.3 3.3a.18.18 0 0 1-.09.06l-1 .35.35-1c.01-.03.03-.06.06-.09l3.3-3.3Z"},"children":[]}],"metadata":""}]},"name":"show-author"};
+
+export default ShowAuthor;

package/src/icons/ast/UnlockFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnlockFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M14 1c-1.363 0-2.425.5-3.11 1.483-.654.934-.89 2.196-.89 3.577v.77H4.75c-.706 0-1.406.2-1.937.691C2.273 8.021 2 8.737 2 9.58v5.67C2 16.744 3.107 18 4.75 18h8.5c.307 0 .622-.106.882-.228.277-.13.564-.313.827-.536.5-.426 1.041-1.116 1.041-1.986V9.58c0-.842-.271-1.558-.811-2.058-.53-.492-1.232-.692-1.939-.692h-1.739v-.77c0-1.245.221-2.127.608-2.68.354-.506.914-.836 1.881-.836s1.527.33 1.88.836c.38.543.524 1.208.578 1.874.033.412.363.746.776.746.42 0 .764-.344.732-.764-.073-.974-.29-1.943-.855-2.753C16.424 1.5 15.363 1 14 1ZM9.75 11.25a.75.75 0 0 0-1.5 0v2.25a.75.75 0 0 0 1.5 0v-2.25Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"unlock-filled"};
+
+export default UnlockFilled;

package/src/icons/ast/UnlockOutline.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnlockOutline: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M14 1c-1.363 0-2.425.5-3.11 1.483-.654.934-.89 2.196-.89 3.577v.77H4.75c-.706 0-1.406.2-1.937.691C2.273 8.021 2 8.737 2 9.58v5.67C2 16.744 3.107 18 4.75 18h8.5c.307 0 .622-.106.882-.228.277-.13.564-.313.827-.536.5-.426 1.041-1.116 1.041-1.986V9.58c0-.842-.271-1.558-.811-2.058-.53-.492-1.232-.692-1.939-.692h-1.739v-.77c0-1.245.221-2.127.608-2.68.354-.506.914-.836 1.881-.836s1.527.33 1.88.836c.391.559.532 1.246.582 1.932.03.413.36.748.775.748.42 0 .763-.343.734-.761-.07-.996-.282-1.989-.86-2.816C16.424 1.5 15.363 1 14 1ZM3.832 8.623c-.175.161-.332.445-.332.957v5.67c0 .715.484 1.25 1.25 1.25h8.502c.017-.004.099-.018.242-.086.155-.072.33-.183.493-.321.35-.298.513-.608.513-.843V9.58c0-.513-.157-.797-.33-.958-.184-.17-.484-.292-.92-.292h-8.5c-.434 0-.734.122-.918.293ZM9.75 11.25a.75.75 0 0 0-1.5 0v2.25a.75.75 0 0 0 1.5 0v-2.25Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"unlock-outline"};
+
+export default UnlockOutline;

package/src/icons/ast/index.tsx

@@ -83,6 +83,7 @@ export { default as EditValue } from './EditValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
 export { default as EntityMerge } from './EntityMerge';
+export { default as Equation } from './Equation';
 export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
@@ -143,6 +144,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
+export { default as LockOutline } from './LockOutline';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
@@ -249,6 +251,7 @@ export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
 export { default as ShieldKeyhole } from './ShieldKeyhole';
+export { default as ShowAuthor } from './ShowAuthor';
 export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
 export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
@@ -304,6 +307,8 @@ export { default as UnitsProgressBar } from './UnitsProgressBar';
 export { default as UnitsRichText } from './UnitsRichText';
 export { default as UnitsSnippet } from './UnitsSnippet';
 export { default as Unlink } from './Unlink';
+export { default as UnlockFilled } from './UnlockFilled';
+export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserRole } from './UserRole';

package/src/icons/react/Equation.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import EquationSvg from '../ast/Equation';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Equation = forwardRef<SVGSVGElement, IconBaseProps>(function Equation(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={EquationSvg} />});
+
+export default Equation;

package/src/icons/react/LockOutline.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LockOutlineSvg from '../ast/LockOutline';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LockOutline = forwardRef<SVGSVGElement, IconBaseProps>(function LockOutline(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LockOutlineSvg} />});
+
+export default LockOutline;

package/src/icons/react/ShowAuthor.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import ShowAuthorSvg from '../ast/ShowAuthor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ShowAuthor = forwardRef<SVGSVGElement, IconBaseProps>(function ShowAuthor(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ShowAuthorSvg} />});
+
+export default ShowAuthor;

package/src/icons/react/UnlockFilled.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import UnlockFilledSvg from '../ast/UnlockFilled';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnlockFilled = forwardRef<SVGSVGElement, IconBaseProps>(function UnlockFilled(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={UnlockFilledSvg} />});
+
+export default UnlockFilled;

package/src/icons/react/UnlockOutline.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import UnlockOutlineSvg from '../ast/UnlockOutline';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnlockOutline = forwardRef<SVGSVGElement, IconBaseProps>(function UnlockOutline(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={UnlockOutlineSvg} />});
+
+export default UnlockOutline;

package/src/icons/react/index.tsx

@@ -83,6 +83,7 @@ export { default as EditValue } from './EditValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
 export { default as EntityMerge } from './EntityMerge';
+export { default as Equation } from './Equation';
 export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
@@ -143,6 +144,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
+export { default as LockOutline } from './LockOutline';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
@@ -249,6 +251,7 @@ export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
 export { default as ShieldKeyhole } from './ShieldKeyhole';
+export { default as ShowAuthor } from './ShowAuthor';
 export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
 export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
@@ -304,6 +307,8 @@ export { default as UnitsProgressBar } from './UnitsProgressBar';
 export { default as UnitsRichText } from './UnitsRichText';
 export { default as UnitsSnippet } from './UnitsSnippet';
 export { default as Unlink } from './Unlink';
+export { default as UnlockFilled } from './UnlockFilled';
+export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserRole } from './UserRole';

package/src/toggle.tsx

@@ -168,7 +168,14 @@ export const Toggle: FC<ToggleProps> = ({
           <Input
             outlineColor={outlineColor}
             onChange={onChange}
-            className={className}
+            className={cx(
+              className,
+              disabled
+                ? css`
+                    cursor: default;
+                  `
+                : null
+            )}
             type="checkbox"
             disabled={disabled}
             checked={value}

package/src/tooltip.tsx

@@ -31,31 +31,29 @@ export const tooltipStyle = css`
   padding: ${space.s6}px ${space.s8}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.actionMenuShadow};
-
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes zoomIn {
-      from {
-        opacity: 0;
-        transform: scale(0.8);
-      }
-
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
+  @keyframes zoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
     }
 
-    @keyframes zoomOut {
-      from {
-        transform: scale(1);
-      }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 
-      to {
-        opacity: 0;
-        transform: scale(0.8);
-      }
+  @keyframes zoomOut {
+    from {
+      transform: scale(1);
     }
 
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
     will-change: transform, opacity;
     transform-origin: var(--radix-tooltip-content-transform-origin);
     animation-duration: 0.1s;