@fibery/ui-kit 1.31.0 → 1.32.0

package/src/icons/ast/SmartFolder.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.134 3.38a1.846 1.846 0 0 1 1.943.368l4.476 4.218.012.013c.565.585.935 1.262.935 2.021 0 .76-.37 1.436-.935 2.021l-.012.013-4.476 4.218a1.846 1.846 0 0 1-1.943.37C6.527 16.384 6 15.804 6 15V5c0-.805.527-1.385 1.134-1.62Zm.544 1.397c-.133.051-.178.139-.178.223v10c0 .084.045.172.178.223a.346.346 0 0 0 .371-.064l4.449-4.192c.392-.41.502-.729.502-.967s-.11-.557-.502-.967L8.049 4.841a.347.347 0 0 0-.371-.064Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
+const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.586 9.219a.75.75 0 0 0-1.172-.937l-2 2.5A.75.75 0 0 0 8 12h2l-.586 1.282a.75.75 0 0 0 1.172.937l2-2.5A.75.75 0 0 0 12 10.5h-2l.586-1.281Z","fill":"#51616C","fillOpacity":0.9},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.708 3.791a2.417 2.417 0 0 1 1.709-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Zm1.709.792A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.151c.008-.002.032-.005.072-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
 
 export default SmartFolder;

package/src/icons/ast/index.tsx

@@ -93,6 +93,7 @@ export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
 export { default as FocusModeOff } from './FocusModeOff';
 export { default as FocusMode } from './FocusMode';
+export { default as Folder } from './Folder';
 export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';

package/src/icons/react/Folder.tsx

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

package/src/icons/react/index.tsx

@@ -93,6 +93,7 @@ export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
 export { default as FocusModeOff } from './FocusModeOff';
 export { default as FocusMode } from './FocusMode';
+export { default as Folder } from './Folder';
 export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';

package/src/integration-compact-info-button.tsx

@@ -1,10 +1,10 @@
 import {css, cx} from "@linaria/core";
-import {ButtonBase} from "./button/button-base";
 import {Tooltip} from "./tooltip";
 import {space, textStyles, themeVars} from "./design-system";
 import {useTheme} from "./theme-provider";
 import WarningIcon from "./icons/react/WarningTriangle";
 import {Spinner} from "./loaders";
+import {BaseButton} from "./button/base-button";
 
 const buttonCss = css`
   ${textStyles.heading5}
@@ -12,6 +12,7 @@ const buttonCss = css`
   align-items: center;
   padding: ${space.s2}px ${space.s8}px ${space.s2}px ${space.s4}px;
   gap: ${space.s4}px;
+  border-radius: 6px;
 `;
 
 const loadingCss = css`
@@ -39,10 +40,10 @@ export const IntegrationCompactInfoButton: React.FC<{
   const className = cx(buttonCss, loading && loadingCss);
 
   const button = onClick ? (
-    <ButtonBase dangerous={Boolean(error)} borderless className={className} onClick={onClick}>
+    <BaseButton color={error ? "error" : "neutral"} variant="ghost" className={className} onClick={onClick}>
       {iconNode}
       {name}
-    </ButtonBase>
+    </BaseButton>
   ) : (
     <div className={className}>
       {iconNode}

package/src/select/custom-select-partials/clear-indicator.tsx

@@ -1,5 +1,5 @@
 import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
-import {IconButton} from "../../button-v2/icon-button";
+import {IconButton} from "../../button/icon-button";
 import RemoveIcon from "../../icons/react/Remove";
 
 export function ClearIndicator<

package/src/toast/primitives.tsx

@@ -2,7 +2,7 @@ import {preventDefault} from "@fibery/react/src/prevent-default";
 import {css, cx} from "@linaria/core";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {IconButton} from "../button-v2/icon-button";
+import {IconButton} from "../button/icon-button";
 import {border, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 

package/src/toast/toast-action.tsx

@@ -1,9 +1,7 @@
+import {css} from "@linaria/core";
 import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {ButtonProps} from "../button/button";
-import {Button} from "../button";
-import {useTheme} from "../theme-provider";
-import {css} from "@linaria/core";
+import {ButtonProps, Button} from "../button/button";
 import {space} from "../design-system";
 
 const toastActionCss = css`
@@ -16,10 +14,9 @@ export const ToastAction = forwardRef<
   ElementRef<typeof RadixToastAction>,
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
-  const theme = useTheme();
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
-      <Button color={theme.textColor} {...props}>
+      <Button variant="outline" color="neutral" {...props}>
         {children}
       </Button>
     </RadixToastAction>

package/src/toggle.tsx

@@ -4,6 +4,7 @@ import chroma from "chroma-js";
 import {ComponentProps, FC, ReactNode} from "react";
 import {layout, space, textStyles, transition} from "./design-system";
 import _ from "lodash";
+import SpinnerIcon from "./icons/react/Spinner";
 
 const Input = styled.input<{containerSize: number; containerWidth: number; outlineColor: string}>`
   position: absolute;
@@ -85,12 +86,14 @@ interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
   backgroundColor: string;
   labelPosition?: "first" | "last";
   wrapperClassName?: string;
+  pending?: boolean;
 }
 
 export const Toggle: FC<ToggleProps> = ({
   value,
   label,
   labelTitle,
+  pending,
   disabled = false,
   backgroundColor,
   size = 16,
@@ -130,25 +133,28 @@ export const Toggle: FC<ToggleProps> = ({
       )}
       title={labelTitle}
     >
-      <CircleContainer
-        containerSize={size}
-        containerWidth={width}
-        backgroundColor={backgroundColor}
-        disabled={disabled}
-      >
-        <Circle containerSize={size} style={circleTransformStyle} />
-        <Input
+      {pending && <SpinnerIcon />}
+      {!pending && (
+        <CircleContainer
           containerSize={size}
           containerWidth={width}
-          outlineColor={outlineColor}
-          onChange={onChange}
-          className={className}
-          type="checkbox"
+          backgroundColor={backgroundColor}
           disabled={disabled}
-          checked={value}
-          {...rest}
-        />
-      </CircleContainer>
+        >
+          <Circle containerSize={size} style={circleTransformStyle} />
+          <Input
+            containerSize={size}
+            containerWidth={width}
+            outlineColor={outlineColor}
+            onChange={onChange}
+            className={className}
+            type="checkbox"
+            disabled={disabled}
+            checked={value}
+            {...rest}
+          />
+        </CircleContainer>
+      )}
 
       {label && (
         <Label disabled={disabled && labelMutedWhenDisabled} labelPosition={labelPosition}>

package/src/back-button.tsx

@@ -1,3 +0,0 @@
-import {BackButton} from "./button/back-button";
-
-export {BackButton};

package/src/button/button-base.tsx

@@ -1,180 +0,0 @@
-import {styled} from "@linaria/react";
-import {ComponentPropsWithoutRef, forwardRef} from "react";
-import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, ThemeColors} from "../design-system";
-import {useTheme} from "../theme-provider";
-
-export const getMainColor = ({color, dangerous, theme}: {color?: string; dangerous?: boolean; theme: ThemeColors}) => {
-  if (color) {
-    return color;
-  }
-  if (dangerous) {
-    return theme.danger;
-  }
-  if (!theme) {
-    return colors.primary;
-  }
-  return theme.buttonColor;
-};
-
-const getBorderColor = ({
-  mainColor,
-  borderless,
-  primary,
-}: {
-  mainColor: string;
-  borderless?: boolean;
-  primary?: boolean;
-}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return mainColor;
-  }
-  return getOpacities(mainColor).opacity30;
-};
-
-const getHoverBorderColor = ({
-  mainColor,
-  borderless,
-  primary,
-  hoverBgColor,
-}: {
-  mainColor: string;
-  borderless?: boolean;
-  primary?: boolean;
-  hoverBgColor: string;
-}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return hoverBgColor;
-  }
-  return mainColor;
-};
-
-export const getTextColor = ({
-  mainColor,
-  primary,
-  theme,
-}: {
-  mainColor: string;
-  primary?: boolean;
-  theme: ThemeColors;
-}) => {
-  if (primary) {
-    return theme.buttonPrimaryTextColor;
-  }
-  return mainColor;
-};
-
-const getBgColor = ({mainColor, primary}: {mainColor: string; primary?: boolean}) => {
-  if (primary) {
-    return mainColor;
-  }
-  return colors.transparent;
-};
-
-const getHoverBgColor = ({
-  mainColor,
-  borderless,
-  primary,
-}: {
-  mainColor: string;
-  primary?: boolean;
-  borderless?: boolean;
-}) => {
-  if (primary) {
-    return getDarkenColor(mainColor);
-  }
-  if (borderless) {
-    return getOpacities(mainColor).opacity15;
-  }
-  return colors.transparent;
-};
-
-export const buttonBorderWidth = 1;
-
-type StyledProps = {
-  textColor: string;
-  bgColor: string;
-  borderColor: string;
-  hoverBgColor: string;
-  hoverBorderColor: string;
-  borderWidth: number;
-};
-
-export const StyledButtonBase = styled.button<StyledProps>`
-  display: block;
-  box-sizing: border-box;
-  font-weight: ${fontWeight.medium};
-  margin: 0;
-  border-radius: ${border.radius6}px;
-  border: 0;
-  border-width: ${({borderWidth}) => `${borderWidth}px`};
-  border-style: solid;
-  padding: 0;
-  cursor: pointer;
-  transition: all 150ms ease-out;
-  color: ${({textColor}) => textColor};
-  background-color: ${({bgColor}) => bgColor};
-  border-color: ${({borderColor}) => borderColor};
-
-  &:disabled {
-    cursor: default;
-    opacity: ${opacity.opacity40};
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    box-shadow: ${({borderColor}) => `0 0 0 3px ${getOpacities(borderColor).opacity25}`};
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-  }
-
-  &:hover:not(:disabled) {
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-  }
-`;
-
-export type ButtonBaseProps = {
-  color?: string;
-  primary?: boolean;
-  dangerous?: boolean;
-  borderless?: boolean;
-} & ComponentPropsWithoutRef<"button">;
-export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(function ButtonBase(
-  {primary, color, borderless, dangerous, className, type = "button", ...buttonProps},
-  ref
-) {
-  const theme = useTheme();
-
-  const mainColor = getMainColor({color, dangerous, theme});
-  const textColor = getTextColor({mainColor, primary, theme});
-  const bgColor = getBgColor({mainColor, primary});
-  const hoverBgColor = getHoverBgColor({mainColor, borderless, primary});
-  const borderColor = getBorderColor({mainColor, borderless, primary});
-  const hoverBorderColor = getHoverBorderColor({
-    mainColor,
-    borderless,
-    primary,
-    hoverBgColor,
-  });
-  const borderWidth = borderless ? 0 : buttonBorderWidth;
-
-  const styledProps: StyledProps = {
-    bgColor,
-    borderColor,
-    hoverBgColor,
-    hoverBorderColor,
-    textColor,
-    borderWidth,
-  };
-
-  return <StyledButtonBase ref={ref} type={type} className={className} {...styledProps} {...buttonProps} />;
-});

package/src/button.tsx

@@ -1,3 +0,0 @@
-import {Button} from "./button/button";
-
-export {Button};

package/src/icon-button.tsx

@@ -1,3 +0,0 @@
-import {IconButton} from "./button-v2/icon-button";
-
-export {IconButton};